positioning css

Måske misforstår jeg dig, men har du prøvet:

img.top{
text-align:center;
}

alle de forskellige komponenter på siden skal jo stå rigtigt i forhold til hinanden, både tekst, billeder, links osv..

jeg mener sådan så siden som helhed placerer sig i midten af skærmen, men stadigvæk så alle tingene på siden står rigtigt i forhold til hinanden

er det rigtigt at jeg kan gøre det via % istedet for px? synes ikke rigtigt at kunne få det til at fungere..

Ok. Så det er bare din body, du vil ændre på....?

body{
    text-align:center;
}
img.top{
    position:absolute;
    top: 199px;
    left: 5px;
}

eh, næ, det får jo bare teksten til at stå centreret istedet for venstrestillet...måske forklarer jeg det ikke godt nok. jeg prøver lige igen.

På min side har jeg både billeder, tekst, links, menu osv, som tilsammen danner en helhed og er placeret et bestenmt sted i forhold til hinanden, så de tilsammen danner et bestemt design. siden er lavet til 1024*768 men ses også fint i højrere opløsninger. Men i de høje opløsninger placerer hele designet sig lidt til venstre pga. alt er positioneret via px.
MEn så er det jeg gerne vil have hele designet til at placere sig i midten ligegyldigt hvilken opløsning brugeren har. sådan så selv hvis siden bliver set i en høj opløsning, så er der bare mere plads udenom selve designet end hvis man så den i en lav opløsning...

hmm ok. Jeg er vist stadig ikke helt med på i hvilken forbindelse du benytter "img.top", men:

du spørger også til brug af %. Det kan du sagtens:
eks:

img.top{
    position:absolute;
    top: 10%;
    left: 2%;
}

efter at ha tænkt lidt over det, tror jeg faktisk ikke det hjælper at bruge procent, det samme problem vil opstå...hvad der i en lav opløsning vil være måske 1% vil jo skulle være en højere procent i en højere opløsning..

img.top var bare et eksembel på at jeg placerer alting via px som siden er nu...det er jo også for alt andet: a.filnavn, img.filnavn, p.filnavn, table.filnavn osv..

Bruger du ikke tabeller?

joda...men ikke til de få helt stationære ting i designet, burde jeg bruge det til alting?

Som udgangspunkt ville jeg altid bruge tabeller til alt. Det er nemmere at styre.

Som jeg kan forstå dig, så er der noget, der nærmest bare 'flyder rundt'. Hvis du lagde det i en tabel, ville det være nemt at centrere tabellen, så den stod centreret uanset opløsning...

hmm...det kan jeg godt se pointen i...jeg har lidt svært ved at overskue hvordan jeg sætter alting ind i den samme table med det design jeg har valgt, men jeg må lige prøve at rode med det..det må jo nærmest betyde jeg skal lave alting forfra!

der er ikke noget der "flyder rundt" alt er positioneret med css..det betyder jo bare at som det er nu sidder det 100% fast i den placering det har, selvom ma nser det i forskellige opløsninger.

nå, jeg kigger lidt på det..

Det lyder som en god ide. Husk at tabeller er multifleksible, hvis de benyttes rigtigt. Det er som regel også en god ide at bruge tabeller indeni tabeller, så kan de justeres individuelt.

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
          </td>
        </tr>
      </table>
      <table>
        <tr>
          <td>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Hvordan ser din html ud?

Benytter du div med id og class og så styler dem i stylesheet, eller hvordan er din side bygget op. Jeg har selv lavet nogle sider hvor jeg benytter float til at positionere elementer ifht. hinanden og det fungerer nogenlunde (selvom det til tider kan være spøjst at arbejde med). Jeg plejer at gå ud fra flg. tommelfingerregler når jeg arbejder med positionering via float:

1. vær meget specifik med bredder af elementer
2. hold så vidt muligt kun to elementer på samme niveau, hvis der skal være flere så indkapsel dem, så reglen overholdes.

Og arbejder frem efter denne metode:

* start udefra og få rammernes placering og dimensioner på plads
* detaljer venter (farver, fonte osv.) til sidst

jeg bruger class (men ikke div?) fx: <table class="navn"> jeg kender ikke så meget til float, jeg er ret så noob, som i nok havde regnet ud:)

hvis det lykkes mig at smide hele møget ind i en overordnet table så det virker, skal jeg så give den table en class og så så...hvad...noget i retning af table align center?

Du behøver ikke engang give den en class, bare skriv:

<table align="center">
...
</table>

Det er super simpelt:
Lav en <div>
Hvis din side i alt er fx 100px bred, så gør du således:

<div style="position:absolute; width:100px; left:50%; margin-left:-50px;">
    Al din nuværende HTML kode.
</div>

Dvs. du sætter siden til at blive placeret 50% inde, men med din margin-left:-50px; så bliver den korrekt placeret.
Dvs: koden er således:
position:absolute; width:[bredde]px; left:50%; margin-left:-[bredde]px;

//mtrolle

Måske er det dette http://www.eksperten.dk/spm/520876 ?-)

En anden version hvor man laver en container-element (ligesom i mtrolles forslag)
kan være:

//HTML:
<html><body>
<div id="container">
  Indsæt her dine elementer uden absolute position (hvis nødvendig så brug relative)
</div>
</body></html>

//CSS:
body{
  text-align: center;
}
div#container{
  width: 760px;
  margin: 20px auto;
  text-align: left;
}

-- og det skal da tilføjes, at mtrolles forslag har et par uheldige bivirkninger, hvis man laver en side til almindelig bredde, nemlig at venstre-kanten forsvinder ud til venstre, hvis brugeren har en browser-bredde, som er mindre end sidens ...

-- mens bjoarns (og mit link) altid vil beholde mindts venstre-kanten inde i siden !-)

-- desværre er bjoarns trick med text-align:center; nødvendigt, hvis man skal understøtte de gamle IE'er, men med nutidige skal man bare tilføje en kvalificeret doctype, som det f.eks. vises på http://www.eksperten.dk/spm/520876#rid4783270 !-)

Endnu en tilføjelse er nødvendig, for det er ikke noget problem at bruge absolut positionering inde i container-diven, den skal blot selv have position:relative; i sin style-regel !-)

jeg kan ikke få noget af det til at virke ordenligt...

Jeg har lige lavet en illustration af hvordan min kode ser ud, det ville være fedt hvis i gider vise det mere konkret..

_______________________________


<html>
<head>
<title>titlenavn</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>




<img src="linje1.jpg" class="ned">

<img src="linje2.jpg" class="top">

<img src="bilelde.jpg" class="billede-her">

<p><a class="menu1" href="navn.html">_menunavn
</a></p>

<p><a class="menu2" href="navn.html">_navnmenu
</a></p>

<p><a class="menu3lys" href="navn.html">_menunavn
</a></p>

<p><a class="menu4" href="navn.html">_menunavn
</a></p>
<p><a class="menu5" href="navn.html">_menunavn
</a></p>

<p><a class="menu6" href="navn.html">
</a></p>
<p><a class="menu7" href="navn.html">_menunavn
</a></p>


<p class=text>
kjfewkfe jfekwl jfe jfewl jfe gjerk gje gjerklg jel jg gklwe we<br>
geg wejgk ekgl erlag jekgejlgl gwegkl welgk jge gergegwegwegewggwegewgege<br>
kjfewkfe jfekwl jfe jfewl jfe gjerk gje gjerklg jel jg gklwe we<br>
geg wejgk ekgl erlag jekgejlgl gwegkl welgk jge gergegwegwegewggwegewgege<br>
kjfewkfe jfekwl jfe jfewl jfe gjerk gje gjerklg jel jg gklwe we<br>
geg wejgk ekgl erlag jekgejlgl gwegkl welgk jge gergegwegwegewggwegewgege<br>
kjfewkfe jfekwl jfe jfewl jfe gjerk gje gjerklg jel jg gklwe we<br>
geg wejgk ekgl erlag jekgejlgl gwegkl welgk jge gergegwegwegewggwegewgege<br>
</p>

<h2>overskrift</h2>



<img src="logo3.jpg" class="logo1">
<a href="index.html">
<img src="logo4.jpg" border="0" class="logo"></a>
</div>
</body>
</html>
________________________________________-

hov der kom lige en </div> med fra mine tests, jeg ikke fik slettet

Hvordan ser din stylesheet ud ?-)

ca. sådan her:

body {
background-color: #FFFFFF;
}

a{
font: normal normal 500 9px arial
}

a{letter-spacing: +1px}

a {color: rgb(255,255,255)}


a.menu1:link {background: #165C75}
a.menu1:visited {background: #165C75}
a.menu1:hover {background: #8DACB5}


a.menu1lys:link {background: #8DACB5}
a.menu1lys:visited {background: #8DACB5}
a.menu1lys:hover {background: #165C75}

(gentages med menu2, menu3 osv)


img.top{
    position:absolute;
    top: 197px;
    left: 20px;
}

p.text{
    position:absolute;
    top: 230px;
    left: 20px;
}

img.ned{
    position:absolute;
    top: 461px;
    left: 20px;
}

img.billede-her{
    position:absolute;
    top: 198px;
    left: 453px;
}


img.logo{
    position:absolute;
    top: 89px;
    left: 20px;
}


img.logo1{
    position:absolute;
    top: 89px;
    left: 202px;
}

a.menu1{
    position:absolute;
    top: 90px;
    left: 63px;
}
a.menu1lys{
    position:absolute;
    top: 90px;
    left: 63px;
}
a.menu2{
    position:absolute;
    top: 101px;
    left: 63px;
}

a.menu2lys{
    position:absolute;
    top: 101px;
    left: 63px;
}
a.menu3{
    position:absolute;
    top: 112px;
    left: 63px;
}
a.menu3lys{
    position:absolute;
    top: 112px;
    left: 63px;
}
a.menu4{
    position:absolute;
    top: 123px;
    left: 63px;
}
a.menu4lys{
    position:absolute;
    top: 123px;
    left: 63px;
}

a.menu5{
    position:absolute;
    top: 134px;
    left: 63px;
}

a.menu5lys{
    position:absolute;
    top: 134px;
    left: 63px;
}

a.menu6{
    position:absolute;
    top: 145px;
    left: 63px;
}

a.menu6lys{
    position:absolute;
    top: 145px;
    left: 63px;
}

a.menu7{
    position:absolute;
    top: 157px;
    left: 63px;
}

a.menu7lys{
    position:absolute;
    top: 157px;
    left: 63px;
}

img.forside{
    position:absolute;
    top: 390px;
    left: 335px;
}
img.forside1{
    position:absolute;
    top: 305px;
    left: 80px;
}

p {letter-spacing: +1px}
p{
font: normal normal 100 11px arial

}
p {color: rgb(0,45,90)}



h1 {color: rgb(0,45,80)}

h2{
position:absolute;
    top: 205px;
    left: 20px;
font: normal normal 100 15px arial

}
h2 {color: rgb(85,2,0)}
h2 {letter-spacing: +1px}