 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Achim M.
Dabei seit: 17.03.2003
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mi 09.05.2012 10:37
Titel
|
  |
|
| Rotfrosch hat geschrieben: | | Zim hat geschrieben: | | Die Tabellenlösung wäre die Ultra-Mega-Super-Böse Lösung und ja, davon solltest du die Finger lassen. |
Sozusagen der Teufel in Internetgestalt 
... nee, aber wirklich, keine Tabellen, im Ernst ... |
Wobei ich sagen muss, dass CSS-Eigenschaften wie display:table-cell wirklich super sind und einem viele komplexen floats ersparen. Wird leider erst ab IE 8 unterstützt. Ansonsten sehe ich keinen Grund, so etwas nicht einzusetzen.
Gruß
Achim
|
|
| |
  |
 |
-Tom-Tom-
Threadersteller
Dabei seit: 07.05.2012
Ort: Regensburg
Alter: -
Geschlecht:
|
Verfasst Mi 09.05.2012 19:25
Titel
|
|
|
Hallo, erstmal vielen vielen Dank für eure bisherigen Antworten, bin schon mal ein ganzes stück weiter gekommen.
Aber leider passts noch nicht ganz 
1. Wie schaff ich es dass mein "#footer" sich nach unten über den ganzen Bildschirm erstreckt?
2. Der Container "#navigation" bzw. "#content" immer automatisch auffüllen? Der kürzere quasi sich zum längeren Auffüllt?
3. Hab mein CSS mal auf dieser seite gestestet http://jigsaw.w3.org/css-validator/ der bringt mir 12 Fehler die ich absolut nicht nachvoll ziehen kann
Hier noch der HTML und CSS Code:
CSS:
| Code: | @charset "utf-8";
/*****************************/
/* Allgemeine Formatierungen */
/*****************************/
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html {
height: 100.2%;
}
body {
background-color: #bbFFbb;
}
/*****************/
/* DIV-Container */
/*****************/
#wrapper {}
#header {
background-color: #0000AA;
position: relative;
}
#sidebar_1 {
background-color: #0d315e;
bottom: 0;
left: 0;
position: absolute;
right: 50%;
top: 0;
z-index: 2;
}
#title {
background: -moz-linear-gradient(left, #0d315e, #e2e2e2); /* Firefox */
background: -o-linear-gradient(left, #0d315e, #e2e2e2); /* Chrome, Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d315e',endColorstr='#e2e2e2'); /* Internet Explorer */
height: 120px;
margin: 0 auto;
position: relative;
width: 1000px;
z-index: 10;
}
#sidebar_2 {
background-color: #e2e2e2;
bottom: 0;
left: 50%;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
#page {
position: relative;
}
#sidebar_3 {
background: -moz-linear-gradient(top, #0d315e, #e2e2e2); /* Firefox */
background: -o-linear-gradient(top, #0d315e, #e2e2e2); /* Chrome, Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d315e',endColorstr='#e2e2e2'); /* Internet Explorer */
bottom: 0;
height: auto;
left: 0;
position: absolute;
right: 50%;
top: 0;
z-index: 10;
}
#container {
background-color: #FFFFFF;
height: auto;
margin: 0 auto;
min-height: 100px;
position: relative;
width: 1000px;
z-index: 11;
}
#navigation {
background-color: #FDFDFD;
float: left;
width: 30%;
z-index: 20;
}
#content {
background-color: #FDFDFD;
float: right;
width: 70%;
z-index: 20;
}
#sidebar_4 {
background-color: #e2e2e2;
bottom: 0;
left: 50%;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
#footer {
background-color: #e2e2e2;
bottom: 0;
position: relative;
z-index: 3;
}
|
HTML:
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testseite</title>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="sidebar_1">sidebar_1</div>
<div id="title">title</div>
<div id="sidebar_2">sidebar_2</div>
</div>
<div id="page">
<div id="sidebar_3">sidebar_3</div>
<div id="container">
<div id="navigation">navigation<br><br>Home<br>Galerie<br>Gästebuch<br>Termine<br>Links<br>usw.</div>
<div id="content">content<br>Sinnloser Text<br>Sinnloser Text 2<br>Sinnloser Text 3<br>Sinnloser Text 4<br><br>Hier soll mal der Inhalt stehn ...</div>
</div><div style="clear:both;"></div>
<div id="sidebar_4">sidebar_4</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html> |
Gruß
Tom
|
|
| |
|
|
|
Anzeige
|
|
|
| |
|
|
| Ähnliche Themen |
IE8 und die Positionierung
css - div positionierung
CSS Positionierung ...
[CSS] Positionierung
Div Positionierung
[CSS] Positionierung von Layern
|
|
|
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.
|
|
