Archief - HTML: 2 img uitlijnen in een div

s

sSkoEziE

Legacy Member

• 16 jan 2005

• #1

Ik heb dus een <div> die de volledige breedte van men venster neemt (in css: width: 100%). Nu wil ik daar 2 images in steken. De ene wil ik links uitlijnen, de andere rechts.
De div moet ook een background-image krijgen (repeat-x), zodat die image tussen de 2 images wordt ge-repeat.

Dit is wat ik momenteel heb (werkt niet, images komen achter elkaar)
HTML

PHP:

<div class="banner">
  <img class="banner_img" src="img/banner_forest.png" width="400px" height="150px" /><img class="banner_logo" src="img/banner_logo.png" width="100px" height="150px" />
</div>

CSS

PHP:

div.banner {
  width: 100%; height: 150px;
  background-image: url("img/banner_repeater.gif"); background-repeat: repeat-x;
}
img.banner_img {
  position: relative; left: 0px;
}
img.banner_logo {
  position: relative; right: 0%;
}

Nu wil ik dus dat img.banner_logo rechts wordt uitgelijnd.

PS: div background-image werkt ook niet
PS2: ik werk in xhtml strict

D

DarkBone

Legacy Member

• 16 jan 2005

• #2

float: left; voor eerste image

float: right; voor tweede image

s

sSkoEziE

Legacy Member

• 16 jan 2005

• #3

tx, net wat ik zocht.

ivm background-image, is het niet mogelijk om dat toe te passen op een div ?

S

Smoerf

Legacy Member

• 16 jan 2005

• #4

normaal wel, zoals je deed toch

Code:

div{
   background-image:url('link_naar_prent.ext');
   background-repeat:repeat-x;
   }

s

sSkoEziE

Legacy Member

• 16 jan 2005

• #5

background-image werkt alleen met een absoluut pad, dus:

Code:

background-image: url("http://localhost/chtnet/img/banner_repeater.gif"); background-repeat: repeat-x;

kan iemand dit verklaren ?

s

servi

Legacy Member

• 16 jan 2005

• #6

simpel : uw relatieve padnaam is verkeerd.


je moet goed opletten waar je je css-bestand staat, je moet immers niet relatief opgeven vanaf je html-bestand, maar relatief vanaf je css-bestand.


edit : ah je gebruikt xhtml-strict, dat zou wel eens het grootste deel van je probleem zijn. probeer eens xhtml-transitional, als het daar lukt is dat toch teken dat het iets is wat in xhtml-strict niet zomaar mag.

s

sSkoEziE

Legacy Member

• 16 jan 2005

• #7

servi zei:

simpel : uw relatieve padnaam is verkeerd.

Klik om te vergroten...

idd :doh:
my dumb mistake

all problems solved -> topic mag gesloten worden, tx all