✔ CSS mag mich nicht :-(

Djingeringe · 8. Juli 2005

Hallo,

auch ich möchte zukünftig Tabellenlose Seiten erstellen können. Hierzu gibt es ja die tollen Stylesheets von denen alle ganz begeistert sprechen. Toll, dachte ich und hab im Netz nach Infos zum Thema gesucht. Man wird ja relativ schnell fündig, ja geradezu bombadiert wird man in Google(Begriff: CSS = 79.900.000 Treffer) von diversen Seiten, die einem alles verraten, nur schnallen es die allerwenigsten. Leider bin ich auch einer derjenigen, die es nicht so ganz kapieren, besser gesagt wie man ein Seitenlayout anhand von Containern positioniert.

Ich habe dafür ein fiktives Projekt erstellt und mein Glück versucht. Erst habe ich in der externen CSS-Datei die ganzen Container erstellt. Schön, echt schön. Alle Container haben sich untereinander positioniert. Also habe ich es mit "FLOAT" versucht und irgendwie habe ich es einigermaßen hinbekommen. Zwar nicht so wie es eigentlich aussehen soll, aber ich war schon weiter.

Das alles sieht im maximierten Browserfenster wie schon erwähnt einigermaßen so aus, wie es aussehen soll. Ein paar Kleinigkeiten wie der Abstand zum vorherigen Container (soll eigentlich kein Abstand dazwischen sein) bekomme ich bestimmt noch hin. Leider habe ich es nicht hinbekommen und was noch viel schlimmer ist, dass sich bei ändern der Größe des Browserfensters alles in sich zusammenfällt und sich verschiebt. Das liegt wohl an dem "FLOAT". Aber ohne das "FLOAT" sind ja die einzelnen Container untereinander gestapelt.

Hmmmm...

da ich selber nicht mehr weiter komme, hoffe ich ihr könnt mir weiterhelfen, damit endlich mal Das sog. Aha-Erlebnis eintritt. Wichtig, dabei, dass das Layout nicht mit absoluten sondern relativen Positionsangaben funktioniert.

Wäre natürlich auch super wenn mir jemand erklären könnte, warum es so wie ich es gemacht habe nicht funktionieren kann. Aber dann bitte nicht so wie es auf den Seiten im Netz erklärt wird, also so, damit es jeder verstehen kann.

Ich habe die Navigation in 3 Teile geteilt. Kann man das auch irgendwie hinbekommen ohne sie teieln zu müssen?

Und bitte keine Links zu: www.selfhtml.net www.css4you.de u.s.w. Das sind bestimmt ganz tolle Seiten, nur ich verstehe dort fast nur Bahnhof.

Im Anhang ein Bild vom Layout, also wie es aussehen soll und die HTML und CSS-Datei.

Trotzdem füge ich nochmal die Quelltexte ein:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UEBUNG_CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
 
<body leftmargin="0" topmargin="0">
 
<div class="logo"></div>
<div class="navigation-eins"></div>
<div class="top"></div>
<div class="balken-links"></div>
<div class="navigation-zwei"></div>
<div class="balken-rechts"></div>
<div class="bildsprache"></div>
<div class="navigation-drei"></div>
<div class="inhalt"></div>
<div class="balken-bottom"></div>
</body>
</html>

HTML:

div.logo {
width: 230px;
height: 100px;
float: left;
position: relative;
background-color: Aqua;
}
div.balken-links {
background-color: #CFE7C6;
width: 230px;
height: 40px;
float: left;
position: relative;
}
 
div.bildsprache {
width: 230px;
height: 560px;
margin: 0px;
float: left;
position: relative;
background-color: Fuchsia;
}
div.navigation-eins {
background-color: #58B347;
width: 200px;
height: 100px;
margin: 0px;
float: left;
position: relative;
}
div.navigation-zwei {
background-color: #58B347;
width: 200px;
height: 40px;
margin: 0px;
border-bottom-width: 1px;
float: left;
position: relative;
}
div.navigation-drei {
background-color: #58B347;
width: 200px;
height: 560px;
margin: 0px;
float: left;
position: relative;
}
div.top {
background-color: #8FC67A;
width: 570px;
height: 100px;
margin: 0px;
position: relative;
}
div.balken-rechts {
background-color: #CFE7C6;
width: 570px;
height: 40px;
margin: 0px;
position: relative;
}
div.inhalt {
position: relative;
height: 560px;
width: 570px;
background-color: Red;
}
div.balken-bottom {
position: relative;
height: 27px;
width: 570px;
background-color: #CFE7C6;
}

Danke

Steffen Giers · 8. Juli 2005

Zuersteinmal sind wir hier nicht da um dir die Grundlagen von CSS näher zu bringen. Es wird keiner Zeit uns Musse haben dich da einzuführen. Selbst ist der Mann lautet die Parole. Diese Einführung auf css4you ,ist wie für dich Geschaffen

. Da ist alles Erklärt was du wissen musst um erfolgreiche Stylesheets zu schreiben.

Wenn du Fragen zu spezifischen Problemen hast, bitte, tue dir keinen Zwang und schreib mir ne PN. Ich bin gerne bereit zu helfen aber etwas Eigeninititive kann man schon erwarten.

EDIT: Ansonsten gibts hier auch klasse TUTOTIALS. TUT kommt von Tuen.

Maik · 8. Juli 2005

Überarbeiteter / korrigierter CSS- und HTML-Code, basierend auf deinem Source-Posting und Preview-Image:

Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

CSS-Code für layout.css:

Code:

html, body, div
{
margin: 0;
padding: 0;
}

div.box
{
width: 1000px;
}

div.logo {
width: 230px;
height: 100px;
float: left;
background-color: Aqua;
}

div.navigation-eins {
background-color: #58B347;
width: 200px;
height: 100px;
float: left;
}

div.top {
background-color: #8FC67A;
width: 570px;
height: 100px;
float: right;
}

div.balken-links {
background-color: #CFE7C6;
width: 230px;
height: 40px;
float: left;
}

div.navigation-zwei {
background-color: #58B347;
width: 200px;
height: 40px;
float: left;
}

div.balken-rechts {
background-color: #CFE7C6;
width: 570px;
height: 40px;
float: right;
}

div.bildsprache {
width: 230px;
height: 560px;
float: left;
background-color: Fuchsia;
}

div.navigation-drei {
background-color: #58B347;
width: 200px;
height: 560px;
float: left;
}

div.inhalt {
float: right;
height: 560px;
width: 570px;
background-color: Red;
}

div.clear
{
clear: left;
line-height: 0;
font-size: 0;
}

div.balken-bottom {
position: absolute;
left: 430px;
top: 673px;
z-index: 2;
height: 27px;
width: 570px;
background-color: #CFE7C6;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UEBUNG_CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">

</head>
<body>

<div class="box">

<div class="logo">logo</div>
<div class="navigation-eins">nav 1</div>
<div class="top">top</div>

<div class="clear">&nbsp;</div>

<div class="balken-links">balken links</div>
<div class="navigation-zwei">nav 2</div>
<div class="balken-rechts">balken rechts</div>

<div class="clear">&nbsp;</div>

<div class="bildsprache">bildsprache</div>
<div class="navigation-drei">nav 3</div>
<div class="inhalt">inhalt</div>

<div class="clear">&nbsp;</div>

<div class="balken-bottom">balken bottom</div>

</div>

</body>
</html>

Gumbo · 8. Juli 2005

Etwa so:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<style type="text/css">
	* {
		margin:			0;
		padding:		0;
	}
	body {
		background:		#fff url(http://www.tutorials.de/attachment.php?attachmentid=17586) no-repeat;
	}
	#container {
		position:		relative;
		width:			1000px;
		background-color:	#90c67a;
	}
	#branding {
		width:			230px;
		height:			100px;
		background-color:	#fff;
	}
	#nav {
		position:		absolute;
		top:			0;
		left:			230px;
		width:			200px;
		height:			700px;
		background-color:	#62ae42;
	}
	#sidebar {
		width:			230px;
		height:			560px;
		background-color:	#fff;
		border-top:		40px solid #cee7c7;
	}
	#content {
		position:		absolute;
		top:			100px;
		left:			430px;
		width:			570px;
		height:			533px;
		background-color:	#fff;
		border-top:		40px solid #cee7c7;
		border-bottom:		27px solid #cee7c7;
	}
	</style>
</head>

<body>
<div id="container">
	<div id="branding">Branding</div>
	<div id="nav">Navigation</div>
	<div id="sidebar">Bildsprache</div>
	<div id="content">Inahlt</div>
</div>
</body>
</html>

Wahrscheinlich benötigt der Internet Explorer noch ein paar CSS-Hacks, damit es auch dort korrekt dargestellt wird.

Djingeringe · 8. Juli 2005

Zuersteinmal sind wir hier nicht da um dir die Grundlagen von CSS näher zu bringen.

Hmmm... was habe ich denn geschrieben? Das ihr mir jemand die Grundlagen von CSS beibringen soll? Kann mich nicht erinnern je so etwas geschrieben zu haben. Ist auch egal. In so 'nem Fall ist Fielmann keine schlechte Adresse. www.fielmann.de

Selbst ist der Mann lautet die Parole.

Nochmal Hmmmm....

Aus meinem Post müsste eigentlich herauszulesen sein, dass ich mich die ganze Zeit damit beschäftige. Und sicher nicht erst seit heute. Nur wenn man seit Stunden nicht weiter kommt, ist es doch super wenn es so etwas wie dieses Forum gibt und jemand einem weiter helfen kann. Das sit doch unter anderem der Sinn eines Forums. Oder? Würde jeder so denken wie du, wären alle Foren leer. So tritt das Aha-Erlebnis schon viel früher ein und schont dabei auch seine Nerven ;-] Hier nochmal ein toller Link:

http://www.gesundheit.de/familie/psychologie/konzentrationsschwaeche/

Diese Einführung auf css4you ,ist wie für dich Geschaffen . Da ist alles Erklärt was du wissen musst um erfolgreiche Stylesheets zu schreiben.

Sorry, aber ich muss nochmal "Hmmmm...." machen. Ich glaube, du hast den Beitrag nicht gelesen. Kann das sein? Auch hier möchte ich dir Hilfe anbieten. Diesmal kein Link, sondern eine Telefonnummer.

Kontakt Alphatelefon:
0251 / 53 33 44 (der Anruf ist gebührenpflichtig).

@Maik

Danke. Auf dich ist wie immer Verlass. Solche Leute sind unentbehrlich für ein gut laufendes Forum wie tutorials.de

@Gumbo

Auch dir Danke. Leider fuktioniert es nicht 100 prozentig. Deswegen nehme ich einfach den Code von Maik und baue meine Kenntnisse in CSS darauf auf.

Ciao

Steffen Giers · 9. Juli 2005

Danke für deine freundlichen Ratschläge und die fabelhaften Links. In meinen Augen ist der "Sinn" eines Forums, zu Diskutieren. Sei es fachlich, weltpolitisch oder einfach nur über den letzten Auftrag. Sicherlich wird auch auch geholfen. Manchmal mehr manchmal weniger.

Und auch ich spreche mich nicht frei davon hier Threads zu eröffnen und nach Hilfe zu fragen. Das ist auch völlig legitim. Vielleicht haben wir uns auch nur missverstanden

?!

Also zum Thema.

Bei Navigationen bietet es sich immer an diese in eine Spalte zu setzten und dann mit <ul> und <li> Listen zu erstellen. Listen kommen dem Aufbau von Navigationen am nächsten. Hier mal ein kleines Beispiel. Ich gehe mal davon aus das du die Syntax von CSS kennst. Falls nicht frage einfach (ernst mein!).

Code:

 #spalte_links {
 width:				150px;
 float:				left;
 clear:				left;
 }
 
 ul.subnav {
 list-style:			none;
 width:				150px;
 text-align:			center;
 margin-left:		28px;
 margin-top:			50px;
 color:				#999999;
 }
 
 ul.subnav li a {
 display:			block;
 height:				20px;
 text-decoration:	none;
 border-bottom:		1px solid silver;
 color:				#999999;
 }
 
 ul.subnav li a:link, a:visited {
 color:				#999999;
 }
 
 ul.subnav li a:hover {
 background-color:	#FAFAFA;
 color:				#999999;

Hier die passende HTML.

Code:

<div id="spalte_links">
    <ul class="subnav">
    		<li><h2>Sub Navigation</h2></li>
    		<li><a href="#">News</a></li>
    		<li><a href="#">Projekte</a></li>
    		<li><a href="#">Login</a></li>
    </ul>
    </div>

Bau das mal irgendwo wo ein und guck dir das mal an. So lernt man am besten. Auf diese Art kannst du auch 4,5 oder 12 Navigationslisten. So ähnlich funktioniert das auch mit vertikaler Navigation.

Weiter hin könnte man die Divs verschachteln. Hätte den Vorteil das man die abhängkeiten untereinander besser erkennen kann.

✔ CSS mag mich nicht :-(

Djingeringe

Mitglied

Anhänge

Steffen Giers

Erfahrenes Mitglied

Maik

Gumbo

Erfahrenes Mitglied

Djingeringe

Mitglied

Steffen Giers

Erfahrenes Mitglied

Neue Beiträge