3 Kolomen , midden uitrekken, CSS - Softwareontwikkeling

maandag 6 augustus 2007 10:03

Acties:

Verwijderd

Topicstarter

Hallo,

Ik ben weer eens bezig met een template in mekaar te knutselen. Nu mijn template werkt steeds in laagjes van 3. Maar in mijn header is er een probleem. De container rond de header (#header) mag alleen in de breedte uitrekken. Ik heb al heel wat dingen getest, maar niks doet het. Ik zal even mijn code weergeven.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
#header{
  background: rgb(243,191,27);
  float:left;
  width:100%;
    height : 157px; 
}
#header1 {
height : 202px;
background-image : url(http://www.bnc-sof2.com/folder/images/header1.png);
width: 427px;
float:left;
} 
#header2 {
height : 202px;
background-image : url(http://www.bnc-sof2.com/folder/images/header3.png);
width: 391px;
float:right;
} 
-->
</style>
</head>
<body>
<div id="header">
<div id="header1"></div>
<div id="header2"></div>
</div>
</body>
</html>

Ik hoop dat jullie mij kunnen helpen. Neen, ik heb nog geen voorbeeld. Met vriendelijke groeten Esli. Alvast bedankt.

*Edit*

In firefox doet hij het perfect. In internet explorer echter niet.

[ Voor 3% gewijzigd door een moderator op 06-08-2007 10:28 . Reden: highlighting aangezet ]

maandag 6 augustus 2007 10:07

Acties:

disjfa

Er staat toch in je code dat je header 427 + 391 pixels breed is? En de hoogte of 60 pixels in sommige browsers (container) of 202 in andere (sublagen)

Ik vraag me ook af waarom je iets float wat al automatisch eigenlijk al een block element is die automatisch de volle breedte behoort te zijn. Nu haal je die eigenschap weg, maar plaats je deze later weer op een andere manier terug

disjfa - disj·fa (meneer)
disjfa.nl

maandag 6 augustus 2007 10:09

Acties:

Verwijderd

Topicstarter

disjfa schreef op maandag 06 augustus 2007 @ 10:07:
Er staat toch in je code dat je header 427 + 391 pixels breed is? En de hoogte of 60 pixels in sommige browsers (container) of 202 in andere (sublagen)

Ik vraag me ook af waarom je iets float wat al automatisch eigenlijk al een block element is die automatisch de volle breedte behoort te zijn. Nu haal je die eigenschap weg, maar plaats je deze later weer op een andere manier terug .

Uuh ik ben nog niet zo gevorderd , ik kan even niet volgen waarover je het precies hebt.

maandag 6 augustus 2007 10:11

Acties:

disjfa

Verwijderd schreef op maandag 06 augustus 2007 @ 10:09:
[...]
Uuh ik ben nog niet zo gevorderd , ik kan even niet volgen waarover je het precies hebt.

Ik had het ook niet goed

Je probeert nu een standaart html bug van IE op te lossen. Je wilt de hoogte van je container (header) lager zetten dan de inhoud. IE rekt dan je header mee met de inhoud. Dus word die ipv 157px 202px

Gewoon een achtergrondje zetten op je header.

disjfa - disj·fa (meneer)
disjfa.nl

maandag 6 augustus 2007 10:11

Acties:

Verwijderd

Topicstarter

Die float left kan ik inderdaad laten. Maar die float right toch niet ? Anders komen beide stukken tegne elkaar en rekt heel het beoltje niet meer uit.

maandag 6 augustus 2007 10:12

Acties:

BlackWhizz

Links en Rechts absoluut positioneren. De content een margin geven links en rechts 202px; en dan die z-index verlagen en ook absoluut poisitoneren.

maandag 6 augustus 2007 10:12

Acties:

disjfa

shoarmaboer21 schreef op maandag 06 augustus 2007 @ 10:12:
Links en Rechts absoluut positioneren. De content een margin geven links en rechts 202px; en dan die z-index verlagen en ook absoluut poisitoneren.

Foei. Nooit absoluut positioneren als het niet hoeft.

disjfa - disj·fa (meneer)
disjfa.nl

maandag 6 augustus 2007 10:18

Acties:

Verwijderd

Topicstarter

Als ik het goed begrijp een plaatje maken van 1px breed en 157px hoog met die gele kleur ??? En dat dan als background image in de #header ?

maandag 6 augustus 2007 10:22

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

shoarmaboer21 schreef op maandag 06 augustus 2007 @ 10:12:
Links en Rechts absoluut positioneren. De content een margin geven links en rechts 202px; en dan die z-index verlagen en ook absoluut poisitoneren.

position absolute en z-index moet je proberen niet te gebruiken als het niet hoeft. Z-index is verschrikkelijk in sommige (IE) browsers en position moet je vanaf blijven als het kan

Verwijderd schreef op maandag 06 augustus 2007 @ 10:18:
Als ik het goed begrijp een plaatje maken van 1px breed en 157px hoog met die gele kleur ??? En dat dan als background image in de #header ?

Meer een repeat-y denk ik

Kan je eens een voorbeeldje online zetten met een plaatje erbij wat je precies wilt. Dat werkt veel makkelijker, zeker met live CSS edit van Fx

maandag 6 augustus 2007 10:27

Acties:

Verwijderd

Topicstarter

www.bnc-sof2.com/folder/ Dat is wat ik nu heb met een plaatje van 1px breed en 157px hoog.

www.bnc-sof2.com/folder/begin.jpg is hoe het geheel eruit zou moeten zien.

maandag 6 augustus 2007 10:29

Acties:

Verwijderd

Topicstarter

Meer een repeat-y denk ik

Kan je eens een voorbeeldje online zetten met een plaatje erbij wat je precies wilt. Dat werkt veel makkelijker, zeker met live CSS edit van Fx

Reapeat y doet het ook niet. Maar het probleem ligt dus in IE niet in FF

Ooh wat is FF goed ! Ooh wat haat ik IE

[ Voor 7% gewijzigd door Verwijderd op 06-08-2007 10:30 ]

maandag 6 augustus 2007 11:19

Acties:

Verwijderd

Topicstarter

Kan iemand me nog verder helpen AUB ?

Niet door je topic binnen 24 uur te kicken, geduld is een schone zaak.

[ Voor 53% gewijzigd door André op 07-08-2007 09:25 ]

Pagina: 1

Reageer