XHTMLforum

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

claude 21.11.2006 20:02

Hilfe beim Layout
 
hallo,

ich glaube hier bin ich wohl erst einmal richtiger aufgehoben,

ich habe eigentlich ein recht einfaches Layout, aber trotzdem zwei Probleme:

1. leider ist bei einer niedrigeren Bildschirm Auflösung nicht mehr die komplette Seite zu sehen, hab gestern etwas gebastelt aber keine Lösung gefunden.:cry:

2. Wie bekomme ich den Footer an den unteren Rand der Seite?

Ich hoffe ihr könnt mir helfen, schon einmal vielen Dank

points-kochstudio

Code:

/* CSS Stylesheet */
*{margin:0;padding:0;}
body {
background:#fff;
font-family:'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial,  Helvetica, sans-serif;}

#container{
margin:0 auto;}


/* --- header --- */
#header {
background:url(images/header.jpg) repeat-x;
height:125px;}

/* --- navigation --- */
#nav {
font-family:Century Gothic, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
display:block;
padding:85px 0 0 10px;}
#nav li {
float:left;
list-style:none;}
#nav li a {
display:block;
padding:7px 12px 14px 12px;
color:#c0c0c0;
text-decoration:none;
line-height:14px;
font-size:0.9em;}
#nav li a:hover, #nav li a.active {
background-image:url(images/menu_a_hover.gif);
background-position:bottom;
background-repeat:repeat-x;
color:#fff;}


/* ---- sidebar --- */
.sidebar {
float:left;
width:200px;
margin:10px 0 0 0;}
.sidebar h1 {
font-family:Century Gothic, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size:1.1em;
color:#AEADAD;
font-weight:normal;
letter-spacing:1px;
padding:5px 0 5px 10px;}
.sidebar ul {
background: url(images/sidebar.gif) no-repeat top left;
list-style:none;
margin:20px 0 50px 0;}
.sidebar li{
width:200px;
border-bottom: 1px solid #eee;
font-family:'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial,  Helvetica, sans-serif;
color:#858484;
font-size:0.7em;
letter-spacing:1px;
padding:2px 0 2px 0;}
.sidebar li a{
color:#858484;
text-decoration:none;
padding:0 0 0 10px;}
.sidebar li a:hover{
color:#80151A;}

/* --- content --- */
#content {
float: left;
width:650px;
padding:30px 50px 50px 60px;}
#content p {
font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-size:0.9em;
line-height:1.3em;
word-spacing:0.3em;
margin:0 0 8px 0;}
#content h1 {
font-family:Century Gothic, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size:1.0em;
letter-spacing:1px;
margin:0 0 10px 0;}
#content h2 {
font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-size:1.0em;
letter-spacing:0.6em;
margin:0 0 10px 0;}
#content h3 {
font-size:0.8em;
font-weight:normal;
color:#918E8E;
background:#F4E083;
border-top:1px solid #E6E6E6;
border-bottom:1px solid #E6E6E6;
margin:0 0 10px 0;
padding:2px 0 2px 5px;}


/* -- postmetadata --*/
.postmetadata{
font-size:0.6em;
color:#666;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
background-color:#f4f4f4;}
.postmetadata a{
color:#666;}
.postmetadata a:hover{
color:#80151A;
text-decoration: underline;}




/* --- footer --- */
#footer {
clear:both;
height:50px;
background:#555;
color:#AEADAD;
text-align:center;
font-size:0.8em;
padding:5px 0 0 0;}
#footer a {
color:#AEADAD;}


punctilio 22.11.2006 04:59

#content {
float: left;
width:650px;
padding:30px 50px 50px 60px;}

Ist schuld daran! Da du hier eine fixe Breite angibst, ist es klar dass das Menü nach unten wandert sobald es sich nicht mehr ausgeht! width: 60%; oder dergleichen wäre hier praktischer!

claude 22.11.2006 19:34

hallo, vielen Dank für die Antwort, aber eine Lösung war es leider nicht....

fricca 22.11.2006 19:40

Wenn du mit Prozentbreiten arbeitest, dann für Inhalt und Menü.
Und denk an das Box-Modell. Padding wird zu width addiert!

Footer ganz nach unten: siehe FAQ Punkt 7.

claude 22.11.2006 20:13

nee, dazu bin ich wohl zu blöd, klappt nicht oder kapier ich nicht:oops:
Zitat:

Footer ganz nach unten: siehe FAQ Punkt 7.
Mit Zitat antworten
Jetzt hängt der Footer im Header .....

fricca 22.11.2006 20:21

Der Footer muss außerhalb des 100%-hohen Containers stehen.
Schau dir den Code genau an und lies die Erklärung.

Deinem Gefloate fehlt noch ein clear. Siehe FAQ Punkt 2.

punctilio 22.11.2006 20:24

<div id="noFooter">
da kommt alles rein, ausser footer
</div>
Und dann erst
<div id="footer">
</div>

claude 22.11.2006 21:33

okay, Vielen an euch beide, jetzt sieht es gut aus :)

punctilio 22.11.2006 21:50

perfekt ist es noch nicht!
Erhöh noch den Margin wert von footer um ein wenig

claude 22.11.2006 21:57

Zitat:

Erhöh noch den Margin wert von footer um ein wenig
Mit Zitat antworten
Code:

html{height:98%;}
body{height:98%;}
#nonFooter{
position: relative;
min-height:98%;}
* html #nonFooter{
height:98%;}
#footer{
position: relative;
margin:0 auto 0 auto;}
/* A CSS hack that only applies to IE -- specifies a different height for the footer */
* html #footer{margin-top:0;}

Wie meinst du das, den Margin wert erhöhen? Wo genau?


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

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

© Dirk H. 2003 - 2023