Div Height=auto werkt niet

Status
Niet open voor verdere reacties.
S

Sumpie

Gebruiker
Lid geworden
16 mrt 2010
Berichten
65
Ok het volgende probleem heb ik


Ik heb dus bv de div content

div.content{
Heigh:auto;
Background-image: Url (images/content.png);
Width:970px;
}

Etc. anyway
deze div content is eigenlijk dus de achtergrond van mijn pagina

Maar als ik een div genaamd text

div.text{
margin-left:20px;
color:black;
}
tussen de content div zet

<div="content">
<div="text">dwwwwwwwwwwsawdhkjhawkdkawjdawkjhdawkjda
</div>
</div>

Dan past de content div zich niet aan de hoeveelheid text die in de div van text staat.

Oftewel de grootte blijft 0

Hoe kan ik ervoor zorgen dat de content div zich aanpast aan het aantal text dat ik in de text div zet?
 
Sumpie zei:
<div="content">
<div="text">dwwwwwwwwwwsawdhkjhawkdkawjdawkjhdawkjda
</div>
</div>
Klik om te vergroten...
Is dan ook fout, je kunt een div een id meegeven door <div id="content"></div> en dat door #content aanroepen in de CSS of, een class door <div class="content"></div> en dat door .content aanroepen. Van een id mag er maar één element per pagina bestaan, van een clas zoveel je wilt.

Overigens hoort normale tekst tussen <p></p> te staan, door hoef en hoor je geen zelf gedefinieerde divs voor te gebruiken.

EDIT: oh ja, alle tekst in de CSS hoort in kleine letters, Height is dus strikt genomen fout, dat moet height zijn.
 
Laatst bewerkt:
Bedankt voor feedback maar die code die ik als voorbeeld gaf had ik snel in elkaar gezet...dus zal niks van kloppen wss.(was meer bedoeld als vraag voor oplossing hoe ik text op goede plaats kan zetten ipv code)


Wacht dit is de juiste code:
{ padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(http://www.creastars.nl/images/bg.png)
}
#wrapper {
margin: 0 auto;
width: 819px;
}
#Logo {
align:center;
width: 342px;
margin-left: auto;
margin-right: auto;
height: 80px;
background-image: url(http://www.creastars.nl/images/logo.png)
}

#header {
width: 819px;
float: left;
height: 20px;
margin: 0px 0px 0px 0px;
background-image: url(http://www.creastars.nl/images/Top.png)
}
#content {
float:left;
margin: 0px 0px 0px 0px;
height: 500px;
width: 819px;
background-image: url(http://www.creastars.nl/images/Body.png)
}
#text {
color: FFF;
width: auto;
height: 20px;
margin-left:40px;
margin-right: 40px;
}

#footer {
float:left;
width: 819px;
height:66px;
background-image: url(http://www.creastars.nl/images/Bottom.png);
margin: 0px 0px 10px 0px;
}


En html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Creastars.nl</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>

<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Logo -->

<div id="Logo">



</div>
<!-- End Logo -->

<!-- Begin Header -->
<div id="header">



</div>
<!-- End Header -->


<!-- Begin Content Column -->

<div id="content">

<div id="text">
Welkom bij Creastars.nl, Uw adres voor al uw grafische wensen.

Creastars.nl is een bedrijf dat verschillende grafische producten ontwerpt, produceerd en tijdig levert.

U kunt voor alles bij ons terecht bedrukking van: kleding, drukwerk en promotie materialen en ontwerp van: huistijl, posters en canvas muur decoratie. Dit alles maken wij in eigen beheer. maar ook kunnen wij voor bijvoorbeeld uw autobelettering zorgen, of dat uw advertentie in de door u gewenste krant komt.

Met Creastars.nl kunt u alle mogelijke kanten op. vraag nu uw offerte aan voor het product wat u wil hebben.
</div>

</div>
<!-- End Content Column -->


<!-- Begin Footer -->
<div id="footer">



</div>

<!-- End Footer -->

</div>
<!-- End Wrapper -->

</body>
</html>

Website is: http://www.crea stars.nl
(graag niet aan elkaar houden)
En zoals je kan zien is hij nu goed omdat ik nu de content een height heb gegeven. Maar als ik hem op auto zet dan zie je dat de text op de plaats blijft maar de afbeelding niet uitrekt zoals nu.
 
Sumpie zei:
Bedankt voor feedback maar die code die ik als voorbeeld gaf had ik snel in elkaar gezet...dus zal niks van kloppen wss.(was meer bedoeld als vraag voor oplossing hoe ik text op goede plaats kan zetten ipv code)
Klik om te vergroten...
Tsja, dat ik ik niet ruiken hè? Zonder de volledige originele code is het moeilijk zien wat er mis is.

Sumpie zei:
Website is: http://www.crea stars.nl
(graag niet aan elkaar houden)
En zoals je kan zien is hij nu goed omdat ik nu de content een height heb gegeven. Maar als ik hem op auto zet dan zie je dat de text op de plaats blijft maar de afbeelding niet uitrekt zoals nu.
Klik om te vergroten...
Kijk, daar hebben we wat aan. Als je de height van het #text element weghaald (staat nu op 20px) dan lijkt hij goed te werken.
Overigens geldt wat ik zei over tekst in <p> nog steeds, die heb je nu alleen in een div staan.
HTML: 
<div id="content">

<div id="text">
Welkom bij Creastars.nl, Uw adres voor al uw grafische wensen.

Creastars.nl is een bedrijf dat verschillende grafische producten ontwerpt, produceerd en tijdig levert.

U kunt voor alles bij ons terecht bedrukking van: kleding, drukwerk en promotie materialen en ontwerp van: huistijl, posters en canvas muur decoratie. Dit alles maken wij in eigen beheer. maar ook kunnen wij voor bijvoorbeeld uw autobelettering zorgen, of dat uw advertentie in de door u gewenste krant komt.

Met Creastars.nl kunt u alle mogelijke kanten op. vraag nu uw offerte aan voor het product wat u wil hebben.
</div>
</div>
Hoort dus eigenlijk
HTML: 
<div id="content">

<p>
Welkom bij Creastars.nl, Uw adres voor al uw grafische wensen.

Creastars.nl is een bedrijf dat verschillende grafische producten ontwerpt, produceerd en tijdig levert.

U kunt voor alles bij ons terecht bedrukking van: kleding, drukwerk en promotie materialen en ontwerp van: huistijl, posters en canvas muur decoratie. Dit alles maken wij in eigen beheer. maar ook kunnen wij voor bijvoorbeeld uw autobelettering zorgen, of dat uw advertentie in de door u gewenste krant komt.

Met Creastars.nl kunt u alle mogelijke kanten op. vraag nu uw offerte aan voor het product wat u wil hebben.
</p>

</div>
te zijn
 
Laatst bewerkt:
Maar lost dat ook het probleem op dat de text gelijk op de witte rand komt te staan? Want dat deed ie toen ik geen textdivje had die paar pixel van de rand afkongaan.
Ik heb atm geen ftp programma of bewerkingsproggie dus ik zal morgen update plaatsen.
 
Sumpie zei:
Maar lost dat ook het probleem op dat de text gelijk op de witte rand komt te staan? Want dat deed ie toen ik geen textdivje had die paar pixel van de rand afkongaan.
Ik heb atm geen ftp programma of bewerkingsproggie dus ik zal morgen update plaatsen.
Klik om te vergroten...
Nou nee, maar dat kun je op dezelfde manier omzeilen als nu. Dezelfde CSS die je nu op het #text element toepast kun je ook op alle p toepassen. Als je dat niet wilt kun je de <p> die je wilt veranderen ook een class meegeven.

Dat de tekst over de witte rand heen wil komt overigens doordat het <p> element, net als een div, automatisch de gehele breedte probeert in te nemen van het element waar het in zit. Dat er witte randen staan op het achtergrondplaatje dat weet het <p> element niet, dat rekt gewoon zover als het kan.

Nu we het toch over achtergronden hebben, de achtergrond van je wrapper is een effen kleur, daar hoef je dusgeen plaatje voor te gebruiken, je kunt gewoon background-color:#1F3B6F: gebruiken.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan