13 svar · 546 visningar · startad av Tympanon
Hejsan.
Jag har börjat lära mig css och använder det till att ersätta tabeller och lägga saker i lager. Funkar bra, men hur gör man om man vill ha en centrerad sida??? Nu utgår jag ju från övre vänstra hörnet när jag lägesbestämmer alla objekt...
Det enklaste borde ju va om man istället kunde lägesbestämma allt från en punkt överst i mitten på sidan..
Tack på förhand.
Jon
Tack för svar, men det hjälper mig inte helt. Alla andra textblock, rutor och bilder måste ju kunna utgå från någon annan punkt en den i övre vänstra hörnet på hela sidan, annars funkar det inte.
Med din länk kan jag bara göra en centrerad stor ruta, som ja kan lägga vänsterjusterad text i.
Tyvärr rena grekiskan för mig, förstår nästan ingenting.
Det enda jag vill är att mina objekt ska utgå från en punkt på halva bredden av webbläsarfönstret!!!! Annars får ja köra me tabeller som förr, då de verkar va otroligt krångligt o byta nolläge för position: absolut som nu e i webbläsarens vänstra hörn.
Borde inte vara något problem. Testa nåt sånt här (otestat):
#centered {
position:absolute;
top:0;
left:50%;
}
så har du nåt att utgå ifrån.
/ m a r t i n
Martin, det där gör bara att alla mina kolummer o bilder flyter ihop i ett virrvarr :(
-Jag vill ha en stor ruta centrerad runt 700 px bred. I denna ruta ska alla objekt ligga stelt och fast på bestämda positioner. Minskar man webbläsarens bredd ska den stora rutan med allt dess inehåll flyttas till mitten av webbläsaren, och alla id-objekt i rutan ska ha kvar sina inbördes avstånd.
Jag behöver med andra ord fixa en nollpunkt att utgå från i den stora centrerade rutans vänstra hörn. Därifrån lägger jag alla objekt med bestämda avstånd ifrån den punkten.
tack för svar.
[red]
body {
text-align: center;
}
#centered {
margin: 100px auto;
width: 700px;
position: relative;
}
[/red]
Nu borde du kunna absolute positionera element i #centered.
mv icaaq
Tack för den! Nu funkar det fint sånär som på 2 saker.
1.Grundblockets storlek beror inte av allt som finns i det utan jag måste ställa in grundblockets höjd manuellt!
2.Föremålen som har left:0px o top:0px läggs en 20 pixlar ifrån grundblockets vänstra övre hörn. i höjdled funakr det dock bra.
Kod nedan: Felet kanske ligger i hur ja nästlar divarna eller nåt e lite ny på det här.
<html>
<head>
<style>
body {
text-align: center;
}
#centered {
margin: 0px auto;
width: 700px;
height: 500px;
position: relative;
background-color: blue;
}
#textspalt {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
}
#bild {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
}
</style>
<body>
<div id="centered">
<div id="textspalt">Den här texten ska ligga i en kolumm som ligger fast positionerad i #centered. Det funkar.</div>
<div id="bild"><img src="jon.jpg"></div>
</div>
</body>
</html>
Testa att lägga in en doctype för att sätta webbläsaren i standards-mode.
högst upp i dokumentet.
[red]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[/red]
sedan i css:en kan du lägga en default margin o padding till 0 på detta vis
[red]
*
{
margin: 0;
padding: 0;
}
[/red]
Kanske blir lite bättre så .....
mv icaaq
Det löste tyvärr inget av problemen. Specielt de där me att bilden inte hamnar i hörnet riktigt rycker ja e skumt, du kan ju testa koden ovan i din webbläsare om du vill.
Men en div inlagd i en annan kanske inte funkar? Ja menar så att "centered" diven anpassar sin storlek efter vad som finns i den i form av nya divar. lägger ja vanlig text i "centered" så funkar det ju.
OBS! Till min största förvåning har jag upptäckt följande. Kolla i den kod jag postade 3 var upp i tråden.
X-läget på både texten och bilden verkar bero lite på den bredd som jag gett respektive objekt! Ta koden ovan o testa om ni vill, de e nästan omöjligt o veta var exakt grejorna hamnar... vill ja ha bilden rätt får jag utelämmna width-argumentet där.... vill ja ha texten i vönsterkant me grundboxen får ja sätta dens bredd till typ mer än 300 pixlar eller nåt. Allt e en röra o inget funkar bra. Satsar nog på hederliga tabeller snart istället :)
Otroligt! Allt löste sig när ja la in "text-align: left;" i #centered. De blir css som äller endå, o tack alla som svarat i denna tråden för hjälpen.
De enda som krånglar nu är att grundboxens storlek ska bero av allt som e i den, ja får fortfarande ställa in grundboxens höjd manuellt.