css, dtd och div:s...

Tråden skapades och har fått 9 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Stockholm
  • 2004-01-01 21:38

Hej!

Nu måste jag verkligen lära mig ordentligt hur det här fungerar.
Tycker det har varit rätt snålt med text kring dtd:s och jag kan inte mycket om det sedan tidigare.

Jag gör en hemsida nu som är viktigt att den blir ordentlig och jag har byggt upp stomen med några div's.

När jag deklarerar version på hemsida med dtd och skriver antingen strict eller transitional så får jag olika resultat fastän jag fått för mig att det inte borde se så olika ut.

Nu har jag inte riktigt hunnit experimentera så mycket men jag har rätt snålt om tid så jag tänkte att jag frågar om hjälp här samtidigt som jag försöker komma på lösningen till problemet.

Önskat resultat:
en sida med fast höjd+bredd som är centrerad både på vågrätt som vertikalt.
en div för att hålla ihop antingen hela sidan eller åtminstone menyn och main.

Det här uppnås om jag använder mig av transitional och kikar på sidan med safari eller mozilla men inte med explorer då menyn förskjuts åt sidan någon pixel och main ramlar ner till raden under.
För att sidan ska se exakt likadan ut i alla webbläsare har jag fått för mig att man enkelt kan skriva sidan i strict-läge(dtd).

resultat med strict:
menyn som har en fast vidd vägrar bry sig om sin fasta vidd och pumpar ut sig lika bred som div:en över(top).
Containern som håller i menyn och main får för sig att bara innehålla menyn så main lägger sig för sig självt... usch.
centreringen vertikalt försvinner och sidan läggs högst upp.

Största problemet är alltså att menyn inte bryr sig om sin fasta vidd eftersom följden blir att de andra div'sen ramlar ner på raden under.

Nämnvärt är att jag använder float:left och en container för menyn+main

<body>

	<div id="top" align="right">
		<img src="bilder/sidhuvud.gif" width="705" height="60" border="0">
	</div>


<div id="container">
	
	<div id="meny">
		<?php require("meny.php"); ?>
	</div>
	
	
	<div id="vertbar">
		<img src="bilder/linje_vert.gif" width="15" height="471">
	</div>
	
	<div id="main">
		<?php
		if (empty($_GET['goto'])) {
			$_GET['goto'] = "blank.php";
		}
		require($_GET['goto']);
		?>
	</div>
	
</div>


</body>

Bifogar 2 bilder på hur det ser ut ungefär.

  • Medlem
  • Stockholm
  • 2004-01-01 21:39

och transitional....

  • Medlem
  • Stockholm
  • 2004-01-02 09:51

tips på andra sidor där man kan fråga om hjälp?
Något officiellt css-forum?

  • Medlem
  • Stockholm
  • 2004-01-02 11:20

Förstår mig inte på det här... hur som helst.

Nu har jag begränsat problemet till att internet explorer 5.2.3 för mac inte visar en tabell som är satt till 100%-vidd som just 100% utan snarare 97% eller så.
Dvs där glider det in några pixlar som gör att resten brakar ihop.

Tydligen är det samma problem med IE6-win...
fasen vad lite jag undersökt problemen mellan mac-pc och olika webbläsare ...

Det här har inte med DTD att göra, utan jag tror att du har stött på en bugg i IE5/Mac, som under vissa omständigheter lägger till typ 10 pixlar på sidbredden, så att man får en horisontell rullningslist även när man inte borde.

Mer om det tror jag att du kan hitta här: http://www.l-c-n.com/IE5tests/

/
Johan

whoa, detta var ju en rolig tråd, hur kan jag ha missat!

yeah, jag skjuter på ie/mac också, den är tyvärr inte så bra längre som den var ett tag. eller rättare; den har blivit förbikört och eftersom den inte kodas på längre, så ja..
tilläggas kan att ie/mac har en del barnsjukdomar vad gäller float

ivar, jag vet inte om du gör det redan, men innan du börjar ge dig själv ont i huvudet bör du alltid validera dina html/css dokument när du felsöker. Det är faktiskt ett väldigt effektivt sätt att hitta fel, även "dumma" fel såsom stavfel etc, som kan få browsers till att gå bananor...

http://validator.w3.org/
http://jigsaw.w3.org:80/css-validator/validator-uri.html

  • Medlem
  • Stockholm
  • 2004-01-02 12:42

Jag har försökt förut men inte fått det att fungera så jag blir bara sur

Nu försökte jag validera en fil genom att ladda upp den mot deras formulär men då sa den att det blev error och att den inte fick någon input.

Provade validata en lite äldre version som låg online och den gick utmärkt.

Mitt sätt att debugga css är genom att lägga till borders och se hur boxarna beter sig egentligen

jo det är ju ända sättet att kolla hur dom beter sig. Vad jag menade var att det jävligt lätt att göra nått som är emott dtd'n vilket då gör att din css fil (tex) inte blir parsad ordentligt. Att validera dom är, tycker iaf jag, det bästa sättet att hitta små löjliga fel. html måste förövrigt valideras först..

du frågade efter ett forum ang. css? jag kan varmt rekommendera mailinglistan css-discuss!

  • Medlem
  • Karlstad
  • 2004-01-02 17:16

Mycket bra sajt för att kolla olika webbläsare och vilket mode dom hamnar i vid olika DTD:
http://www.hut.fi/u/hsivonen/doctype.html
Den här ör inte så dum den heller:
http://alistapart.com/articles/doctype/

  • Medlem
  • 2004-01-04 20:28

Du behöver inte använda Strict (pratar vi XHTML förresten?) för att sidan ska "se likadan ut i alla webbläsare". Jag är också osäker på om detta har med olika DTDer att göra men se iaf till att du har en URL i din DOCTYPE och att den är rätt (olika för Strict och Transitional).
Har du nån URL man kan få titta på förresten? Eller CSS-kod? Tänk på att bredderna ökar när du slänger dit borders hit och dit, detta kan orsaka omflödning i dokumentet.

1
Bevaka tråden