Positioneren; probleempje [parent]

Status
Niet open voor verdere reacties.
V

Viperr

Gebruiker
Lid geworden
23 feb 2009
Berichten
93
Hey allemaal

voor school moeten we een website maken met xhtml en css
css ben ik totaal onervaren mee.
body
{
background-color: #FFFFCC;
}

#header
{
height: 150px;
margin: 0;
padding: 0;
border: 2px solid black;
background-image: url(plaatjes/header.jpg);
position: absolute;
top: 50px;
left: 100px;
right: 100px;
}


#links
{
height: 40px;
margin: 0 2px 2px 0;
padding: 0;
border: 2px solid black;
background-color: #FFFFAA;
position: absolute;
top: 146px;
left: 200px;
right: -800px;
}

#menu
{
width: 200px;
height: 800px;
margin: 2px 2px 2px 2px;
padding: 0;
border: 2px solid black;
background-color: #FFFFAA;
position: absolute;
}


#info
{
height: 500px;
margin: 2px 2px 2px 2px;
padding: 0;
border: 2px solid black;
background-color: #FFFFAA;
}
Klik om te vergroten...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/html11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Rijksmuseum Amsterdam - Museum van Kunst en Geschiedenis</title>
<link href="rijksmuseum.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">

<div id="menu">

<div id="links">

<div id="info">

</body>

</html>
Klik om te vergroten...

dit heb ik net in mekaar gezet en de opzet is dus om een header te hebben met daarin de balk met links die naar beneden loopt weer uit de header
en dan onder de header (eraan vast!) een balkje met menuutje
en daaronder weer los een box met informatie en teksten

maar ik heb nu een probleem want al die boxes zijn 'parent' ofzo van elkaar zoals ik al op diverse sites heb gelezen

alleen de header is vrijstaand. (van de body dan)
dus die staat goed
links balk staat ook zoals ik het wil hebben
maar dan komt het menu balkje
die moet direct onder de header komen
maar omdat de linksbalk parent is van de menu balk ofzoiets :confused:
moet ik de position right negatief maken dit omdat de balk van links al op houdt terwijl de menu balk nog moet starten
en zo is de info box ook weer gerotzooi want die positioneerd weer volgens de menu balk..

ik hoop dat iemand het nog kan volgen.. ik zelf nog maar net
en ik had dus de vraag of je die parent ofzo kan omzeilen en dat je de menu balk los koppelt ofzo dat de body de parent is zodat ik de balk ECHT absoluut los van alles op de site kan positioneren:confused:
 
Je werkt met absolute, moet je dus voor ALLE objecten aanhouden.
Maar zal niet op iedere maat scherm goed ogen.

Breedte van 800 px is gebruikelijk.

Voorbeeld:
HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/html11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Rijksmuseum Amsterdam - Museum van Kunst en Geschiedenis</title>
<style type="text/css" >
body
{
background-color: #FFFFCC;
}

#container
{
width:800px;
margin-left:auto;
margin-right:auto;
border:solid 2px #ff0000;
}

#header
{
height: 150px;
margin: 0;
padding: 0;
border: 2px solid black;
background-image: url(plaatjes/header.jpg);
clear:all;
}


#links
{
height: 40px;
margin: 0 2px 2px 0;
padding: 0;
border: 2px solid black;
background-color: #FFFFAA;
float:left;
width:50px;
}

#menu
{
width: 200px;
height: 800px;
margin: 2px 2px 2px 2px;
padding: 0;
border: 2px solid black;
background-color: #e3e4cd;
float:left;
}


#info
{
height: 500px;
margin: 2px 2px 2px 2px;
padding: 0;
border: 2px solid black;
background-color: #FFFFAA;
width:500px;
float:left;
}

</style>
</head>

<body>
<div id="container">
<div id="header">header</div>
<div id="links">links</div>
<div id="menu">menu</div>
<div id="info">info</div>

</div></body>

</html>

Dus alles is in een container gevat, en absolute heb je niet nodig.
Float en clear worden veel gebruikt bij het werken met divjes.

:cool:
 
Maar zal niet op iedere maat scherm goed ogen.
Klik om te vergroten...

maar das ook nog wat...
want voor die opdracht moet de site 'liquid' zijn ( dus op elke resolutie goed zijn ofzo..)

maar bedankt voor de uitleg:thumb:
 
kan je zo'n box ook centreren? dat heb ik niet ergens kunnen vindn
want als ik op width; 80% zet dan blijft ie rechts staan maar ik wil dat aan de rechter kant evenveel ruimte is dan aan de linkerkant..

(btw peter heb je msn ? dan kan ik je ff toevoegen en om meer uitleg vragen?)
 
ik ben het spoor nu helemaal bijster
ik begrijp er geen snars meer van en het lukt me ook niet
ik wil nu de layout aan passen en het moet er zo uitkomen te zien:

HEADER
MENU
S | CON-
U | TENT
B |
FOOTER

maar hoe krijg ik dat voor elkaar

zoals ik al zei en nu ook wel blijkt ben ik Echt totaal en dan ook toaal onervaren
iemand weet hoe ik deze posities voor elkaar krijg

en graag ook met uitleg erbij wrom die tags gebruikt worden en wat het nut er van is

:thumb:
 
Stelt niks voor, maar soms even stoeien met de code.

Gehaald van de gegeven link.
En aangepast.

HTML: 
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>Liquid Css</title>
<!--Pagina gemaakt op Tuesday, February 24, 2009 21:27:10 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" content="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css" media="screen">
body {
width:100%;
margin:0 auto;
text-align:center;
background:url(img/background.gif);
border:1px solid #666666;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
font-size:14px;
}

#header,#menu,#content,#sub-section,#footer {
overflow:hidden;
display:inline-block;
text-align:left;
border:solid 1px #ff0000;
padding:10px;
}

/* safari and opera need this */
#header,#menu,#footer {width:97,5%}
#content,#sub-section {float:left}
#content {width:77%}
#sub-section {width:18%}
#content {clear:right}

#footer {clear:left}

#container
{
width:97%;
border:1px solid #ffff00;
display:block;
}


</style>
</head>

<body >

<div id="header"><h1>header</h1></div>

<div id="menu"><h1>menu</h1>Hier komen de linken</div>

<div id="container">
<div id="sub-section">
<h1>sub-section</h1><br>
plek voor subsectie
</div>

<div id="content"><h1>content</h1><br>
hier de inhoud van de site, je verhaaltje<br>
<br><a href="http://www.wbs-online.nl/files/bc90cfcc6f8ead56be45a846eb2cc909-113.php">Lorum tekst om je site te testen met tekst.<br>
</a><br>

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo nisi, posuere a, dapibus ac, pulvinar eget, urna. Morbi mattis nonummy orci. Morbi posuere velit id ligula. Donec porttitor porta lorem. Fusce at risus quis felis fermentum nonummy. Nunc sodales laoreet massa. Fusce iaculis molestie massa. Suspendisse et purus. Integer pellentesque, ipsum at sollicitudin dictum, felis massa mollis metus, ac tristique turpis lectus ac nunc. Morbi at tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eros. Nam a eros. Cras mattis mollis sem. Cras fringilla. Ut ligula ante, blandit nec, pharetra a, elementum et, purus.
Mauris vulputate nunc. Proin sed lectus sed magna porttitor laoreet. Sed velit lacus, lacinia vitae, convallis at, sagittis nec, enim. Nullam leo magna, tincidunt vel, tempus ac, consectetuer a, quam. Mauris in sem placerat risus porta varius. Integer sem. Suspendisse orci ipsum, tempus in, tincidunt id, sollicitudin venenatis, sem. Etiam tincidunt, lectus quis hendrerit porttitor, nibh pede interdum nisl, eu luctus massa libero.
</div>
</div>

<div id="footer"><h1>footer</h1><br>
footer voor vast bericht of emailadres</div>


</body>

</html>

Borders heb ik gezet ivm met ontwerpfase.
Mogen straks natuurlijk weg.
Bekijk je ontwerp ALTIJD in IE en FF
en laat je code testen:
http://validator.w3.org/

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan