PDA

Volledige versie bekijken : HTML/CSS Div rechts boven plaatsen.


MabadosS
30 April 2010, 16:33
Hoi,

Ik zit met een klein ontwerp vraagje/probleempje.
Ik heb een pagina met tekst.
Ik wil rechts boven een kader waar uiteindelijk korte nieuwsberichten zullen verschijnen.

Maar ik krijg dat kader dus niet rechts boven tussen m'n tekst, hij staat onder de tekst.
Zie http://www.jma-allegro.be/beta

Even de code zoals het nu is:

CSS:


.snelnieuws_positie {
float: right;
width: 328px;
}
.snelnieuws_hoofd {
background-image: url(snelnieuws_hoofd.gif);
background-repeat: no-repeat;
height:53px;
width:328px;
float: right;
}
.snelnieuws_midden {
background-image: url(snelnieuws_midden.gif);
width:328px;
float: right;
}
.snelnieuws_onder {
background-image: url(snelnieuws_onder.gif);
background-repeat: no-repeat;
height:30px;
width:328px;
float: right;
}

HTML


<div style="float: left;">
<p>Hier de lange nietszeggende tekst.
</p>
</div>

<div class="snelnieuws_positie">
<div class="snelnieuws_hoofd"></div>
<div class="snelnieuws_midden"></div>
<div class="snelnieuws_onder"></div>
</div>

Kan iemand mij helpen?
Alvast bedankt.
ultddave
30 April 2010, 16:57
Rechts boven zoals hier: http://www.latemar.be/admin/temp/test1.html.

Of zoals hier: http://www.latemar.be/admin/temp/test2.html

Of...? ;) :D

Mvg,
Dave
MabadosS
30 April 2010, 16:58
Even van de eerste div float left naar position:absolute gewijzigd, maar ook dat geeft niet het gewenste resultaat.

Nog opties?
MabadosS
30 April 2010, 16:59
Rechts boven zoals hier: http://www.latemar.be/admin/temp/test1.html.

Of zoals hier: http://www.latemar.be/admin/temp/test2.html

Of...? ;) :D

Mvg,
Dave


Volgens de tweede link, maar dan zodanig datr de tekst terug het volledige kader inneemt van zodra ze het snelnieuws voorbij zijn.

Alvast bedankt voor de hulp.
Butterflyice
30 April 2010, 17:27
Volgens mij bedoel je dit ;)


<style>
.snelnieuws_positie {
width: 328px;
float: right;
}
.snelnieuws_hoofd {
background-image: url(http://www.jma-allegro.be/beta/snelnieuws_hoofd.gif);
width: 328px;
background-repeat: no-repeat;
float: right;
height: 53px;
}
.snelnieuws_midden {
background-image: url(http://www.jma-allegro.be/beta/snelnieuws_midden.gif);
width: 288px;
_width: 328px;
float: right;
padding:5px 20px;
}
.snelnieuws_onder {
background-image: url(http://www.jma-allegro.be/beta/snelnieuws_onder.gif);
width: 328px;
background-repeat: no-repeat;
float: right;
height: 30px;
}
.wrapper {
width:800px;
}
.content {
float:left;
}
</style>

</head>
<body>
<div id="wrapper">
<div class="content">
<div class="snelnieuws_positie">
<div class="snelnieuws_hoofd"></div>
<div class="snelnieuws_midden">lorel</div>
<div class="snelnieuws_onder"></div>
</div>
<p>leerlingen leren stilstaan bij
te nemen opties en hun planningsgedrag. De schrijfkaart blijft simpel en zeer
overzichtelijk, maar houdt meer items in dan in de eerste graad (schrijfdoel
moet al preciezer worden ingevuld - leerlijn). Mogelijkheden i.v.m. het verloop:
VOOR het stellen bakenen we het schrijfgebied af: naar wie schrijf ik? Wat
schrijf ik dan (onderwerp)? Heb ik er genoeg materiaal voor? Waar kan ik meer
materiaal vinden? Hoe begin ik? Voor wie schrijf ik? Welke weg volg ik? ...
Desgevallend kan een lees- of spreekoefening aanleiding worden om te gaan
schrijven. Dat is b.v. zo bij de volgende gedichtoefening: We praten
aanvankelijk over kleuren en waar die zich voordoen (alles heeft kleur), dan
zien we hoe kleuren symbool kunnen zijn voor een gemoedstoestand (zwart=rouw,
wit=huwelijk), tenslotte laten we kinderen in een schrijfoefening dagen van de
week combineren met passende kleuren. TIJDENS het stellen blijven we onze
oorspronkelijke planning volgen; we gaan op bepaalde ogenblikken na of wat we
reeds geschreven hebben, voldoet aan onze oorspronkelijke planning (=reviseren).
NA het stellen wisselen we ideeën over mekaars werk uit en verbeteren zonodig.
Eventueel kunnen we ook hier een soort van schema gebruiken, dat lln. moet
toelaten om mekaars werk beter van commentaar te voorzien (dit schema kan
eventueel variëren van oefening tot oefening). Die commentaart kan ook op een
plaatsgrijpen. Sommige oefeningen zullen vanuit fantasiesituaties ontstaan, wat
niet wil zeggen dat de lln. er niets uit kunnen leren, b.v. De leerkracht leest
een verhaal van een schipbreuk voor. Enkele overlevenden landen op een eilend en
willen in een fles een bericht naar de buitenwereld sturen... schrijf zo'n
bericht. Een verslag schrijven van een door de hele klas meegemaakte
gebeurtenis. Let wel! Niet voor de leerkracht, maar voor de klaskrant.
Handleidingen en recepten schrijven (bijvoorbeeld voor een gerecht dat helemaal
niet bestaat (zie 1ste graad), of voor een voorwerp dat ze zelf uitvinden op
basis van een bestaand voorwerp (zie het boek 'Catalogue d'objects
introuvable'), zoals een bad met een deur in, een schommelstoel die naar opzij
schommelt, een bijl met dubbele steel om samen te hakken, enz.) klassikaal
werken we aan een heksenkookboek. Iemand wil ons komen bezoeken, maar kent de
buurt niet; wij leggen uit (aan de hand van een plan) hoe de persoon ons huis of
onze school kan bereiken). Uiteraard levert de taak 'reisroute beschrijven' ook
een zeer goede spreek- en luisterles op. Boekbesprekingen De leerlingen mogen
een titelblad voor een fictief kinderboek ontwerpen. Ook de korte inhoud noteren
ze. De leerlingen krijgen van de leerkracht een lijst met vragen die ze moeten
stellen aan de hoofdfiguur uit een boek dat ze lazen. Zij noteren antwoorden en
maken op die manier een schriftelijk interview. Tegelijkertijd stellen ze een
facet van hun boek voor.
</p>
</div>
</div>
</body></html>
ultddave
30 April 2010, 17:28
Zoiets?

http://www.latemar.be/admin/temp/test3.html

Dus als je onderaan de pagina, over die ene zin beweegt met de cursor, verdwijnt de foto. En schuift de tekst op. In dit voorbeeld stond de tekst wel al onder de foto.

En als je over de tweedde zin 'hovert" komt de foto terug. Zoiets? (Het principe erachter. Want dit voorbeeld is niet echt praktisch :D)

Mvg,
Dave
MabadosS
30 April 2010, 17:42
Volgens mij bedoel je dit ;)



Bedankt, dit was wat ik zocht!


Zoiets?



Ook bedankt voor de hulp.
Het was niet precies wat ik zocht, maar het is iets dat ik misschien bij een ander onderdeel kan gebruiken.