Avatar billede morpheus Nybegynder
22. oktober 2003 - 23:24 Der er 6 kommentarer og
1 løsning

POsitionering af elementer

Hej,

Jeg sidder og laver layout til en hjemmeside.

Her er jeg stødt ind i lidt problemer hvad angår højden på mine elementer.

Jeg har flg. sektioner:
top, menu, submenu, main, banner

Her er min CSS:

#top {
    height: 100px;
    width: 100%;
    background-color: #49727D;
}
#menu-p {
    position: absolute;
    height: 15px;
    width: 750px;
    left: 255px;
    top: 101px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
#submenu-p {
    position: absolute;
    height: 15px;
    width: 750px;
    left: 255px;
    top: 116px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
#main-p {
    position: absolute;
    height: 74%;
    width: 750px;
    left: 255px;
    top: 131px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    overflow-x: hidden;
    overflow-y: auto
}
#banner-p {
    position: absolute;
    height: 70px;
    width: 100%;
    top: 91%;
    background-color: #49727D;
}

Det ser altsammen meget fint ud, bortset fra at jeg mellem main og banner har et hul, hvor der er hvidt (ca. et par pixels højt).
Det samme gør sig gældende mellem banner, og broserens bund.
Er der en måde, hvor jeg kan gøre main 100% høj i forhold til placering af de andre elementer, og få banner til at være helt i bunden af siden?
Avatar billede nak-m Nybegynder
22. oktober 2003 - 23:27 #1
altså for at få banneret til at være i bunden kan du bare skrive
"bottom: 0px;" i stedet for "top: 91%;".
Avatar billede exp Juniormester
22. oktober 2003 - 23:27 #2
indsæt dette i css:

html, body {
  height : 100%;
  margin : 0px;
}
Avatar billede olebole Juniormester
22. oktober 2003 - 23:34 #3
<ole>

Og næsten vigtigst af alt: Sæt en DOC-TYPE (DTD) for dokumentet. Den fortæller browseren, hvilket sprog og hvilken version af dette, der er skrevet i. Den kan f.eks. se sådan ud:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
Det er _meget_ vigtigt, at URL'en er med i DTD'en ("http://www.w3.org/TR/html4/loose.dtd"). Uden den kan IE ikke tolke CSS korrekt - mens den vises i overensstemmelse med CSS-specifikationen i andre browsere.

/mvh
</bole>
Avatar billede olebole Juniormester
22. oktober 2003 - 23:34 #4
PS: DTD'en skal stå inden <html>
Avatar billede morpheus Nybegynder
23. oktober 2003 - 01:00 #5
Ok, det hjalp med banneret at sætte bottom: 0px.

Nu er problemet bare at få main til at fylde 100% mellem submenu og banner...

Hele HTML'en ser nu ud som følger:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>piercing-info.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
    height: 100%;
}
#top {
    height: 100px;
    width: 100%;
    background-color: #49727D;
}
#menu-p {
    position: absolute;
    height: 15px;
    width: 750px;
    left: 255px;
    top: 101px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
#submenu-p {
    position: absolute;
    height: 15px;
    width: 750px;
    left: 255px;
    top: 116px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
#main-p {
    position: absolute;
    height: 74%;
    width: 750px;
    left: 255px;
    top: 131px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    overflow-x: hidden;
    overflow-y: auto
}
#banner-p {
    position: absolute;
    height: 70px;
    width: 100%;
    bottom: 0px;
    background-color: #49727D;
}
.left {
    background-image: url(images/leftmenu.gif);
    background-repeat: repeat-y;
    background-position: right;
}
.right {
    background-image: url(images/rightmenu.gif);
    background-repeat: repeat-y;
    background-position: left;
}
-->
</style>
</head>

<body>
<div id="top" align="center"><img src="images/top_blue.jpg"></div>
<div id="menu-p">hovedmenu</div>
<div id="submenu-p">submenu</div>
<div id="main-p">
  <p>Main</p>
  </div>
<div id="banner-p">banner</div>
</body>
</html>
Avatar billede morpheus Nybegynder
23. oktober 2003 - 01:01 #6
Derudover, savner jeg et par tricks til at få positioneret menu, submenu og main, så disse bliver midt på siden (præcis 255px inde).

Altså så det passer i alle opløsninger.
Avatar billede morpheus Nybegynder
22. januar 2005 - 14:00 #7
Der er altså ingen der vil have point for dette spm.

Så jeg lukker det.
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