Avatar billede Peter Praktikant
11. marts 2004 - 19:20 Der er 6 kommentarer og
1 løsning

Problemer med at positionere elementer med css.

Hej eksperter
Jeg har to problemer.
Jeg er ved at lave en hjemmeside hvor jeg har 3 elementer: top, menu, indhold. Disse tre forsøger jeg at placere med css hvor jeg samtidigt har variable margins så siden er centreret og kan ses i opløsning fra 800*600.
Jeg har lavet to blokke, den ene indeholder toplogoet og den anden indeholder menu til venstre og indhold til højre, men det kan jeg ikke få den til. Den bliver placeret nedenunder menu. Mit stylesheet kan ses her:
www.nskjaer.dk/koel/style.css
Jeg er ret meget nybegynder med css, så der er sikkert flere fejl. Men er der nogle der kan forklare mig hvordan jeg kan få det placeret rigtigt og samtidigt have variable margins så siden vises fint i alle opløsninger. Desuden vil jeg gerne have en bund, men denne er jeg helt på bar bund med at placere da jeg ikke ved hvor langt nede den skal placeres.
siden kan ses her: www.nskjaer.dk/koel
Blokkene er indsat med koden:
<body>
<div id="banner">
<?php include ("banner.html") ?>
</div>
<div id="bodyframe">
<div id="menu">
<?php include ("menu.html") ?>
</div>
<div id="content">
<?php
<ligegyldigt php klippet ud>
include ($page1)
?>
</div>
</div>
</body>
Det andet problem er, at f.eks blokken med toplogoet er bredere end jeg mener den burde være. Jeg har indsat logoet i bredden 740px og blokken er 760px, det passer med 10px bremme hele vejen rundt om logoet i IE, men i mozilla er der 10px hele vejen rundt undtagen til højre, der er 30px. Hvordan løser jeg dette?
Avatar billede dr_nielsen Nybegynder
11. marts 2004 - 19:26 #1
Prøv med disse
body{text-align:center;}
#banner { width: 760px;    background: white; border: 1px solid black; }
#bodyframe { width: 760px; background: white; border: 1px solid black; }
#menu { float:left; width: 160px; background-color:#00B0F0; }
#content { width: 560px; float:right }   

Læg mærke til 'float'
Avatar billede krukken Mester
11. marts 2004 - 19:31 #2
body {text-align:center;}
body {text-align:right;}
body {text-align:left;}
Avatar billede Peter Praktikant
11. marts 2004 - 20:06 #3
krukken > Det må du gerne lige forklare. Det er et html-dokument, så der er jo kun en body.
dr_nielsen > Det prøver jeg lige.
Avatar billede Peter Praktikant
11. marts 2004 - 20:30 #4
dr_nielsen > Det ser ud til at virke som det skal i IE, men i Mozilla virker det ikke rigtigt som det skal, menu og content er ikke inde i bodyframe, desuden er siden ikke centreret. Det er ikke så slemt at den ikke er centreret, men det ville da være rart hvis den virkede rigtigt i de fleste browsere.
Jeg har ikke prøvet i andre browsere end Mozilla 1.6 og IE 6.0
Avatar billede dr_nielsen Nybegynder
11. marts 2004 - 21:29 #5
gør sådan her
body{text-align:center;}
#siteContainer {text-align:left}
#banner { width: 760px;    background: white; border: 1px solid black; }
#bodyframe { width: 760px; background: white; border: 1px solid black; }
#menu { float:left; width: 160px; background-color:#00B0F0; }
#content { width: 560px; float:right }   
.clear {clear:both;}
<div id="siteContainer">
  <div id="banner"></div>
  <div id="bodyFrame">
    <div id="menu"></div>
    <div id="content"></div>
    <div class="clear"></div>
  </div>
</div>

moz forstår ikke text-align på Elementer, men du kan løse det med et <center></center> omkring det hele
Avatar billede Peter Praktikant
11. marts 2004 - 22:06 #6
Det vil jeg lige kigge på om lidt, roder lige med noget lign jeg fandt et andet sted.
Avatar billede Peter Praktikant
18. marts 2004 - 10:49 #7
dr_nielsen > Din løsning ser brugbar ud, jeg gik imidlertidigt over til et andet design, så bliver ikke brugt pt. Men tak for hjælpen.
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