webForumDet fria alternativet

Bestämd position

HTML & CSS

14 svar · 601 visningar · startad av Pumba

Medlem sedan nov. 200468 inlägg
Frågan#1

Hej är ganska ny med det här med css,. jag skulle vilja få en box att börja 84pixlar från vänster sida och sedan sluta 642pixlar åt höger, hur löser man detta på bästa sätt? och hur bestämmet man i vilken höjd den ska ligga i?

Medlem sedan apr. 200312 679 inlägg
#2

Så här kanske? :)

CSS:
div.lager {
	position: absolute;
	left: 84px;
	top: 0;
	width: 558px;
}

HTML:
<div class="lager"><p>text</p></div>

r\ Glöm inte att du måste sätta body, html {margin: 0; padding: 0;} också, annars kommer den ha olika placering i olika läsare.

Medlem sedan nov. 200468 inlägg
#3

jo det fungerade, tack! men nu till nästa problem, varför fungerar inte detta?

div.logo {
position: absolute;
left: 84px;
top: 0
height: 186px;
width: 642px;
background: url(bilder/logo.jpg) no-repeat;
}

Medlem sedan sep. 20021 655 inlägg
#4

Du har missat ett semikolon efter top: 0.
Om du hade prövat att validera koden hade felet upptäckts direkt.

Medlem sedan sep. 20026 425 inlägg
#5

http://validator.w3.org/ :)

Medlem sedan nov. 200468 inlägg
#6

Tackar! vad menas med följande fel kod?

Line: 13 Context : div.meny
Invalid number : top only 0 can be a length. You must put an unit after your number : 161

Line: 19 Context : div.sok
Invalid number : top only 0 can be a length. You must put an unit after your number : 161

Line: 26 Context : div.lager
Invalid number : top only 0 can be a length. You must put an unit after your number : 186

div.logo {
position: absolute;
left: 83px;
top: 0;
height: 186px;
width: 642px;
background: url('bilder/logo.jpg') no-repeat;
}

div.meny {
position: absolute;
left: 84px;
top: 161;
width: 642px;
}
div.sok {
position: absolute;
left: 450px;
top: 161;
width: 300px;
}

div.lager {
position: absolute;
left: 84px;
top: 186;
width: 642px;
}

Medlem sedan dec. 20042 245 inlägg
#7

Du måste sätta "px" efter varje värde, förutom på 0 där det inte behövs. (0px == 0em == 0% == 0in == 0)

Medlem sedan nov. 200468 inlägg
#8

hur kunde jag missa det? :D

silfver skrev:

HTML:
<div class="lager"><p>text</p></div>r\ Glöm inte att du måste sätta body, html {margin: 0; padding: 0;} också, annars kommer den ha olika placering i olika läsare.

Vad menar han med att lägga in body, html {margin: 0; padding: 0;}[/. Menar han i html koden eller i css dokumentet?

Medlem sedan sep. 20026 425 inlägg
#9

CSS-filen. :)

Medlem sedan nov. 200468 inlägg
#10

du menar att det bara är att lägga in BODY {margin: 0; padding: 0;} i css filen? när jag öppnar sidan i IE så visas allt korrekt, men när jag visar den i fiefox så blir allt nerskjutet några pixlar

Medlem sedan jan. 2000978 inlägg
#11

Skriv såhär:

html, body {margin:0;padding:0;}
Medlem sedan nov. 200468 inlägg
#12

Det fungerar fin fint i IE, men i firefox så hamnar all text några pixlar nedåt, nån som vet varför?

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>text</title>
<link rel="stylesheet" href="style.css">
</head>

<body background="bilder/bg.jpg">
<div class="logo"></div>
<div class="meny"><p><A href="index.php">Startsidan</A> - <A href="addurl.php">Lägg till länk</A> -
<A href="addcat.php">Lägg till huvudkategori</A></p></div>
<div class="sok"><p><form method="POST" action="sok.php">
Sök :
<input type="text" name="sok" size="20" style="border-style: solid; border-width: 1; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1">
<input type="submit" value="Sök" name="Sok" style="font-size: 8pt; border-style: solid; border-width: 1; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1">
</form></p></div>
<div class="lager"><p>text</p></div>
</body>

</html>

html, body {margin:0;padding:0;}

div.logo {
position: absolute;
left: 83px;
top: 0;
height: 186px;
width: 642px;
background: url(bilder/logo.jpg) no-repeat;
}

div.meny {
position: absolute;
left: 84px;
top: 161px;
width: 642px;
}
div.sok {
position: absolute;
left: 450px;
top: 161px;
width: 300px;
}

div.lager {
position: absolute;
left: 84px;
top: 186px;
width: 642px;
}

Medlem sedan jan. 2000978 inlägg
#13

Det är pga marginalen i ditt textstycke. Dy default har IE och FF olika värden, eftersom du inte har satt nåt värde.

div.meny p {margin-top:0}
Medlem sedan nov. 200468 inlägg
#14

blir samma fel med:

div.meny {
position: absolute;
left: 84px;
top: 161px;
width: 642px;
div.meny p {margin-top:0}

Medlem sedan jan. 2000978 inlägg
#15

Du hade glömt en måsvinge:

div.meny {
position: absolute;
left: 84px;
top: 161px;
width: 642px;[b]}[/b]
div.meny p {margin-top:0}
270 ms totalt · 3 externa anrop · v20260731065814-full.767b4345
132 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)