XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hilfe beim Layout (http://xhtmlforum.de/showthread.php?t=37149)

Gayson17 10.10.2005 15:50

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>


Tigereye 10.10.2005 16:02

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"!

Moorhuhn 10.10.2005 17:46

Zum Thema "faux columns":

http://alistapart.byteshift.de/fauxcolumns

Gayson17 10.10.2005 20:10

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?

Gayson17 10.10.2005 20:14

Und kann' sein, dass der "Zentriertrick" (#content {margin:0 auto; }) auch nur bei einer statischen Breite funktioniert?

fricca 10.10.2005 20:26

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?

Gayson17 10.10.2005 21:27

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?

fricca 10.10.2005 21:31

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.

Gayson17 10.10.2005 23:16

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>


fricca 10.10.2005 23:36

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/


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019