webForumDet fria alternativet
Logga in

Problem med Centrering

14 svar · 385 visningar · startad av mrniceguy88

mrniceguy88Medlem sedan mars 200717 inlägg
#1

Har gjort en företagshemsida i Adobe Golive och vill nu centrera hela sidan som består av 5 sidor och en mall.

Hur gör jag för att få alla sidor centrerade?

I basic.css står det:

body { position: absolute; border: solid 1px #24d80a; outline: solid 0 #24d80a; }

p { }

td { }

a:link { }

a:visited { }

a:hover { }

a:active { }

Behöver hjälp så fort som möjligt eftersom hemsidan måste vara upplagd snart!

mvh/mrniceguy

Danne VMedlem sedan aug. 20068 090 inlägg
#2

Man måste se hela sidan (koden) för att kunna ge korrekt svar med en gång. Annars blir det gissningar.

silfverMedlem sedan apr. 200312 679 inlägg
#3

Du skulle kunna pröva följande:

body {margin: 0 auto; width: 600px; /* eller vad du nu vill ha */}

Men annars är det som Danne V skriver att vi måste se mer kod.

mrniceguy88Medlem sedan mars 200717 inlägg
#4

såhär?

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Team Trosam</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"><!--
#layer1 { height: 60px; width: 580px; left: 18px; top: 18px; position: absolute; visibility: visible; }
#layer2 { height: 40px; width: 580px; left: 18px; top: 90px; position: absolute; visibility: visible; }
#layer3 { background-color: white; border: solid 1px #24d80a; height: 618px; width: 580px; left: 18px; top: 160px; position: absolute; visibility: visible; }
--></style>
</head>

<body>
<div id="layer1">
<img src="image/HEADER2.png" alt="" height="60" width="580" border="0" livesrc="../web-data/SmartObjects/HEADER.psd" /></div>
<div id="layer2">
<a href="Sida1.html"><img src="image/startsida2.png" alt="" height="40" width="116" border="0" livesrc="../web-data/SmartObjects/startsida.psd" /></a><a href="Sida2.html"><img src="image/utbildn2.png" alt="" height="40" width="115" border="0" livesrc="../web-data/SmartObjects/utbildn.psd" /></a><a href="Sida3.html"><img src="image/teamet2.png" alt="" height="40" width="115" border="0" livesrc="../web-data/SmartObjects/teamet.psd" /></a><a href="Sida4.html"><img src="image/bilder.png" alt="" height="40" width="117" border="0" livesrc="../web-data/SmartObjects/biilder.psd" /></a><a href="Sida5.html"><img src="image/kontakta2.png" alt="" height="40" width="117" border="0" livesrc="../web-data/SmartObjects/kontakta.psd" /></a></div>
<div id="layer3">
<div style="position:relative;width:580px;height:629px;-adbe-g:p;">
<div style="position:absolute;top:32px;left:144px;width:288px;height:208px;-adbe-c:c">
<div align="center">
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">Vill du hitta den livsform </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">och det beteendemönster som leder </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">dig framåt. </font><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">En livsform som skapar </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">förutsättningar för att ge kraft </font><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">till ett </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">liv som steg för steg, tar dig till </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">det </font><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">Mål du vill nå </font></p>
<div align="center"></div>
</div>
</div>
<div style="position:absolute;top:320px;left:160px;width:256px;height:98px;-adbe-c:c">
<div align="center">
<p><font size="3" face="Century Gothic, Courier New, Courier, Monaco, monospace">Anmäl dig till</font></p>
<p><font size="3" face="Century Gothic, Courier New, Courier, Monaco, monospace">TeamTROSAM's </font><font size="3" face="Century Gothic, Courier New, Courier, Monaco, monospace">utbildning</font></p>
<div align="center">
<div align="center"></div>
</div>
</div>
</div>
<div style="position:absolute;top:484px;left:64px;width:448px;height:144px;-adbe-c:c">
<div align="center">
<font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">En samverkan mellan myndigheter och organisationer, samt delar av Trosa komuns näringsliv. </font>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">Trosa komun Försäkringskassan Vårdcentralen Arbetsförmedlingen</font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">RAR samverkansförbundet Sörmland ESF rådet</font></p>
</div>
</div>
<div style="position:absolute;top:448px;left:16px;width:544px;height:8px;">
<hr size="1" width="544" />
</div>
<div style="position:absolute;top:240px;left:208px;width:176px;height:68px;-adbe-c:c">
<div align="center">
<font size="7" color="#24d80a" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">?</font></div>
</div>
</div>
</div>
<p></p>
</body>

</html>

Danne VMedlem sedan aug. 20068 090 inlägg
#5

Det ser ut som om du har flera lösa div-containers. Då måste man "samla ihop" dom i en större div som man sedan formaterar. Det är ganska lätt.

Omedelbart efter <body> skriver du <div id="wrapper"> så här:

<body>
<div id="wrapper">

Sen går du ner, nästan så långt du kan i koden och lägger in motsvarande "stängningstagg":

</div>
</body>

Slutligen ska du tala om för den där "wrappern" att den ska vara i mitten på sidan. Det gör du uppe bland stilarna (eller i en länkad stilmall):

#wrapper {
width:580px;
margin: 0 auto
}

Typ....

mrniceguy88Medlem sedan mars 200717 inlägg
#6

Tack för hjälpen daniel!

har gjort precis som du sa, och la in
#wrapper {
width:580px;
margin: 0 auto
}

i basic.css? men ingenting hände..

Danne VMedlem sedan aug. 20068 090 inlägg
#7

mrniceguy88 skrev:

Tack för hjälpen daniel!

har gjort precis som du sa, och la in
#wrapper {
width:580px;
margin: 0 auto
}

i basic.css? men ingenting hände..

Konstigt. Kan vara att gamla stilmallen finns i cachen. Kör reload av sidan några ggr, eller testa i annan webbläsare.

Om det inte funkar, så skriver vi väl ut stilen helt istället:

#wrapper {
width:580px;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}

Har du lagt in koden i sidan OK (efter/före body-taggar) så ska det funka. Om inte, posta koden igen.

mrniceguy88Medlem sedan mars 200717 inlägg
#8

såhär ser koden ut nu:

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Team Trosam</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"><!--
#layer1 { height: 60px; width: 580px; left: 18px; top: 18px; position: absolute; visibility: visible; }
#layer2 { height: 40px; width: 580px; left: 18px; top: 90px; position: absolute; visibility: visible; }
#layer3 { background-color: white; border: solid 1px #24d80a; height: 618px; width: 580px; left: 18px; top: 160px; position: absolute; visibility: visible; }
--></style>
</head>

<body>
<body>
<div id="wrapper">
<div id="layer1">
<img src="image/HEADER2.png" alt="" height="60" width="580" border="0" livesrc="../web-data/SmartObjects/HEADER.psd" /></div>
<div id="layer2">
<a href="Sida1.html"><img src="image/startsida2.png" alt="" height="40" width="116" border="0" livesrc="../web-data/SmartObjects/startsida.psd" /></a><a href="Sida2.html"><img src="image/utbildn2.png" alt="" height="40" width="115" border="0" livesrc="../web-data/SmartObjects/utbildn.psd" /></a><a href="Sida3.html"><img src="image/teamet2.png" alt="" height="40" width="115" border="0" livesrc="../web-data/SmartObjects/teamet.psd" /></a><a href="Sida4.html"><img src="image/bilder.png" alt="" height="40" width="117" border="0" livesrc="../web-data/SmartObjects/biilder.psd" /></a><a href="Sida5.html"><img src="image/kontakta2.png" alt="" height="40" width="117" border="0" livesrc="../web-data/SmartObjects/kontakta.psd" /></a></div>
<div id="layer3">
<div style="position:relative;width:580px;height:629px;-adbe-g:p;">
<div style="position:absolute;top:32px;left:144px;width:288px;height:208px;-adbe-c:c">
<div align="center">
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">Vill du hitta den livsform </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">och det beteendemönster som leder </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">dig framåt. </font><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">En livsform som skapar </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">förutsättningar för att ge kraft </font><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">till ett </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">liv som steg för steg, tar dig till </font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">det </font><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">Mål du vill nå </font></p>
<div align="center"></div>
</div>
</div>
<div style="position:absolute;top:320px;left:160px;width:256px;height:98px;-adbe-c:c">
<div align="center">
<p><font size="3" face="Century Gothic, Courier New, Courier, Monaco, monospace">Anmäl dig till</font></p>
<p><font size="3" face="Century Gothic, Courier New, Courier, Monaco, monospace">TeamTROSAM's </font><font size="3" face="Century Gothic, Courier New, Courier, Monaco, monospace">utbildning</font></p>
<div align="center">
<div align="center"></div>
</div>
</div>
</div>
<div style="position:absolute;top:484px;left:64px;width:448px;height:144px;-adbe-c:c">
<div align="center">
<font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">En samverkan mellan myndigheter och organisationer, samt delar av Trosa komuns näringsliv. </font>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">Trosa komun Försäkringskassan Vårdcentralen Arbetsförmedlingen</font></p>
<p><font size="2" face="Century Gothic, Courier New, Courier, Monaco, monospace">RAR samverkansförbundet Sörmland ESF rådet</font></p>
</div>
</div>
<div style="position:absolute;top:448px;left:16px;width:544px;height:8px;">
<hr size="8" width="544" />
</div>
<div style="position:absolute;top:240px;left:208px;width:176px;height:68px;-adbe-c:c">
<div align="center">
<font size="7" color="#24d80a" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">?</font></div>
</div>
</div>
</div>
<p></p>
</div>
</body>

</html>

och basic.css

body { position: absolute; border: solid 1px #24d80a; outline: solid 0 #24d80a; }
#wrapper {
width:580px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left; auto;
}

}

p { }

td { }

a:link { }

a:visited { }

a:hover { }

a:active { }

Danne VMedlem sedan aug. 20068 090 inlägg
#9

Du en lös klammer i css-filen

} <- ta bort denna

p { }

åsså har det smugit sig in ett semikolon istället för vanligt kolon:

margin-left; auto;

ska vara

margin-left: auto;
mrniceguy88Medlem sedan mars 200717 inlägg
#10

Har ändrat detta men sidan är fortfarande inte centrerad..

Jag wrappade alltså divarna i index.html..
har ju 5 sidor till och en mall, borde jag inte lägga in något i mallen?
mallen sköter så att headern och länkarna ligger kvar medans "content" ändras efter länkarna..

såg också att den enda skillnaden är en linje kanske 1px hög täcker hela sidan längst upp?

Danne VMedlem sedan aug. 20068 090 inlägg
#11

OK, vi pular vidare (och jag skäms för att jag inte såg detta förut):

Testa att ta bort all stil för body. Jag fattar inte vad det kan vara för nåt. Har aldrig någonsin sett "position:absolute" för body. Alltså:

body { position: absolute; border: solid 1px #24d80a; outline: solid 0 #24d80a; }

ska bli

body {
margin:0px;
padding:0px
 }

och stilen för wrappern ska vara:

#wrapper {
position:relative;
width:580px;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}

Testa det...

Danne VMedlem sedan aug. 20068 090 inlägg
#12

Du lägger sen in

<body>
<div id="wrapper">
... innehållet här....
</div>
</body>

i dom andra sidorna också.

mrniceguy88Medlem sedan mars 200717 inlägg
#13

sådär! nu centrerades iaf index.html! :) alltså startsidan..
men när jag provar de andra länkarna åker sidan tillbaka i vänsterkant,
hur gör jag nu?

EDIT: du var snabbare än mig danne.. ;)

Danne VMedlem sedan aug. 20068 090 inlägg
#14

Sen när jag tittar ännu närmare på koden, så ser jag att du har en massa font-taggar och att du länkar till .psd-filer (som du bl.a. kallar för .png-filer). Sen vet jag inte vad attributet "livesrc" är för nåt. Använder du GoLive eller nåt annat program? Det verkar nämligen som om "livesrc" är nåt som skapats för ett program och gjort för att användas lokalt under utvecklingen - inte live....

mrniceguy88Medlem sedan mars 200717 inlägg
#15

jo jag använder golive..hoppas bara på att det det inte påverkar hemsidans utseende när jag lägger upp den då..

i golive så finns det ju smartobjects, som jag sparar .psd filer i från photoshop och lägger sedan på hemsidan, golive gör sedan om bilden till det filformat man själv väljer och i mitt fall .png. Filerna sparas sedan i web-content!

146 ms totalt · 3 externa anrop · v20260731065814-full.0e50b1ef
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
143 ms — hämta tråd, inlägg och bilagor (db)