2 divs naast elkaar?

Status
Niet open voor verdere reacties.
J

JeroenHulshof

Gebruiker
Lid geworden
13 dec 2012
Berichten
43
Beste mensen,

Ik zit met een probleem.
op www.jeroenhulshof.nl/test heb ik een voorbeeld.

Ik wou 2 divs naast elkaar zetten. Ik had dus eerst een logo vet mooi boven mijn border. en toen wou ik een text toevoegen met een nieuwe div, en dan die helemaal links hebben met margin-left.
Als je op het voorbeeld kijkt, zie je dat het op elkaar stapelt, en dat was niet de bedoeling.

code:
Code: 
@charset "UTF-8";
/* CSS Document */

body{
	background-image:			        	url('./../images/background.png');	
	background-repeat: 			         	no-repeat;
    background-position:                 	center center;
    background-attachment:                  fixed;
    -webkit-background-size:                cover;
    -moz-background-size:                   cover;
    -o-background-size:                     cover;
    background-size:                        cover;
    font-family:							Helvetica, sans-serif;
}

#container{
	height:									1500px;
	width:									970px;
	margin:									auto;
	margin-bottom:							10px;
}

#insideall{
	width:									960px;
	height:									1000px;
	border:									3px solid #000000;
	border-radius:							3px;
	background-color:						#ECE6E6;
}

#logo{
	width:									300px;
	height:									100px;
	margin-top:								10px;
	margin-left:							10px;
}

#tijdelijk{
	width:									300px;
	height:									100px;
	margin-left:							670px;
}

HTML:

Code: 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Jeroen Hulshof.nl Portal</title>
 <link rel="stylesheet" href="./assets/styles/normalize.min.css">
 <link rel="stylesheet" href="./assets/styles/main.css">
</head>

<body>
	<div id="container">
		<div id="logo">
			<img src="./assets/images/logo.png" alt="Logo Jeroenhulshof.nl" width="300" height="100">
		</div>
		<div id="tijdelijk">
			Tijdelijke website voor Endercraft spelers!
		</div>
		<div id="insideall">
			<p>Ga naar Endercraft.nl!</p>
		</div>
	</div>
</body>
</html>

Hopelijk kunnen jullie mij helpen!

Mvg,
 
Bij mij staat die rechts hoor. Wel onder de afbeelding. Maar staat aan de rechterkant (Safari).
Of wil je dat hij ook helemaal bovenaan staat op dezelfde hoogt van de afbeelding?

In dat geval gewoon even je css gaan aanpassen:

Code: 
@charset "UTF-8";
/* CSS Document */

body{
	background-image:			        	url('./../images/background.png');	
	background-repeat: 			         	no-repeat;
    background-position:                 	center center;
    background-attachment:                  fixed;
    -webkit-background-size:                cover;
    -moz-background-size:                   cover;
    -o-background-size:                     cover;
    background-size:                        cover;
    font-family:							Helvetica, sans-serif;
}

#container{
	height:									1500px;
	width:									970px;
	margin:									auto;
	margin-bottom:							10px;
}

#insideall{
	width:									960px;
	height:									1000px;
	border:									3px solid #000000;
	border-radius:							3px;
	background-color:						#ECE6E6;
}

#logo{
	width:									300px;
	height:									100px;
	margin-top:								10px;
	margin-left:							10px;
        float:                          left;
}

#tijdelijk{
	width:									300px;
	height:									100px;
	float:         right;
}

Ik heb bij #logo en #tijdelijk een flost toegevoegd. Probeer eens uit ;)
 
Zet de div van je tijdelijke binnenin de div van je logo.
Haal de float: left; weg bij #logo en de margine-top: 150px ook bij #insadeal.
De float: right bij #tijdelijk laat je staan.
 
nu heb ik weer dit :P. Alleen wil ik de text "Endercraft tijdelijke website" op de zelfde lijn hebben als het logo. Schermafbeelding 2013-01-29 om 11.36.36 PM.jpg
 
HTML: 
<html><head>
<meta charset="UTF-8">
<title>Jeroen Hulshof.nl Portal</title>
 <link rel="stylesheet" href="./assets/styles/normalize.min.css">
 <link rel="stylesheet" href="./assets/styles/main.css">
</head>

<body>
	<div id="container">
		<div id="logo">
			<img src="./assets/images/logo.png" alt="Logo Jeroenhulshof.nl" width="300" height="100">
		<div id="tijdelijk">
			<p>Tijdelijke website voor Endercraft spelers!</p></div>
		</div>
		
		<section id="insideall">
			<p>Ga naar Endercraft.nl!</p>
		</section>
	</div>


</body></html>


Code: 
@charset "UTF-8";
/* CSS Document */

body{
	background-image:			        	url('./../images/background.png');	
	background-repeat: 			         	no-repeat;
    background-position:                 	center center;
    background-attachment:                  fixed;
    -webkit-background-size:                cover;
    -moz-background-size:                   cover;
    -o-background-size:                     cover;
    background-size:                        cover;
    font-family:							Helvetica, sans-serif;
}

#container{
	height:									1500px;
	width:									970px;
	margin:									auto;
	margin-bottom:							10px;
}

#insideall{
	width:									960px;
	height:									1000px;
	margin-top: 1px;
	border:									3px solid #000000;
	border-radius:							3px;
	background-color:						#ECE6E6;
}

#logo{
	width:									300px;
	height:									100px;
	margin-top:								10px;
	margin-left:							10px;
	display:								inline;
}

#tijdelijk{
    float: right;
}
 
Het is gelukt!.

Kun je nou precies uitleggen wat je hebt gedaan?
Want ik zag dat je <section hebt toegevoegd, en ik weet niet wat dat is :P.
 
Section is een nieuwe HTML 5 tag. Die kunnen specifieker zijn. Maar je mag die gerust terug veranderen naar div.
Ik gebruik liever de nieuwe HTML5 tags omdat die meer kunnen (zie W3schools maar eens).

Het enige wat ik heb gedaan is de div #tijdelijk binnenin de div #logo geplaatst en in de css de #tijdelijke een float: right gegeven
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan