CSS DIV Container vor Rechteck setzen

Semper Fidelis · 1. März 2015

Hallo Forum,

soviel mal vorweg: Ich bin was CSS und HTML angeht noch ein blutiger Anfänger

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

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;
	}

Jokeboy · 1. März 2015

http://www.w3schools.com/cssref/pr_pos_z-index.asp

hroessler · 1. März 2015

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>

Semper Fidelis · 2. März 2015

Danke Leute

Habs rausbekommen

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;

}

Suche

CSS DIV Container vor Rechteck setzen

Semper Fidelis

Lt. Junior Grade

Jokeboy

Rear Admiral

hroessler

Gast

Semper Fidelis

Lt. Junior Grade

Ähnliche Themen