WN - Problem med div:ar

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Problem med div:ar (https://www.wn.se/forum/showthread.php?t=16972)

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....http://www.peterholmstudios.se/divlada.gif

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!

Alla tider är GMT +2. Klockan är nu 04:34.