| Autor |
Nachricht |
ChuWanga
Threadersteller
Dabei seit: 23.10.2010
Ort: Köln
Alter: 41
Geschlecht: 
|
Verfasst Sa 23.10.2010 14:02
Titel Seitenaufbau mit CSS und DIVs? |
  |
|
Hallo zusammen,
Ich bin gerade nach einer Möglichkeit am suchen meine Seite neu aufzubauen, bisher habe ich nämlich alles mit Tabellen gemacht, naja und das ist ja nicht gerade das gelbe vom Ei. Ich hab gelesen das man seine Seiten mittlerweile mit DIVs in CSS aufbauen kann, nur leider hab ich keinen Plan wie genau ich da anfangen soll. Hier mal ein Aufbau meiner Seite, so soll das später mal aussehen:
In jedes der Felder soll ein Hintergrundbild reinkommen, beim 1 der Kopfzeile muss es kein Hintergrund sein, kann auch normal über IMG eingetragen werden. In Feld 4, 6 und 7 müssen die Hintergrundbilder nach unten hin immer wiederholt werden, so das wenn der Content und die Navigation mal länger werden immer das Bild hinterlegt wird.
Die Seite soll zentriert im Browser angezeigt werden und einen Abstand von ca. 10 Pixeln oben und unten vom Browserfenster haben. Die breite der kompletten Seite soll 600 Pixel sein und die breite der Navigationsleiste 3,4,5,6 soll 160 Pixel haben. Der Bereich 2 und 8 soll 600 pixel breit und 20 Pixel hoch sein.
Dann möchte ich um das ganze noch einen 2 Pixel breiten Rahmen machen, der erste Pixel in weiß und der zweite in schwarz.
Habt Ihr vielleicht mal ein Beispiel für mich wie das zu schaffen ist?
Viele Grüße,
ChuWanga
Zuletzt bearbeitet von ChuWanga am Sa 23.10.2010 14:07, insgesamt 2-mal bearbeitet
|
|
| |
   |
 |
ChuWanga
Threadersteller
Dabei seit: 23.10.2010
Ort: Köln
Alter: 41
Geschlecht:
|
Verfasst Sa 23.10.2010 14:25
Titel
|
|
|
Vielleicht zu Information, es geht um diese Seite:
http://www.spielplatz.ws/
Ich möchte dort eben nun den Tabellen Aufbau weg bekommen, es soll später aber noch genau so aussehen 
|
|
| |
|
|
|
Anzeige
|
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
|
| |
|
|
ChuWanga
Threadersteller
Dabei seit: 23.10.2010
Ort: Köln
Alter: 41
Geschlecht:
|
Verfasst Sa 23.10.2010 16:52
Titel
|
|
|
Also ich habs nun mal versucht, aber irgednwie passt das nicht so ganz, ich hab mit dem Aufbau der DIV Klassen Probleme, wie kann ich den die Positionen der einzelnen Klassen in der Gesamt Klasse richtig positionieren. Mit float geht das irgendwie nicht.
index.php
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>bla</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="gesamt">
<div class="div1">Test</div>
<div class="div2">Test1</div>
<div class="div3">Test2</div>
<div class="div4">Test3</div>
<div class="div5">Test4</div>
<div class="div6">Test5</div>
<div class="div7">Test6</div>
<div class="div8">Test7</div>
</div>
</div>
</body>
</html>
|
style.css
| Code: | body, html {
height: 100%;
margin: 0;
padding: 0;
}
.gesamt {
width: 600px;
height: 100%;
margin: 0 auto 0 auto;
background-color: #000080;
}
/* Kopfleiste
.div1 {
width: 600px;
height: 150px;
float: none;
padding: 0;
margin: 0;
background-color: #aa0000;
}
/* Inhalt / Content
.div2 {
width: 440px;
height: 100%;
float: right;
padding: 0;
margin: 0;
background-color: #C0c0c0;
/* Navigation unter Inhalt
.div3 {
width: 600px;
height: 20px;
float: none;
padding: 0;
margin: 0;
background-color: #ff0000;
}
/* Leiste rechts 1
.div4 {
width: 160px;
height: 40px;
float: left;
padding: 0;
margin: 0;
background-color: #00aa00;
}
/* Leiste rechts Navigation 2
.div5 {
width: 160px;
height: 15px;
float: left;
padding: 0;
margin: 0;
background-color: #00cc00;
}
/* Leiste rechts unter Navigation 3
.div6 {
width: 160px;
height: 21px;
float: left;
padding: 0;
margin: 0;
background-color: #0000aa;
}
/* Leiste rechts 4
.div7 {
width: 160px;
height: 20px;
float: left;
padding: 0;
margin: 0;
background-color: #0000dd;
}
/* Copyright
.div8 {
width: 600px;
height: 20px;
float: none;
padding: 0;
margin: 0;
background-color: #ff0000;
}
|
Das Ergebniss sieht so aus:
http://spielplatz.ws/neu/
|
|
| |
|
|
timonn
Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 23.10.2010 19:33
Titel
|
|
|
Du musst das "float" mit "clear:both" aufheben. Also nach den ganzen Div-Containern noch ein Element einfügen, dem du dieses Attribut zuordnest. Oder du schreibst es direkt in deinen Footer.
Falsch ich falsch liege, bitte verbessern.
|
|
| |
|
|
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
ChuWanga
Threadersteller
Dabei seit: 23.10.2010
Ort: Köln
Alter: 41
Geschlecht:
|
Verfasst So 24.10.2010 15:41
Titel
|
|
|
So, ich bin schon mal ein gutes Stück weiter gekommen
Zu sehen ist die Seite hier:
http://www.spielplatz.ws/server
Ich möchte aber jetzt noch den Copyright Hinweis unten in der Fusszeile vertikal im DIV zentrieren, wie ist das innerhalb eines DIVs möglich? Hier mal mein CSS Code für diese Stelle:
style.css
| Code: |
div#Fusszeile {
background: #000080 url('img/layout/balken_unten.png');
color: #FFFFFF;
width: 600px;
height: 18px;
font-size: 6pt;
text-align: center;
clear: both;
}
|
index.php
Zuletzt bearbeitet von ChuWanga am So 24.10.2010 15:42, insgesamt 1-mal bearbeitet
|
|
| |
|
|
ChuWanga
Threadersteller
Dabei seit: 23.10.2010
Ort: Köln
Alter: 41
Geschlecht:
|
Verfasst So 24.10.2010 18:13
Titel
|
|
|
Juhu, habs gefunden 
Für alle die das gleiche Problem haben, ihr schreibt einfach diese Zeile in euer Stylesheet für das betreffende DIV Element dazu:
Dann wird euer Text auch vertikal im DIV zentriert  Es müssen die 250% eingetragen werden, nur damit klappt es.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Seitenaufbau mit DIVs
seitenaufbau beschleunigen
Frage zu Seitenaufbau und Navigation in CSS
allgemeine Frage zum Seitenaufbau
Html - Seitenaufbau mit CSS aber mit MENUE HiGHLiGHT
divs erklären?
|
|
Willkommen auf dem Portal für Mediengestalter
