WN
Sidan 1 av 2 1 2
Visa 40 inlägg från det här ämnet på en sida

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Centrering med CSS? (https://www.wn.se/forum/showthread.php?t=26891)

Dundret 2008-02-04 20:19
Hej,
Håller på och knåpar med en ny hemsida, och jag tänkte samtidigt prova något nytt, bygga den av css istället för tables.

Men nu har jag fastnat lite på hur jag får sidan centrerad, oavsett vad besökarna har för upplösning på sina skärmar.
Har suttit och sökt och testat mig fram men jag får inte till det riktigt, så en liten knuff framåt skulle vara väldigt tacksamt, nu innan man blir alldeles för gråhårig :P


Lite kod jag kan bjuda på:

CSS -filen

Kod:
#Table_01 {
        position:absolute;
        left:0px;
        top:0px;
        width:1000px;
        height:800px;
       
}

#index-01_ {
        position:absolute;
        left:0px;
        top:0px;
        width:126px;
        height:50px;
}

#index-02_ {
        position:absolute;
        left:126px;
        top:0px;
        width:243px;
        height:50px;
}

#index-03_ {
        position:absolute;
        left:369px;
        top:0px;
        width:268px;
        height:50px;
}

#index-04_ {
        position:absolute;
        left:637px;
        top:0px;
        width:197px;
        height:50px;
}

#index-05_ {
        position:absolute;
        left:834px;
        top:0px;
        width:166px;
        height:17px;
}

#index-06_ {
        position:absolute;
        left:834px;
        top:17px;
        width:137px;
        height:33px;
}

#index-07_ {
        position:absolute;
        left:971px;
        top:17px;
        width:29px;
        height:33px;
}

#index-08_ {
        position:absolute;
        left:0px;
        top:50px;
        width:1000px;
        height:58px;
}

#index-09_ {
        position:absolute;
        left:0px;
        top:108px;
        width:1000px;
        height:66px;
}

#index-10_ {
        position:absolute;
        left:0px;
        top:174px;
        width:1000px;
        height:61px;
}

#index-11_ {
        position:absolute;
        left:0px;
        top:235px;
        width:24px;
        height:31px;
}

#index-12_ {
        position:absolute;
        left:24px;
        top:235px;
        width:951px;
        height:31px;
}

#index-13_ {
        position:absolute;
        left:975px;
        top:235px;
        width:25px;
        height:31px;
}

#index-14_ {
        position:absolute;
        left:0px;
        top:266px;
        width:58px;
        height:534px;
}

#index-15_ {
        position:absolute;
        left:58px;
        top:266px;
        width:890px;
        height:14px;
}

#index-16_ {
        position:absolute;
        left:948px;
        top:266px;
        width:52px;
        height:534px;
}

#content_ {
        position:absolute;
        left:58px;
        top:280px;
        width:890px;
        height:489px;
}

#index-18_ {
        position:absolute;
        left:58px;
        top:769px;
        width:890px;
        height:31px;
}


HTML -filen

Kod:
<div id="Table_01">
        <div id="index-01_">
 <img id="index_01" src="images/index_01.jpg" width="126" height="50" alt="" />
        </div>
        <div id="index-02_">
 <img id="index_02" src="images/index_02.jpg" width="243" height="50" alt="" />
        </div>
        <div id="index-03_">
 <img id="index_03" src="images/index_03.jpg" width="268" height="50" alt="" />
        </div>
        <div id="index-04_">
 <img id="index_04" src="images/index_04.jpg" width="197" height="50" alt="" />
        </div>
        <div id="index-05_">
 <img id="index_05" src="images/index_05.jpg" width="166" height="17" alt="" />
        </div>
        <div id="index-06_">

        </div>
        <div id="index-07_">
 <img id="index_07" src="images/index_07.jpg" width="29" height="33" alt="" />
        </div>
        <div id="index-08_">
 <img id="index_08" src="images/index_08.jpg" width="1000" height="58" alt="" />
        </div>
        <div id="index-09_">
 <img id="index_09" src="images/index_09.jpg" width="1000" height="66" alt="" />
        </div>
osv..
osv..

JLE 2008-02-04 20:28
Gör såhär:
#wrap{
margin:0 auto;
width:80em;
}

Och inneslut sedan hela sidan i den som en div.

Dundret 2008-02-04 21:00
Citat:
Originally posted by JLE@Feb 4 2008, 21:28
Gör såhär:
#wrap{
margin:0 auto;
width:80em;
}
Och inneslut sedan hela sidan i den som en div.
Hmm, verkar inte få det att fungera, tror jag.. ska man göra såhär:

Lägga denna snut t.ex. längst upp i CSS filen?
Kod:

#wrap{
margin:0 auto;
width:80em;
}
Sedan i HTML filen, lägga till

Kod:
<div id="wrap"> och sedan sist avsluta med </div>

Alltså så det blir såhär:

<div id="wrap">
<div id="Table_01">
<div id="index-01_">
 <img id="index_01" src="images/index_01.jpg" width="126" height="50" alt="" />
</div>
<div id="index-02_">
 <img id="index_02" src="images/index_02.jpg" width="243" height="50" alt="" />
</div>
eller är jag ute och cyklar nu kanske?

Dundret 2008-02-04 21:22
Jag har även lagt upp en test sidan som ni kan kika på, den som vill..

http://dundret.mine.nu/sidan/

Dundret 2008-02-04 22:32
Sorry om jag spammar :blink: Men jag kanske har fått det att fungera nu, det vore schysst om ni kunde testa hur det fungerar för er med era upplösningar och webläsare.

http://dundret.mine.nu



Och för den som är intresserad, kan jag även ge kodsnutten till :)

Cosma 2008-02-04 23:08
Kan svara för de andra länken du la att den funkar fint fint i FF med högupplöst skärm 1600.

guran 2008-02-04 23:36
Detta hör inte till ditt problem, men prova med background-image i CSS i stället för att lägga bilder med html när bilderna tillhör layouten.

Dundret 2008-02-05 09:09
Ops, råkade skriva fel adress andra gången, korrekta adressen är:

http://dundret.mine.nu/sidan/

Men det verkar fungera iaf, kan även bjuda på kodsnutten :)

Kod:
.wrapper {
position:relative;
margin:0 auto;
text-align:left;

width:1000px;
}


Och sedan;

<div class="wrapper">

Citat:
Originally posted by guran@Feb 5 2008, 00:36
Detta hör inte till ditt problem, men prova med background-image i CSS i stället för att lägga bilder med html när bilderna tillhör layouten.
Tackför tipset, det blir till att jag gör så istället!



Fler tips tages tacksamt emot, då jag är en liten nybörjare endå :P

Kurdix 2008-02-10 22:34
Om det är img-taggar du vill centrera så kör med text-align:center;

PortsStudio 2008-02-13 09:12
Det fungerar även för hela sidor, "text-align:center;"

Ex. <body style="text-align:center;">

Går givetvis att lägga i css-filen istället, "#body {" osv...


Alla tider är GMT +2. Klockan är nu 02:54.
Sidan 1 av 2 1 2
Visa 40 inlägg från det här ämnet på en sida

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson