Avatar billede joshin Nybegynder
22. maj 2007 - 22:38 Der er 4 kommentarer og
1 løsning

CSS design

Hjælp! nu er det lige ved at jeg går tilbage til at bruge tables til design.

Jeg vil gerne have ialt 4 div's:
top: der ligger øverst i fuld brede
fod:  der ligge nederst (og nederst i vinduet), i fuld brede
venstre: i mellem top og fod, og brede bestemt af indhold
højre: til højre for venstre, som fylder ud til højre kant
!------------------!
!  top            !
!------------------!
!    !            !
! V  !  H          !
!    !            !
!------------------!
!  fod            !
!------------------!
Jeg vil gerne bruge hele vinduet (100% x 100%) uanset størrelse, så jeg vil ikke bruge faste størrelser.

Jeg har brug for at kunne lægge elementer med brede = 100% i "højre"-div'en så de fylder 100% af den plads der er tilrådighed ikke 100% af vinduet.

Hvordan skal jeg lave mit style sheet?
Avatar billede joshin Nybegynder
22. maj 2007 - 22:39 #1
"tegningen" blev ikke helt god,men jeg håber det er forståeligt aligevel
Avatar billede roenving Novice
23. maj 2007 - 07:48 #2
Jeg ville lave et design i en fast bredde, der passer til 'almindelige' browsere, og så sætte det midt i, det gøres ganske enkelt med et omkransende element, og højden kan sagtens sættes til 100%, men præcis det bliver lidt tricky, hvis man absolut vil have samme stylesheet til de fleste gængse browsere, der er ganske forskelligt opdateret mht. css !-)
Avatar billede w13 Novice
27. maj 2007 - 00:40 #3
Jaeh, jeg må give Roenving ret her. Anbefaler det samme, men hvis du insisterer på at bruge en "ufast" bredde i dit design, så har jeg engang løst det med noget "float: left;" på din venstre menu.. sådan mener jeg i hvert fald, det fungerede.
Avatar billede notes2c Nybegynder
28. maj 2007 - 14:13 #4
Du kunne jo gøre det på denne vis.

Og evt sæt #container width til 100% hvis det skal fylde det hele.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
#container
{
width: 98%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
-->
</style>
</head>

<body>

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>


</body>
</html>
Avatar billede joshin Nybegynder
29. maj 2007 - 21:36 #5
takker for input, nu kan jeg da komme videre
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