Autor |
Nachricht |
DamnSimple
Threadersteller
Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht:
|
Verfasst Do 25.09.2008 09:25
Titel
|
|
|
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;
}
|
|
|
|
|
|
konsumkünstler
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 25.09.2008 09:25
Titel
|
|
|
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).
|
|
|
|
|
Anzeige
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 25.09.2008 09:35
Titel
|
|
|
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.
|
|
|
|
|
DamnSimple
Threadersteller
Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht:
|
Verfasst Do 25.09.2008 09:42
Titel
|
|
|
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.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 25.09.2008 09:43
Titel
|
|
|
was willste denn jetzt noch?
hab dir doch das gepostet was du brauchst.
|
|
|
|
|
DamnSimple
Threadersteller
Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht:
|
Verfasst Do 25.09.2008 09:56
Titel
|
|
|
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;
}
|
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 25.09.2008 10:21
Titel
|
|
|
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
|
|
|
|
|
DamnSimple
Threadersteller
Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht:
|
Verfasst Fr 26.09.2008 09:05
Titel
|
|
|
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!
|
|
|
|
|
|
|
|
Ähnliche Themen |
Kleines CSS-Problem
kleines CSS Problem
kleines Javascript problem
Kleines Website Problem
kleines flash problem
Kleines vBulletin/JS/IE Problem
|
|