Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Bij veel tekst gaat door onderliggende div heen

michelsw
12 antwoorden
  • 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]
  • Het handigst zou natuurlijk zijn als je dit dynamisch laat vergroten als:

    #footer
    {
    clear: both;
    float: left;
    width: 800px;
    margin-top: 4px;
    }

    Dan hoef je namelijk geen height op te geven.
  • Als ik deze manier gebruik komt de footer direct onder de conain te hangen en wordt de footer 2 keer zo groot als de header. de website zelf heeft een vaste waarde van 100 %. Deze manier zou wel werken als ik de website niet een height van 100 % wil geven.
  • 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?
  • 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.
  • heb nu een voorbeeld op www.holwerda.nu gezet. bij IE wordt de pagina niet 100% maar zo lang als de tekst is. Daarbij gaat hij ook nog door de footer heen. Bij zelfde effect.
  • Zo:
    www.cssplay.co.uk/layouts/basics2.html
    of zo:
    www.sitepoint.com/examples/catfish/catfish-final.php (uitleg)?
  • 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
  • De w3.org validator zegt dat er een div te veel is. dat geeft ook dat soort problemen.
    wimb.
  • Idd handig om altijd je site te checken, zowel de HTML en CSS, als de layout. Overigens kun je voor nieuw op te zetten sites beter een Strict doctype kiezen.
  • [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
  • Heb je wel een correct doctype, zoals ik hierboven aangaf? Kijk ook eens naar de andere layouts op CSSplay. Bij Jessey.net vind je een uitleg over een fixed menu aan de linkerkant, maar die link doet het op het moment van schrijven niet (misschien strax wel).

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.