zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe beim Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.10.2005, 15:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2005
Beiträge: 48
Gayson17 befindet sich auf einem aufstrebenden Ast
Standard Hilfe beim Layout

Hallo!

Ich versuche mich gerade an meinem ersten Layout mit CSS, habe da jedoch einige Probleme.
Erstmal klappt die Darstellung im IE nicht. Das zweite Problem ist, dass die Menü-Spalte die Größe der Inhalt-Spalte annehmen soll, ist das realisierbar?

Danke!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css">
/*<![CDATA[*/

body {
  margin: 0px;
  padding: 0px;
  background-image: URL(images/background.jpg);
}

.padding {
  float: left;
  width: 20%;
  height: 300px;
}
#content {
  float: left;
  width: 60%;
  margin: 0px;
}
.clear {
  clear: both;
}


#menu {
  position:absolute;
  width: 130px;
  background-color: #ffcc00;
}
#inhalt {
  margin-left:130px;
  background-color: #ffffc6;
}
#logo {
  width:100%;
  background-color: #ffffff;
}
#leiste {
  width:100%;
  background-color: #00f000;
}


/*]]>*/
</style>

</head>
<body>

<div class="padding"></div>
<div id="content">
	<div id="logo">Logo</div>
	<div id="menu">Menü</div>
	<div id="inhalt">Inhalt







</div>
	<div id="leiste">kleine Leiste</div>
</div>
<div class="padding"></div>
<div class="clear"></div>

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.10.2005, 16:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

Zu 1.:
Code:
#menu {
  float:left;
  width: 130px;
  background-color: #ffcc00;
}
#inhalt {
  width:xxx;
  float:left;
  background-color: #ffffc6;
}
Die absolute Positionierung ist bei dir nicht nötig, also nur Fehlerquelle! Mit floats ist das viel "sauberer"!
Außerdem gibt es bessere Methoden, ein div zu zentrieren!
Code:
#content {margin:0 auto; }
tuts auch, dann kannst du dir .padding schenken.

zu 2.: Such nach "faux columns"!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.10.2005, 17:46
Neuer Benutzer
neuer user
 
Registriert seit: 27.09.2005
Beiträge: 5
Moorhuhn befindet sich auf einem aufstrebenden Ast
Standard

Zum Thema "faux columns":

http://alistapart.byteshift.de/fauxcolumns
Mit Zitat antworten
  #4 (permalink)  
Alt 10.10.2005, 20:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2005
Beiträge: 48
Gayson17 befindet sich auf einem aufstrebenden Ast
Standard

Hm, dass mit den faux columns ist ja ganz schön, doch hat es nicht soweit seine Grenzen, dass bei Seiten, die "nicht in px , sondern mit % gestaltet sind", dass nicht so funktioniert?
Bei mir sollte ja das Ganze zentriert sein, die Menübreite und Content immer relativ (20 bzw. 80%).
Wie ließe sich das mit faux columns lösen?
Mit Zitat antworten
  #5 (permalink)  
Alt 10.10.2005, 20:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2005
Beiträge: 48
Gayson17 befindet sich auf einem aufstrebenden Ast
Standard

Und kann' sein, dass der "Zentriertrick" (#content {margin:0 auto; }) auch nur bei einer statischen Breite funktioniert?
Mit Zitat antworten
  #6 (permalink)  
Alt 10.10.2005, 20:26
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

Was ist eine "statische" Breite?
Es muss eine Breitenangabe vorhanden sein, denn 100% breite Container lassen sich schwerlich zentrieren...
Diese Breite kann auch 60% sein.

Bei dir kann das auch heißen:
margin:0 20%;
Dann geht's ohne Breitenangabe.

Die "faux columns" brauchst du für #menu und #inhalt.
Für #menu hast du doch eine feste Pixelbreite angegeben - also was spricht gegen die Hintergrundbild-Lösung?
Mit Zitat antworten
  #7 (permalink)  
Alt 10.10.2005, 21:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2005
Beiträge: 48
Gayson17 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Die "faux columns" brauchst du für #menu und #inhalt.
Für #menu hast du doch eine feste Pixelbreite angegeben - also was spricht gegen die Hintergrundbild-Lösung?
Soweit ich verstehe muss doch dieses Hintergrundbild unbedingt in den body eingebunden werden.
Ich sehe da 2 Probleme:
1. Ich möchte einen gekachelten Hintergrund haben (von der gesamten Website)
2. der linke Abstand ist variabel, man kann also nicht sagen, dass das Menü immer 50px von links ist...
Lässt sich das dennoch lösen?
Mit Zitat antworten
  #8 (permalink)  
Alt 10.10.2005, 21:31
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 Gayson17
Soweit ich verstehe muss doch dieses Hintergrundbild unbedingt in den body eingebunden werden.
Nein, wieso?
Bei dir wäre vermutlich #content das geeignete Element für das faux columns Hintergrundbild.
Der body kann ein weiteres BG-Bild bekommen.

Benutz mal die Suchfunktion des Forums. Da wirst du viele umgesetzte Beispiele von "faux columns" finden.
Mit Zitat antworten
  #9 (permalink)  
Alt 10.10.2005, 23:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2005
Beiträge: 48
Gayson17 befindet sich auf einem aufstrebenden Ast
Standard

Hm, hab jetzt noch ein wenig rumgesucht, bin immer noch nicht weiter...
Ich habe jetzt noch einen Footer dazugenommen: Wenn der Inhalt der Seite kleiner als das Browserfenster ist, soll der Footer ganz unten angezeigt werden und die Spalten entsprechend verlängert werden. Geht der Inhalt über eine Seite, soll der Footer einfach angehangen werden.

Tut mir echt leid, dass ich soviel frage, aber für mich ist das noch nicht allzu durchschaubar..

Code:
body {
  padding: 0px;
  background-image: URL(images/background.jpg);
  margin: 2px 15%;
  height: 100%;
}

html{
  height: 100%;
}

#nonfooter{
  position:relative;
  height:100%;
}
#logo {
  background-color: #ffffff;
  width: 100%;
  height:50px;
}
#menu {
  float:left; 
  width: 20%;
  height: 90%;
  background: #ccc url(images/background_menu.jpg) repeat-y 0 0;
}
#content {
  float:left;
  width:80%;
  height: 90%;
  background-color: #ffffc6;
}
#footer {
  position:relative;
  height:30px;
  margin-top:-10px;
  width:100%;
  background-color: #00f000;
}
Code:
<html>
	<body>
		<div id="nonfooter">
			<div id="logo">Logo</div>
			<div id="menu">Menü</div>
			<div id="content">Inhalt










</div>
			<div style="clear: both;"/>
		</div>
		<div id="footer">kleine Leiste</div>
	</body>
</html>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.10.2005, 23:36
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:
Tut mir echt leid, dass ich soviel frage
Du fragst ja gar nichts.

Zum Thema "footer immer unten":
http://www.themaninblue.com/writing/...ve/2005/08/29/
Mit Zitat antworten
Sponsored Links
Antwort

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
Brauch Hilfe - mein Layout zerreißts beim Zoomen Sakul CSS 3 18.03.2011 04:35
Bitte um Layout hilfe gunnar_hst CSS 0 20.06.2010 14:57
Layout selbst coden - Hilfe ! kgsbm CSS 3 25.03.2008 19:25
Hilfe bei gesamten CSS Layout mexxat CSS 0 22.08.2007 13:40
Brauche Hilfe beim 2-Spaltigen Layout Kaimane CSS 1 15.08.2007 00:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:04 Uhr.