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

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)

- Hilfestellung, Tipps und Tricks (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=30)

- -

Weblayout mit CSS (https://www.photoshop-cafe.de/forum/showthread.php?t=2187)

Weblayout mit CSS

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.

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>

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:emo_biggr )

Vielen Dank!!!

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 ;)

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?

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>

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?

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.

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

Und was sind -25 Einheiten? ;)