Archief - CSS: enkele layout-vragen

XA4 · 3 sep 2006

Ik ben dus sinds heel kort begonnen met het aanleren van het ontwerpen van websites CSS (bedankt overigens voor de links, Xavez en Orez) Daarvoor maakte ik websites dmv WYSIWYG (Dreamweaver)
Nu ben ik allerlei dingen aan het proberen die ik heb geleerd, maar ik zit met enkele vragen.

Dit is mijn code van de pagina:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="mijnstijl.css">
<div id="container">
<img src="images/header.jpg">
<h1>titel</h1>
<div id="left">
<ul>
<li>menu1
<li>menu2
<li>menu3
<li>menu4
</ul>
</div>

<div id="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum convallis urna nec justo. In vitae sem. Proin aliquam, urna quis pharetra mollis, lectus elit dignissim ante, nec vulputate dolor nunc malesuada justo. Nam at justo luctus orci mollis placerat. Vivamus porttitor vehicula metus. Sed laoreet turpis sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc diam sapien, interdum id, ultricies sed, venenatis pretium, libero. Aenean non augue a lacus ornare varius. Phasellus in justo. Mauris at pede vel leo imperdiet ornare. Nunc in arcu eget lorem tempor lobortis.</div>
</div>

en mijn CSS:

Code:

#left { 
float: left; 
width: 200px; 
}

#right { 
margin-left: 220px; 
width: 500
; clip:   rect(   )
}

div#container
{
margin:0 auto;
background-color:#FFFFFF;
width:750px;
text-align:left;
}

h1 {
      color: #990000; font-weight: normal; margin-left: 0px
}

i {
      text-decoration: underline
}

P {
      margin-left: 0px
}

BODY {
      font-family: Verdana; font-size: 10; background-color: #FFFFFF; background-image: url(images/back_dots.jpg);
}

LI {
      LIST-STYLE-TYPE: square
}

1) Als ik niet met een container werk, neemt het lettertype van de divs de instellingen aan van de BODY. Maar nu ik dit in een container heb gestoken (om te centreren) Blijkt dat plots niet meer zo te zijn.
Waarom is dat plots geen BODY meer? Of moet ik dat nu definiëren als BODY van de container? En hoe doe ik dat dan?

2) Ik zou die header graag tegen de bovenkant van het browservenster laten komen. Hoe moet ik dat doen?

Alvast bedankt.
En ja, de code ziet er waarschijnlijk vrij eenvoudig uit, maar je moet ergens beginnen, hé...

dendaak · 3 sep 2006

2) Ik zou die header graag tegen de bovenkant van het browservenster laten komen. Hoe moet ik dat doen?

position: absolute;
top: 0;

Ramm · 3 sep 2006

basis html: elke tag die je opent moet je sluiten ook
een pagina begint en eindigt met de html-tag
De content komt tussen de body-tags
head-tags?

XA4 · 3 sep 2006

Ramm zei:
basis html: elke tag die je opent moet je sluiten ook
een pagina begint en eindigt met de html-tag
De content komt tussen de body-tags
head-tags?

je hebt gelijk. Ik heb mijn informatie van deze pagina (en waarschijnlijk geven ze daar enkel de code die je tussen de tags moet plaatsen...)

Nieuwe code: (beter zo?)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="mijnstijl.css">
</head>
<body>
<div id="container">
<img src="images/header.jpg">
<h1>titel</h1>
<div id="left">
<ul>
<li>menu1
<li>menu2
<li>menu3
<li>menu4
</ul>
</div>

<div id="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum convallis urna nec justo. In vitae sem. Proin aliquam, urna quis pharetra mollis, lectus elit dignissim ante, nec vulputate dolor nunc malesuada justo. Nam at justo luctus orci mollis placerat. Vivamus porttitor vehicula metus. Sed laoreet turpis sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc diam sapien, interdum id, ultricies sed, venenatis pretium, libero. Aenean non augue a lacus ornare arius. Phasellus in justo. Mauris at pede vel leo imperdiet ornare. Nunc in arcueget lorem tempor lobortis.</div>
</div>
</body>
</html>

Maar dat lettertype is nu nog niet in orde...

XA4 · 3 sep 2006

wardkennes zei:
position: absolute;
top: 0;

bedankt, ga ik proberen.

Ramm · 3 sep 2006

XA4_ zei:

je hebt gelijk. Ik heb mijn informatie van deze pagina (en waarschijnlijk geven ze daar enkel de code die je tussen de tags moet plaatsen...)

Nieuwe code: (beter zo?)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="mijnstijl.css">
</head>
<body>
<div id="container">
<img src="images/header.jpg">
<h1>titel</h1>
<div id="left">
<ul>
<li>menu1
<li>menu2
<li>menu3
<li>menu4
</ul>
</div>

<div id="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum convallis urna nec justo. In vitae sem. Proin aliquam, urna quis pharetra mollis, lectus elit dignissim ante, nec vulputate dolor nunc malesuada justo. Nam at justo luctus orci mollis placerat. Vivamus porttitor vehicula metus. Sed laoreet turpis sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc diam sapien, interdum id, ultricies sed, venenatis pretium, libero. Aenean non augue a lacus ornare arius. Phasellus in justo. Mauris at pede vel leo imperdiet ornare. Nunc in arcueget lorem tempor lobortis.</div>
</div>
</body>
</html>

Maar dat lettertype is nu nog niet in orde...

<li>blablabla</li>
<img src="..." alt="" />

XA4 · 3 sep 2006

Ramm zei:
<li>blablabla</li>
<img src="..." alt="" />

Heb ik nu ook aangepast.
Ik ben nog volop aan het leren, hé.
Dat is ook de reden dat ik van het WYSIWYG afwil, zodat ik HTML (xHTML) tenminste begrijp en kan schrijven.

XA4 · 3 sep 2006

Even een update:
ik heb alles even ge-upload, dat maakt het misschien wat gemakkelijker om uit te leggen en om te laten zien: hier dus.
En de CSS staat hier.

Zoals je kan zien, staat mijn header niet tegen de bovenkant.
Ik heb dat hier "opgelost" door bovenaan de header ook die schaduwrand mee te geven, maar dat is dus niet de bedoeling (nu lijkt het alsof de onderkant van de pagina bovenaan verder gaat)

Als ik het volgende doe:
top: 0;
position: absolute;
dan krijg ik dit: voorbeeld

Zoals ik al zei, ben ik nog maar heel recent bezig met xhtml en CSS (en dan bedoel ik, sinds dit weekend) Sla me dus niet dood als ik hier gigantische fout heb gemaakt.

En zoals je kan zien, is het lettertype ook veel te groot.
Maar hij past het dus niet aan volgens de BODY in de CSS.

Btw, let niet op de pagina-verdeling (titel, menu) Dit zijn slechts dingen die ik heb geleerd en er dus in verwerkt heb.

Ramm · 3 sep 2006

body{margin:0px;}

XA4 · 4 sep 2006

Ramm zei:
body{margin:0px;}

Nu dat lettertype nog.
De titel neemt wel de instellingen aan die zijn opgegeven, maar de tekst niet.
Ik neem aan dat dit te maken heeft met het feit dat de titel niet in een div zit en de tekst wel.
Moet ik die tekst in de rechtse div (#right) dan definiëren als body van die div of hoe moet dat?

XA4 · 4 sep 2006

Nog een extra vraag:
als ik onderaan elke pagina nu een echte onderkant wil, dus een footer, maar dan in de vorm van een afbeelding die (in mijn voorbeeld) de witte pagina onderaan afsluit.
Kan ik dan best de background van nu instellen als background van de container en dan een div bijmaken met de footer, of kan het evengoed zoals het nu is?

Archief - CSS: enkele layout-vragen

XA4

Legacy Member

dendaak

Legacy Member

Ramm

Legacy Member

XA4

Legacy Member

XA4

Legacy Member

Ramm

Legacy Member

XA4

Legacy Member

XA4

Legacy Member

Ramm

Legacy Member

XA4

Legacy Member

XA4

Legacy Member