Visina diva se ne povećava kako se povećava sadrzaj untar njega

Imam problem sa visinom diva “sadrzaj” koji je relativno pozicioniran. U njemu se nalaze dva diva koji su pozicionirani absolutno i u kojima se nalaze tekst i fotografije.
Problem je što se visina diva “sadrzaj” ne povećava kako se povećava sadrzaj untar njega.

CSS:

body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
margin: 0px;
padding: 0px;
background-position: center top;
background-color: #DAE3EA;
}
#container {
width: 975px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#lang {
width: 899px;
background-image: none;
background-repeat: repeat-x;
background-position: left;
background-color: #FFFFFF;
opacity:.7;
-ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;
filter:alpha(opacity=70);
margin-right: 38px;
margin-left: 38px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #93b1cc;
border-right-color: #93b1cc;
border-left-color: #93b1cc;
height: 30px;
}

.menuu ul{
margin: 0;
padding: 0;
padding-left: 10px; /offset of tabs relative to browser left edge/
font: bold 12px Verdana;
list-style-type: none;
}
.menuu {
height: 30px;
width: 899px;
background-image: url(images/bcg_lang.png);
background-repeat: repeat-x;
background-position: center top;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-color: #93b1cc;
border-right-color: #93b1cc;
border-left-color: #93b1cc;
z-index: 2000;
position: absolute;

}

.menuu li{
display: inline;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}

.menuu li a{
float: left;
display: block;
text-decoration: none;
margin: 0; /padding inside each tab/
border-right: 1px solid white; /right divider between tabs/
color: #2B394F; /background of tabs (default state)/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
padding-top: 7px;
padding-right: 8px;
padding-bottom: 7px;
padding-left: 25px;
}

.menuu li a:visited{
color: white;

}

.menuu li a:hover, .menuu li.selected a{
background-color: #FF0066;
}

#language {
width: 150px;
float: right;
margin-top: 5px;
padding: 0px;
}
.zast {
margin-right: 15px;
margin-left: 15px;
}
#sadrzaj {
background-color: #222c38;
position: relative;
margin-top: -50px;
width: 975px;
z-index: -1;
padding-bottom: 3px;
height: 600px;
}
#clearboth {
clear: both;
margin-top: 1px;
background-color: #222C38;
height: 10px;
}

#tekst {
background-color: #273343;
width: 899px;
margin-right: 38px;
margin-left: 38px;
background-image: url(images/tekst_bcg.gif);
background-repeat: repeat-x;
background-position: center top;
margin-top: 80px;
margin-bottom: 15px;
position: absolute;
}
#naslov {
width: 450px;
margin-left: 35px;
margin-top: 20px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
}
h2 {
font-family: “Times New Roman”, Times, serif;
font-size: 20px;
color: #BDCEDF;
font-weight: bold;
font-style: italic;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#clear {
clear: both;
height: 5px;
}
#tekst1 {
width: 450px;
float: left;
margin-top: 10px;
margin-left: 35px;
margin-right: 10px;
}
#fotogalerija {
float: right;
width: 359px;
margin-top: 10px;
margin-right: 10px;
margin-left: 35px;
background-image: none;
background-repeat: repeat-x;
}
.vise {
text-align: right;
margin-right: 30px;
font-weight: bold;
font-family: “Times New Roman”, Times, serif;
margin-top: 10px;
}

p {
font-family: “Times New Roman”, Times, serif;
color: #B0C5D9;
font-size: 16px;
text-align: justify;
margin: 0px;
padding: 0px;
}

#footer {
width: 899px;
margin-bottom: 0px;
background-color: #273343;
height: 30px;
clear: both;
margin-top: 5px;
}

#border {
border-top-width: 2px;
border-top-style: solid;
border-top-color: #885a3d;
height: 2px;
width: 851px;
margin-right: 62px;
margin-left: 62px;
margin-top: 50px;
padding: 0px;
position: absolute;
}

#header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
height: 94px;
width: 975px;
}
.mario {
font-family: moderna;
}
#fotogalerija_naslov {
float: right;
width: 359px;
margin-right: 10px;
margin-top: 20px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#sad_clear {
clear: both;
}

HTML KOD:

<div id="tekst">
  <div id="naslov">
          </div>
  
  <div id="fotogalerija_naslov">
          </div>
  
  <div id="clear"></div>
  
  
  <div id="tekst1">
    
  </div>
  
  
  
  <div id="fotogalerija"> 
            </div>
  
  
  <div id="clearboth"></div>
  
  <div id="footer"></div>
</div>
</div>

[color=green]Naslov “pozicioniranje” nema nikakve veze s problemom iznešenim u sadržaju.

Molim, naslove piši na način da prvo napišeš sadržaj, a potom iz sadržaja izvadiš naslov teme, kako sam ti pokazao u ovom primjeru.[/color]

[quote=“tsereg”][color=green]Naslov “pozicioniranje” nema nikakve veze s problemom iznešenim u sadržaju.

Molim, naslove piši na način da prvo napišeš sadržaj, a potom iz sadržaja izvadiš naslov teme, kako sam ti pokazao u ovom primjeru.[/color][/quote]

U redu. Ispričavam se i molim da mi netko pomogne u rješavanju ovog problema.

Za pocetak popravi ovo (i prodji validaciju, bez obzira sta neki tvrdili da je nepotrebna).
A kasnije mozes malo bolje objasniti u cemu je problem, kako ga, i u kojem browseru, reproducirati (sastavis neki HTML file ili tako nesto).

vrlo jednostavno.

  1. #sadrzaj ti ima definiranu visinu 600px;

[HTML]#sadrzaj {
background-color: #222c38;
position: relative;
margin-top: -50px;
width: 975px;
z-index: -1;
padding-bottom: 3px;
height: 600px;
}[/HTML]

to makni i sve ok

  1. neki elementi nisu zatvoreni pa provuci kod kroz validator. tada ce ti i clearboth div povući sadržaj.

Hvala puno! Riješila sam problem!


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja