Ga naar inhoud

[CSS] Bij veel tekst gaat door onderliggende div heen

anoniem

Door anoniem,
in Internet en hosting

Aanbevolen berichten

anoniem Nieuwkomer

anoniem

Geplaatst:
Geplaatst:
Hallo Ben bezig met opzetten van een site. Nu nog bezig met de layout. Nou ben ik er achter gekomen dat als ik veel tekst in de contain zet deze door de div van de footer heen gaat. dit is de code van mijn site. ik ben op zoek naar een manier dat de container een balk krijg en dat de tekst niet door de footer heen gaat. [code:1:92c3b22ff0] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <title> www.Holwerda.nu </title> <style type="text/css"> html,body{ background-color: #525555; text-align:center; height:96%} #container { width:800px; height:auto; min-height:100%; position:relative; border:1px solid black; background-color:#55bbee;} #header{ width:800px; height:150px; border-bottom: 1px solid black; background-image: url(images/header.gif); background-repeat: no-repeat; } #menu{ text-align:left; width:180px; float:left; background-color:#55bbee;} #menu ul { margin:5px 5px 5px 5px; list-style:none; font-family:Verdana; font-size:12px; padding-top:10px 0px 0px 0px;} #menu ul a{ color :#ffffff ; text-decoration :none ; display:block; height:20px; border:1px solid #515A5A; padding-top:3px; padding-left:15px;} #menu ul a:hover{ background-color : #7DB3B3;} #content{ width:610px; background-color:#55bbee; float:left; padding-left:10px; padding-top:10px;} #welkom{ text-align:left; width:590px; background-color:#ffffff; margin-right:10px; padding-left:10px; padding-top:10px; margin-bottom:10px;} #welkom h1{ width :570px ; height:25px; background-color:#3333ff; color: #ffffff; font-family:Verdana; font-size:18px; margin-right :10px ; padding-left:10px; padding-top:3px; } #welkom p{ color :#2A2B2B; font-size:10px; font-family :Verdana ;} #nieuws{ float:left; width:175px; height:250px; background-color:#c4ccce; font-size:10px; border:1px solid black; font-family:verdana; color:#000000;} #tuin{ float:left; width:175px; height:250px; background-color:#c4ccce; font-size:10px; border:1px solid black; margin-left:35px; font-family:verdana; color:#000000;} #event{ float:left; width:175px; height:250px; background-color:#c4ccce; font-size:10px; border:1px solid black; margin-left:35px; font-family:verdana; color:#000000;} #footer{ clear :both; position: absolute; bottom: 0; left: 0; width: 800px; padding-top:4px;} #footer p{ font-size:12px; text-align :center ; border-top : 1px solid black ;} </style> </HEAD> <body> <div id="container"> <div id="header"></div> <div id="menu"> <ul> <li><a href="X">Home</a></li> <li><a href="X">Ik, Mezelf en Moi</a></li> <li><a href="X">Hattrick</a></li> <li><a href="X"></a></li> <li><a href="X"></a></li> </ul> </div> <div id="content"> <div id="welkom"> <h1>Welkom</h1> <p>Welkom bij Holwerda.nu. Dit is een persoonlijke website waarmee ik in eerste instantie mijn kennis met HTML PHP en CSS wil vergroten. Dit zal de reden zijn waarom hier in eerste instantie nog niet veel informatie is te vinden. In verloop van tijd zal ik hier informatie geven over hattrick en wil ik een discussie op zetten over MMORPG. Op dit moment zal eerst de layout af moeten en van daaruit werken we verder. <BR><BR> </p> </div> <div id="nieuws"></div> <div id="tuin"></div> <div id="event"></div> </div> <div id="footer"> <p><BR>www.Holwerda.nu<BR><BR></p></div> </div> </div> </body> </HTML>[/code:1:92c3b22ff0][/code]
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Zou je misschien iets helderder willen uitleggen wat je wilt bereiken (zonder CSS-termen te gebruiken)? Of een plaatje van hoe het wel moet, of een online voorbeeld van hoe het wel moet. Er zijn namelijk meerdere manieren om ervoor te zorgen dat je footer nergens doorheen komt. Verder heb je nix aan 'height: auto', want daar staat het al default op. Daarnaast kun je beter niet de afmetingen van het body- of html-element verkleinen, daar gebruikt men de wrapper of container voor (IE kan voor rare resultaten zorgen). Overigens, waarom gebruik je een Transitional doctype?
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Door div te gebruiken maak ik blokken de header het midden gedeelte en de footer. Ik wil dat dit alles scherm vullend is. Dus een hoogte van 100%. Hierbij heb ik een body van 100 % gemaakt daarin een header van 160 en een footer van 100px. Het middelste gedeelte wordt automatisch nu de ruimte die over blijft. Het probleem is dat als er meer tekst in de middelste ruimte staat dan dat er ruimte is komt er niet een scroll balk maar gaat de tekst door de footer heen. De header main en footer samen moeten dus 100% worden onafhankelijk de resolutie. Waarbij de header en de footer vaste maten hebben. de footer moet vast op de onderrand zitten. het middelste gedeelte moet een scrollbalk krijgen als er meer tekst in zit dan er ruimte is.
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Het is www.cssplay.co.uk/layouts/basics2.html, is het idee wat ik wil. Alleen kan niet echt een idee op die site vinden wat ik moet aanpassen in mijn css om dat voor elkaar te krijgen. Heb nu eerst maar opgelost door absolute uit de footer te halen. Is niet zoals ik het wil maar kost te teveel tijd om dit te onderzoeken en dat moet maar eens als de site af is. In iedergeval bedankt
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
[quote:9d092642be="boelieboelie"]Zo: www.cssplay.co.uk/layouts/basics2.html [/quote:9d092642be] Hoi allen, dankzij de link (zie boven) van boelieboelie heb ik gisteren mijn probleem kunnen oplossen. Waar het om ging? Wel, ik heb een website gemaakt met links een menu/navigatiebalk en rechts de inhoud, meer niet. Nu wou ik natuurlijk dat de menubalk gefixeerd op het scherm blijft staan, niet meescrollt met de inhoud (indien die langer is dan het beeldscherm tonen kan(scrollen)... Op een bepaald moment lukte het me om dit te fixen in IE7, maar niet in IE6 en lager en ook niet in Firefox...brrrr...om gaga van te worden, die verschillen in die browsers! Waarom toch die verschillen denk ik vaak. Ik doe de opmaak volledig met css. Menubalk: css{...position:fixed; ...} wordt blijkbaar heel verschillend opgevat door browsers!! Maar met toevoeging in m'n opmaakbestand .css : html{...} en ook extra's bij body{...}...zie link, is het toch gelukt :D ... [color=red:9d092642be][i:9d092642be][b:9d092642be]...of toch niet helemaal...nu zie ik dat IE6 het niet aanpakt...grrrr..echt erg... :-? verder puzzelen dus... ik had té vroeg victorie gekraaid[/b:9d092642be][/i:9d092642be][/color:9d092642be] :-? pppfff... Vraag: [b:9d092642be]Heeft er nog iemand ervaring met {position: fixed}[/b:9d092642be] ? :wink:
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Heb je wel een correct doctype, zoals ik hierboven aangaf? Kijk ook eens naar de andere [url=http://www.cssplay.co.uk/layouts/]layouts op CSSplay[/url]. Bij Jessey.net vind je een uitleg over een [url=http://www.jessey.net/simon/articles/007.html]fixed menu aan de linkerkant[/url], maar die link doet het op het moment van schrijven niet (misschien strax wel).
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
Ga naar topic overzicht

  • Populaire leden

    Er is nog niemand die deze week reputatie heeft ontvangen.

  • Leden

    Geen leden om te tonen

×
×
  • Nieuwe aanmaken...