[css] 3 vragen

[Verwijderd]

Gegroet,

Ik ben weer wat bezig met css en html.
Nu stuit ik op 3 dingen die ik graag anders zou willen zien.
De html en css code staan onderaan het bericht

1) geen volledige border rond de container

In mijn container heb ik verschillende div's, maar enkel de header div wordt omlijnd als ik de container een border meegeef. Ik kan wel alle div's appart een border meegeven, maar dan zit ik met het probleem dat de content div en de latestworks div geen volledige border aan de linker of rechter kant krijgen, die is maar zo groot als de inhoud.

2) float property vraag
a) Om de latestworks div en content div naast elkaar te krijgen geef ik de latestworks div een float:left mee en de content div een float:right. Ik denk dat die float:right normaal niet gebruikt wordt in samenwerking met een float:left. Als ik die float:right niet toepas, dan gebruikt de tekst in de content div niet de volledige width die ik hem meegeef (580px), maar een stuk minder.

b) opdat de footer onderaan de content en latestworks div wordt geplaatst geef ik deze een float:left mee, iets dat normaal ook niet gedaan wordt denk ik. Ik zou dit dus op een striktere manier willen doen, maar ik weet niet hoe, met margin en padding kom ik er iig niet uit.

3) ruimte tss content en latestworks div en hnav div
In internet explorer is die ruimte niets, logisch ook omdat ik nergens in mijn css heb staan dat er daar ruimte tss moet zijn. Maar in firefox is dit wel een redelijke ruimte van zo'n 50px. Op zich is dat niet erg, zo ziet hij er beter uit in firefox, maar omdat ik em er in ie ook zo wil laten uitzien moet ik dus met margin werken, maar dan wordt die margin-top (in aantal px) in firefox bij die ruimte opgeteld waardoor het in firefox er dus niet uit ziet.

4) code

Cascading Stylesheet:

body {
    background-color: #202020;
    padding: 0;
    margin: 0;
    text-align: center;
}

#container {
    width: 900px;
    height: 100%;
    padding: 0;
    margin: 0 auto;
    text-align: left;
}
    
    #header {
        max-height: 119px;
        width: 900px;
        margin: 0;
        padding: 0;
    }
    
    #hnav {
        width: 900px;
        background-image: url(images/hnavbg.jpg);
        background-repeat: repeat-x;
        height: 40px;
        margin: 0;
        padding: 0;
    }
    
        #hnav ul {
            margin-left: 280px;
            float: left;
            margin-top: 9px;
            list-style: none;
            height: 40px;
            padding: 0;
        }
        
        #hnav li {
            float: left;
            border-right: solid #ffffff 2px;
            padding-right: 20px;
            padding-left: 20px;
        }
        
        #hnav a {
            font-family: Tahoma;
            color: #ffffff;
            text-decoration: none;
            font-size: 13px;
            font-weight: bold;
        }
        
            #hnav a:hover {
                text-decoration: underline;
            }

    #latestworks {
        float: left;
        width: 280px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    #content {
        float: right;
        width: 580px;
        padding-right: 10px;
        padding-left: 10px;
    }
    
    #footer {
        width: 900px;
        background-image: url(images/footerbg.jpg);
        background-repeat: repeat-x;        
        float: left;        
        height: 50px;
        margin-top: 40px;
        padding: 0;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
        font-style: italic;
        font-family: Times New Rmoan;
        color: #ffffff; 
        font-weight: 600;
    }
    
                        
h3 {
    font-family: Myriad Pro, Tahoma;
    font-size: 30px;
    font-style: italic;
    font-weight: 100;
    color: #70a338;
}

p {
    font-size: 14px;
    font-style: italic;
    font-family: Times New Rmoan;
    color: #ffffff;
}

    p:first-letter {
        color: #6fa237;
        font-size: x-large;
    }

img.latestworks {
    border: solid 3px #6fa237;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Tom O - Amateur Design</title>
</head>
<body>
<div id="container">
    <div id="header">
        <p align="center" style="padding: 0px; margin: 0px;"><img src="images/header2.png" alt="header" /></p>
    </div>
    <div id="hnav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Links</a></li>
            <li style="border-right: none;"><a href="#">Contact Me</a></li>
        </ul>
    </div>
    
     <div id="latestworks">
        <h3><img src="images/logo v2.png" alt="logo" style="vertical-align: bottom" />Latest Works</h3>
        <table>
        <tr>
        <td style="padding-bottom: 40px">
        <img src="images/laatstewerk1.jpg" alt="ford escort wallpaper" class="latestworks" />
        </td>
        </tr>
        <tr>
        <td style="padding-bottom: 40px">
        <img src="images/laatstewerk2.jpg" alt="knight of sovereignty sig" class="latestworks" />
        </td>
        </tr>
        <tr>
        <td>
        <img src="images/laatstewerk3.jpg" alt="robo-sig2" class="latestworks" />
        </td>
        </tr>
        </table>
     </div>
    
     <div id="content">
        <h3><img src="images/logo v2.png" alt="logo" style="vertical-align: bottom" />Welkom</h3><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>Have Fun</p>
     </div>
     
    
     <div id="footer">
        Copyright - 2008  - Tom op&#8217;t Roodt
     </div>
</div>


</body>
</html>

Ik hoop dat jullie mij wat op weg kunnen helpen.

[Cascade]

Beetje veel, denk je niet? Denk niet dat dit de bedoeling is van dit forum...

Even in het kort:
1) je container pakt de grootte van de gefloate divjes niet (en alleen die van header + hnav), daarom gaat die border fout. Als je alle floats wil houden is er een 'clear' nodig op/onder de footer, container rekt dan mee met de inhoud.

2) algemeen: laat je container div de breedte bepalen, dus alleen deze een width van 900px geven en header / footer / de rest niet nog een keer width 900 px geven.

2a)
- extra container div om content en latestwork maken, geen width.
- latestwork floaten, met een width.
- content niet floaten, geen width instellen en een margin-left geven zodat het rechts van latestwork begint.
- geef een clear zodat deze container netjes de grootte van latestwork + content krijgt.
Dit is 2-column tableless layout, veel over te vinden. Kijk uit voor browser problemen.

2b) footer: niet floaten, width weghalen. footer krijgt dan de breedte van container.

3) ruimte tss? ¿que?
Dat moet je even toelichten... je hebt het hier over de tussenruimte tussen hnav en je latestwork + content? Zo ja, dan kan je met die extra container rond latestwork + content exact die ruimte instellen.

[Da Weef]

Ik sluit me grotendeels aan bij bovenstaande post en voeg eraan toe:

Je meeste problemen zijn opgelost als je consistenter bent met de float statement. Als je hnav en header ook laat floaten rekt je container ook gewoon mee zonder te clearen.

De ruimte die ontstaat komt omdat unorderder lists (ul), die je gebruikt in hnav, standaard margins hebben welke je niet op nul hebt gezet.

Verder een algemene tip: Als je wilt zien hoe je lay-out in elkaar steekt geef als je divs dan een andere kleur...

[Verwijderd]

ik heb de site online gezet, ik zit nog altijd met dat ruimte probleem.

klik

als je em opent in firefox dan zie je een lege ruimte tss latestworks/content div en header div.
als je em opent in ie dan zie je een lege ruimte tss latestworks/content div en footer.

[ Voor 40% gewijzigd door Verwijderd op 20-08-2008 21:11 ]

[H004]

Da Weef schreef op dinsdag 19 augustus 2008 @ 23:08:
Verder een algemene tip: Als je wilt zien hoe je lay-out in elkaar steekt geef als je divs dan een andere kleur...

Doe dat eens, dan zie je precies wat het probleem veroorzaakt, en waarschijnlijk kan je het dan ook zelf oplossen. Debuggen heet dat...

[TeeDee]

Verwijderd schreef op woensdag 20 augustus 2008 @ 21:11:
ik heb de site online gezet, ik zit nog altijd met dat ruimte probleem.

klik

als je em opent in firefox dan zie je een lege ruimte tss latestworks/content div en header div.
als je em opent in ie dan zie je een lege ruimte tss latestworks/content div en footer.

Check even de margins/paddings op de h3's in je #latestworks. Ten tweede, een .class en #id genaamd latestworks lijkt me niet handig.

tss = tussen. em = hem/haar/de site. Verder kan je je zinnen ook wel starten met hoofdletters. Ik had wel wat beter verwacht van een Belg (afgaande op je profiel natuurlijk) en gezien je startpost kan je beter.

Installeer voor het gemak de Webdeveloper firefox extension. Kan je 'live' je CSS editen, outlines om je blocks, tables etc. etc. zetten en dan zie je meteen wat er fout gaat.

[Borizz]

Verwijderd schreef op woensdag 20 augustus 2008 @ 21:11:
ik heb de site online gezet, ik zit nog altijd met dat ruimte probleem.

klik

als je em opent in firefox dan zie je een lege ruimte tss latestworks/content div en header div.
als je em opent in ie dan zie je een lege ruimte tss latestworks/content div en footer.

Ik zou zeggen sla de specificatie er eens op na en dan specifiek collapsing margins.
Verder weet je dat in IE 6 de content pas start onder je div latestworks?

[Cascade]

Mwoah, ziet er toch al leuk uit.

Nog een kleine tip; verdiep je ook in semantische HTML. Je kan bijvoorbeeld dit doen:
- je header is nu een paragraaf (p) met een plaatje er in, zou daar een echte header (h1) met een background plaatje van maken.
- van je h3 header met plaatje erin als versiering, een h2 maken met dat plaatje als achtergrond.
- je latestwork is nu een tabel, kan je in deze vorm ook weer een list van maken (ligt er aan wat er nog in komt).
Zo krijg je een strakkere structuur en een betere scheiding van presentatie en inhoud.

Je zou de source van dit eens kunnen bekijken voor ideeën: http://htmldog.com/examples/darwin.html, mooi voorbeeld.

Die browser-afhankelijke tussenruimte is ook goed te regelen, kijk naar je margin/padding van je headers...

[Da Weef]

Verwijderd schreef op woensdag 20 augustus 2008 @ 21:11:
ik heb de site online gezet, ik zit nog altijd met dat ruimte probleem.

klik

als je em opent in firefox dan zie je een lege ruimte tss latestworks/content div en header div.
als je em opent in ie dan zie je een lege ruimte tss latestworks/content div en footer.

Moet ik mezelf gaan quoten???

Zet eens ergens aan het begin van je stylesheet:

code:

 #hnav ul,  #hnav li  {
        margin: 0;
        padding: 0;
        }