Avatar billede kgp43 Nybegynder
30. maj 2004 - 12:38 Der er 20 kommentarer og
1 løsning

Centrering af div's

Hejsa,

Jeg er ved at lave en topmenu og har i den forbindelse en del problemer. Menuen er delt op i 4 divs (flere bliver tilføjet senere), problemet er at de skal centreres (side om side).

Dette er min side: http://www.tackleprices.com/merchant/index.php



CSS:
-----------------------------------------
body {margin:0px;}
.center {text-align:center}

#tab1 {
    position: relative;
    top: 39px;
    height: 30px;
    width: 10%;
    margin: 0px;
    background-color: #002651;
}
#tab2 {
    position: relative;
    top: 39px;
    height: 30px;
    width: 10%;
    margin: 0px;
    background-color: #002651;
}
#tab3 {
    position: relative;
    top: 39px;
    height: 30px;
    width: 10%;
    margin: 0px;
    background-color: #002651;
}
#tab4 {
    position: relative;
    top: 39px;
    height: 30px;
    width: 10%;
    margin: 0px;
    background-color: #002651;
}



HTML:
-----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tackleprices.com | Merchant Area</title>
<link href="/merchant/styles/default.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="center">
  <div id="tab1">tab1</div>
  <div id="tab2">tab2</div>
  <div id="tab3">tab3</div>
  <div id="tab4">tab4</div>
</div>

<div id="mainmenu">
  <p>&nbsp;</p>
</div>

<div id="bottom-menu">
  <p>&nbsp;</p>
</div>

</body>
</html>
Avatar billede roenving Novice
30. maj 2004 - 12:47 #1
body {margin:0px;text-align:center;}/*IE-hack*/
.center {margin:0px auto;}/*css2-standard*/

-- og så skal du have float:left; ind i alle dine tabs ...
Avatar billede sukos Juniormester
30. maj 2004 - 12:48 #2
En div laver altid et nyt linieskift.
Prøv evt.
<div align="center">
<span id="tab1">noget</span>
<span id="tab2">noget andet</span>
</div>
Avatar billede kgp43 Nybegynder
30. maj 2004 - 12:51 #3
Sukos:

Nu ligger de side om side, men højden og længden er noget rod.
http://www.tackleprices.com/merchant/index.php
Avatar billede kgp43 Nybegynder
30. maj 2004 - 12:53 #4
Roenving: Virker heller ikke - den smider alle div'ene ud i venstre side (dog i den rigtige rækkefølge)
Avatar billede roenving Novice
30. maj 2004 - 12:57 #5
.center {margin:0px auto;width:40%}
Avatar billede kgp43 Nybegynder
30. maj 2004 - 13:00 #6
Roenving: Lidt bedre, men det ser stadig mærkeligt ud.
Jeg har valgt at smide dit forsøg over på en anden side:
http://www.tackleprices.com/merchant/index2.php
Avatar billede roenving Novice
30. maj 2004 - 13:16 #7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tackleprices.com | Merchant Area</title>
<link href="/merchant/styles/default.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {margin:0px;text-align:center;}
.center {margin:0px auto;width:40%;position:relative;}

.tab {
    position: relative;
    top: 39px;
    height: 30px;
    width: 25%;
    margin: 0px;
    background-color: #002651;
    float:left;
    color:#FBF9CA;
}

</style>
</head>
<body>

<div class="center">
  <div id="tab1" class="tab">tab1</div>
  <div id="tab2" class="tab">tab2</div>
  <div id="tab3" class="tab">tab3</div>
  <div id="tab4" class="tab">tab4</div>
</div>

<div id="mainmenu">
  <p>&nbsp;</p>
</div>

<div id="bottom-menu">
  <p>&nbsp;</p>
</div>

</body>
</html>
Avatar billede kgp43 Nybegynder
30. maj 2004 - 13:33 #8
Roenvig: Ser meget bedre ud, har dog nogle spørgsmål:

- Ser ud til der er problemer med tab4
- I min stylesheet har jeg ikke tab1, tab2... mere, men kun "tab", men alligevel bliver der henvist til tab1, tab2, tab3 og tab4 fra siden. Er det noget CSS selv finder ud af, er lidt tabt her
Avatar billede kgp43 Nybegynder
30. maj 2004 - 13:35 #9
Okay, weird - nu virker det :)

Vil dog gerne have et spar på det tab1, tab2... spørgsmål
Avatar billede kgp43 Nybegynder
30. maj 2004 - 13:39 #10
Jeg slettede alle id="tab1", tab2... etc, ser ikke ud til at have noget inflydelse.

Men nu når vi er ved det, kan du så forklare hvad dette betyder:
.center {margin:0px auto;width:40%;position:relative;}
Avatar billede roenving Novice
30. maj 2004 - 13:40 #11
CSS er baseret på arv og klasser, så jeg undrede mig faktisk over, at du havde 4 id-selektorer med samme indhold ...

Et id er en unik identifikator på et html-element (og har dermed ikke noget specifikt med layout-properties at gøre, men kan sagtens bruges til noget sådant !-)

En class-attribut er derimod en ting, som kan bruges på mange elementer, og er beregnet på at tillægge disse forskellige styles ...
Avatar billede roenving Novice
30. maj 2004 - 13:44 #12
.center {margin:0px auto;width:40%;position:relative;}

Elementer med klassen center skal:

-- have margin 0px i top og bund og auto i højre og venstre ...
-- have en bredde på 40% af det omkransende positionerede element (her body)
-- skal placere sig relativt efter den position, det har efter html-koden (her er der ikke modificeret ved placeringen, men denne indstilling gør, at vi kan bruge 25% på de underliggende divs !-)
Avatar billede kgp43 Nybegynder
30. maj 2004 - 13:52 #13
Okay

- Når jeg så skal have en ekstra "knap" (på 10%), så skal width ændres til 50%, korrekt?
Avatar billede roenving Novice
30. maj 2004 - 13:54 #14
Ja, og tab-klassen skal ændres til 20% !-)
Avatar billede kgp43 Nybegynder
30. maj 2004 - 13:58 #15
Det lyder jo godt, tror jeg har forstået det nu :D

Takker for hjælpen, ligger du lige et svar så du kan få point?
Avatar billede roenving Novice
30. maj 2004 - 14:04 #16
Velbekomme '-)
Avatar billede roenving Novice
30. maj 2004 - 14:30 #17
-- og tak for point ;~}
Avatar billede kgp43 Nybegynder
30. maj 2004 - 14:34 #18
:)
Avatar billede kgp43 Nybegynder
30. maj 2004 - 15:26 #19
lol, så er jeg her igen.

Har et mindre problem.
Menu'en er opbygget sådan at den har en vidde på 100%, men jeg vil gerne have en left margin på de enkelte div's. Problemet er at den så overstiger de 100%, hvorefter tab4 "falder ned". Jeg har prøvet at give dem en vidde på 100px i stedet for (og så en samlet vidde på 404px), men på smutter menu'en ud i venste side igen.

Hvordan tilføjer jeg en margin på 1px lettest?
Håber ikke jeg er til alt for meget besvær :)
Avatar billede roenving Novice
30. maj 2004 - 16:01 #20
Tjah, lidt skørt så det ud, men denne virkede umiddelbart:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tackleprices.com | Merchant Area</title>
<link href="/merchant/styles/default.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {margin:0px;text-align:center;}
.center {margin:0px auto;width:403px;position:relative;}

.tab {
    position: relative;
    top: 39px;
    height: 30px;
    width: 100px;
    margin: 0px 0px 0px 1px;
    background-color: #002651;
    float:left;
    color:#FBF9CA;
}
#tab1{margin:0px;}

</style>
</head>
<body>

<div class="center">
  <div id="tab1" class="tab">tab1</div>
  <div id="tab2" class="tab">tab2</div>
  <div id="tab3" class="tab">tab3</div>
  <div id="tab4" class="tab">tab4</div>
</div>

<div id="mainmenu">
  <p>&nbsp;</p>
</div>

<div id="bottom-menu">
  <p>&nbsp;</p>
</div>

</body>
</html>
Avatar billede kgp43 Nybegynder
30. maj 2004 - 16:04 #21
Jeg takker :)
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