WN
Sidan 1 av 2 1 2
Visa 40 inlägg från det här ämnet på en sida

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Text till vänster, flytade bilder till höger (https://www.wn.se/forum/showthread.php?t=15762)

cezar 2006-08-22 11:38
Försöker ta med den kod som är viktig i sammanhanget.
Skriver de i kronologisk ordning...

Kod:
body { margin:0 auto; }

.bg  {
 text-align: center;
    margin-left: auto;
    margin-right: auto;
 background: url(images/index_12.gif) repeat-y;
 width: 515px;
  }

.news { margin-right: auto;
    margin-left: auto;
    padding-left: 31px;
    padding-right: 21px;
    width: 420px;
  }

.info_about {
        background-color: #302F2F;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
        margin-top: 0px;     
        width: 420px;
        text-align: justify;
     
      }
I info_about diven så vill jag kunna ha text på vänster sida och det går att lösa med text-align:justify; men kruxet är att jag även
vill ha några bilder på höger sida som ska ligga flytande längs med texten.
Får jag göra fler divar för det eller går det inte för att jag har centrerat överliggande divar/body?

Carina Malmgren 2006-08-22 14:27
antingen sätter du in bilderna i en div med float:right; eller så lägger du float direkt på bilderna. det ena alternativet ger en rak linje mellan text och bild, den andra ger ett flyt som gör att texten flyter in mellan bilderna. en smakfråga mao

glöm inte att sätta clear efter.

cezar 2006-08-22 15:30
Citat:
Originally posted by Carina Malmgren@Aug 22 2006, 14:27
antingen sätter du in bilderna i en div med float:right; eller så lägger du float direkt på bilderna. det ena alternativet ger en rak linje mellan text och bild, den andra ger ett flyt som gör att texten flyter in mellan bilderna. en smakfråga mao

glöm inte att sätta clear efter.
Jag tror jag försökte med float:right; på diven som bilderna låg i och då trycktes allt ihop fast bilderna låg inte till höger.
Är det någe mer värden som man behöver sätta?

Carina Malmgren 2006-08-22 15:31
bredd... marginaler... höjd... ev radbryt mellan bilderna

cezar 2006-08-22 15:32
Citat:
Originally posted by Carina Malmgren@Aug 22 2006, 15:31
bredd... marginaler... höjd... ev radbryt mellan bilderna
Föresten, går det att lägga divar med float:right; i en div som har värdet text-align: justify; ?


[b]clear[b] ?

Carina Malmgren 2006-08-22 18:42
jo clear bryter av de flytande elementen
tex
Kod:
.foo {
width:300px;
padding:0; margin:0;
}
.flytavanster {
float:left; width:150px;
}
.flytahoger {
float:right; width:150px;
}
.clear {
clear:both;
}
Kod:
<div class="foo">
<p class="flytavanster">fe fai fo fum</p>
<img src="bar.jpg" class="flytahoger" alt="" />
<p class="clear"></p>
</div>
ang justify - ingen aning... prova

cezar 2006-08-23 09:13
Citat:
Originally posted by Carina Malmgren@Aug 22 2006, 18:42
jo clear bryter av de flytande elementen
tex
Kod:
.foo {
width:300px;
padding:0; margin:0;
}
.flytavanster {
float:left; width:150px;
}
.flytahoger {
float:right; width:150px;
}
.clear {
clear:both;
}
Kod:
<div class="foo">
<p class="flytavanster">fe fai fo fum</p>
<img src="bar.jpg" class="flytahoger" alt="" />
<p class="clear"></p>
</div>
ang justify - ingen aning... prova
Det sprack med float: right men jag förstår inte vad jag ska ha i clear classen.

Sen undrar jag om du sätter width efter bildens storlek eller efter överliggande div's storlek?

cezar 2006-08-23 09:56
Det blev såhär:

http://www.johnny.nu/temp/float.gif

Kod css

Kod:
.text_about { margin-top: 3px;
      margin-bottom: 6px;
      width: 420px;
     
      }

.float_left { float: left;
      width: 240px;
      text-align: justify;
      }

.float_right { float: right;
        width: 220px;
      }

.clear { clear: both; }
Kod - HTML

Kod:
<div class="text_about">
<p class="float_left">
<b>Computer</b> AMD 3200+, 2GB ram, Silverstone chassi. <br/>
<b>Display screen</b> Fujitsu 17" flat screen. <br/>
<b>Mobile</b> Sony Ericsson w800i.</p>

<div class="float_right">
<a href="images/w800i-1.jpg"><img class="about" src="images/w800i_thumb.jpg" alt="w800i"></a>
</div>

<br/>
<p class="clear">asdasdasd</p>
Detta kräver att clearen är under.
Jag vill att bilden ska flyta gämsmed texten :)

Carina Malmgren 2006-08-23 11:52
ja förstås...
men lägg bilden först och p sen
att det flyttas ner beror på att bilden + diven är större än den omslutande diven

Carina Malmgren 2006-08-23 11:53
du har inte avslutat diven "text_about"


Alla tider är GMT +2. Klockan är nu 02:11.
Sidan 1 av 2 1 2
Visa 40 inlägg från det här ämnet på en sida

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson