Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Wrapper um die Div Content und Menü“

Entenberger

Noch nicht viel geschrieben

Hallo,

ich bin dabei für meine Schwester eine schulsewrver Seite zu bauen.
Sie hat sich das Design ausgesucht:
Nun möchte ich gerne um die Div Boxen Content und Menü einen Wrapper Div legen.
So das man die dann mit einen Hintergrund Bild versehen kann das die farbe der Div Menü bist runter geht.
Da ich oben noch einen Header und unten noch einen Footer Div einbauen will, die nicht im Wrapper sein sollen bekomme ich das irgendwie nicht hin. Vieleicht ist jemand von Euch mal so nett und sagt mir wie ich das hin bekomme das ich da einen Wrapper einbaue mit dne ich den Hintergrund und die breite von den Div´s Content und Menü regeln kann.

Danke für Eure hilfe schon mal ...
 
U

Ultracisc

Guest

Nun möchte ich gerne um die Div Boxen Content und Menü einen Wrapper Div legen.


Brauchst du garnicht. Mach doch einfach so:

Code:
body { background-image: url(bild.gif);
       background-repeat: no-repeat; 
     }

Dann kannst du noch mit
Code:
background-position: 0 0;
die Position festlegen.

gruß ultracisc
 

Entenberger

Noch nicht viel geschrieben

Danke für Deine Antwort.

Das ist eigendlich so das richtige was ich gerne wollte, soll eine Div um die beiden Div´s gelegt werden also ein Wrapper. Den wollte ich dann zur einstellung der breite und einen hintergrund gif verwenden, so das dann links die Menü - Farbe bis runter geht.
 

Entenberger

Noch nicht viel geschrieben

Denke mal ich habe mich blöde ausgedrückt, sorry.

Also ich möchte es gerne so haben wie auf der Grafik im Anhang, da sieht man das ein Div sie mittiggemacht hat und das da eine Hintergrund Grafik in den Div ist. Denke mal ich habe mich da absolut dumm ausgedrückt, sorry dafür. Hoffe die Grafik zeigt mein Problem besser, das was da blau ist ist der Wrapper, den möchte ich gerne da noch rein haben. Damit ich das dann alles mittig bekomme und eine Hintergrundgrafik nehmen kann noch für den Wrapper.
Hier mal die Grafik, wie ich es gerne haben möchte:
[img=schaut hier bitte]

Danke schon mal Entenberger
 

Entenberger

Noch nicht viel geschrieben

Hier mal der Code, der macht aber noch im Explorer Probleme. So wie er im Firefox aussieht soll es sein eigendlich.

Code:
<style type="text/css" media="screen">
	<!--
		/* <![CDATA[ */	
		/* Alles auf 0 setzen */
*

{

	border:		none;

	padding:	0;

	margin:		0;

}

		body 
		{
	background: #000;
	color: #c0c0c0;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	padding: 0;
	margin: 0;
	font-size: 100.1%;
		}
		div#header{
	background-color: #575757;
	height: 89px;
		}
		div#wrapper{
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
		}
		* html #menu 
		{
			width: 200px;
			w\idth: 170px; 
		}
		
		div#menu 
		{
			width: 170px;
			left: 0;
			background-color: #575757;
			margin: 0;
			padding: 15px;
			float: left; 
		}
		
		div#content 
		{
			background: #1c1c1c;
			overflow: auto;
			padding: 15px;
		}
		
		div#footer{
	background-color: #CCCCCC;
	height: 25px;
		}
		/* ]]> */	
	--></style>

</head>

<body>
<div id="header">Das ist der Header "!"</div>
<div id="wrapper">
<div id="menu">
	<h2>Menü</h2>
	

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>  

</div>
<div id="content">
	<h1>2 Spalten | Menu fest, Content dynamisch</h1>
	

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  
	<h2>Browser Support - OK</h2>

	<ul>
		[*]Win: IE 6
		[*]Win: IE 5.5
		[*]Win: IE 5.01
		[*]Win: Opera
		[*]Win: Firefox

		[*]Mac: Safari
		[*]Mac: IE 5.2
	[/list]
	<h2>Browser Support - nicht OK</h2>
	<ul>
		[*]- keiner bekannt -
	[/list]

	

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>  
	

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> 
	

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>

</div>
</div>
<div id="footer">Das ist der Footter!!!</div>
</body>
</html>
 
U

Ultracisc

Guest

Ändere das so um:

/*---------------------------------------------------------*/

div#content
{
background: #1c1c1c;
overflow: auto;
padding: 15px;
float: right;
}

/*----------------------------------------------------------*/

dann dürfte der IE nicht mehr mucken. DAFÜR ABER IN FIREFOX
guck dir meinen nächsten Post an

bis denne
 
H

HoLgAy

Guest

Noch ein kleiner Tipp am Rande.

Folgende CSS-Einstellung
Code:
* {
padding: 0;
margin: 0;
}

solltest du lieber nicht verwenden, wenn die Seite später noch mehr können soll. (Formulare etc.) Diese Einstellung ist zwar sehr praktisch - aber die Browser (IE und FF) interpretieren diese unterschiedlich. Der Firefox setzt das margin und den padding auch für Checkboxen und Radiobuttons auf 0. (Was ja auch vollkommen okay wäre) Der IE jedoch wendet diese Eigenschaft nicht auf Checkboxen und Radiobuttons an. (Ich weiss nicht genau ob das bei anderen Elementen ebenfalls so ist).
Das hat zur Folge, dass es unmöglich ist Checkboxen und Radiobuttons vernünftig zu positionieren (in beiden Browsern).

Nur so nebenbei :)

greetZ
 
U

Ultracisc

Guest

Das was ich weiter oben geändert hatte funktionierte ja dann nicht in Firefox.
So sollte dein Code funktionieren:

[php:1:cf10549860]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Headline</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<style type="text/css" media="screen">
<!--
*{ border: none; padding: 0; margin: 0; }
body { background: #000; color: #c0c0c0; font-family: Verdana, Arial, Helvetica, Sans-Serif; padding: 0; margin: 0; font-size: 100.1%;}
div#header{ background-color: #575757; height: 89px;}
div#wrapper{ width: 800px; margin: 0 auto; }
* html #menu{ width: 200px; w\idth: 170px; }
div#menu{ width: 170px; left: 0; background-color: #575757; margin: 0; padding: 15px; float: left; }
div#content{ background: #1c1c1c; overflow: auto; padding: 15px; float: right; clear: right; width:570px; }
div#footer{ background-color: #ccc; height: 25px; clear:both; }
--></style>
</head>
<body>
<div id="header">Das ist der Header "!"</div>
<div id="wrapper">
<div id="menu">
<h2>Menü</h2>


The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
<div id="content">
<h1>2 Spalten | Menu fest, Content dynamisch</h1>


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>Browser Support - OK</h2>
<ul>
[*]Win: IE 6
[*]Win: IE 5.5
[*]Win: IE 5.01
[*]Win: Opera
[*]Win: Firefox

[*]Mac: Safari
[*]Mac: IE 5.2
[/list]
<h2>Browser Support - nicht OK</h2>
<ul>
[*]- keiner bekannt -
[/list]


It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>


Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>


There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>
</div>
<div id="footer">Das ist der Footer!!!</div>
</body>
</html> [/php:1:cf10549860]


Viel Spaß beim Basteln.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.189
Beiträge
2.582.077
Mitglieder
67.259
Neuestes Mitglied
SaschMasch1312
Oben