Evo ja pokušavam naučit CSS i HTML, dolje je moja prva stranica tj. početak prve ali naišo sam na problem naime kad dodam zadnji div (#conatact-address-wrapper) on mi se nece pozicionira desno do predzadnjeg lijevog (#nivoslider_wrapper) nego ispod njega ako upotrijebim float: left onda se sloze kako treba ali wrapper oko ta dva se ponaša koda nevidi #nivoslider_wrapper i produžuje se samo na veličinu #conatact-address-wrapper. Sad mene zanima zašto i kako to popravit pokušao sam google ali pošto neznam u čemu je problem imao sam malo srece u nalaženju rješenja
Moje znanje html i css je staro manje od 4 dana tako da je svaka kritika dobro došla na bilo koji dio koda dokle god je konstruktivna tj. prati je noob frendly objašnjenje kako i zašto.
THX
[code]
/* CSS Document */
body {
background-color:#E8E8E8;
font-family:Verdana, Geneva, sans-serif;
background-attachment:fixed;
background-position:center top;
margin:auto;
}
#body_home {
background-image:url(../images/images/backround_img.jpg);
background-repeat:no-repeat;
}
#wrapper_header
{
width:1024px;
margin:0 auto;
}
/*Comunity and language icons - above header*/
#facebook-icon {
background-image:url(../images/images/facebook.jpg);
width:26px;
height:26px;
background-position:left;
display:inline-block;
margin:0;
top:3px;
left:30px;
position:relative;
}
#facebook-icon:hover {
background-position:right;
}
#youtube-icon {
background-image:url(../images/images/youtube-icon.jpg);
width:26px;
height:26px;
background-position:left;
display:inline-block;
margin:0;
top:3px;
left:40px;
position:relative;
}
#youtube-icon:hover {
background-position:right;
}
#croflag-icon {
background-image:url(../images/images/cro-flag.jpg);
width:42px;
height:26px;
background-position:left;
display:inline-block;
margin:0;
top:2px;
left:750px;
position:relative;
border:1px #CCC solid;
}
#croflag-icon:hover {
background-position:right;
}
#britflag-icon {
background-image:url(../images/images/british-flag.jpg);
width:42px;
height:26px;
background-position:left;
display:inline-block;
margin:0;
top:2px;
left:755px;
position:relative;
border:1px #CCC solid;
}
#britflag-icon:hover {
background-position:right;
}
#germanflag-icon {
background-image:url(../images/images/german-flag.jpg);
width:42px;
height:26px;
background-position:left;
display:inline-block;
margin:0;
top:2px;
left:760px;
position:relative;
border:1px #CCC solid;
}
#germanflag-icon:hover {
background-position:right;
}
#cezhflag-icon {
background-image:url(../images/images/cezh-flag.jpg);
width:42px;
height:26px;
background-position:left;
display:inline-block;
margin:0;
top:2px;
left:765px;
position:relative;
border:1px #CCC solid;
}
#cezhflag-icon:hover {
background-position:right;
}
/* Meni */
.nav_menu {
font-size:14px;
font-weight:bold;
list-style:none;
padding:0;
margin:0 auto;
background-color: rgba(255,255,255,0.3);
text-transform:uppercase;
border-bottom:2px #333 solid;
border-top:1px #999 solid;
}
.nav_menu li {
display:inline-block;
zoom:1;
*display:inline;
padding:0px;
margin:0px;
}
.nav_menu li a {
color:#000;
text-decoration:none;
width:110px;
display:block;
padding:0px;
margin:0px;
line-height:30px;
}
.nav_menu li.selected a {
color:#fff;
background-color: rgba(102,102,102,0.7);
}
.nav_menu li a:hover {
color:#FFF;
background-color:#333;
}
.nav_menu li a:active {
color:#9CF;
background-color:#333;
}
/*BELOW HEADER*/
#page_wrapper
{
width:1024px;
border-top:5px #FFF solid;
background-color:#E8E8E8;
margin:auto;
clear:both;
border:1px #CCC solid;
overflow:hidden;
}
#conatact-address-wrapper {
width:230px;
height:210px;
border:3px #fff solid;
background-color:#CCC;
position:relative;
padding:0px;
margin:0px;
top:12px;
left:50px;
float:left;
}
/* NIVO SLIDER*/
#nivoslider_wrapper /*nivo slider wrapper*/
{
width:700px;
height:250px;
border:3px #fff solid;
position:relative;
top:10px;
left:10px;
padding:0px;
margin:0px;
float:left;
}
#slider
{
position: relative;
width:700px;
height:300px;
background:: url(../images/images/loading.gif) no-repeat 50% 50%;
}
#slider img
{
position: absolute;
top: 0px;
left: 0px;
display: none;
}
#slider a
{
border: 0;
display: block;
}
[/code]
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apartments Pranjict</title>
<link href="css/main_style.css" rel="stylesheet" type="text/css" />
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 30, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 1000, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
<style type="text/css">
#header_home_1 {
height:30px;
margin:0 auto;
background-image:url(images/images/header_home_1.png);
border-bottom:2px #FFF solid;
background-color: rgba(255,255,255,0.5);
}
#header_home_2 {
background-image:url(images/images/header_home_2.png);
height:200px;
margin:0 auto;
border-bottom:2px #FFF solid;
}
#header_home_3 {
height:34px;
margin:0 auto;
background-image:url(images/images/header_home_3.png);
background-color: rgba(255,255,255,0.5);
text-align:center;
}
</style>
</head>
<body id="body_home">
<div id="wrapper_header">
<div id="header_home_1">
<div id="facebook-icon"></div>
<div id="youtube-icon"></div>
<div id="croflag-icon"></div>
<div id="britflag-icon"></div>
<div id="germanflag-icon"></div>
<div id="cezhflag-icon"></div>
</div>
<div id="header_home_2"></div>
<div id="header_home_3">
<ul class="nav_menu">
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Sights</a></li>
<li><a href="#">Price List</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Contact As</a></li>
</ul>
</div>
</div>
<div id="page_wrapper">
<div id="nivoslider_wrapper">
<div id="slider">
<img src="images/images/header1.jpg" title="PLACEHOLDER1" />
<img src="images/images/header2.jpg" title="PLACEHOLDER2" />
<img src="images/images/header3.jpg" title="PLACEHOLDER3"/>
<img src="images/images/header4.jpg" title="PLACEHOLDER4"/>
<img src="images/images/header5.jpg" title="PLACEHOLDER5"/>
<img src="images/images/header6.jpg" title="PLACEHOLDER6"/>
<img src="images/images/header7.jpg" title="#htmlcaption"/>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>image</strong> <a href="#">tag</a>
</div>
</div>
<div id="conatact-address-wrapper">
<h3>
Contact Us
</h3>
<h6>
placeholder <br />
ploceholder <br />
placeholder <br />
placeholder <br />
placeholder <br />
placeholder
</h6>
</div>
</div>
</body>
</html>
[/code]
Postoje online servisi za "dijeljenje" koda, jer ovako je užasno nepregledno. Moj prijedlog ide k