Avatar billede s_skytthe Nybegynder
24. maj 2008 - 17:53 Der er 4 kommentarer og
1 løsning

CSS layout

Hej Eksperter

Jeg har indtil videre altid opbyggede mine hjemmesider ved hjælp af <table>, men da jeg nu skal til at lave et større hjemmesideprojekt, har jeg overvejet at gå over til at lave det med CSS-layout, da jeg efter at have læst en del om det er blevet overbevist om at det er smart at man, med CSS, kan skille indhold og layout ad, samtidig med at jeg er blevet træt af at side og lede efter den rigtige tabelcelle til egentlige indhold, når man havde fået lavet en alt for kompleks tabel til selve layout’et.

Jeg har ikke den store erfaring med dette, faktisk ikke nogen når det kommer til at lave et layout kun med CSS, men det skal dog siges at jeg har lavet en del hjemmesider før og derfor ikke er nybegynder til hverken HTML eller CSS.

For at finde ud af hvordan dette skulle gribes an har jeg læst en del tutorials og lignende for at finde nogle eksempler på hvordan det skulle laves. Men det er endnu ikke lykkedes at finde det jeg skal bruge for at komme i gang. Enten har det været for simpelt eller også har det ikke været en centeret side. jeg har en ide om hvordan det kunne laves ved hjælp af DIV og så position:absolute; hvis det ikke lige var fordi at siden skulle være centeret, men nu hvor det er et krav at siden skal være centeret, samtidig med at siden har en fast størrelse i pixel pga. det grafiske design. Er jeg løbet tør for ideer om hvordan dette skal gribes an.

I "table-sprog" skal mit hjemmeside indeholde følgende:

- 1 række til banner
- 1 række til topmenu
- 1 række med 3 kolonner (til venstremenu, indhold og reklame/sponsor)
- 1 række til footer ( (c) og kontakt oplysninger)

hjemmesiden skal være 860px bred og centreret (Desuden med noget baggrundgrafik lavet i photoshop).

Her ses en skitse over hvordan siden skal opdeles.
http://img213.imageshack.us/img213/4223/designskitsesm2.jpg

Håber at der er nogle der kan hjælp med et løsningsmodel til dette.

På forhånd tak

-SSL
Avatar billede keysersoze Guru
24. maj 2008 - 19:27 #1
Der er ikke én måde at gøre det på men et forslag;

- lav en div med bredden 860 og margin auto.
- inde i den lægger du en div til din top menu, en main div til dine kolonner (og i denne lægger du også din baggrundsgrafik til den del) og en div til din footer.
- inde i din main div lægger du tre divs.
Avatar billede olebole Juniormester
25. maj 2008 - 13:10 #2
<ole>

Det er ganske fornuftigt at gå over til at lave sit layout i andre elementer end tables, men det gør det absolut ikke lettere i forhold til at 'finde den rigtige tabelcelle'. Ofte bliver tableless layout mere komplekst at overskue end layout, udført med tables  =)

/mvh
</bole>
Avatar billede notes2c Nybegynder
25. maj 2008 - 23:50 #3
Fandt et eksemple på cssplay, og med lidt tilretning kunne det være noget et at arbejde videre på.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | three column layout | simple version</title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="Cascading, Style, Sheets, CSS1, CSS2, CSS" />
<meta name="Description" content="CSS ~ Cascading Style Sheets" />
<style type="text/css">

html, body {margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px;}
/* The header and footer */
.headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}
.menu {display:block; height:30px; background:#ccc; color:#fff; text-align:center; padding:5px;font-size:30px;}

#wrapper {width:860px; margin: 0 auto;}
/* This bit does all the work */
#container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;}
#inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px; height: 600px;}
#left {float:left; position:relative; width:200px; left:0px;}
#right {float:right; position:relative; width:190px; right:0px;}
#center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
.clear {clear:both;}

/* Just to extend each column */
#inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
#inner a span {display:none;}
#inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
#inner a:active span, #inner a:focus span {display:block;}

a:visited, a {text-decoration:underline; cursor:pointer;}
a:hover {text-decoration:none; cursor:pointer;}

em {font-weight:bold;}
</style>
</head>

<body>
<div id="wrapper">
<div class="headfoot">Header</div>
<div class="menu">Menu</div>

<div id="container">
    <div id="inner">
        <div id="left"><a href="#"><em>CLICK</em> here to make the left column the longest<span>this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column</span></a></div>

        <div id="right"><a href="#"><em>CLICK</em> here to make the right column the longest<span>this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br /></span></a></div>

        <div id="center"><a href="#"><em>CLICK</em> here to make the middle column the longest<span>this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a></div>
           
        <div class="clear"></div>
    </div>
</div>

<div class="headfoot">Footer</div>

</div> <!-- End Wrapper -->
</body>
</html>
Avatar billede s_skytthe Nybegynder
26. maj 2008 - 23:35 #4
tak for hjælpen til at alle.

det endte dog med at blive metoden fra keysersoze jeg anvendte og det virker perfekt. så hvis du lægger et svar kan du få dine point
Avatar billede keysersoze Guru
27. maj 2008 - 17:51 #5
svar :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester