Layout blir olika i Explorer/Firefox

Citera flera Citera

2011-01-29 02:06

Skogga

Medlem

Plats: Stockholm
Registrerad: Aug 2002

●

Orkar inte kolla igenom din kod, men börja med att lägga till en strict DOCTYPE och börja sedan felsöka vad som spökar mellan webbläsarna. Det är nämligen så att IE blir lydigare när man lägger till en DOCTYPE och då är det inte lika mycket som skiljer i tolkningen av kod.

Visa signatur

[Min IP] [Hur många ord i minuten kan du skriva?] [Slumpa Lösenord]

Citera flera Citera

2011-01-29 12:26

jovnas

Medlem ★

Plats: Västra Frölunda
Registrerad: Maj 2004

●

Problemet ligger nog i avsaknaden av doctype, precis som Skogga skrev.
Det hela hänger på att IE inte följer den standariserade Box modellen när det inte finns någon doctype. IE räknar in ramen i total-bredden av boxen, dvs den räknar ut totalbredden som 100px + 700px = 800px, vilket ju får plats i #Con (som är angiven som 801px).
Den totala bredden enligt standard är 100px + 700px + 1px + 1px = 802px. Detta är ju mer än de 801px som finns tillgängliga i #Con och medför att någon av #Links eller #Text måste flyttas under den andra för att få plats.

Visa signatur

as far as we can tell, the massacre went well...

Citera flera Citera

2011-01-29 12:50

onaona

Medlem

Registrerad: Okt 2008

●

index.htm

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Salong Bakfickan</title>
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="con">
<a href="index.htm"><div id="logo"></div></a>
<div id="left">

<br /> <br />

Hem

<br /> <br /> <br /> 

Priser

<br /> <br /> <br />

Boka online

<br /> <br /> <br />

Erbjudanden

<br /> <br /> <br />
</div>

<div id="middle">

<center>
<h1>Välkommen</h1>

Till en salong som ligger mitt gulbrandstorp. <br />
Vi har drivit en frisörsalong i över 30 år och har jobbat med frisyrvisningar, Fotojobb, Reklamjobb och styling på Melodifestivalen. <br /> <br />

Det har varit fantastiska år och nu går vi in i nästa nivå.

</center>

<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

</div>

</div>

</body>
</html>

mall.css

body {font-family: Verdana; font-size: 12px;}

a:link { color: #000; text-decoration:none}
a:visited { color: #000; text-decoration:none}
a:hover { color:#C00; text-decoration: none; font-family:Verdana, Geneva, sans-serif; font-size:14px }

#con{ 
width:804px;
height: 926px;
margin-left:auto; 
margin-right:auto;
margin-top: 10px;
}

#logo{
width: 804;
height: 129px;
background-image: url(logo.png);
}

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

#middle{
width: 653px;
float: right;
border-left-style: solid;
border-width: 1px;
}

logo.png: http://i54.tinypic.com/33vg7f5.png

Länkarna får du snygga upp själv, har bara använt <br /> för att få lite avstånd mellan dem. Utgå från att koda såhär i fortsättningen.

Senast redigerat 2011-01-29 12:52 Tillägg

Citera flera Citera

2011-01-29 13:02

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Skrivet av onaona:

index.htm

<!-- fulkod -->

(...)

Länkarna får du snygga upp själv, har bara använt <br /> för att få lite avstånd mellan dem. Utgå från att koda såhär i fortsättningen.

Där är många fel här (testa att validera så får du se); man kan inte ha blockelement i länkar, du har tomma element (vilket är bad practice på hög nivå), du använder <center> i HTML5 (alternativt fel doctype), du självstänger element även om du inte kör XHTML (kodsoppa), du missbrukar <br> istället för att använda <p>, etc.

Skulle nog rekommendera TS att verkligen inte utgå från det här, någonsin.

(Men TS, låt bli tabellerna och iframe, det är minst lika illa om inte värre)

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Citera flera Citera

2011-01-29 13:13

onaona

Medlem

Registrerad: Okt 2008

●

Skrivet av You:

Där är många fel här (testa att validera så får du se); man kan inte ha blockelement i länkar, du har tomma element (vilket är bad practice på hög nivå), du använder <center> i HTML5 (alternativt fel doctype), du självstänger element även om du inte kör XHTML (kodsoppa), du missbrukar <br> istället för att använda <p>, etc.

Skulle nog rekommendera TS att verkligen inte utgå från det här, någonsin.

(Men TS, låt bli tabellerna och iframe, det är minst lika illa om inte värre)

Såklart att man inte ska använda center, detta gjorde jag bara för få det gjort snabbt. Jag har redan påpekat att jag "missbrukat" <br />. Det går även utmärkt att självstänga divs i HTML5.

Själva layouten är korrekt kodad, texten har ingen container utan den är bara skriven rakt in i en div.

Du kan själv validera min kod och se att det enda "felet" är att jag använder en center-tagg istället för att sköta det med CSS.

Jag ska väl inte göra hela TS läxa, eller?

Citera flera Citera

2011-01-29 13:14

Jesper943

Medlem

Plats: Halmstad
Registrerad: Jul 2010

●

Tack för svar, vad ska man använda sig av istället för iframe?
Är inte jättekunnig i ämnet men vill lära mig

Har webbdesign i skolan och vår lärare lärde oss iframe så trodde det va de bra, varför är de inte bra att använda sig utav tabeller och <center>?

Tur att det blev fel så jag la upp det så man lärde sig massa nytt

Senast redigerat 2011-01-29 13:24

Visa signatur

Citera flera Citera

2011-01-29 18:21

Woodlauncher

Medlem

Plats: Uppsala
Registrerad: Jul 2008

●

Skrivet av Jesper943:

Tack för svar, vad ska man använda sig av istället för iframe?
Är inte jättekunnig i ämnet men vill lära mig

Har webbdesign i skolan och vår lärare lärde oss iframe så trodde det va de bra, varför är de inte bra att använda sig utav tabeller och <center>?

Tur att det blev fel så jag la upp det så man lärde sig massa nytt

Wow. Är din lärare 70 och halvt senil måhända? Lyssna fortsättningsvis inte på någonting din lärare säger om någonting och titta på film under lektionerna istället.

Citera flera Citera

2011-01-29 18:24

Jesper943

Medlem

Plats: Halmstad
Registrerad: Jul 2010

●

Skrivet av Woodlauncher:

Wow. Är din lärare 70 och halvt senil måhända? Lyssna fortsättningsvis inte på någonting din lärare säger om någonting och titta på film under lektionerna istället.

Nah hehe, båda lärarna i vår skola som lär ut webbdesign lär ut iframe, vad jag vet ^^, men vad ska man använda istället för iframes då?
Nyfiken på varför tabeller och <center> är dåligt också tacksam för svar.

Visa signatur

Citera flera Citera

2011-01-29 21:10

Tazavoo

Medlem ★

Plats: Finland
Registrerad: Maj 2004

●

Skrivet av Jesper943:

Nah hehe, båda lärarna i vår skola som lär ut webbdesign lär ut iframe, vad jag vet ^^, men vad ska man använda istället för iframes då?
Nyfiken på varför tabeller och <center> är dåligt också tacksam för svar.

Iframe börjar vara föråldrat, jag rekommenderar att du gör det med PHP (kräver att ni lagrar era sidor på en server), vilket är så gott som ett krav på webbsidor idag. Ifall ni inte har lärt er PHP och inte kommer att gå in på det snart så får någon annan svara på vad som är det rätta att göra

Center-taggarna är även de föråldrade, tanken är att endast strukturen är skriven i HTML och att all layout är gjord i CSS. Därför bör du övergå till att på ett eller annat sätt centrera via CSS (hur man gör det beror på vad man centrerar, men t.ex. din wrapper-div, Con eller vad de nu hette, centreras ju med margin: 0px auto).

Tabeller användes förut till det mesta inom webbsidor, men nuförtiden bör du endast använda dem till deras egentliga syfte - att laga tabeller. Till viss del ersätter ju div-taggar tabeller, när det gäller länkarna bör du ha dem i en unordered list (ul), typ i stil med:

<ul id="menu">
<li><a href="blabla">Blabla</a></li>
<li><a href="blabla2">Blabla2</a></li>
<li><a href="blabla3">Blabla3</a></li>
</ul>

För att sedan få det att se ut som du vill stylar du ul-taggen och li-taggarna med CSS.

Citera flera Citera

2011-01-29 21:59

Jesper943

Medlem

Plats: Halmstad
Registrerad: Jul 2010

●

Skrivet av Tazavoo:

Iframe börjar vara föråldrat, jag rekommenderar att du gör det med PHP (kräver att ni lagrar era sidor på en server), vilket är så gott som ett krav på webbsidor idag. Ifall ni inte har lärt er PHP och inte kommer att gå in på det snart så får någon annan svara på vad som är det rätta att göra

Center-taggarna är även de föråldrade, tanken är att endast strukturen är skriven i HTML och att all layout är gjord i CSS. Därför bör du övergå till att på ett eller annat sätt centrera via CSS (hur man gör det beror på vad man centrerar, men t.ex. din wrapper-div, Con eller vad de nu hette, centreras ju med margin: 0px auto).

Tabeller användes förut till det mesta inom webbsidor, men nuförtiden bör du endast använda dem till deras egentliga syfte - att laga tabeller. Till viss del ersätter ju div-taggar tabeller, när det gäller länkarna bör du ha dem i en unordered list (ul), typ i stil med:

<ul id="menu">
<li><a href="blabla">Blabla</a></li>
<li><a href="blabla2">Blabla2</a></li>
<li><a href="blabla3">Blabla3</a></li>
</ul>

För att sedan få det att se ut som du vill stylar du ul-taggen och li-taggarna med CSS.

Ok, tack så hemsk mycket för svar, vi kommer inte gå in på PHP i skolan men jag har rätt mycket tid kvar i skolan och kan jobba hemma med att se hur det funkar om det inte är allt för svårt (tycker webbdesign är intressant så borde inte vara något problem)
Får tänka ut hur jag ska lösa allt!

Tack så hemskt mycket

Visa signatur