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

floating elements (Opgelost)

verhaba - 28/03/2009 17:33
Lid		Hallo Ik heb een probleempje. Ik ben mijn site-tje aan het maken met css en gebruik verschillende div's voor alle informatie blokken zeg maar. Zo heb ik een main divje en een navbar divje. Probleempje: Mijn main divje lijnt mooi uit onder mijn navbar divje. En dat is nu net niet de bedoeling. Ik vermoed dat ik 'm moet laten zweven... Maar hoe doe je dat nu? Neem maar eens gerust een kijkje

5 antwoorden

Gesponsorde links

jvs - 28/03/2009 17:55
HTML beginner		Allereerst wil even zeggen dat je ervoor moet zorgen dat je div's, ofwel geen ofwel een uniek id moeten hebben. Nu heb je twee div's met het id navbar_rigth... Dat best even oplossen dus. Verder kan je best je menu's in een <ul> (unordered list) zetten. Zo ben je ook meteen van die tables af binnen je div (niet dat je die nu nodig hebt ofzo... Maar ik zie dat je ze wel gebruikt) Een <ul> kan je ook perfect stylen met css zodat je een witte achtergrond hebt enz... Verder gooi ja dan best die 2 menu's in 1 div deze geef je een float: left; en die maindiv geef je dan een float: left; mee en dan moet het normaal in orde zijn. Succes!

verhaba - 28/03/2009 18:34 (laatste wijziging 28/03/2009 18:35)
Lid		Hey jvs, thx for the info. idd, elke div moet uniek zijn. Had ik over het hoofd gekeken. Maar hoe kan je in die div dan verder werken. Via classes ofzo? en hoe gedragen die zich? gelden alle elementen die je in je div hebt gespecifieerd ook voor de ingebedde class? Ik zoek ondertussen wel wat verder. Alvast bedankt voor je hulp.

jvs - 28/03/2009 19:23
HTML beginner		Je kan inderdaad met class selectors of id selectors werken. Als antwoord op je andere vragen zou ik zeggen: zoek eens wat op over xHTML en CSS ik denk dat hieromtrent zeker genoeg te vinden is op deze site en op andere... Google is your friend! En verder veel oefenen en uitproberen dan geraak je er wel! Succes

rolandt - 28/03/2009 22:25 (laatste wijziging 28/03/2009 22:26)

Nieuw lid

Wilde je zo iets?

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

                <html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="shortcut icoN" href="http://users.telenet.be/locky/images/andi_europe.ico">
	<title>The Big Blue (Bart)</title>
	<link href="The%20Big%20Blue%20%28Bart%29_bestanden/default.css" rel="stylesheet" type="text/css">
	</head>
<body>
	
<div id="mainbox">	
	<div id="header"><img src="The%20Big%20Blue%20%28Bart%29_bestanden/header.jpg"></div>
	<div id="navbar_right">
		<ul>
			<li> duikshop </li>
			<li> winkel </li>
			<li> promo's </li>
			<li> nieuws </li>
		</ul>
		<ul>
			<li> Rebreather </li>
			<li> rEvo </li>
			<li> nieuws  </li>
			<li> opleidingen </li>
		</ul>
	</div><!-- einde navbar_right -->
	<div id="tekstbox">
	<p>hier komt tekst te staan</p>
	</div><!-- einde tekstbox -->
</div> <!-- einde mainbox -->
</body>
</html>

            
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="shortcut icoN" href="http://users.telenet.be/locky/images/andi_europe.ico">
	<title>The Big Blue (Bart)</title>
	<link href="The%20Big%20Blue%20%28Bart%29_bestanden/default.css" rel="stylesheet" type="text/css">
	</head>
<body>
 
<div id="mainbox">	
	<div id="header"><img src="The%20Big%20Blue%20%28Bart%29_bestanden/header.jpg"></div>
	<div id="navbar_right">
		<ul>
			<li> duikshop </li>
			<li> winkel </li>
			<li> promo's </li>
			<li> nieuws </li>
		</ul>
		<ul>
			<li> Rebreather </li>
			<li> rEvo </li>
			<li> nieuws  </li>
			<li> opleidingen </li>
		</ul>
	</div><!-- einde navbar_right -->
	<div id="tekstbox">
	<p>hier komt tekst te staan</p>
	</div><!-- einde tekstbox -->
</div> <!-- einde mainbox -->
</body>
</html>
 

CSS

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

                body { 
	background:#000;
	color:#333;
	font-weight:400; 
	font-size:62.5%;
	line-height:1.5em;
	letter-spacing:0.1em;
	text-align:center; 
	font-family:"Calibri", Verdana, Arial, sans-serif;
	}  

div#mainbox {
	width:750px;
	}
	
div#header {
	width:750px;
	height:150px;}
	
div#navbar_right {
	background-color:#FFFFFF;
	text-align:left;
	width:125px;
	height:500px;
	float:right;
	}

div#tekstbox {
	background-color:#666666;
	font-size:1.8em;
 	width:625px; 
	height:500px;
	float:left;
	}

            
body { 
	background:#000;
	color:#333;
	font-weight:400; 
	font-size:62.5%;
	line-height:1.5em;
	letter-spacing:0.1em;
	text-align:center; 
	font-family:"Calibri", Verdana, Arial, sans-serif;
	}  
 
div#mainbox {
	width:750px;
	}
 
div#header {
	width:750px;
	height:150px;}
 
div#navbar_right {
	background-color:#FFFFFF;
	text-align:left;
	width:125px;
	height:500px;
	float:right;
	}
 
div#tekstbox {
	background-color:#666666;
	font-size:1.8em;
 	width:625px; 
	height:500px;
	float:left;
	}
 

Grt,
Roland

verhaba - 29/03/2009 14:45
Lid		Hey Roland Bedankt voor je hulp. Ik had ondertussen al wat meer gegoogled en een mogelijke oplossing gevonden. Bedankt voor suggestie.

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten