webForumDet fria alternativet
Logga in

Lager med xhtml.

7 svar · 1 148 visningar · startad av Okkido

OkkidoMedlem sedan maj 20007 492 inlägg
#1

Hejsan!

Sitter och försöker göra om en sajt jag gjort tidigare som strular eftersom koden är totalt värdelös.
Så nu tänker jag börja med lager och använda xhtml och skippa tabeller helt.

Men, efter att ha försökt göra om sidan så som jag vill ha den har jag insett att det här med lager var svårare, mycket svårare, än vad jag trodde, därför skulle det vara fint om nån kunde hjälpa mig, för en god sak (få över mig på den ljusa sidan).

Tro inte att jag inte själv har försökt, för det har jag, men jag får inte rätt på det (det jag behöver hjälp med finns bra beskriver på alistapart, men ändå får jag inte till det). Ni kan se det som att jag är den late och inte orkar läsa till mig informationen själv och söker efter den enkla utvägen, och så är nog fallet. Jag är inte speciellt lat och skulle jag haft tid hade jag gärna läst mer om lager innan jag börjat med det, men jag har en deadline att passa och vill gärna skippa tabeller och göra det rätt direkt från början.

Iaf, om någon har några minuter över och är sugen på att hjälpa mig så är det så här jag tänkt mig:
Uppbyggnad

Om nån vill hjälpa mig, så tackar jag till tusen redan nu, har ni inte tid eller ork, så förstår jag er helt och hållet.

Kunde inte bestämma själv om jag skulle lägga tråden under Ideella jobb & tjänster eller här eftersom detta är en ren förfrågan där jag inte gjort något förarbete själv.

/r
Det är https://www.trafikskolan.com som ska byggas om, om det intresserar någon :)

joel_sundkvistMedlem sedan feb. 2003240 inlägg
#2

Testa den här...

Du kanske får pilla lite för att få den att funka i vissa pc-browsers...

Den är i alla fall testad på Firefox, Mozilla, Opera och Safari på mac. IE på mac har urdåligt stöd för css positionering så där blir det nog lite extra jobb om man ska få till det.

Bifogar även screenshots från de ovan nämnda webbläsarna.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Div-test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
color: #fff;
background-color:#ff6600;
margin:0;
padding:0; 
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: #fff;
margin:0;
padding: 5px 10px 5px 10px;
}
#container {
position:absolute;
width:740px;
}

#header{
position:relative;
width: 740px;
height: 140px;
background-color:#333;
margin:0;
}
#menu {
position:relative;
width:740px;
height: 23px;
background-color:#999;
margin:0;
}
#main {
position:relative;
width:740px;
background-color:#666;
margin:0;
}
#bottom{
position:relative;
width:740px;
height: 23px;
background-color:#999;
margin:auto;

}

</style>
</head>

<body>
<div id="container">

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

<div id="menu"><p>menu</p></div>

<div id="main"><p>main</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique
tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et,
orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel
purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra
risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat.
Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend,
arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat
dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum,
diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse
platea dictumst.</p>
<p>Donec diam leo, tristique ac, sodales eu, tristique varius, est. Duis egestas
dui non ipsum facilisis commodo. Aliquam erat volutpat. Nullam pede neque, lacinia
eu, tincidunt a, mollis malesuada, augue. Quisque ac ligula ut velit porttitor
rhoncus. Praesent accumsan sagittis elit. Sed in arcu. Aenean vitae neque sit
amet felis dapibus tincidunt. Quisque sodales, neque sed nonummy eleifend, leo
est sagittis turpis, ac hendrerit pede mauris at dolor. Donec ut nisl eget dui
interdum condimentum. Nam massa quam, porttitor eget, feugiat vel, ullamcorper
ac, nibh. Pellentesque elit. Pellentesque consectetuer quam ut orci.</p></div>

<div id="bottom"><p>Bottom</p></div>

</div>

</body>
</html>

Länk till sidan:
http://member.webforum.nu/5092/divtest.html

Screenshots:
http://member.webforum.nu/5092/firefox.jpg
http://member.webforum.nu/5092/IE.jpg
http://member.webforum.nu/5092/mozilla.jpg
http://member.webforum.nu/5092/opera.jpg
http://member.webforum.nu/5092/safari.jpg

Lycka till! :birp

r/ Såg på din skiss att du ville ha lite padding mellan blocken. Jag utgick ifrån att det inte skulle vara något mellanrum alls... nåja... lätt att fixa. I IE 5 på mac så får du dock det önskade mellanrummet utan vidare ansträngning ;)

OkkidoMedlem sedan maj 20007 492 inlägg
#3

Tja.

Det ska inte vara något mellanrum mellan de olika lagerna utan det var enbart för att visa de olika lagerna. Men du tummen upp till tusen, underbart att du tar dig tid och fixar en så pass stor och till och med bifogar screenshots och hela köret! Säg till när det är något jag kan göra för dig! Tack till tusen!

Har inte hunnit testa själv, får bli när jag kommer hem från skolan.

Tack än en gång!

joel_sundkvistMedlem sedan feb. 2003240 inlägg
#4

nemas problemas :)

OkkidoMedlem sedan maj 20007 492 inlägg
#5

Kom på det nu när jag kollade efter en extra gång i skolan, jag skulle vilja att main diven ska vara x% hög. Alltså att den fyller ut allt tomt område i webbläsaren förutom header, menu och bottom. så som det är på https://www.trafikskolan.com nu.

OkkidoMedlem sedan maj 20007 492 inlägg
#6

*bumpar tråden* förlåt.

jarvkloMedlem sedan juli 20013 378 inlägg
#7

Oh well - Du har en teknisk lösning som du skulle kunna använda i http://www.webforum.nu/showthread.php?s=&postid=793241#post793241 även om den kanske är svår att söka sig fram till ;)

Här är din kod omhackad enligt det lösningsförslaget:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Div-test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body { /**/
color: #fff;
background-color:#ff6600;
margin:0;
padding:0; 
height:100%; /**/
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: #fff;
margin:0;
padding: 5px 10px 5px 10px;
}
#container {
width:740px;
min-height:100%; /**/
background-color:#666; /* samma som main */
}

#header{
width: 740px;
height: 140px;
background-color:#333;
margin:0;
}
#menu {
width:740px;
height: 23px;
background-color:#999;
margin:0;
}
#main {
width:740px;
background-color:#666;
margin:0;
}
#belowthebottom {
  height:28px;  /* samma som #bottom */
}
#bottom{
width:740px;
height: 28px; /* height = p height + p margin-top + p margin-bottom */
background-color:#999;
margin-top:-28px; /* samma som height */

}

</style>

<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->

</head>

<body>
<div id="container">

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

<div id="menu"><p>menu</p></div>

<div id="main"><p>main</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique
tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et,
orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel
purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra
risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat.
Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend,
arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat
dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum,
diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse
platea dictumst.</p>
<p>Donec diam leo, tristique ac, sodales eu, tristique varius, est. Duis egestas
dui non ipsum facilisis commodo. Aliquam erat volutpat. Nullam pede neque, lacinia
eu, tincidunt a, mollis malesuada, augue. Quisque ac ligula ut velit porttitor
rhoncus. Praesent accumsan sagittis elit. Sed in arcu. Aenean vitae neque sit
amet felis dapibus tincidunt. Quisque sodales, neque sed nonummy eleifend, leo
est sagittis turpis, ac hendrerit pede mauris at dolor. Donec ut nisl eget dui
interdum condimentum. Nam massa quam, porttitor eget, feugiat vel, ullamcorper
ac, nibh. Pellentesque elit. Pellentesque consectetuer quam ut orci.</p></div>

<div id="belowthebottom">&nbsp;</div>

</div>

<div id="bottom"><p>Bottom</p></div>

</body>
</html>

Förutom att jag tog bort alla "position" så är mina ändringar i CSS:en märkta med kommentarer.

I xhtml-koden så ligger förändringen i hur sidfoten läggs upp (med sitt "spökelement" under sig ;) ) samt den "villkorliga kommentaren" som sparkar till MSIE därbak så att designen funkar även där ;)

Testa: http://member.webforum.nu/2241/okkidos_bilskola.html :bire

OkkidoMedlem sedan maj 20007 492 inlägg
#8

Tack både joel_sundkvist och jarvklo! *bjuder på godis*

135 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)