Web-Design Weblayout mit CSS [Archiv] - Photoshop-Cafe.de

Vollständige Version anzeigen : Web-Design Weblayout mit CSS

Darkwing-dave

22.10.06, 22: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:
http://img1.myimg.de/cssfragea48_thumb.jpg (http://www.myimg.de/?img=cssfragea48.jpg)

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

22.10.06, 22:57

So? http://img1.myimg.de/darka3b_thumb.jpg (http://www.myimg.de/?img=darka3b.gif)

<!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> 
</body>
</html>

Darkwing-dave

22.10.06, 23:05

Danke!!

Scheint so zu klappen! Ich versuche gerade anhand von einem Tutorial auf
http://www.andreas-kalt.de/webdesign/tutorials/css-layout-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!!!

phoenix

22.10.06, 23: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

22.10.06, 23: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

22.10.06, 23:24

Also so?

<!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> 
</body>
</html>

Darkwing-dave

22.10.06, 23: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

23.10.06, 00: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

23.10.06, 17:15

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

phoenix

23.10.06, 19:21

Und was sind -25 Einheiten? ;)

Ylloh

23.10.06, 22:23

na 25 em halt nur in die "falsche Richtung"

em = die Breite des Buchstaben M das wird dann halt proportional zu allem auf der Seite berechnet.

Darkwing-dave

24.10.06, 19:46

Neue Frage:
Wenn ich das Layout soweit habe. Wie kann ich Inhalt mit einem Link in den #content laden? wie muss der Inhalt der reingeladen werden soll formatiert sein? html, txt?

Danke

phoenix

24.10.06, 20:17

<div id="contents"><p>ich bin ein text</p></div>

Mit HTML formatieren.

Darkwing-dave

25.10.06, 00:41

Ich möchte ja nicht immer den selben Text im #content haben...

Wenn ich jetzt aber 3 verschiedene Texte und somit auch 3 Links habe, wie kann ich alle 3 Texte in den #content laden? (Klick auf Link1 -> Text 1 in #content, Klick auf Link2 -> Text 2 in #content...)

phoenix

25.10.06, 10:54

Die einfachste Variante ist wenn du die Inhalte mit javascript regelst. Problematisch wird es aber, wenn der Browser javascript deaktiviert hat, dann funktioniert nichts mehr. Ähnlich ist es bei Flashwebseiten, wenn der Browser Flash nicht installiert oder geblockt hat. :(

Darkwing-dave

25.10.06, 11:53

Hab mich jetzt im Web dumm und dümmer gesucht für eine "Lösung"... Überall heisst es "keine Frames, keine I-Frames, keine Tabellenlayouts..." aber eine einigermassen gute Lösung finde ich nirgens...

phoenix

25.10.06, 12:10

Eigentlich ist es ganz einfach. Jede Webseite einzeln gestalten und bei Klick in der Navi die jeweilige Seite laden. Es wird dann halt alles komplett geladen, dafür kommt Jeder Browser klar damit. Optional bietet sich auch PHP an, das versteht auch jeder Browser, da es der Benutzer nicht deaktivieren kann.

Ylloh

25.10.06, 16:05

oder das ganze in PHP per include lösen :D

Darkwing-dave

25.10.06, 18:12

Details bittö :whistling

Ylloh

25.10.06, 18:21

http://www.google.de/search?hl=de&q=php+include&btnG=Google-Suche&meta=

Link 2 und 3 dürften dir weiterhelfen :)

Darkwing-dave

25.10.06, 21:20

werd's mal versuchen!! Danke schön! :drunk:

phoenix

26.10.06, 14:27

Hier mal noch ne Javascript DHTML Variante:

<!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;
}

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

#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: 798px;
height: 68px;
background-color: red;
}

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

</style>
<script type="text/javascript">
function HandleContentDiv(connum) {
maxdiv = 5;
for (i=0;i<=maxdiv;i++) {
if (i==connum) {
document.getElementById('content'+i).style.visibil ity ="visible";
} else {
document.getElementById('content'+i).style.visibil ity ="hidden";
}
}
}
</script>
</head>
<body>

<div id="container">
<div id="header"></div>
<div id="menu">
<br>
<a href="#" onClick="HandleContentDiv(0)">Home</a><br><br>
<a href="#" onClick="HandleContentDiv(1)">Seite 1</a><br><br>
<a href="#" onClick="HandleContentDiv(2)">Seite 2</a><br><br>
<a href="#" onClick="HandleContentDiv(3)">Seite 3</a><br><br>
<a href="#" onClick="HandleContentDiv(4)">Seite 4</a><br><br>
<a href="#" onClick="HandleContentDiv(5)">Seite 5</a><br><br>
</div>
<div class="content" id="content1"><p>Ich bin die <b>erste Seite</b></p></div>
<div class="content" id="content2"><p>Ich bin die <b>zweite Seite</b></p></div>
<div class="content" id="content3"><p>Ich bin die <b>dritte Seite</b></p></div>
<div class="content" id="content4"><p>Ich bin die <b>vierte Seite</b></p></div>
<div class="content" id="content5"><p>Ich bin die <b>fünfte Seite</b></p></div>
<div class="content" id="content0"><p>Ich bin die <b>Startseite</b></p></div>
<div id="space"></div>
<div id="footerspace"></div>
<div id="footer"></div>
</div> 
</body>
</html>

vektorpixel

26.10.06, 16:48

bye bye übersichtlicher Quellcode!

phoenix

26.10.06, 17:03

HTML war noch nie sonderlich übersichtlich, da eine Formatierungs- und keine Programmiersprache ;)

Darkwing-dave

26.10.06, 18:03

und der ganze css teil wird ja am schluss extern sein...

phoenix

26.10.06, 18:25

Ja CSS kannst du komplett auslagern.
Falls du damit rumspielen willst, musst du darauf achten das aus #content nun .content geworden ist, damit es als Klasse fungieren kann ;)