[CSS] website rekt niet mee

[Verwijderd]

Hallo,
mijn website rekt niet mee met de tekst.
alleen in de editor.
als ik een php bestand include rekt hij niet mee met de layout. dan gaat de tekst verder dan de layout lang is laat maar zeggen.

voorbeeld.
klik

kunnen jullie me helpen?
je moet voornamelijk met firefox kijken!

mvg
Joey

[frickY]

Dan heb je een vaste "height" gebruikt. Groter dan die height wordt hij niet, dan moet je "min-height" gebruiken.

[Verwijderd]

je bedoeld dus de height in de container?

code:

BODY {
background:url(images/background.gif);
}
#container {
width: 800px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -400px; /* helft van de breedte, en dan negatief */
font-size:11px;
color:#000000;
font-family:tahoma;
}
#content {
background: #FFFFFF;
height: 355px
}
#header {
background:url(images/header.png);
height:125px;
}
#menu {
background: #FFFFFF;
height:20px;
text-align:right;
font-size:11px;
color:#000000;
font-family:tahoma;
margin-right:10px;
}
#sidebar {
width:200px;
height:100%;
float:right;
}

[ Voor 88% gewijzigd door Verwijderd op 09-03-2008 10:45 ]

[Bweap]

Voor het centreren van je div met id container zou ik onderstaande code gebruiken.
Scheelt wat css code en is minder resolutie gevoelig.

#container {
color:#000000;
font-family:tahoma;
font-size:11px;
margin:0pt auto;
width:800px;
}

En voor de div met id content het volgende :

#content {
background:#FFFFFF;
min-height:400px;
}

[Verwijderd]

oke bedankt!
hoe kan ik ervoor zorgen dat er links in de content 2px ruimte van de zijkant en de tekst is?

1 probleem. hij wordt niet gecentreerd in IE

[ Voor 18% gewijzigd door Verwijderd op 09-03-2008 10:51 ]

[Kwastie]

met padding dus:
padding: 0px 2px 0px 2px;

[ Voor 59% gewijzigd door Kwastie op 09-03-2008 10:53 ]

[Verwijderd]

het is me al gelukt.
ik heb dit gedaan.

left:50%
margin-left:-400px;
position:absolute;

[ Voor 255% gewijzigd door Verwijderd op 09-03-2008 10:58 ]

[Kiphaas7]

Ik zou eens op zoek gaan naar een goede tutorial, want er zitten nogal wat fouten in je code, zoals het 2x defineren van je body tag.

[crisp]

Begin eerst eens met een volledige doctype gebruiken, je site rendered nu in quirksmode.
Centreren doe je door de margin-left en margin-right op 'auto' te zetten, niet door absolute positioning te gebruiken met negatieve margin; nu valt een groot deel van je site weg als je je scherm verkleint...

[Makkelijk]

crisp schreef op zondag 09 maart 2008 @ 15:32:
Begin eerst eens met een volledige doctype gebruiken, je site rendered nu in quirksmode.
Centreren doe je door de margin-left en margin-right op 'auto' te zetten, niet door absolute positioning te gebruiken met negatieve margin; nu valt een groot deel van je site weg als je je scherm verkleint...

margin-left en right op auto werkt echter niet met IE.
Voor IE kun je met behulp van een IE-only 'hack' natuurlijk altijd nog display: table-cell gebruiken en dan text-align: center.

En voor wat betreft rekken. Voor standaard gewoon min-height, en daarna met behulp van een IE-only hack "height" instellen, IE behandeld height namenlijk als min-height.

[crisp]

Makkelijk schreef op maandag 10 maart 2008 @ 09:56:
[...]


margin-left en right op auto werkt echter niet met IE.

In standards compliant mode werkt dat prima voor IE5.5 en hoger...

Voor IE kun je met behulp van een IE-only 'hack' natuurlijk altijd nog display: table-cell gebruiken en dan text-align: center.

IE < 8 ondersteund geen display:table-cell

En voor wat betreft rekken. Voor standaard gewoon min-height, en daarna met behulp van een IE-only hack "height" instellen, IE behandeld height namenlijk als min-height.

En ook hier geldt weer: vanaf IE7 wordt min-height juist weer wel ondersteund.

De verschillen tussen diverse IE versies zijn groot en je moet dus echt weten welke versies wat wel en wat niet ondersteunen. Je kan het niet afdoen met 'IE' maar je zal specifiek moeten zijn mbt versies. En verder natuurlijk altijd in standards compliant mode werken (dus volledige DTD).

[Kiphaas7]

Makkelijk schreef op maandag 10 maart 2008 @ 09:56:
[...]


margin-left en right op auto werkt echter niet met IE.
Voor IE kun je met behulp van een IE-only 'hack' natuurlijk altijd nog display: table-cell gebruiken en dan text-align: center.

En voor wat betreft rekken. Voor standaard gewoon min-height, en daarna met behulp van een IE-only hack "height" instellen, IE behandeld height namenlijk als min-height.

Oh? Sowieso ondersteun IE5.5 en hoger het gewoon, waar je volgens mij toch meer dan 99% van de IE gebruikers mee afvangt.

Ook al zet je hack tussen aanhalingstekens, conditional comments is toch een betere oplossing, aangezien het woord hack en IE vaak worden verbonden met dingen als "star-hack" etc.

EDIT: spuit 11

[ Voor 1% gewijzigd door Kiphaas7 op 10-03-2008 10:25 . Reden: spuit 11 ]