Web-Design Weblayout mit CSS - Photoshop-Cafe.de :: Dein Photoshop-Forum

Darkwing-dave · #1 22.10.06, 21:42

Ich habe folgende Datei mit css "befehlen" geschrieben und möchte nun 2 Dinge ändern und bin mir nicht sicher wie:

1. Rechts vom gelben content einen Rand von 10 Pixel machen
2. Den pinken Footer nach ganz unten fix machen

Hier das Bild vom bisherigen Ergebnis:

Hier der CSS-Teil:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body
{
font: arial, verdana, sans-serif;
text-align: center;
color: black;
background-color: CCCCFF;
}

#container
{
margin: 1em auto;
width: 800px;
height: 600px;
text-align: left;
background-color: red;
border: 1px solid black;
}

#header
{
margin: 0em auto;
width: 800px;
height: 100px;
text-align: left;
background-color: blue;
border: 1px solid black;
}

#contents
{
margin-right: 10px;
margin-left: 10px;
margin: -25em auto;
float: right;
width: 530px;
height: 400px;
text-align: left;
background-color: yellow;
border: none;
}

#menu
{
margin-left: 10px;
width: 250px;
height: 400px;
text-align: left;
background-color: green;
border: none;
}

#footer
{
clear: both;
width: 800px;
height: 20px;
background-color: pink;
}

</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="contents"></div>
<div id="footer"></div>
</div> 
</body>
</html>

Danke schon im Voraus für die Tipps.

**phoenix** · #2 22.10.06, 21:57

So?

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body
{
font: arial, verdana, sans-serif;
text-align: center;
color: black;
background-color: CCCCFF;
}

#container
{
margin: 1em auto;
width: 800px;
height: 600px;
text-align: left;
background-color: red;
border: 1px solid black;
}

#header
{
margin: 0em auto;
width: 800px;
height: 100px;
text-align: left;
background-color: blue;
border: 1px solid black;
}

#contents
{
margin-right: 20px;
margin-left: 20px;
margin: -25em auto;
float: right;
width: 530px;
height: 400px;
text-align: left;
background-color: yellow;
border: none;
}

#space
{
margin-right: 0px;
margin-left: 10px;
margin: -25em auto;
float: right;
width: 10px;
height: 400px;
text-align: left;
background-color: red;
border: none;
}

#menu
{
margin-left: 10px;
width: 250px;
height: 400px;
text-align: left;
background-color: green;
border: none;
}

#footer
{
clear: both;
width: 800px;
height: 98px;
background-color: pink;
}

</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="contents"></div>
<div id="space"></div>
<div id="footer"></div>
</div> <!-- /container -->
</body>
</html>

Darkwing-dave · #3 22.10.06, 22:05

Danke!!

Scheint so zu klappen! Ich versuche gerade anhand von einem Tutorial auf
http://www.andreas-kalt.de/webdesign...yout-erstellen
ein Layout per css zu erstellen.

Da stand zwar nichts von einem #space, aber es scheint so sein zu müssen... (Da sind die Frames doch etwas einfacher

)

Vielen Dank!!!

**phoenix** · #4 22.10.06, 22:15

Du kannst Div-Container auch direkt steuern/platzieren, indem du sie anhand von Pixelangaben direkt setzt. Dann brauchst du keinen #Space.

Aber den pinken Div hättest du auch selber verlängern können

Darkwing-dave · #5 22.10.06, 22:18

Ich möchte den Pinken ja nicht verlängern, sondern ganz unten an den Container setzen und darüber einen Zwischenraum lassen... Muss ich da noch einen zusätzlichen space machen?

**phoenix** · #6 22.10.06, 22:24

Also so?

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body
{
font: arial, verdana, sans-serif;
text-align: center;
color: black;
background-color: CCCCFF;
}

#container
{
margin: 1em auto;
width: 800px;
height: 600px;
text-align: left;
background-color: red;
border: 1px solid black;
}

#header
{
margin: 0em auto;
width: 800px;
height: 100px;
text-align: left;
background-color: blue;
border: 1px solid black;
}

#contents
{
margin-right: 20px;
margin-left: 20px;
margin: -25em auto;
float: right;
width: 530px;
height: 400px;
text-align: left;
background-color: yellow;
border: none;
}

#space
{
margin: -25em auto;
float: right;
width: 10px;
height: 400px;
background-color: red;
border: none;
}

#menu
{
margin-left: 10px;
width: 250px;
height: 400px;
text-align: left;
background-color: green;
border: none;
}

#footerspace
{
width: 800px;
height: 68px;
background-color: red;
}

#footer
{
clear: both;
width: 800px;
height: 30px;
background-color: pink;
}

</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="contents"></div>
<div id="space"></div>
<div id="footerspace"></div>
<div id="footer"></div>
</div> <!-- /container -->
</body>
</html>

Darkwing-dave · #7 22.10.06, 22:31

genau. Danke.

Wie könnte ich das mit den fixen Positionen machen? und woran richtet sich der #content aus? margin: -25em auto als wert? wieso?

sorry für die vielen Fragen, ich verstehe das irgendwie nicht?

**phoenix** · #8 22.10.06, 23:59

Der margin Befehl sagt mir eigentlich nichts. Musst du mal bei SelfHtml schaun was das -Xem auto bedeutet. Ich richte Div´s immer absolut aus:

position: absolute;
top: startx;
left: starty;
height: endx;
width: endy

#content richtet sich vermutlich an #menu aus.

**Ylloh** · #9 23.10.06, 16:15

margin bedeutet, dass der Randabstand automatisch gewählt wird, bei einem Abstand von -25 Einheiten

**phoenix** · #10 23.10.06, 18:21

Und was sind -25 Einheiten?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Photshop Weblayout	skyflyer	Hilfestellung, Tipps und Tricks	5	31.01.11 19:47

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)