zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout | Position | Wrapper

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.10.2009, 14:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2009
Beiträge: 2
danzo befindet sich auf einem aufstrebenden Ast
Standard Layout | Position | Wrapper

Liebe XHTML Gemeinde,

es ist nun schon etwa 8 Jahre her, als ich meine letzte Homepage gebastelt habe und seitdem hat sich wirklich viel getan
Ich arbeite gerade an einer neuen Portfolio Website und diesmal zum erstenmal mit CSS. Ich bin begeistert soweit, habe jedoch ein Problem mit dem Positionieren meiner divs.

Folgendes Problem:
Ich habe einen #wrapper div der die ganzen anderen divs umschliessen soll, sodass ich am ende einen footer einbauen kann. Leider umschliesst mein wrapper garnichts, da ich mit absoluten Positionen gearbeitet habe. Nun folgende Frage: Was wäre der eleganteste Weg mein Layout zu gestallten (ohne absolute Positionen), sodass der wrapper meine anderen divs umschliesst? Wenn ich mit floats arbeite dann schliesst der wrapper auch nicht.

Und unabhängig davon würde ich gerne wissen ob mein code soweit logisch ist oder ob ich etwas ändern sollte.

Vielen Dank schonmal!

Hier mein Quelltext:

HTML-Code:
<!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">
<head>
	<title>dannylee :: film</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<style type="text/css">

body {
	background-color: #FFFFFF;
	color: #666666;
	font-family: "Times New Roman", Times, Serif;
	font-size: 12px;
	height: 100%;
	width: 100%;
	margin:0;
	padding:0;
}

a:link, a:visited {
	color: #000000;
	text-decoration:none;
}

a:hover, a:active {
	color: #C4151B;
	text-decoration:underline;
}

#wrapper {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

#header {
	position: absolute;
	top: 25px;
	width: 960px;
	height: 32px;
}

#navigation {
	position: absolute;
	top: 81px;
	width: 960px;
	height: 15px;
	border-bottom: 1px solid #BFBFBF;
}
#navigation a { 
	margin: 0 30px 1px 0;  
  	text-decoration: none;  
  	font-family: helvetica;
  	color: #000000;
} 
 
#navigation a:hover, a:active {  
	color: #0066FF;
} 

#content_container {
	position: absolute;
	top: 118px;
	width: 960px;
	height: 430px;
}

#footer {
	clear: both;
	width: 960px;
	height: 15px;
}

</style>
</head>

<body>
<div id="wrapper">
<!-- ================================ BEGIN HEADER -->
	<div id="header">
		<a href="index.html"><img width="159" height="32" border="none" alt="home" src="logo.jpg"></a>	
	</div>
<!-- ================================ END HEADER -->

<!-- ================================ BEGIN NAVIGATION -->
	<div id="navigation"> 
   		<a href="#">FILMS</a>
   		<a href="#">PROJECTS</a> 
   		<a href="#">ABOUT</a>
   		<a href="#">CONTACT</a>  
	</div>
<!-- ================================ END NAVIGATION -->

<!-- ================================ BEGIN CONTENT CONTAINER -->
	<div id="content_container">
		<img src="slide1.jpg" />
	</div>
<!-- ================================ END CONTENT CONTAINER -->
			
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.10.2009, 14:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von danzo Beitrag anzeigen
Wenn ich mit floats arbeite dann schliesst der wrapper auch nicht.
Unter FAQ Punkt 2 kannst du nachlesen, wie Floats eingeschlossen werden können.
Solange du absolut positionierst wirst du dein Ziel nicht erreichen.
Wobei ich bei deinem Code bisher weder für Positionierung noch für Float eine Notwendigkeit erkennen kann.

Lies doch mal was zu semantischem Markup. Eine Navigation gehört in eine Liste.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.10.2009, 15:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2009
Beiträge: 2
danzo befindet sich auf einem aufstrebenden Ast
Standard

hey fricca,

danke für die Links. Die Navigation habe ich jetzt als Liste umgeschrieben.
Hat gut geklappt.

Was würdest Du denn anstelle von Positionierungen und Floats empfehlen?

Danke und Gruß
Danzo
Mit Zitat antworten
  #4 (permalink)  
Alt 12.10.2009, 15:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von danzo Beitrag anzeigen
Was würdest Du denn anstelle von Positionierungen und Floats empfehlen?
Gar nichts.
Blockelemente ordnen sich ganz von selbst untereinander an.
Für Abstände gibt es Margin und Padding.

Float brauchst du, wenn du Bereiche nebeneinander stellen willst. Davon kann ich bei dir nichts sehen.

Ich empfehle dir das Buch "Little Boxes" als Einstiegslektüre.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.10.2009, 18:41
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von danzo Beitrag anzeigen
Was würdest Du denn anstelle von Positionierungen und Floats empfehlen?
Man kann Positionierungen und Floats ruhig verwenden, man sollte es nur vorher verstehen. Wenn dir Friccas Verweis auf die FAQ nicht ausreicht, hier ein paar Direktlinks zu den entsprechenden Kapiteln in der Online-Version von Little Boxes 1:
Danach geht es weiter mit Kapitel 14. Dort werden vier Methoden zum Umschließen von gefloateten Elementen erklärt.
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Geändert von pmmueller (19.10.2009 um 18:46 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
div, layout, positionieren, wrapper

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div-höhe? - Hauptcontainer über ganze Seite will nicht... AndMei CSS 5 13.12.2010 14:43
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 14:30
Untermenü im IE nici CSS 10 22.06.2009 21:19
Was übersehe ich? Psyclown CSS 2 19.10.2008 13:00
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 14:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:38 Uhr.