Photoshop-Cafe.de :: Dein Photoshop-Forum

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)
-   -   Web-Design Weblayout mit CSS (https://www.photoshop-cafe.de/forum/showthread.php?t=2187)

Darkwing-dave 22.10.06 21:42
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:
http://img1.myimg.de/cssfragea48_thumb.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> <!-- /container -->
</body>
</html>


Danke schon im Voraus für die Tipps.

phoenix 22.10.06 21:57
So? http://img1.myimg.de/darka3b_thumb.jpg

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

Vielen Dank!!!

phoenix 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 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 22.10.06 22:24
Liste der Anhänge anzeigen (Anzahl: 1)
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 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 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 23.10.06 16:15
margin bedeutet, dass der Randabstand automatisch gewählt wird, bei einem Abstand von -25 Einheiten

phoenix 23.10.06 18:21
Und was sind -25 Einheiten? ;)

Ylloh 23.10.06 21: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 18: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 19:17
Code:
<div id="contents"><p>ich bin ein text</p></div>
Mit HTML formatieren.

Darkwing-dave 24.10.06 23: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 09: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 10: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 11: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 15:05
oder das ganze in PHP per include lösen :D

Darkwing-dave 25.10.06 17:12
Details bittö :whistling

Ylloh 25.10.06 17:21
http://www.google.de/search?hl=de&q=...le-Suche&meta=

Link 2 und 3 dürften dir weiterhelfen :)

Darkwing-dave 25.10.06 20:20
werd's mal versuchen!! Danke schön! :drunk:

phoenix 26.10.06 13:27
Hier mal noch ne Javascript DHTML Variante:

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

.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.visibility ="visible";
                } else        {
                        document.getElementById('content'+i).style.visibility ="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> <!-- /container -->
</body>
</html>

vektorpixel 26.10.06 15:48
bye bye übersichtlicher Quellcode!

phoenix 26.10.06 16:03
HTML war noch nie sonderlich übersichtlich, da eine Formatierungs- und keine Programmiersprache ;)

Darkwing-dave 26.10.06 17:03
und der ganze css teil wird ja am schluss extern sein...

phoenix 26.10.06 17: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 ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:45 Uhr.

Powered by vBulletin® Version 3.8.7 (Deutsch)
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
©2005-2024 photoshop-cafe.de

Seite wurde generiert in 0,02619 Sekunden mit 8 Queries