[HTML-CSS] div rekt te ver

donderdag 10 maart 2005 20:51

Topicstarter

Excuses, lange dag en alles gaat fout. Ga zo naar bed voordat ik nog meer schade aanricht!

Acties:

Rowanov

Kop eens wat anders...

Hoe komt het toch dat ik denk dat die css door dreamweaver wordt uitgespuugd...

donderdag 10 maart 2005 20:54

Acties:

donderdag 10 maart 2005 20:55

Topicstarter

Rowanov schreef op donderdag 10 maart 2005 @ 20:51:
Hoe komt het toch dat ik denk dat die css door dreamweaver wordt uitgespuugd...

Alles is in dreamweaver getypt, nieuwe files zijn ook in dreamweaver aangemaakt...

Acties:

De Parasitaire Capaciteit!

Zou je misschien even een plaatje kunnen posten van wat precies de bedoeling is?

of is dit ok op het witte stuk na? http://cmv.sjerry.nl/ft1/

[ Voor 29% gewijzigd door Sappie op 10-03-2005 20:56 ]

donderdag 10 maart 2005 20:57

Acties:

donderdag 10 maart 2005 21:19

Topicstarter

Sappie schreef op donderdag 10 maart 2005 @ 20:55:
Zou je misschien even een plaatje kunnen posten van wat precies de bedoeling is?

of is dit ok op het witte stuk na? http://cmv.sjerry.nl/ft1/

dit is de bedoeling ja! Dat de content over de border gaat is nu niet relavant. Dus puur die wit ruimte tussen content en de onderste border

Acties:

De Parasitaire Capaciteit!

tis een lelijk voorbeeldje en het lijkt niet meer zoveel op je eigenlijke website (qua kleuren enzo dan he), maar ik denk dat je hiermee wel uit de voeten komt. heb t snel gedaan en zou t ongeveer zo oplossen, dus er zouden nog wat foutjes in kunnen zitten. Verder heb ik ook niet echt op de semantiek van de html gelet, wat je wel zou moeten doen.

maar eh kijk maar wat je ermee kunt ,als je vragen hebt lama weten, maar het stelt niet veel voor:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Portfolio Jerry Sietsma | PaginaTitel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="test.css">
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            font-family:Arial, Helvetica, sans-serif;
            font-size:12px;
            text-align:center;
            margin:5;
            padding:0;
        }
        
        #all {
            position:relative;
            margin: 0 auto;
            width:760px;
            text-align:left;
            border: 1px solid #262C30;
        }
        
        #header {
            width:760px;
            height:110px;
        }
        
        #logo {
            height: 100px;
            width: 760px;
            background: blue;
        }
        
        #topbalk {
            height: 10px;
            background: green;
        }
        
        #menu {
            float: left;
            top: 110px;
            width: 150px;
            background: white;
            border: 1px dashed black;
        }
        
        #menu ul {
            list-style: none;
            margin: 10px;
        }
        
        #content {
            min-height: 400px;
            _height: 400px; /* voor IE */
            background: #FFFFCC;
            width: 608px;
            float: left;
        }
        
        #content p {
            margin: 5px;
        }
        
        #navigatie {
            background: blue;
        }
        #footer {
            clear: both;
        }
    
    </style>
</head>

<body>

<div id="all">
    <div id="header">
        <div id="logo"></div>
        <div id="topbalk"></div>    
    </div>
    <div id="menu">
        <h2 style="background: #9EAFD8; border: 1px solid #262C30;margin: 0;">Menu:.</h2>
        <ul>
         <li><a href="home.html" accesskey="h" title="Acceskey h">Home</a></li>
         <li><a href="biografie.html" accesskey="b" title="Acceskey b" class="">Biografie</a><br></li>
         <li><a href="portfolio.html" accesskey="p" title="Acceskey p" class="">Portfolio</a><br></li>
         <li><a href="cv.html" accesskey="c" title="Acceskey c" class="">C.V.</a><br></li>
         <li><a href="contact.html" accesskey="t" title="Acceskey t" class="">Contact</a><br></li>
         <li><a href="sitemap.html" accesskey="s" title="Acceskey s" class="">Sitemap</a><br></li>
            </ul>
    </div>
    <div id="content">
        <div id="navigatie">Home .:> Portfolio .:> Links</div>
        <p>Is Teken Mijn Verhaal iets voor jou? Deze stichting werkt met striptekenaars die de verhalen tekenen van en voor kinderen die door hun handicap zelf niet kunnen tekenen. Heb je zelf zo¹n handicap en wil je je verhaal laten tekenen? Werk je op een mytylschool en zou je een project met ons willen starten? Heb je geld over en zoek je een goed doel? Voor al deze vragen bent u op deze site aan het juiste adres!</p> 
    </div>
    <div id="footer"></div>
</div>

</body>
</html>

[ Voor 18% gewijzigd door Sappie op 10-03-2005 21:36 ]

donderdag 10 maart 2005 21:33

Acties:

donderdag 10 maart 2005 21:35

Topicstarter

Bedankt voor je reactie, ga er zo gelijk even mee bezig!

Acties:

De Parasitaire Capaciteit!

zie dat ik vergeten ben de <ul> te sluiten.. mocht je em al copy-paste hebben

edit:
nu heb ik em wel gesloten in de code

[ Voor 31% gewijzigd door Sappie op 10-03-2005 21:36 ]

vrijdag 11 maart 2005 13:10

Acties:

vrijdag 11 maart 2005 13:44

Topicstarter

Mooiii, dat werkt! Alleen is jammer genoeg niet elk probleem opgelost!

http://cmv.sjerry.nl

Wanneer je deze link in IE opent zal je aan de linker- en de rechterkant naast de content layer een beetje wit ruimte zien. Maar open je em in firefox dan is het wel goed. Pas je de breedte nu aan dan veranderd er niks in IE terwijl de content layer in firefox onder het menu schiet

De drempel is wel erg hoog om om layers over te stappen maar misschien dat iemand met meer ervaring de oorzaak weet?

Acties:

De Parasitaire Capaciteit!

Je moet natuurlijk wel een geldig doctype opgeven, zoals je in je eerste voorbeeld wel had gedaan, anders dwing je IE in Quirksmode waardoor het het een ander box-model gebruikt.

vrijdag 11 maart 2005 13:53

Acties:

vrijdag 11 maart 2005 14:01

Topicstarter

Sappie schreef op vrijdag 11 maart 2005 @ 13:44:
Je moet natuurlijk wel een geldig doctype opgeven, zoals je in je eerste voorbeeld wel had gedaan, anders dwing je IE in Quirksmode waardoor het het een ander box-model gebruikt.

Ok, zet het gelijk weer terug! Wist niet wat het doel ervan was en het zag er zo netter uit

Maar helaas veranderd dat niks aan mn probleem...

En trouwens, in je voorbeeld heb je de content layer float:left; meegegeven alleen wanneer ik dit doe blijf ik hetzelfde probleem houden. Met margins heeft het volgens mij ook niet te maken...

Acties:

De Parasitaire Capaciteit!

Met een beetje uitzoekwerk en netjes html / css-en moet je er nu wel uit kunnen komen. Er staat bv nog een </div> in je code die er niet thuishoort. Verder is je css ook een beetje ranzig.. en dan vooral het css gedeelte mbt #container.

Ook zou ik je eerst es een beetje verdiepen in het door de w3c aanbevolen (en dus ook standaard) box-model: http://www.w3.org/TR/REC-CSS2/box.html