Toon posts:

[css] image uitlijnen in relatieve div lukt niet

Pagina: 1
Acties:

maandag 1 december 2003 16:43

Acties:

Verwijderd

Topicstarter
Mensen,

Ik ben bezig met een site welke gemaakt is met behulp van css. De sie wordt opgedeeld in een aantal absolute en 1 relatief gepositioneerde div's.

Binnen deze relatief gepositioneerde div (de div waar de content in komt) wil ik een afbeelding plaatsen, welke rechts uitgelijnd wordt. ik dacht dat dit kon met float: right; maar dit lukt dus niet.

Ik ben nog niet zolang bezig met css, maar in de verschillende tutorials ben ik dit niet tegen gekomen.

De link naar de site: http://home.planet.nl/~maten154

maandag 1 december 2003 16:53

Acties:
  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Misschien staat hier iets tussen?

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 1 december 2003 16:53

Acties:
  • kleautviool
  • Registratie: Mei 2003
  • Laatst online: 21-05 19:24

kleautviool

Welke afbeelding wil je precies rechts uitlijnen?
Ik zie 1 blauwe afbeelding waarin afgeteld wordt die gewoon rechts uitgelijnd is. Bedoel je die? Verder zie ik nl. geen afbeeldingen (die niet rechts uitgelijnd worden)

maandag 1 december 2003 17:51

Acties:

Verwijderd

Topicstarter
ik bedoel inderdaad degene waarin afgeteld wordt. Deze wordt wel rechts uitgelijnd, maar zoals je ziet staat hij niet echt goed. Ik wil dat hij rechts in de eerste content-box geplaatst wordt. Rechts van de tekst dus..

Ik zal die link ff doornemen.

maandag 1 december 2003 18:11

Acties:

Verwijderd

dan moet je die <DIV> binnen die andere <DIV> zetten met float:right

PS ook "align" attributen horen in de stylesheet

edit:

sorry, ik zie nu dat je dat plaatje niet in een <DIV> hebt staan. als je dat wel doet wordt te tekst er ook goed omheen gezet:
<div class="content"><div class="aftelding"><src="images/test.gif"></div></div>

[ Voor 71% gewijzigd door Verwijderd op 01-12-2003 18:16 ]

maandag 1 december 2003 18:14

Acties:

Verwijderd

Topicstarter
Hoe bedoel je? Welke div binnen welke andere div? Het gaat hier toch alleen om "de eerste content div"?

sorry, ik had de kleine lettertjes niet gelezen :*) Ik zal het plaatje es in een div zetten, kijken of het dan werkt.

[ Voor 40% gewijzigd door Verwijderd op 01-12-2003 18:20 ]

maandag 1 december 2003 18:34

Acties:

Verwijderd

en? is het al gelukt? :)

maandag 1 december 2003 18:34

Acties:

Verwijderd

Topicstarter
Ok, ben nu bezig die afbeelding in een div te plaatsen. Moet dit dan een relatief of een absolute gepositioneerde div zijn?

maandag 1 december 2003 18:36

Acties:

Verwijderd

Volgens mij,als je zo doet,doet ie het gewoon :) :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>opzetje voor jan</title>
<link rel=stylesheet type=text/css href=stylesheet.css>
</head>
<body>

<div id="top"> [img]"images/banner.gif"[/img][img]"images/test.gif"[/img]
</div>
<div class="content">


Enz.

Toch...? :?

[ Voor 24% gewijzigd door Verwijderd op 01-12-2003 18:37 ]

maandag 1 december 2003 18:39

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 22:47

crisp

Devver

Pixelated

afbeelding in een div plaatsen is onzin, je kan dan net zo goed die img een display:block geven, hoewel dat ook niet noodzakelijk zou moeten zijn.
Verder bestaat het align attribuut niet in HTML4 strict, je moet dus float:right gebruiken.
Last but not least maakt het niet uit of die content div relatief of absoluut gepositioneerd staat; zolang als je maar expliciet position:relative/absolute opgeeft voor die div.

Intentionally left blank

maandag 1 december 2003 18:39

Acties:

Verwijderd

Topicstarter
Dat is niet de bedoeling. Hij moet niet in de "top-div" komen, maar in de 1e content-div. In die div moet hij rechts uitgelijnd worden.

@crisp:
Als ik float:right gebruik staat hij ook niet goed. Dat heeft hetzelfde effect als align=right.

[ Voor 32% gewijzigd door Verwijderd op 01-12-2003 18:43 ]

maandag 1 december 2003 18:43

Acties:

Verwijderd

Oh,ok,ik dacht dat je hem recht bovenin wilde hebben... |:(

maandag 1 december 2003 18:47

Acties:

Verwijderd

Topicstarter
Dat had ik zelf ook nog wel geweten. ;)

Wat ik zo raar vind is dat hij hij wel de ruimte reserveert voor de afbeelding (de tekst wordt aan de linkerkant ingekort), maar de afbeelding vervolgens maar voor de helft in de eerste content-box plaatst.

maandag 1 december 2003 18:58

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 22:47

crisp

Devver

Pixelated

haal die z-index eens uit je content class ;)

mmz, dat is nog maar 1 van de problemen; ik had iets teveel gestripped...

[ Voor 47% gewijzigd door crisp op 01-12-2003 19:02 ]

Intentionally left blank

maandag 1 december 2003 19:00

Acties:
  • Johnny
  • Registratie: December 2001
  • Laatst online: 15:50

Johnny

ondergewaardeerde internetguru

Ik zie nu dit:
Afbeeldingslocatie: http://people.zeelandnet.nl/hoogstrate/website.jpg

Wat is daar niet goed aan?

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

maandag 1 december 2003 19:03

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 22:47

crisp

Devver

Pixelated

Johnny schreef op 01 december 2003 @ 19:00:
Ik zie nu dit:
[afbeelding]

Wat is daar niet goed aan?
In Mozilla doet 'ie het inderdaad goed; ik zie ook aardig wat hacks in de CSS - hacks zijn evil...

Intentionally left blank

maandag 1 december 2003 19:03

Acties:

Verwijderd

hmz...dat zie ik niet.. :?

maandag 1 december 2003 19:13

Acties:

Verwijderd

Topicstarter
Zoals jij het ziet is het goed. Maar ik zie (met IE 6.0 winxp) dit:

http://home.planet.nl/~maten154/images/screenshot.gif

Het weghalen van de z-index maakt ook niks uit. Ik zal alle hacks eens uit de css halen, mss helpt dat.

Weghaal, weghaal..

Het weghalen van de hacks maakt voor de uitlijning van het plaatje ook niets uit. Is ook wel logisch denk ik, omdat de hack('s) niet in de content-div voorkomen.

Je zou toch denken dat veel mensen tegen dit probleem aanlopen.

[ Voor 38% gewijzigd door Verwijderd op 01-12-2003 19:18 ]

maandag 1 december 2003 19:17

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 22:47

crisp

Devver

Pixelated

dit werkt:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10

.content {
    position:relative;
    width:auto;
    min-width:150px;
    margin:85px 205px 10px 165px;
    border:1px solid #09c;
    border-top-width:10px;
    border-top:#09c;
    padding:10px;
}

die top:75px weggehaald en verwerkt in de margin, z-index en de background-color weggehaald.
Dat met die background-color lijkt me gewoon een lelijke IE-bug....

Intentionally left blank

maandag 1 december 2003 19:22

Acties:

Verwijderd

Topicstarter
Super! Het werkt nu inderdaad. Moet alleen nog ff zorgen dat die tweede content box vlak onder de eerste komt. Bedankt crisp en anderen!

maandag 1 december 2003 19:35

Acties:

Verwijderd

Topicstarter
Ok, volgend probleem. Nu staat de afbeelding goed, maar de tweede content-box niet. Deze staat nu 85 pixels onder de eerste. Weet iemand hoe ik dit kan oplossen? Hij moet er dus vlak onder komen..

maandag 1 december 2003 19:51

Acties:

Verwijderd

Topicstarter
Laat maar. Is al gelukt door de content-div van een klasse in twee afzonderlijke div's te veranderen..

Bedankt allemaal!

dinsdag 2 december 2003 00:01

Acties:

Verwijderd

hmmmzz.. ok klopt dat dat plaatje niet in een DIV moet, ik had dat zelf eens zo gedaan, maar dan met tekst erin en dat is wat anders..

maar nu heb je wel "style=float:right;" in je html staan (bij die img-tag), wat naar mijn mening in de stylesheet hoort en dan is het misschien toch handig er een DIV van te maken? (ik wil niet irritant doen hoor, vind dit wil interessant namelijk, misschien is er een andere oplossing?)
Pagina: 1
Reageer