Avatar billede Slettet bruger
23. august 2010 - 21:18 Der er 9 kommentarer og
1 løsning

Align

Dette .css klæber h.h.v. top og fod til over og underkant af browserens vindue. Ikke helt nemt har det været, at få det til at virke.
Problemet er så nu, at top og fod ikke lader sig centrere og hvordan gøres det?
(Jeg ved der er overflødig kode i .cssen)

body     {   
    background-color: #3366FF;
    vertical-align: bottom;
    text-align:center
    height:100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;   

}

#side    {
    text-align:center
    position:absolute;     
    width:800px;
    height:100%;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:auto;
    margin-right:auto;
    color:#FFFFFF;
    background:#00UU00;
    text-align:center; 
}

#topbar    {
    position:absolute;
    top:0px;
    right:0px;
    left:0px;
    height:40px;
    width:800px;
    text-align:        center;
    width:800px;
    background:#000000;
}

#footer {
    position:        absolute;
    bottom:            0px;
    right:0px;
    left:0px;
    height:            40px;
    width:            800px;
    text-align:        center;
    background:#000000;
}

#spalte1{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

#spalte2{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

#spalte3{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

p     {
    color:#99FFFF;
}   

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="da">

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style2.css">

</head>

<body>
<div id="side">
<div id="topbar"><p>test top</p></div>

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

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

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

<div id="footer"><p>test footer</p></div>
</div>

</body>

</html>
24. august 2010 - 05:59 #1
Du faar topbar og footer centreret ved i css'en at tilfoeje margin-right: auto; og margin-left: auto;
Avatar billede Slettet bruger
24. august 2010 - 09:29 #2
Det har jeg vel gjort.
Nu har jeg sat body til 100% og margin til auto hvilket vel burde resultere i, at indholdet blev centreret.
Men det gør det ikke.

body     {
    width:100%;   
    height:100%;
    margin-right: auto;
    margin left: auto;
    background-color: #3366FF;
}

#side    {
    position:absolute;
    width:800px;
    height:100%;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
    background-color:#FFFFFF;
    text-align:center; 
}

#topbar    {
    position:absolute;
    top:0px;
    height:40px;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    text-align:        center;
    background:#000000;
   
}

#footer {
    position:        absolute;
    bottom:            0px;
    margin-left:auto;
    margin-right:auto;
    height:            40px;
    width:            800px;
    text-align:        center;
    background:#000000;
}

#spalte1{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

#spalte2{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

#spalte3{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

p     {
    color:#99FFFF;
}
Avatar billede stenger Nybegynder
24. august 2010 - 11:20 #3
I stedet for at smide margin auto på en hulens masse del-elementer, så lav en container rundt om alt indholdet (lige efter body start).

Giv denne en bredde og margin-left: auto; og margin-right:auto;. Så slipper du for at have det på alle elementerne inde i denne omkransende div.

Derudover skal du fjerne auto-margin fra body.

/Stenger
Avatar billede Slettet bruger
24. august 2010 - 11:31 #4
Jeg ser lige hvad en container er...
Avatar billede stenger Nybegynder
24. august 2010 - 13:47 #5
Det er bare en div, der ligger rundt om alle de andre divs.

Kald den hvad du vil, jeg plejer bare at kalde den id="container".

Altså:

<div id="container">
Heri ligger dine andre divs...
</div>

Altså, bare en omkransende div, som så har margin auto. Så slipper du for at skulle smide det på alle del-elementerne.

/Stenger
Avatar billede olsensweb.dk Ekspert
24. august 2010 - 14:49 #6
<div id="container"> er vel det du kalder <div id="side">


dette er tæt på det jeg tror du ønsker

body    {
    width:100%; 
    height:100%;
    margin-right: auto;
    margin-left: auto;
    background-color: #3366FF;
}

#side    {
    position:relative;  /* absolute */
    width:800px;   
    height:100%;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
    background-color:#FFFFFF;
    text-align:center;
    PADDING-BOTTOM: 40px; /* tilføjet */
    OVERFLOW: auto;  /* tilføjet */
}

#topbar    {
    position:absolute;
    top:0px;
    height:40px;
    width:800px;
/*   
    margin-left:auto;
    margin-right:auto;
*/
    text-align:        center;
    background:#000000;
 
}

#footer {
  position:fixed;  /* absolute */
  bottom:            0px;
    clear:both; /* tilføjet */
/*
margin-left:auto;
margin-right:auto;
*/
    height:            40px;
    text-align:        center;
    background:#000000;
    width:800px;   
}

#spalte1{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

#spalte2{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

#spalte3{
    float:left;
    width: 33%;
    margin-top:130px;
    border: 1px solid black;
    background: white;
}

p    {
    color:#99FFFF;
}
Avatar billede Slettet bruger
24. august 2010 - 15:03 #7
Hej Ronols.
Det er rigtigt.
Men jeg forstår ikke helt det hele ;)
PADDING-BOTTOM har du sat til 40px;
Men siden (så vidt jeg kan se) når så kun 40px; under spalterne.
Sætter jeg derimod PADDINGS til 100% fylder siden det hele (fra top til bund i browseren med header og footer)
Avatar billede olsensweb.dk Ekspert
24. august 2010 - 15:23 #8
>PADDING-BOTTOM har du sat til 40px;
jeg har valgt at have bunden ligge fast, det vil du se når der kommer merer tekst på, hænger sammen med OVERFLOW: auto;, jeg ved ikke om det er det du ønsker.
jeg ved heller ikke om du ønsker at toppen skal flyde med op som den gør nu eller være låst fast, ses også først med merer tekst

du kan evt tage et kig på disse 2 link
http://www.webdesign101.dk/csslayout/equal_height_spalter.php
http://www.webdesign101.dk/csslayout/ex/eksempel_1.html

Webdesign 101- Jørgen Farum Jensen, skriver en del i nyhedsgruppen
dk.edb.internet.webdesign.html.
Avatar billede Slettet bruger
24. august 2010 - 15:32 #9
Så kigger jeg der.
Men jeg har sat "top" til fixed så den bliver hvor den skal ;)
Har lige et problem med float som er sat til left.
Faktisk skal spelterne ligge centreret. Float "center" hjælper ikke her. Hvad skal der så bruges?
Sender du et svar.
Avatar billede olsensweb.dk Ekspert
24. august 2010 - 16:13 #10
>Men jeg har sat "top" til fixed så den bliver hvor den skal ;)
ser også pænest ud, efter min mening, men jeg bruger det også til menu

>Har lige et problem med float som er sat til left.
det er spaldernes indbyrdes forhold, de skal være left, ellers ved jeg ikke hvad du mener med center, det har ikke noget med indholdet at gøre, der skal du jo anvende text-align
læs evt http://www.webdesign101.dk/csslayout/float_layout.php
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