ani
Tag Tag allerseits habe mal probiert ein css basiertes Layout zu coden in Zusammenarbeit mit Html, leider funktioniert das nicht so ganz...
also es gibt 2 divs beide mit align:center, in einem div ist ein bild (Banner) im anderen Div soll der Inhalt hin, leider funzelt das nicht so recht, zwischen den beiden Divs ist immer ein paar Pixel Platz, hoffe ihr könnt mir da helfen
sonst weiss ich auch nimma
P.S. : Könnt ihr mir bitte ein paar gute Seiten über css basierte Layouts und insgesamt über css verraten.
Wäre nett
(vll gibts ja sowas wie selfhtml für css !?!)
Danke schön - Ani
daHooligan
css ist bei selfhtml dabei soweit ich weiß
poste mal nen screenshot und den quelltext ansonsten kann keiner was damit anfangen.
MfG
daHool
ani
kk, dachte nur wär nen 'standartproblem'
Also hier ist der Code
Bild hab ich jetzt nicht extra hochgeladen, kannst ja mal zum testen ein beliebiges bild nehmen, dachte erst ich hätte in ps falsch geschnitten, aber das bild hat keinen hässlichen rand mit bg color oA
ist übrigends veränderter quellcode von selfhtml,wollte das halt mal ausprobieren ^^
zu den links : nunja, gibt es nicht noch andere gute css seiten die sich auf soetwas stützen, selfhtml ist gut, aber finde den css teil nicht so derbst, ich mag es halt mehrere dinge zu haben und mir dann eins auszusuchen womit ich gut klar komm, mit dem einen tut kommt man halt besser klar als mit dem anderen
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout mit grafischer Spaltenaufteilung</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 550px;
padding: 0;
background: #EEECEC ;
}
html>body div#Seite {
border-color: gray; /* Farbangleichung an den Internet Explorer */
}
h1 {
font-size: 1.5em;
margin: 0; padding: 0.3em;
text-align: center;
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 100px;
margin: 0 0 1.2em; padding: 0;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: white;
}
ul#Navigation a:visited {
color: #666; background-color: white;
}
ul#Navigation a:hover {
color: black; background-color: #eee;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Inhalt {
margin: 0 0 1em 100px;
padding: 0 1em;
background-color: #000000;}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
margin-bottom: 0;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
color: navy;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 0.83em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed;
}
</style>
</head>
<body>
<img src="img/header.jpg">
<div id="Seite">
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Inhalt">
<h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
<p>In diesem Beispiel wird eine Hintergrundgrafik
zur optischen Trennung der Spalten verwendet.</p>
<p>Dies erfordert leider, dass die Breite der links stehenden Navigation
passend zur Hintergrundgrafik in 'px' angegeben wird.
Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
nicht anpassen.</p>
<p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
kein Hintergrund angegeben.<br>
Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
und ist unabhängig von deren Höhe.</p>
<p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
</div>
<p id="Fusszeile">Diese Fußzeile stellt innerhalb des umschließenden DIVs
den Elementenfluss wieder her.</p>
</div>
</body>
</html>
|
|
p-Logic
Ich seh da kein Bild in nem div, nur:
| code: |
1:
2:
3:
4:
|
<img src="img/header.jpg">
<div id="Seite">
|
|
Das Bild steht hier über der Seite und wird eigentlich nicht von irgendeinem CSS-Tag angesprochen. Deshalb ist der Abstand vom Bild immer noch auf default.
Das musst du wahrscheinlich ändern.
Außerdem würde ich den Teil im Seiten-Div mit Tabellen aufteilen. (gehört aber nicht zum Problem)
und für die CSS-Tutoriale:
google 
ani
Habe schon rumprobiert, vorher war das Bild in nem Div, geht trotzdem net.
kA wie man den standartwert verändert :>
bin noch nen noob in css/html
tkshorty
hast du es schon mal mit margin probiert?
erklärungen zu dem befehl findest du bei selfhtml