mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 20:14 Benutzername: Passwort: Auto-Login

Thema: [CSS] Kleines CSS-Problem vom 25.09.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Kleines CSS-Problem
Seite: Zurück  1, 2, 3, 4  Weiter
Autor Nachricht
DamnSimple
Threadersteller

Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht: Weiblich
Verfasst Do 25.09.2008 09:25
Titel

Antworten mit Zitat Zum Seitenanfang

So hab ich das gemacht

Code:

body {
   background-image: url(img/bg.gif);
   background-repeat: repeat;
   margin: 0px;
   padding: 0px;
   font-family: Verdana, Lucida Grande, Tahoma, Trebuchet MS, sans-serif;
   font-size: 11px;
}

#container {
   margin: 0 auto;
   width: 900px;
   height: 100%;
   z-index: 1;
}
  View user's profile Private Nachricht senden
konsumkünstler

Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 25.09.2008 09:25
Titel

Antworten mit Zitat Zum Seitenanfang

DamnSimple hat geschrieben:
Besonders weitergeholfen hat mir das auf jeden Fall nicht.


seal hat geschrieben:
http://www.tanfa.co.uk/css/layouts/css-3-column-layout-v1.asp

Breite kannst du ja anpassen.

Zentrieren geht wie folgt
Code:
body { text-align: center; /* Zentrieren für IE */ } #zentriert { margin: 0px auto; text-align: left; /* Text wieder linksbündig */ }


ein wenig Eigeninitiative schadet niemandem. Mit dem Link von Seal solltest du dein Problem lösen können. Allerdings wird mit dem gezeigten Beispiel auch nur ein Tabellen-Layout mittels div´s + css erzeugt, sodass du auch gleich Tabellen nehmen kannst (Tabellen tun keinem weh).
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 25.09.2008 09:35
Titel

Antworten mit Zitat Zum Seitenanfang

CSS
Code:

* {
   margin: 0;
   padding: 0;
}
   
body {
   background:#ffffff;
}

html, body {
   margin:0;
   padding:0;
   height:100%;
}

div#container {
   position:relative;
   margin:auto auto;
   width:deinpx;
   min-height:100%;
   background:#535353;
}

* html div#container {
   height:100%;
}

div#container #content {
   margin:auto;
   width:deinepx;

}

div#container #footer {
   position:absolute;
   bottom:0;
   width:deinepx;
   height:deinepx;
   margin:auto auto;
   border-top:1px solid #cccccc;
}

/* IE - Hack */
* html div#container #footer {
   bottom: -1px;
}
/* IE - Hack */



HTML
Code:

<div id="container">
   <div id="content"></div>
   <div id="footer"></div>
</div>


so könnte das aussehen.
  View user's profile Private Nachricht senden
DamnSimple
Threadersteller

Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht: Weiblich
Verfasst Do 25.09.2008 09:42
Titel

Antworten mit Zitat Zum Seitenanfang

Schuldigung, aber ich versteh's anhand des Layouts nicht. Ich lerne halt noch und finde das echt nicht in Ordnung, das ihr immer gleich so reagiert. Ich hatte die gleichen Angaben wie im Beispiellayout und es hat bei mir nicht funktioniert.

Das hat nichts mit Eigeninitiative zu tun. Bevor ich hier gefragt habe, habe ich ungefähr 3 Tage alles ausprobiert und nichts hat funktioniert. Da dachte ich nur, das mir vielleicht hier jemand spezifisch helfen kann.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 25.09.2008 09:43
Titel

Antworten mit Zitat Zum Seitenanfang

was willste denn jetzt noch?

hab dir doch das gepostet was du brauchst.

* Keine Ahnung... *
  View user's profile Private Nachricht senden
DamnSimple
Threadersteller

Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht: Weiblich
Verfasst Do 25.09.2008 09:56
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen, vielen Dank Kash.

Das mit dem Footer funktioniert jetzt auch, aber die Höhe des Contens, der Navigation und der Zusatzspalte sind immernoch nicht 100%. Hab ich irgendwas falsch gemacht oder was vergessen?

Code:

* {
   margin: 0;
   padding: 0;
}

html, body {
   background-image: url(img/bg.gif);
   background-repeat: repeat;
   height: 100%;
   margin: 0px;
   padding: 0px;
   font-family: Verdana, Lucida Grande, Tahoma, Trebuchet MS, sans-serif;
   font-size: 11px;
}

div#container {
   position: relative;
     margin: auto auto;
      width: 900px;
      min-height: 100%;
   z-index: 1;
}

* html div#container {
      height: 100%;
}

div#container #content {
      margin: auto;
      width: 900px;
      background-color: white;
   z-index: 1;
}

div#container #footer {
   position: absolute;
   bottom: 0;
   width: 900px;
   height: 120px;
   margin: auto auto;
   z-index: 2;
   }
   
/* IE - Hack */
* html div#container #footer {
   bottom: -1px;
}
/* IE - Hack */

#header {
   width: 900px;
   height: 120px;
   background-color: white;
   z-index: 1;
}

#head_left {
   width: 200px;
   height: 120px;
   float: left;
   background-color: #fff;
   border-left: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#head_content {
   width: 546px;
   height: 120px;
   float: left;
   background-color: #0d6380;
   border-left: 1px white solid;
   border-right: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#head_right {
   width: 150px;
   height: 120px;
   float: left;
   background-color: #0099cc;
   border-right: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#co_left {
   width: 200px;
   height: 100%;
   padding-top: 0%;
   padding-Bottom: 0%;
   float: left;
   background-color: white;
   border-left: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#co_content {
   width: 506px;
   height: 100%;
   padding-top: 0%;
   padding-Bottom: 0%;
   float: left;
   padding: 20px;
   background-color: #efefef;
   border-left: 1px white solid;
   border-right: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#co_right {
   width: 150px;
   height: 100%;
   padding-top: 0%;
   padding-Bottom: 0%;
   float: left;
   background-color: #0099cc;
   border-right: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}


/*
#footer {
   clear: both;
   width: 900px;
   height: 120px;
   z-index: 2;
}
*/

#foot_left {
   width: 200px;
   height: 120px;
   float: left;
   background-color: #0099cc;
   border-left: 1px white solid;
   z-index: 2;
}

#foot_content {
   width: 546px;
   height: 120px;
   float: left;
   background-color: #0d6380;
   border-left: 1px white solid;
   border-right: 1px white solid;
   z-index: 2;
}

#foot_right {
   width: 150px;
   height: 120px;
   float: left;
   background-color: #0099cc;
   border-right: 1px white solid;
   z-index: 2;
}

 ul#navi {
    font-size: 11px;
    float: left; width: 200px;
    margin: 0 0 100%; padding: 0;
  }
  ul#navi li {
    list-style: none;
    margin: 0; padding: 0;
    border-bottom: 1px white solid;
  }
 
  ul#navi li.unter {
    list-style: none;
    margin: 0; padding: 0;
    border-bottom: 1px white solid;
    display: block;
    padding: 10px;
    font-weight: bold;
    color: white;
    background-color: #0d6380;
  }
 
  ul#navi a {
    display: block;
    padding: 10px;
    font-weight: bold;
    color: white;
    text-decoration: none;
  }
  ul#navi a:link {
    background-color: #0d6380;
    color: white;
    text-decoration: none;
  }
  ul#navi a:visited {
    background-color: #0d6380;
    color: white;
    text-decoration: none;
  }
  ul#navi a:hover {
    background-color: #0099cc;
    color: white;
    cursor: help;
    text-decoration: none;
  }
  ul#navi a:active {
    background-color: #0d6380;
    color: white;
    text-decoration: none;
  }
  ul#navi a.unter {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
  }
  ul#navi a.unter:link {
    background-color: #0099cc;
    color: white;
    text-decoration: none;
  }
  ul#navi a.unter:visited {
    background-color: #0099cc;
    color: white;
    text-decoration: none;
  }
  ul#navi a.unter:hover {
    background-color: #efefef;
    color: #666666;
    cursor: help;
    text-decoration: none;
  }
  ul#navi a.unter:active {
    background-color: #0099cc;
    color: white;
    text-decoration: none;
  }
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 25.09.2008 10:21
Titel

Antworten mit Zitat Zum Seitenanfang

bitte bitte ließ dich auf de.selfhtml.org in CSS ein.
tuh mir den gefallen.

es gibt auch soetwas das nennt man hierarchie.
außerdem verletzt du die syntax aus meinem bsp.


//lass mal bitte alles von dir raus und erstelle nur das konstrukt welches ich gepostet habe.
falls es dann immer noch nicht stimmt dann melde dich nochmal.


Zuletzt bearbeitet von Kash am Do 25.09.2008 10:22, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
DamnSimple
Threadersteller

Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht: Weiblich
Verfasst Fr 26.09.2008 09:05
Titel

Antworten mit Zitat Zum Seitenanfang

So, hab jetzt soweit alles geschafft. Hab nur noch ein kleines Problem, nämlich wenn ich mehr Text in den Content schreibe wie die Browserhöhe hoch ist, verlängert sich der Hintergrund nicht mit. Hat jemand vielleicht eine Lösung?

Siehe hier!
  View user's profile Private Nachricht senden
 
Ähnliche Themen Kleines CSS-Problem
kleines CSS Problem
kleines Javascript problem
Kleines Website Problem
kleines flash problem
Kleines vBulletin/JS/IE Problem
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3, 4  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.