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, 16: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, 17: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, 18: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, 21: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, 21: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, 21:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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, 22: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, 22:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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 11.10.2005, 00: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 11.10.2005, 00:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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
Hilfe! Layout komplett verschoben emkaythree CSS 17 30.12.2010 19:33
Hilfe beim Layout claude CSS 10 22.11.2006 22:16
Brauche Hilfe - Suchmaschinen optimierung, Layout psq Site- und Layoutcheck 2 18.10.2006 18:20
Hilfe bei Umsetzung von Layout... darvida CSS 8 29.04.2005 12:32
brauche hilfe bei layout schaf CSS 18 07.03.2005 15:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:30 Uhr.