Centrera innehållet i en div

10 svar · 400 visningar · startad av nikolas_helsing 10 jan. 2005

nikolas_helsingMedlem sedan juni 200448 inlägg

Frågan10 jan. 2005 12:11#1

Håller på att göra en ny design till mitt jobbs hemsida. Kodar enligt XHTML 1.0 Strict.

Behöver hjälp med designen till menyn. Jag vill centrera min meny som ligger i div "link". Jag kan lösa det med en nödlösning, men jag vill ha snygg kod och enligt strict. Visar nödlösningen senare, presenterar först min kod.

Koden för html-sidan som lägger ut divarna.

<div id="link">

<div id="nav1">
<ul>
<li>Länk 1</li>
</ul>
</div>

<div id="nav2">
<ul>
<li>Länk 2</li>
</ul>
</div>

</div>

CSS-koden som beskrivar layouten för menyn.

html, body {
background-color: #ECFFFF;
}

#link {
width: 120px;
height: 425px;
position: absolute;
top: 97px;
left: 50%;
margin-top: 0px;
margin-left: -390px;
background-color: #F6FEFE;
border: 1px #000000 solid;
z-index: 2;
}

#nav1{background-color:#EAFFFF;width:100px;border:solid 1px black; valign:center}
#nav1 ul{list-style-type:none;margin:0;padding:0;border:none}
#nav1 li{display:block;margin:0;padding:0.25em 0.5em 0.25em 1em;width:100%;border-top:1px solid black}
html>body #nav1 li{width:auto}
#nav1 li:first-child{border:none}

#nav2{background-color:#EAFFFF;width:100px;border:solid 1px black; valign:center}
#nav2 ul{list-style-type:none;margin:0;padding:0;border:none}
#nav2 li{display:block;margin:0;padding:0.25em 0.5em 0.25em 1em;width:100%;border-top:1px solid black}
html>body #nav2 li{width:auto}
#nav2 li:first-child{border:none}

Detta är nödlösningen för att lösa centreringen som jag är ute efter.

<div id="link">

[B]<center>[/B]

<div id="nav1">
<ul>
<li>Länk 1</li>
</ul>
</div>

<div id="nav2">
<ul>
<li>Länk 2</li>
</ul>
</div>

[B]<center>[/B]

</div>

Har ni någon tanke på hur man ska göra för att centrera innehållet i <div id="link"> i css-filen?

Så här ser det ut i dagsläget:

Förhandsgranskning

Tackar för all hjälp! :)

Edit: Presenterar nu hela innehållet i css:en.

adeMedlem sedan juli 20041 081 inlägg

10 jan. 2005 12:17#2

adeMedlem sedan juli 20041 081 inlägg

10 jan. 2005 12:21#3

Oj jag läste fel.

Testa detta istället

<div style="center"

eller

<div style="padding-center"

Osäker på divvar :)

nikolas_helsingMedlem sedan juni 200448 inlägg

10 jan. 2005 12:25#4

ade skrev:

<div align="center" id="link">

Det fungerar! :D Men blir inte validerad enligt XHTML 1.0 Strict. Validerar jag sidan som Transitional så går den igenom.

Mitt mål är att all design ska ligga i css-filen. Vet du om det är möjligt att åstakomma samma sak genom attribut i css-filen.

Annars får jag sänka mina krav och köra Transitional!

adeMedlem sedan juli 20041 081 inlägg

10 jan. 2005 12:32#5

Humm. Testa detta.

Style.css


a.div{ 
valign="center";

Fungerar inte det så testa att skriva align i css:en.

martinMedlem sedan apr. 2000313 inlägg

10 jan. 2005 12:59#6

eller bara:

#link {text-align:center}

/ m a r t i n

nikolas_helsingMedlem sedan juni 200448 inlägg

10 jan. 2005 13:01#7

ade skrev:

Oj jag läste fel.

<div align="center" id="link">

Jag kommer att använda mig av detta och koda sidan enligt transitional. Det kostar alldeles för mycket att lägga tid på det.

Ska lägga ner mer tid på det privat och se om jag kan hitta en annan lösning!

martin skrev:

eller bara:
#link {text-align:center}
/ m a r t i n

Det fungerar delvis, det påverkar endast texten. Inte i mitt fall där andra divar som ligger i en div.

Tack för hjälpen! :D

adeMedlem sedan juli 20041 081 inlägg

10 jan. 2005 13:12#8

Okej. inga problem.

kaxigtMedlem sedan okt. 2004636 inlägg

10 jan. 2005 13:16#9

testa - float:center; - kanske det funkar på själva diven, alternativt med position:relative; sedan text-align:left; på själva texten. Bara en tanke...

red:
Vid närmare granskning av din stylesheet så ser jag ingen märkning för "link"

<body>

[B]<div id="link">[/B]  <---var är id-märkningen link i css:en?
<div id="nav1">
<ul>
<li>Länk 1</li>
</ul>
</div>

<div id="nav2">
<ul>
<li>Länk 2</li>
</ul>
</div>

</div>
</body>

Du börjar i body med <div id="link"> men var är id-märket för just link? Om du sätter ut ett sådant och formaterar dess innehåll så kommer du att se att dina länkblock hamnar där de ska ;)

echoSweMedlem sedan nov. 20041 189 inlägg

10 jan. 2005 18:18#10

Ade :s
*går och gömmer mig under täcket*

nikolas_helsingMedlem sedan juni 200448 inlägg

10 jan. 2005 19:16#11

kaxigt skrev:

testa - float:center; - kanske det funkar på själva diven, alternativt med position:relative; sedan text-align:left; på själva texten. Bara en tanke...

red:
Vid närmare granskning av din stylesheet så ser jag ingen märkning för "link"
<body>

[B]<div id="link">[/B]  <---var är id-märkningen link i css:en?
<div id="nav1">
<ul>
<li>Länk 1</li>
</ul>
</div>

<div id="nav2">
<ul>
<li>Länk 2</li>
</ul>
</div>

</div>
</body>
Du börjar i body med <div id="link"> men var är id-märket för just link? Om du sätter ut ett sådant och formaterar dess innehåll så kommer du att se att dina länkblock hamnar där de ska ;)

Jodå, jag har id:n "link" med, bara att jag inte visar den i det första inlägget. Du kan se css:en här:

http://member.webforum.nu/7548/centreringavmeny_v1.css

Har editerat mitt första inlägg där jag presenterar id:n "link" också.

Har dock löst problemet nu. Tackar för all hjälp! :D