CSS DIV Container vor Rechteck setzen

Semper Fidelis

Lt. Junior Grade
Registriert
Nov. 2009
Beiträge
437
Hallo Forum,

soviel mal vorweg: Ich bin was CSS und HTML angeht noch ein blutiger Anfänger :D Ich geb mir aber Mühe das Ganze zu verstehen und hab mich auch schon in paar Bücher eingelesen :)

So nun zu meinem Problem:

Ich möchte die beiden blau umrandeten Rechtecke vor so einen weißen Hintergrund setzen, also genau so wies bei der Überschrift der Fall ist ;) Guckts euch am besten mal in dem Bild an ;)
Ohne Titel.jpg

Vielen Dank schonmal :)

HTML Code:
Code:
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lorem ipsum</title>
    <link rel="stylesheet" href="formate.css" type="text/css">
  </head>
  <body>
  	<img src="img/header.jpg" alt="titelbild">
    <h2>UNSER TEAM FREUT SICH AUF IHREN BESUCH</h2>
    <div id="kontakt">
   	<h6>Kontakt</h6>
   	<p>Lorem ipsum</p>
   	<p>Lorem ipsum</p>
   	<p>Lorem ipsum</p>
   	<p>Lorem ipsum</p>
   	<p>Lorem ipsum</p>
   	</div>
   	<div id="zeiten">
   	<h6>Öffnungszeiten</h6>
   	<p>Lorem ipsum</p>
   	<p>Lorem ipsum</p>
   	</div>
  </body>
</html>

CSS Code:
Code:
body {
	background-color:#EBECEE;
}

img {
	min-width: auto;
    height: auto;
}
#kontakt {
	border-color: navy;
	border-width: 7px;
	border-style: solid;
	float: left;
	font-family: sans-serif;
	margin-left: 25%;
	line-height: 0.4em;
	
}

#kontakt h6 {
	font-size: 1.25em;
}

#kontakt p {
	padding-left: 10px;
	padding-right: 10px;
	}

#zeiten {
	border-color: navy;
	border-width: 7px;
	border-style: solid;
	float: right;
	font-family: sans-serif;
	padding-bottom: 65.8px;
	margin-right: 23%;
	line-height: 0.4em;

}

#zeiten h6 {
	font-size: 1.25em;
}

#zeiten p {
	padding-left: 10px;
	padding-right: 10px;
}

h1 {
	font-family: sans-serif;
}
h2 {
	font-family: sans-serif;
	margin-left: 200px;
	margin-right: 200px;
	text-align:center;
	background-color: white;
	box-shadow: 1px 2px 3px grey;

}

h6 {
	margin-top: 0px;
	margin-bottom: 0px; 
	padding-left: 10px; 
	background-color: #C8C8C8; 
	line-height: 1.5em;
	}
 
Hallo,
ein <div> ist ein Blockelement, d.h. ein <div> nimmt immer die komplette Breite ein. Am Besten du schachtelst innerhalb eines <div> zwei <span> Tags. Ein <span> ist das gleiche wie ein <div> nur ist es kein Blockelement. Zudem ist das Schachteln von <div> nicht Teil des HTML-Standard.

Die Struktur könnte also so aussehen:
Code:
  <div>
    <span><!-- Kontakt -->

    </span>
    <span><!-- Öffnungszeiten -->

    </span>
</div>
 
Danke Leute ;) Habs rausbekommen :D Das mit dem z-index hat geklappt :)

Code:
* {
margin:0px;
padding:0px;
}
	
body {
	background-color:#EBECEE;
}

#page {
	width:100%;
	min-width:900px;
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
    height: auto;
    }


img {
	width:100%;
	min-width:900px;
	max-width:2432px;
    height: auto;
    }


#kontakt {
	border-color: navy;
	border-width: 7px;
	border-style: solid;
	float: left;
	font-family: sans-serif;
	margin-top:-175px;
	margin-left: 120px;
	line-height: 1.4em;
	z-index:2;
	position:relative;	
}

#kontakt h6 {
	font-size: 1.25em;
}

#kontakt p {
	padding-left: 10px;
	padding-right: 10px;
	}

#zeiten {
	border-color: navy;
	border-width: 7px;
	border-style: solid;
	float: left;
	font-family: sans-serif;
	padding-bottom: 65.8px;
	margin-left: 350px;
	line-height: 1.4em;
	margin-top:-175px;
	z-index:2;
	position:relative;

}

#zeiten h6 {
	font-size: 1.25em;
}

#zeiten p {
	padding-left: 10px;
	padding-right: 10px;
}

h1 {
	font-family: sans-serif;
}
h2 {
	font-family: sans-serif;
	margin-left: 100px;
	margin-right: 100px;
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
	background-color: white;
	box-shadow: 1px 2px 3px grey;

}

h6 {
	margin-top: 0px;
	margin-bottom: 0px; 
	padding-left: 10px; 
	background-color: #C8C8C8; 
	line-height: 1.5em;
	}

#hintergrunddiv {
	color:white; 
	position:relative;
	z-index:1;
	padding-top:180px;
	margin-left:100px;
	margin-right:100px;
	background-color: white;
	box-shadow: 1px 2px 3px grey;

}
 
Zurück
Oben