Design Help

Door Auke op 17-11-2008 17:55

265 views

Ben bezig met een Design/Template.
Maar me enige probleem is dat ik geen 2 Divs naast elkaar kan krijgen.
Dit is hoe het er nu uitziet:

<!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" />
<title>Naamloos document</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:6px;
	top:9px;
	width:1271px;
	height:189px;
	z-index:1;
}
-->
</style>
<link href="test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	left:203px;
	top:215px;
	width:195px;
	height:197px;
	z-index:1;
}
-->
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="1" id="1">
  <div align="center">
    <div class="2" id="2"><img src="drsi.nl/images/Header.png" width="1000" height="198" alt="" /></div>
    <div class="3" id="3"><img src="drsi.nl/images/Navigatie.png" alt="" width="197" height="29" /><img src="drsi.nl/images/Avertenties.png" alt="" width="803" height="29" /></div>
    <div class="5" id="5"></div>
    <div class="8" id="8"><img src="drsi.nl/images/Copyright.png" alt="" /></div>
  </div>
</div>
</body>
</html>

Ik probeer een menu stuk te maken en een Content stuk en die naast elkaar.
en wil alles in het midden houden.

en dan daaronder de menu en content..(Navigatie en Advertensies horen naast elkaar...)
Hoop dat iemand me kan helpen
Greetz...
Auke / Aukemon0 / Wonkox

Mebus Hackintosh

17-11-2008 17:59

float: left;

?

Auke

17-11-2008 18:00

Dan komt hij niet goed uit...
hij komt dan helemaal rechts... of links...
Misschien moet ik de hoofd Div kleiner maken ofzo?

Kalle P

17-11-2008 18:01

Haal eerst die position absolutes weg en ga aan de float

Auke

17-11-2008 18:16

Heb het nu voor mekaar dat het naast elkaar komt maar als de ene aan de rechter kant langer is dan die aan de linkerkant gaat hij er tussen waardoor het er heel raar uit komt te zien hoe is dat op te lossen?
Pagina:

<!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" />
<title>Naamloos document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center">
<div class="1" id="1">
  
  <div class="2" id="2"><img src="drsi.nl/images/Header.png" width="1000" height="198" alt="" /></div>
  <div class="3" id="3"><img src="drsi.nl/images/Navigatie.png" alt="" width="197" height="29" /><img src="drsi.nl/images/Avertenties.png" alt="" width="803" height="29" /></div>
   <div class="4" id="4">
      :D Werkt eht eindelijk?<br>
        Werkt het toch niet?</div>
   <div class="6" id="6">Hier wordt de inhoud voor  class "6" id "6" weergegeven</div>
   <div class="8" id="8"><img src="drsi.nl/images/Copyright.png" alt="" /></div>
</div>
</div>
</body>
</html>

CSS:

@charset "utf-8";
#1 #4 {
	background-color: #FFFFFF;
	background-image: url(drsi.nl/images/Navigatie2.png);
	background-repeat: repeat-y;
	background-position: left top;
	float: left;
	width: 197px;

}
@charset "utf-8";
#1 {
	background-color: #FFFFFF;
	background-repeat: repeat-y;
	background-position: left top;
	float: left;
	width: 1000px;


}
@charset "utf-8";
#1 #6 {
	background-color: #FFFFFF;
	float: right;
	width: 803px;
}

Wat bij firefox gebeurt:
http://www.drsi.nl/test.php
is dat ie helemaal niet goed weer geeft terwijl Dreamweaver dat wel doet.
En is het mogelijk om de hele handel in het midden te krijgen?

RvW Of toch niet

17-11-2008 18:37

off topic:
errie letter typ.
en je hebt je images geen alt gegeven

Auke

17-11-2008 18:43

offtopic:
Dat weet ik maar probeer eerst voor mekaar te krijgen om het ontwerp goed te krijgen ;)
Daarna ga ik alles goed maken...

Tikkes C

17-11-2008 18:45

is float geen probleem voor IE?

Robert Deiman

17-11-2008 19:50

Het meeste is goed te doen met alleen floats, absolute/ relative hoef je niet vaak te gebruiken. Gebruik een reset.css waarmee je de verschillen tussen IE en andere browsers al zoveel mogelijk verkleind.

Als je de breedtes goed aanhoud en rekening houdt met de margin/ padding verschillen in IE is het heel goed te doen met float:left;

Reageren

Inloggen om te reageren