Archiv verlassen und diese Seite im Standarddesign anzeigen : Brauche mal Hilfe bei CSS
rotalever
2007-10-26, 16:55:19
Wollte mir mal CSS aneignen und habe
http://de.selfhtml.org/navigation/css.htm
durchgelesen. Aber irgendwie komme ich bei manchen Sachen nicht weiter. Ich möchte folgendes Design umsetzen.
http://img140.imageshack.us/img140/3605/imagenr8.png (http://imageshack.us)
Als Blau habe ich das markiert, was jeweils ein Div-Element ist und Rot ist ein Link.
(Die Abstände zwischen den Boxen sind hier rein zufällig, da es sehr viel Arbeit machen würde in dem Graphikprogramm alle Boxen direkt aneinander zu machen...)
Insbesondere beim Menü und den 3 nebeneinander stehenden Boxen im Hauptbereich tue ich mir schwer. ;(
Wer kann mir da paar Tipps geben?
[Fox]
2007-10-26, 18:05:02
Also wenn man erstmal drin ist, geht das in 10 Minuten. Hab mich jetzt mal dran gemacht.
Also hier mal mein Beispiel zum CSS
html {
padding:0px;
margin:0px;
}
h1 {
font-size:14px;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
h2 {
font-size:40px;
padding-top:10px;
text-transform:uppercase;
color: white;
background-color: transparent;
}
body {
background-color: #e1ddd9;
font-size: 12px;
color:#564b47;
text-align:center;
margin:0px;
padding:0px;
}
#box {
width:1000px;
margin: 0px auto;
padding:0px;
text-align:left;
}
#navi {
width:1000px;
margin: 0px auto;
padding:0px;
text-align:center;
background-color:#8A8653
}
#inhalt {
width:500px;
padding:0px;
float:left;
background-color:#fff;
overflow: auto;
}
#kopf {
width:1000px;
padding:0px;
background-color:#D7D7D7;
}
#links {
width:250px;
padding:0px;
float:left;
background-color:#8A8653;
}
#rechts {
width:250px;
padding:0px;
float:left;
background-color:#8A8653;
}
Und hier die Index html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>
<body>
<div id="box">
<div id="kopf"><p align="left"><br />
</div>
<div id="kopf">
<p><h2>Titel</h2></p>
</div>
<div id="navi">
<h1 align="center">Link1    Link    Link    Link    Link    Link    Link</h1>
</div>
<br>
<div id="links">
<table>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
</table>
<br><br><br><br>
<br><br><br><br>
</div>
<div id="inhalt">
Hier könnte der Inhal stehen
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
</div>
<div id="rechts">
<table>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
</table>
<br><br><br><br>
<br><br><br><br>
</div>
</body>
</html>
Und so würde das dann aussehen:
Beispiel (http://www.4d-graphic.de/Temp/index.html)
darph
2007-10-26, 18:07:27
Als ungefähre Ausgangslage:
<html>
<head>
<title>test</title>
<style type="text/css">
#oben, #titel, #links, #content, #rechts {
border: 2px solid gray;
background-color: silver;
}
#oben ul li {
display: inline;
margin-left: 2px;
margin-right: 2px;
}
#links {
float: left;
width: 200px;
}
#links ul li {
list-style-type: none;
}
#content {
float: left;
}
#rechts {
width: 200px;
float: left;
}
#end {
clear: both;
}
</style>
</head>
<body>
<div id="titel">
<h1>unf</h1>
</div>
<div id="oben">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
<div id="links">
<h2>Noch ein paar Links</h2>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
<div id="content">
<h2>Content</h2>
<p>Lorem Ipsum dolor sit amet whatever</p>
</div>
<div id="rechts">
<p>Vielleicht auch noch etwas</p>
</div>
<hr id="end">
</body>
</html>
Bitte beachte aber:
float und clear ist das, was du suchst.
Feste Breiten in Pixeln angeben (wie hier geschehen) ist böse. Besser in em oder so, dann skaliert das mit der Größe der Schrift. Du möchtest dem Betrachter nicht vorschreiben, wie das genau auszusehen hat.
Du wirst unter Garantie nicht so viele divs brauchen. Was ich hier gemacht habe, nennt man div-Suppe und ist schlechter Stil. Du kannst Listenelemente und Überschriften etc. auch direkt ansprechen. Wenn ein div-Element nur ein direktes Kindelement hat, ist die Chance, daß du es eigentlich gar nicht brauchst, irgendwo in den oberen 90% zu finden.
Den Boxen immer die gleiche Höhe zu geben, ist ein Problem. Erzwinge keine feste Größen, sondern finde dich mit dem Gedanken ab, daß es nicht geht: Ein Problem weniger, um das man sich Sorgen machen muß.
Wenn du Listen machst, mach Listen. Keine Tabellen.
rotalever
2007-10-26, 18:11:36
(das Bezog sich auf den Post von Fox...)
Danke schon mal. Mich wundert es aber, dass du die Links einmal in eine Tabelle und einmal als Überschrift gemacht hast. Tabellen soll man doch eigentlich bei soetwas vermeiden?? Und align="center" im Tag wollte ich auch eigentlich nicht machen.
Mit Tabellendesign hätte ich das auch ganz fix in 1minute, aber ich wollte jetzt mal 100% CSS also ein HTML, dass ungefähr nur so aussieht und alles mit CSS gemacht wird.
<div id="header">Title</div>
<div id="menu">
<a href="#">Home</a>
<a href="#">Test1</a>
<a href="#">Test2</a>
</div>
<div id="submenu"> <!--links-->
<a href="#">Test0</a>
<a href="#">Test1</a>
</div>
<div id="content"> <!--mitte-->
<h1>123</h1>
<p>abcdefgh</p>
</div>
<div id="ads"> <!--rechts-->
<h1>123</h1>
<p>abcdefgh</p>
</div>
<div id="footer">
<p>Bla</p>
</div>
Vielleicht habe ich aber auch das Prinzip noch nicht so ganz verstanden.
rotalever
2007-10-26, 18:15:17
Feste Breiten in Pixeln angeben (wie hier geschehen) ist böse. Besser in em oder so, dann skaliert das mit der Größe der Schrift. Du möchtest dem Betrachter nicht vorschreiben, wie das genau auszusehen hat.
Die Breite wollte ich ja in Prozent angeben.
Wenn du Listen machst, mach Listen. Keine Tabellen.
Warum macht man eigentlich Listen für die Links und nicht einfach nur links und formatiert dann die "a"-Tags mit CSS?
darph
2007-10-26, 18:22:03
Warum macht man eigentlich Listen für die Links und nicht einfach nur links und formatiert dann die "a"-Tags mit CSS?
Weil es eine Liste von Links ist und kein Fließtext. br (was du hier in deinem linken Dingsbums verwenden müßtest) ist für Zeilenumbrüche in Fließtext gedacht, für nichts anderes. Außerdem muß du beachten, daß das Ganze nicht unbedingt von einem User visuell verarbeitet wird, sondern zum Beispiel auch von diversen Bots, RSS-Aggregatoren und so weiter. Die sehen das alles als Fließtext und wenn ich einen Textbrowser verwende, der dein CSS völlig ignoriert, dann sieht das alles für mich aus, wie ein einziger langer Satz, der ein Link ist.
Es ist eine Liste von Links.
Außerdem ist dann die Formatierung von Untergruppen/Subkategorien denkbar einfach, weil du dann zum Beispiel per CSS alle Listen in Listen ansprechen kannst und hast dann auf einen Schlag die zweite Linkebene formatiert. (y)
Natürlich kommt in dein Listenelement immer noch ein Link. JavaScript-Links sind ja noch viel schlimmer.
<ul id="left_nav">
<li><a href="">eins</a></li>
<li><a href="">zwei</a></li>
</ul>
rotalever
2007-10-26, 18:59:25
Die Tipps waren schon mal gut. Es funktioniert eigentlich alles ganz gut, nur das Menü nicht:
http://img140.imageshack.us/img140/3194/testnf9.png (http://imageshack.us)
(der hellgraue Bereich ist der Header, das dunkelgraue soll die Menübar sein, die genauso hoch sein soll wie die roten Links und das weiße ist der Content bereich)
Wie man sieht, stehen die Links über. Wenn ich das padding entferne ist natürlich alles gut, aber die Links sollen eine gewissen Größe haben.
#menu {
width: 100%;
background-color: #2d2d2d;
text-align: center;
font-variant: small-caps;
margin: 0;
padding: 0;
}
#menu li{
display: inline;
}
#menu .n, #menu .a {
padding: 5px 10px 5px 10px;
margin-right: 1px;
color: #ffffff;
background-color: #ff0000;
}
<ul id="menu">
<li><a href="#" class="n">Home</a></li>
<li><a href="#" class="a">Test1</a></li>
<li><a href="#" class="n">Test2</a></li>
<li><a href="#" class="n">Test3</a></li>
<li><a href="#" class="n">Test4</a></li>
<li><a href="#" class="n">Test5</a></li>
</ul id="menu">
rotalever
2007-10-26, 20:36:50
Habe mal bei #menu dasselbe padding wie bei den Links hinzugefügt, jetzt funktioniert es, ob das allerdings so gut ist...
DanMan
2007-10-27, 01:26:56
Habe mal bei #menu dasselbe padding wie bei den Links hinzugefügt, jetzt funktioniert es, ob das allerdings so gut ist...
Wenns in allen Browsern dann richtig angezeigt wird gibts keinen Grund das nicht so zu machen. Liegt übrigens am display:inline. Wenn du die Dinger stattdessen auf float setzt und dann bei nächsten Element clear machst gehts.
Das gibt dann ein anderes Problem, wie du vllt. merken wirst. ;)
rotalever
2007-10-27, 11:19:55
Das gibt dann ein anderes Problem, wie du vllt. merken wirst. ;)
Du meinst, dass es nicht zentriert wird?
Irgendwie bekomme ich immer mehr das Gefühl, dass es sehr schwer ist, bestimmte Layouts mit CSS zu erreichen...
rotalever
2007-10-29, 22:06:59
Eigentlich läuft alles ganz gut. Das einzige was ich noch haben möchte, ist, dass das Menü links zum Beispiel 180px breit ist, der Bereich rechts ebenfalls 180px und sich der Content bereich auf den restlichen Platz ausdehnt. width:auto funktioniert da leider nicht (es ist entweder zu breit, dass zum Beispiel der Werbungsbereich runtergedrückt wird, oder zu schmal, sodass es dumm aussieht).
Kinman
2007-10-29, 22:23:03
2 mir bekannte Möglichkeiten
1. Du setzt das "Content-Div" absolut mit 100% Breite und einem linken und rechten padding in der jeweiligen Breite des anderen div-Blocks sowie mit einem z-index, so dass es im Hintergrund erscheint (weiß jetzt nicht was vorne ist, aber glaube je höher der z-index, desto weiter vorne)
2. Du wartest auf CSS 3 mit der calc() Funktion :ugly:
mfg Kinman
rotalever
2007-10-29, 22:35:27
Danke für den ersten Tipp. Das hört sich zumindest gut an und müsste funktionieren. Auf so etwas wäre ich glaube ich nie gekommen...
Mal schauen ob ich das aber wirklich so umsetzte, denn das grenzt schon fast an einen "Hack" und eigentlich wollte ich ja durch CSS alles so schön und aufgeräumt und gut machen :smile:
Aber mal ehrlich: wer wird schon css3 benutzen? Sehr viele Browser unterstützt man damit sicher nicht ;)
Kinman
2007-10-30, 13:05:13
Aber mal ehrlich: wer wird schon css3 benutzen? Sehr viele Browser unterstützt man damit sicher nicht ;)
Ich warte schwer auf CSS 3
1. Hoffe ich auf Browserkompatibilität ;D
2. Grafiken als Rahmen
3. calc()
Das sind für mich die wichtigsten Punkte
mfg Kinman
rotalever
2007-10-30, 17:13:53
Ich warte schwer auf CSS 3
1. Hoffe ich auf Browserkompatibilität ;D
Was bringt einem CSS3, wenn es nicht unterstützt wird? Es werden immer welche IE6/7 benutzen.
Funktioniert das denn jetzt, so wie du es wolltest? Würde gerne den kompletten Code für mich selbst zu lernzwecken anschauen, falls du nichts dagegen hast. :)
Kinman
2007-10-30, 19:21:56
Was bringt einem CSS3, wenn es nicht unterstützt wird? Es werden immer welche IE6/7 benutzen.
Und es gibt auch jetzt Leute die noch Den Internet Explorer 4.0 verwenden...
Es kommt immer auf die Zielgruppe an, und man kann (bzw. sollte) die Websiten so gestelten, dass sie mit älteren Browsern les- und benützbar sind. Obs dann ebenso "toll" aussieht ist zweitrangig.
mfg Kinman
rotalever
2007-10-30, 19:45:20
Funktioniert das denn jetzt, so wie du es wolltest? Würde gerne den kompletten Code für mich selbst zu lernzwecken anschauen, falls du nichts dagegen hast. :)
Ich bin noch am Überlegen, ob ich das jetzt wirklich wie Kinman vorgeschlagen hat mit einem padding löse, oder mir etwas anderes überlege. Ansich hat das ausschließliche Benutzen von divs natürlich gewisse Vorteile, vll.weiche ich aber hier doch wieder zu Tabellen aus. Meine Tendenzen gehen (leider) im Moment wieder dazu, es teilweise mit Tabellen zu realisieren. Ich werde den fertigen Code dann posten, wenn Du möchtest, ob er allerdings zu lernzwecken geeignet ist, ist eine andere Frage ;)
@Kinman: Zur Zielgruppe sollte man sich am besten immer >90% der Internetnutzer nehmen. Und ich möchte wetten, dass in 3 Jahren noch sehr viele IE6 und noch mehr Leute IE7 benutzen.
Ich bin noch am Überlegen, ob ich das jetzt wirklich wie Kinman vorgeschlagen hat mit einem padding löse, oder mir etwas anderes überlege. Ansich hat das ausschließliche Benutzen von divs natürlich gewisse Vorteile, vll.weiche ich aber hier doch wieder zu Tabellen aus. Meine Tendenzen gehen (leider) im Moment wieder dazu, es teilweise mit Tabellen zu realisieren. Ich werde den fertigen Code dann posten, wenn Du möchtest, ob er allerdings zu lernzwecken geeignet ist, ist eine andere Frage ;)
Ich will ja in CSS einsteigen, weil ich bisher auch nur mit Tabellen gearbeitet hab. Da reicht der Code erstmal, um mir einen Überblick zu verschaffen.
Kinman
2007-10-30, 20:33:16
@Kinman: Zur Zielgruppe sollte man sich am besten immer >90% der Internetnutzer nehmen. Und ich möchte wetten, dass in 3 Jahren noch sehr viele IE6 und noch mehr Leute IE7 benutzen.
Sry für das ganze OT, aber ich kann Dir da nicht ganz zustimmen. Je nach dem was man macht reicht es auch 100% der Leute, die zur Zielgruppe gehören anzusprechen :D
z.B. ich biete Autoprobefahrten an: Warum sollte ich Leute ohne Führerschein ansprechen, wenn ich alle mit Führerschein anspreche.
Oder um konkreter zu werden: Ich gebe Tipps zu den neuesten Web-Technologien und Beispiele zur Verwendung: Warum sollte ich dann Rücksicht nehmen?
Aber bei den meisten Berreichen hast Du durchaus recht.
mfg Kinman
rotalever
2007-10-30, 21:20:44
Nehme jetzt doch für diesen Part eine kleine Tabelle. Grund: Funktioniert in allen mir bekannten Browsern (zumindest visuell...) und war in 10 Sekunden implementiert, ohne viel rumprobieren mit CSS :wink:
vBulletin®, Copyright ©2000-2024, Jelsoft Enterprises Ltd.