css>menu werkt niet na toevoegen DOCTYPE - Softwareontwikkeling

vrijdag 25 mei 2007 19:12

Acties:

Topicstarter

Ik heb een index.php met daarin een menu dat gemaakt is via css> ul en li nesten. Deze word perfect weergegeven als ik geen DOCTYPE heb maar wil het graag gevalideerd krijgen dus heb deze nodig. De bovenste php block is voor de validatie. Ik heb al meerdere soorten Doctypes geprobeerd en ook helemaal bovenaan ipv. tusse ?> en <html>. Mijn css is ook volledig valid dus zou geen problemen moeten geven.

code:

<?php
require_once('../includes/Sentry.php');
$theSentry = new Sentry();
if (!$theSentry->checkLogin(2) ){ header("Location: login.php"); die(); }
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Supreme games - CMS</title>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <META name="description" content="CMS system -- supreme-games.com" />
</head>
<body>

<div id="container" >

[ Voor 3% gewijzigd door PainkillA op 25-05-2007 19:14 ]

vrijdag 25 mei 2007 19:32

Acties:

Geert.H

Wellicht omdat je een doctype hebt voor HTML, maar zelf XHTML gebruikt?
Is wel het eerste dat in mij opkomt..

vrijdag 25 mei 2007 19:59

Acties:

Boelie-Boelie

Het is de bedoeling dat je eerst de html opstelt met een valide doctype en daarna de opmaak van het document regelt.

(Achteraf) toevoegen van een valide doctype zorgt ervoor dat de browser de pagina anders rendert (namelijk in standards mode) dan zonder doctype (dat is in quirks mode), wat betekent dat je kiest voor de CSS-interpretatie van het W3C i.p.v. het incorrecte boxmodel van IE. Die verschillen soms nogal.

In dit geval ziet je menu er blijkbaar niet uit in standards mode. Dat ligt niet aan het doctype, maar aan de CSS (die is namelijk gebaseerd op het verkeerde model). De CSS kan weliswaar valide zijn, maar dat zegt natuurlijk nix over of je menu er dan goed uitziet. Zou dus het doctype laten staan en de CSS opnieuw doen.

Cogito ergo dubito

vrijdag 25 mei 2007 20:41

Acties:

PainkillA

Topicstarter

hmm het is nu grotendeels opgelost. doordat er anders werd gerenderd ging ik even in de firefox broncode kijken waarin nu het hele menu gecommented stond om een of andere rede ( comment tag anders ?). Met wat kleine tweaks in de css diet hij het nu weer aardig.

vrijdag 25 mei 2007 21:52

Acties:

PainkillA

Topicstarter

alleen heb nog een klein probleem met een div met daarin de logo''s van de w3c validation service. Het probleem is dat deze gewoon niet kleiner gemaakt kunnen worden zodat ze mooi om de logo's heen passen. Erg raar vooral ook omdat dit bijna niet fout kan gaan. Positie van div op absolute en positie aangeven met margin-left en margin-top. Een plaatje zegt meer denk ik:

Afbeeldingslocatie: http://img380.imageshack.us/img380/8686/screenshotsupremegamescfl3.th.png

css code voor de betreffende div:

#validcontainer{
border:none;
position:absolute;
padding-left: 20px;
padding-top: 380px;
width:110px;
height:90px;
}

zaterdag 26 mei 2007 12:31

Acties:

dB90

Positie van div op absolute en positie aangeven met margin-left en margin-top.

Dat zeg je, maar in je CSS gebruik je padding? Moet dat dan geen margin zijn?

Webberry Webdevelopment

zaterdag 26 mei 2007 13:35

Acties:

Boelie-Boelie

PainkillA schreef op vrijdag 25 mei 2007 @ 21:52:
alleen heb nog een klein probleem met een div met daarin de logo''s [...]. Het probleem is dat deze gewoon niet kleiner gemaakt kunnen worden zodat ze mooi om de logo's heen passen.

Waarom moet daar een div omheen? Verder snap ik niet waarom je 'positon: absolute' gebruikt en vervolgens helemaal niet absoluut gaat positioneren, maar padding gebruikt. Of het één, of het ander gebruiken.

Cogito ergo dubito

zaterdag 26 mei 2007 16:25

Acties:

PainkillA

Topicstarter

damn ik wist wel dat ik wat fout deed was er gewoon weer overheen geleze

.
Maar ik vind het makkelijker en met minder code om die 2 images die bij elkaar horen in 1 container te stoppen en die te positioneren dan de 2 images appart positioneren. Of is dit een foute manier van werken?

[ Voor 5% gewijzigd door PainkillA op 26-05-2007 16:27 ]

zaterdag 26 mei 2007 20:54

Acties:

Boelie-Boelie

Het is niet de bedoeling dat je allemaal divs gaat toevoegen omdat het positioneren dan makkelijker gaat; een HTML-element is in eerste instantie bedoeld om je content te structureren. Dus ja, een div toevoegen is niet de juiste manier.
Leuk leesvoer: Do you smurf what I smurf?

Verder hoeft het helemaal niet veel code te zijn: je positioneert de ene image t.o.v. de bovenstaande content in de menukolom (alleen margin nodig, geen width, position nogwattes etc.), en de andere t.o.v. van de eerdergenoemde image (ook met margin).

Cogito ergo dubito

Pagina: 1

Reageer