Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

CSS relative onder elkaar (Opgelost)

FabianNL - 08/11/2008 23:54 (laatste wijziging 01/11/2010 11:05)

Nieuw lid

Ik ben een website die ik niet zelf gemaakt hebt, aan het aanpassen en verbeteren. Daar wordt echter ook veelvuldig met CSS gewerkt en hier heb ik zelf eigenlijk 0,0 ervaring in. Ik heb ondertussen al heel wat gelezen en geexperimenteerd dus ik ben wel een eind gekomen. Maar nu loop ik dan toch echt vast...

Ik heb een stuk tekst die uit een database wordt gehaald. Deze tekst wordt omringd door een lijst. Maar ik wil dus dat deze lijst zich aanpast aan de grote van de tekst. Nu heb ik de volgende HTML gebruikt:

html4strict code - Bekijk de code zonder highlighting - Klap code in

	<div class="boven"></div>
	<div class="teksthoofd">
	<img src="http://www.***.nl/images/kopjes/agenda.png"><br><br>
<?
	$query = mysql_query("SELECT * FROM min_con_agenda") or die (mysql_error());
	while ($var = mysql_fetch_array($query))
	{
		echo "<p>$var[inhoud]</p>";
	}
?>
</div>
<div class=beneden></div>

<div class="boven"></div>
	<div class="teksthoofd">
	<img src="http://www.***.nl/images/kopjes/agenda.png"><br><br>
<?
	$query = mysql_query("SELECT * FROM min_con_agenda") or die (mysql_error());
	while ($var = mysql_fetch_array($query))
	{
		echo "<p>$var[inhoud]</p>";
	}
?>
</div>
<div class=beneden></div>

Waarin 'boven' de bovenkant van de lijst is, 'teksthoofd' gewoon de tekst met daarom heen de zijkanten van de lijst, en 'onder' de onderkant van de lijst is.
Met de volgende CSS:

css code - Bekijk de code zonder highlighting - Klap code in

                			.boven {
			text-align: left;
			width: 525px;
			height: 55px;
			position: absolute;
			background-image:url(http://www.***.nl/images/border_boven.jpg);
			background-repeat:no-repeat;
			left: 0px;
			top: 0px;
			}			
						
			.teksthoofd {
			text-align: left;
			width: 415px;
			position: absolute;
			background-image:url(http://www.***.nl/images/background_border_repeat.jpg);
			background-repeat:repeat-y;
			left: 0px;
			top: 55px;
			padding-left: 55px;
			padding-right: 55px;
			}	
			
			.beneden {
			text-align: left;
			width: 525px;
			height: 53px;
			background-image:url(http://www.***.nl/images/border_beneden.jpg);
			background-repeat:no-repeat;
			position: relative;
			left: 0px;
			}	
            
.boven {
			text-align: left;
			width: 525px;
			height: 55px;
			position: absolute;
			background-image:url(http://www.***.nl/images/border_boven.jpg);
			background-repeat:no-repeat;
			left: 0px;
			top: 0px;
			}			
 
			.teksthoofd {
			text-align: left;
			width: 415px;
			position: absolute;
			background-image:url(http://www.***.nl/images/background_border_repeat.jpg);
			background-repeat:repeat-y;
			left: 0px;
			top: 55px;
			padding-left: 55px;
			padding-right: 55px;
			}	
 
			.beneden {
			text-align: left;
			width: 525px;
			height: 53px;
			background-image:url(http://www.***.nl/images/border_beneden.jpg);
			background-repeat:no-repeat;
			position: relative;
			left: 0px;
			}
 

En dit werkt in het geval van de bovenkant van de lijst echt super! Maar de onderkant wil niet echt. Deze 3 divjes moeten dus netjes onderelkaar komen te staan. Met de onderste div onder 'teksthoofd' waarin de tekst staat die uit de database gehaald wordt.
Het probleem is echter dat 'beneden' gewoon helemaal bovenaan staat, over 'boven' heen alleen dan wel een stukje meer naar rechts. Niet gewoon netjes links en dan helemaal onderop.

Ik hoop dat ik iets simpels over het hoofd zie door m'n beperkte kennis en dat jullie me makkelijk kunnen helpen!

2 antwoorden

Gesponsorde links

rredspike1 - 09/11/2008 02:32 (laatste wijziging 09/11/2008 02:39)

Lid

css code - Bekijk de code zonder highlighting - Klap code in

                .beneden {
            text-align: left;
            width: 525px;
            height: 53px;
            background-image:url(http://www.cafephilip.nl/images/border_beneden.jpg);
            background-repeat:no-repeat;
            position: relative;
            left: 0px;
            }  
            
.beneden {
            text-align: left;
            width: 525px;
            height: 53px;
            background-image:url(http://www.cafephilip.nl/images/border_beneden.jpg);
            background-repeat:no-repeat;
            position: relative;
            left: 0px;
            }
 

top: [waarde]px; vergeten in te geven waar die div moet staan?
en positie: absolute?!

Net zoals bij .boven

FabianNL - 10/11/2008 10:02 (laatste wijziging 11/11/2008 01:35)
Nieuw lid		Welke waarde zou ik dan moeten invoeren bij top? Ik kan hier wel een waarde invoeren, en dan komt ie netjes rechts te staan en op de hoogte die ik ingeef bij top. Maar dit is dan recht door de tekst en de lijst van 'teksthoofd' heen ipv netjes eronder. Ik wil dus dat 'beneden' zich aanpast aan 'teksthoofd' en er netjes onderkomt te staan. Heb de oplossing gevonden: heb gewoon zowel 'boven' als 'teksthoofd' als 'beneden' position: relative gemaakt en float:left. Dit werkt veel beter en fijner!

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten