container past zich niet aan....

Status
Niet open voor verdere reacties.

wilmatje2

Nieuwe gebruiker
Lid geworden
26 sep 2012
Berichten
1
Ik ben bezig met een website voor mijn dochter haar voltige vereniging. Hij staat al online.
Het punt is dat, mijn div container zich niet aanpast aan de hoeveelheid tekst.
Ik kan nu nooit de pagina langer maken en meer erin plaatsen.

Is er een mogelijkheid dat ik dit op kan lossen.??

Dit is de site... http://www.hipp-oss.com/
Kan iemand mij helpen..???
 
Hoi wilmatje2,
Ja, die mogelijkheid is er! :)

Probleem is hier dat alle <div>'s een absolute positie hebben, en er niets flexibel is. Bovendien is de <div id="container"> geen echte container (waar de inhoud-tekst in zit), maar een los kader dat onafhankelijk van de inhoud op de pagina staat. Verandert de hoeveelheid inhoud, dan kan het kader niet meerekken.

De oplossing is: de <div> van de inhoud-tekst in de container zetten, maar dan kom je te zitten met alle andere <div>'s die ook een absolute positie hebben.
Makkelijker is om de <div id="apDiv6">, waar de tekst in zit, de eigenschappen van de rand en de background-kleur van de container te geven.
  • Dan zit de begin-hoogte van de tekst niet goed (veel te hoog), maar dat is op te lossen door er een padding-top aan te geven: een opvulling die verder leeg is.
  • Ook o.a. de z-index moet aangepast worden, zodat alle andere div's er in lagen bovenop komen te staan.
  • Voor korte teksten zou dan het kader niet groot genoeg zijn om de twee blokjes aan de rechterkant er ook in te hebben; maar dat kan opgelost worden door de div een minimum-hoogte te geven waar ze wel in passen. Is er meer tekst nodig, dan past de hoogte zich automatisch aan.

Probeer dit maar eens als css in de <head>:
Code:
html {
    height: 100%
    padding-bottom: 1px;
}
body {
    background-image: url("images/achtergrond.jpg");
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 1100px;
}
#apDiv1 {
    background-color: #000000;
    border: 3px outset #CABC28;
    height: 161px;
    left: 6px;
    padding-top: 10px;
    position: absolute;
    top: 70px;
    width: 1082px;
    z-index: 1;
}
#apDiv2 {
    color: #CBBB28;
    height: 38px;
    left: 0;
    position: absolute;
    top: 280px;
    width: 820px;
    z-index: 2;
}
#apDiv3 {
    border: medium outset #CCBA28;
    height: 203px;
    left: 81px;
    position: absolute;
    top: 340px;
    width: 650px;
    z-index: 3;
}
#apDiv4 {
    background-color: #000000;
    border: medium outset #CBBB28;
    color: #BBBB28;
    height: 314px;
    left: 818px;
    padding: 0 15px;
    position: absolute;
    text-decoration: underline;
    top: 282px;
    width: 195px;
    z-index: 4;
}
#apDiv5 {
    background-color: #000000;
    border: medium outset #CBBB28;
    color: #FFFFFF;
    height: 308px;
    left: 818px;
    padding: 0 15px;
    position: absolute;
    text-decoration: blink;
    top: 626px;
    width: 195px;
    z-index: 5;
}
#apDiv6 {
    background: none repeat scroll 0 0 #663399;
    border: thick ridge #CBBB28;
    color: #D7DB28;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: small;
    font-style: italic;
    left: 0;
    min-height: 400px;
    padding: 520px 360px 20px 80px;
    position: absolute;
    top: 65px;
    width: 650px;
    z-index: 0;
}
#container {
    display: none;
    }
.stijl1 {
	font-size: x-large;
	color: #CCB91A;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
}
.stijl2 {
	font-size: medium;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	color: #CCBB27;
}
.stijl4 {
	font-size: large;
	color: #E7DE04;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
}
.stijl5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-large;
}
.stijl6 {
	font-size: medium;
	font-style: italic;
}
.stijl11 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: x-large;
}
a:link {
	color: #E7DE04;
}
a:visited {
	color: #E7DE04;
}
a:hover {
	color: #999999;
}
a:active {
	color: #E7DE04;
}
  • Hierin is de <div id="container"> helemaal uitgeschakeld, zodat deze geen kwaad meer kan.
  • Vervolgens kan je op je gemak op alle pagina's zelf die <div id="container"> met al z'n <p>'s er gewoon uit halen, dat staat wel zo netjes.
  • Ook wat andere dingetjes heb ik aangepast, zodat alles mooi uitgelijnd onder elkaar komt te staan.

Succes!
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan