[CSS, IE] Overflow werkt niet goed - Softwareontwikkeling

vrijdag 26 december 2008 19:36

Acties:

0 Henk 'm!

stijnos1991

Topicstarter

Beste,

Bezig met het opzetten van een eenvoudige website. Alles wat we hier zien is nog pre-alpha om het zo maar te zeggen

Ik loop vast bij een stukje van de layout. Tekst wat niet meer op de normale regel past wordt op een hele rare manier weergeven, in Internet Explorer.
In Firefox begint het netjes op een nieuwe regel, zoals het hoort.
Via de GoT search kwam ik uit op het attribuut: overflow-y? Ik heb hier wat mee lopen spelen, maar heb het idee dat ik wat fout doe.
Zou iemand een vlugge blik op dit kleine stukje code kunnen laten vallen?(het is nog erg chaotisch!)
In het kort: Pagina met layout. 4 divs: header, menu, content, footer.

code:

<body>
<div id="header">
<?php include ("header.html"); ?>
</div>

<div id="leftnavigation">
<?php include ("menu.php"); ?>
</div>


<div id="content">
<h1>Procedures</h1>
<h1>-Wat kunt u van ons verwachten?</h1><br><br>
Wanneer u met een probleem zit kunt u telefonisch of per mail contact opnemen met ons.<br>
U kunt uw vraag mailen naar het onderstaande contact adres. Indien mogelijk wordt deze meteen beantwoord en hopelijk lost dat uw probleem onmiddelijk op. Deze service is uiteraard <em>gratis</em>.<br>
Wanneer zaken niet per mail kunnen worden afgehandeld zal er iemand langs komen die <em>bij u thuis</em> gaat kijken wat er aan de hand is.<br>
Indien de handelingen langer dan een half uur duren kunt u ervoor kiezen om de computer aan ons mee te geven, zodat wij deze bij ons thuis kunnen nakijken en repareren.
Er wordt <em>vertrouwelijk en verantwoordelijk</em> omgegaan met eventuele prive informatie. <em>Ingrijpende handelingen</em> met uw computer worden altijd gedaan na overleg!<br>
<br>
<img src="images/procedure2.jpg" >
</div>
<div id="footer">
<?php include ("footer.html"); ?>
</div>

</body>

En de CSS waar het om gaat:

code:

#header {
  position : fixed;
  width : 100%;
  height : 10%;
  top : 0;
  right : 0;
  bottom : auto;
  left : 0;
  border-bottom : 2px solid #cccccc;
}
#leftnavigation {
    position : fixed;
    height : 100%;
    top : 10%;
    left : 0;
    width : 150px;
    margin : 0px 0px 0px 10px;
    color : #000000;
    padding : 3px;
    overflow : auto;
}
#content {
  position : fixed;
  top : 10%;
  bottom : 100px;
  margin : 0px 0px 0px 165px;
  width : auto;
  height : auto;
  padding-left : 5px;
  padding-right : 12px;
  color : #000000;
  border-left : 2px solid #cccccc;
  overflow:auto;
  }

#footer {
  position: fixed;
  width: 100%;
  height: 100px;
  top: auto;
  right: 0;
  bottom: 0;
  margin-left : 10px;
  border-top : 2px solid #cccccc;
}

En om het helemaal duidelijk te maken wát er precies fout gaat: [url="http://www/vaagheid.jpg"]link[/url]

vrijdag 26 december 2008 19:47

Acties:

0 Henk 'm!

Zoefff

❤ 

Zonder daadwerkelijk naar je probleem te kijken, zie ik een aantal punten die je in ieder geval moet verbeteren.

Waarom gebruik je 'position: fixed;'? Dit wordt om te beginnnen niet ondersteund door IE6, en dit is daarnaast een layout waarbij je gewoon van relatieve positionering gebruik kan maken.
De kop "-Wat kunt u van ons verwachten?" lijkt me een subkop van "Procedures", gebruik daar dus ook <h1> en <h2> voor in plaats van 2x <h1>.
Zet de tekst in een paragraaf (<p>/<p>) i.p.v. zo los in de div.

Wat er precies fout gaat weet ik niet, maar het lijkt me een combinatie van overbodige overflows, fixed positionering en margins. Een absoluut (of fixed) gepositioneerd element heeft sowieso geen margin. Je geeft wel margins op voor die elementen, het zou best wel eens onvoorspelbaar kunnen zijn wat bepaalde browsers (IE) daar mee doen.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zaterdag 27 december 2008 10:51

Acties:

0 Henk 'm!

stijnos1991

Topicstarter

Goed, hele CSS even opnieuw geschreven en deze keer met 'position:relative'.
Het zal wel heel basic zijn hoor, maar ik krijg de div content met geen mogelijkheid náást het menu. Hij wordt er constant onder gezet!
Nieuwe CSS:

code:

#header {
    position:relative;
    width:100%;
    height:10%;
    border-bottom: 2px solid #cccccc;
    }

#leftnavigation {
    position:relative;
    width:150px;
    height:80%;
    border-right: 2px solid #cccccc;
    }
    
#content {
    position:relative;
    width:auto;
    height:auto;
    top:2px;
    left:0px;
    }

#footer {
    position:relative;
    width:100%;
    height:10%;
    border-top : 2px solid #cccccc;
    }

Nou, bekijk het resultaat maar op www.helpmijnu.com

zaterdag 27 december 2008 11:08

Acties:

0 Henk 'm!

Copyman

Dode muis

Als ik jou was zou ik zou mij eerst eens wat meer in CSS verdiepen. Het positioneren van elementen is niet verplicht, dus je hoeft niet voor alle elementen een position:relative; toe te passen. Ben je wel op de hoogte van wat position relative precies doet? Hier en hier vind je bijvoorbeeld meer informatie over CSS positioning. Bestudeer dat eens goed en ga dan kijken waar je wel of juist geen CSS positioning nodig hebt.

Zeer belangrijke informatie: Inventaris

zaterdag 27 december 2008 11:35

Acties:

0 Henk 'm!

stijnos1991

Topicstarter

Mja mijn 'script' vaardigheden zijn niet goed. Bedankt voor de links, zal ze gronding bestuderen en kijken wat ik er dan van bak.