• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Layout erstellen: Hilfe

J

Jonas23

New member
Guten Tag,
ich bin eigentlich ein Neuling in CSS
Nun mein Problem ist ich komme nicht ganz zurecht.
Nun ist meine Frage ob jemand vlt Lust hat mir den Code zu schreiben
Für diese einfache Skizze, damit ich mal einen Eindruck habe

9xw6-1.jpg

Hoffe jemand kann mir helfen

Vielen Dank
 
Schau Dir auch die Links mal richtig an, die wir Dir hier raussuchen. Ich hatte Dich bereits mal mit Vorlagen versorgt,
die ideal zum Lernen und Nachbauen sind und Dir zusätzlich ein kompletten Beispiel (2. Link) geliefert:
anna55 schrieb:
Schau Dich doch mal hier um:
intensivstation :: CSS Templates :: Templates

Hab heute hier mal was mit Prozentangaben gebastelt:
http://forum.jswelt.de/css-x-html/46121-gr-e-mehreren-divs-bestimmen.html#post291060
Zum Vergrößern anklicken....

Mein Beispiel kommt schon nahe an Deine Vorstellung ran. Du müsstest nur die Prozentzahlen ändern und links Deinen Navibereich einsetzen.

Schau Dir auch Biebers Link genau an. Ohne Dich wirklich mit der Materie auseinanderzusetzen, wirst Du nicht sehr weit kommen.
 
Hey Jonas

Probier das mal aus, vielleicht funktionierts :p

HTML:

HTML: 
<div id="page">
        <div id="header"> Header </div>
        <div id="teaser"> Teaser</div>
        <div id="content">
            <div id="navigation"> Navigation </div>
            <div id="hauptteil"> Hauptteil</div>
        </div>
    </div>

CSS:

Code: 
#page {
	width: 200px;
}
#content {
	float:left;
}
#teaser {
	float:right;
}
 
miraaza schrieb:
Hey Jonas

Probier das mal aus, vielleicht funktionierts :p

HTML:

HTML: 
<div id="page">
        <div id="header"> Header </div>
        <div id="teaser"> Teaser</div>
        <div id="content">
            <div id="navigation"> Navigation </div>
            <div id="hauptteil"> Hauptteil</div>
        </div>
    </div>

CSS:

Code: 
#page {
	width: 200px;
}
#content {
	float:left;
}
#teaser {
	float:right;
}
Zum Vergrößern anklicken....


Vielen Dank für eure Antworten

hab ihn jetzt so gemacht
HTML: 
<link rel="stylesheet" type="text/css" href="global.css">
</html>
</head>
<body>
<p>
	<a href="JavaScript:history.back()">

</p>
<div id="container">
	<div id="header"></div> 
	<div id="mainnav"></div> 
	<div id="menu"></div>
	<div id="contents"></div>
	<div id="footer"></div>
</div>
</body>
</html>

PHP: 
<style type="text/css" media="screen">
	body
	{
		margin: 0;
		padding: 0;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		background-color: #D6D6D6;
	}
	

	#header
	{
		width:auto;
		height: 100px;
		background-color: fuchsia;
	}
	
	#mainnav
	{
		height: 55px;
		background-color: green;
	}
	
	#menu
	{
		float: right; 
		margin-left: 500px;
		width: 500px;
		height: 450px;
		background-color: yellow;
	}
	
	#contents	
	{
		margin-right: 500px;
		height: 450px;
		background-color: aqua;
	}
	
	#footer	
	{
		clear: both;
		height: 20px;
		background-color: lime;
	}
	
</style>

Nun dieser passt jetzt eigentlich wieder sehr gute auf meinen Bildschirm
aber wie ist es jetzt mit anderen
was muss ich tun damit er auch auf grössren oder kleineren passt
 
Dein Code enthält Fehler Jonas...

Du hast

<link rel="stylesheet" type="text/css" href="global.css">
</html>

geschrieben, </html> kommt 2x vor, am schluss auch noch :D

Jonas23 schrieb:
Nun dieser passt jetzt eigentlich wieder sehr gute auf meinen Bildschirm
aber wie ist es jetzt mit anderen
was muss ich tun damit er auch auf grössren oder kleineren passt
Zum Vergrößern anklicken....

Hmm da kannst du nicht viel tun, wenn es auf deinem Bildschirm, und Browser gut gestyled ist, dann ist es auf jedem anderen Bildschirm auch O.K.
Schau einfach dass es auch in jedem Browser (bsp. Mozilla, Internet Explorer) gut aussieht.
 
anna55 schrieb:
Welchen Browser benutzt Du denn? Hast Du mal IE7 und 6 probiert?
Zum Vergrößern anklicken....

Firefox benutze ich


hab es mal hochgeladen
weisst du warum der gelbe teil sollte oben beim header anstossen und bis zum grünen und blauen Teil kommen jedoch gelingt mir das nicht
und im IE verzieht er mir das ganze layout warum das
 
Zuletzt bearbeitet:
Das ist normal, du solltest die breite der DIV's anpassen,

z.B. wenn die ganze Seite eine breite von 1000px hat, dann sollte der linke teil (navi+hauptteil) eine breite von 500px haben, und die gelbe box auch 500px.
 
miraaza schrieb:
Das ist normal, du solltest die breite der DIV's anpassen,

z.B. wenn die ganze Seite eine breite von 1000px hat, dann sollte der linke teil (navi+hauptteil) eine breite von 500px haben, und die gelbe box auch 500px.
Zum Vergrößern anklicken....

ok was denkst du ist die beste grösse für die website
ich könnte sie auch in die mitte zentrieren und dann einen gb machen
was schlägst du vor?
 
hmm,, also wenn ich eine neue webseite mache, mache ich es nach dem design, kommt drauf an :)
probier mal so mit einer breite zwischen 800px ~ 1000px
xD
 
Jonas23 schrieb:
ok was denkst du ist die beste grösse für die website
ich könnte sie auch in die mitte zentrieren und dann einen gb machen
was schlägst du vor?
Zum Vergrößern anklicken....

Warum nimmst Du nicht einfach dieses Template. Hier kannst Du einen Hintergrund haben, es ist zentriert, hat Header und Footer und funktioniert browserübergreifend. Du bastelst nur noch Deine Inhalte und Farben rein.
 
anna55 schrieb:
Warum nimmst Du nicht einfach dieses Template. Hier kannst Du einen Hintergrund haben, es ist zentriert, hat Header und Footer und funktioniert browserübergreifend. Du bastelst nur noch Deine Inhalte und Farben rein.
Zum Vergrößern anklicken....

der ist perfekt
aber wenn ich jetzt den header reinpacke verzieht er mir dann weil das template psst isch ja dynamisch an
 
Jonas23 schrieb:
der ist perfekt
aber wenn ich jetzt den header reinpacke verzieht er mir dann weil das template psst isch ja dynamisch an
Zum Vergrößern anklicken....


nur noch eins
wie kann ich jetz noch die breite bei diesem template devinieren damti es noch dynamisch ist

PHP: 
<style type="text/css" media="screen">
	body
	{
		margin: 0;
		padding: 0;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		background-color: #D6D6D6;
	}
	
	#container {
width: 60em;
margin: 0 auto;
padding: 0;
background-color: ;
}

#content {
min-height:600px;
background-color: #ffffff;
padding: 0;
margin: 0 0 0 20em;
}

#footer {
clear: left;
padding: 0;
margin: 0;
background-color: #E0A3B7;
}
	
	
	
	
	
	

	#header
	{
		width:auto;
		
		height: 94px;
		background-color: ;
	    
	}
	
	#mainnav
	{
		height: 54px;
		width: 243px;
		background-color: green;
	}
	
	#menu
	{
		float: right; 
		width: 350px;
		height: 353px;
		background-color: yellow;
	}
	
	#contents	
	{
		width: auto;
		height: 353px;
		background-color: aqua;
	}
	
	#footer	
	{
		clear: both;
		height: 20px;
		background-color: lime;
	}
	
</style>
 
Versteh Dich nicht, Du hast die Breite von 70em auf 60 em verringert, weiß also, was Du machen musst. BTW Du hast footer zweimal definiert.
 
anna55 schrieb:
Versteh Dich nicht, Du hast die Breite von 70em auf 60 em verringert, weiß also, was Du machen musst. BTW Du hast footer zweimal definiert.
Zum Vergrößern anklicken....


ah ist es so wenn ich den em generiere dass er ihn in der Höhe auch anpasst
nun nur noch etwas

PHP: 
	body
	{
		margin: 0;
		padding: 0;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		background-image:url(background.jpg);
	}


hab hier den Background eingebaut,
aber wenn ich das so lasse, ist er einfach weiss
und der Background ist super im Firefox
aber wenn ich ihn im Safari anschaue ist er nicht gestreckt
weisst Du wie man ihn ebenso dynamisch macht
vielen Dank
 
Safari Mac oder Safari Windows? Ich hab hier schon den 4er beta Windows drauf.

Das Template sieht in allen Browsern auch mit Background-Image gut 'gestreckt' (gekachelt) aus - hab's eben mal nachgebaut. Ohne Liveversion Deiner Seite wird das hier nichts.
 
anna55 schrieb:
Safari Mac oder Safari Windows? Ich hab hier schon den 4er beta Windows drauf.

Das Template sieht in allen Browsern auch mit Background-Image gut 'gestreckt' (gekachelt) aus - hab's eben mal nachgebaut. Ohne Liveversion Deiner Seite wird das hier nichts.
Zum Vergrößern anklicken....


hab sie schon mal reingestellt
ist nur ein entwurf
safari windows
hab die Site in der Schule angeschaut, er begann untern wieder von vorne eben

nur noch zum Background

PHP: 
    body
    {
        margin: 0;
        padding: 0;
        font: 85% arial, hevetica, sans-serif;
        text-align: center;
        color: #505367;
        background-image:url(background.jpg);
    }

wenn ich den so angeben ist alles weiiss ich muss ihn im html mit body background angeben warum ist das si
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben