Problem med div:ar

Peter_Holm · 2006-10-18, 23:57

Nu har jag stött på problem:

1. Jag har en div-låda på 700pixlar.
2. I den lådan har jag en till div utan width men med 100pixlars marginal på höger och vänster sida för att "knuffa" den till mitten.
3. I denna "inner-låda" vill jag ha en bild på vänster sida.
4. Till höger i "inner-lådan" vill jag ha text (

) som är vänsterställd, alltså till höger om bilden.

Att köra div id="namn" ska man ju inte göra såg jag i validatorn eftersom denna inner-låda ska finnas flera gånger. Utan validatorn sa att man skulle köra div class="namn".
5. Problemet jag har är att jag inte kan vänsterställa texten, det finns centrerad text i div-lådan på 700px.

Se bild....

boena · 2006-10-19, 08:30

har du provat "text-align: left" på classen?

Peter_Holm · 2006-10-19, 12:17

Citat:

Originally posted by boena@Oct 19 2006, 08:30
har du provat "text-align: left" på classen?

Ja det fungerar inte... den verkar "ärva" centreringen från 700-pix:diven.

DeSoto · 2006-10-19, 13:01

Det vore fint om man kunde få se lite (X)HTML.

Kaffe · 2006-10-19, 14:42

Citat:

Ursprungligen postat av Peter_Holm

Citat:

Ursprungligen postat av boena

har du provat "text-align: left" på classen?

Ja det fungerar inte... den verkar "ärva" centreringen från 700-pix:diven.

Har du tagit bort CSS-regeln där du använder ID? De överskrider alltid en selector som går efter class.

herkules · 2006-10-19, 15:01

HTML

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
 <link rel="stylesheet" href="css.css" />
	</head>

	<body>
 <div id="main">
 	<p>
  Centrerad text
 	</p>
 	<div class="box" style="background-color:blue;">  
  <img src="bild.gif" alt="" />
  <p>
  	Vänsterställd text
  </p>
 	</div>
 	<div class="box">  
  <img src="bild.gif" alt="" />
  <p>
  	Vänsterställd text
  </p>
 	</div>
 </div>
	</body>
</html>

CSS (döp filen till css.css)

Kod:

body, html{
	height:100%;
	margin:0;
}
#main{
	margin:0 auto;
	height:500px;
	width:700px;
	text-align:center;
	background-color:gray;
}
.box img{
	float:left;
}
.box p{
	text-align:left;
}
.box{
	clear:left;
	width:500px;
	margin:0 auto;
	background-color:red;
	overflow:hidden;
}

Vet inte om det här var det du var ute efter, hoppas det.

Peter_Holm · 2006-10-19, 20:48

hercules: kanon! lite fippel med din kod där så fixade det sig på ett bättre sätt än jag hade från början!

TACK!

herkules · 2006-10-19, 21:02

kanon!

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Problem med div:ar