Autor |
Nachricht |
Dexter Paris
Threadersteller
Dabei seit: 28.05.2008
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 05.12.2008 14:39
Titel Frage zu Seitenaufbau und Navigation in CSS |
|
|
Hallo!
Eine Frage an die Profis die CSS so selbstverständlich lesen wie die Tageszeitung ...
Ich arbeite gerade an einer privaten Website zum Thema Classic Motocross und habe Fragen zur Seitenstruktur bzw. zum Aufbau mit CSS und ein Problem mit der Realisierung der Menübuttons.
Kurz vorweg: Arbeite erst seit kurzem mit Dreamweaver CS4 und bin auch ganz neu in das Thema CSS eingestiegen. Habe vor vielen Jahren mit Adobe Pagemill angefangen, mit Dreamweaver 3 weitergemacht und später mit GoLive CS2 meine Seiten zusammengefrickelt, und wie viele andere, Layouts stets mit Tabellen zusammengeferkert
Hier mal mein erster Entwurf wie die Seite aussehen soll: +++ EDIT: Link entfernt +++
Den Inhalt der dazugehörigen CSS Datei stelle ich in diesem Post ganz unten rein.
Frage 1: Ist der DIV-Aufbau sinnvoll oder kann man da etwas vereinfachen/besser machen?
Frage 2: Ich möchte das seitliche Menü mit Bildern/Rollover realisieren, bin aber noch nicht dahinter gekommen wie das mit CSS funktioniert. Meinen Versuch dies mit der Navigationsleisten-Funktion in DW zu lösen – welcher in fast 20kB Javascript resultierte – habe ich wieder verworfen! Bitte um Hilfe in welche Richtung ich da denken muss/soll ...
Frage 3: Nicht so wichtig, aber würde mich interessieren: Wenn ich die Seite auf dem iPod touch betrachte ist die Überschrift H1 in der Schriftgröße kleiner als die H2. Warum das so ist kapier ich gar nicht! Jemand eine Idee?
Vielen Dank im Voraus für Eure Bemühungen!!!
Code: | @charset "UTF-8";
* {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
html {
font-size: 62.5%;
}
body {
text-align: center;
font-size: 1.2em;
background-color: #CCC;
line-height: 1.8em;
font-family: Verdana, Geneva, sans-serif;
color: #666;
background-image: url(hg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
p {
padding-bottom: 10px;
text-align: justify;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #999;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
color: #999;
padding-top: 10px;
}
a {
color: #F00;
text-decoration: none;
}
a:link {
}
a:visited {
}
a:hover {
text-decoration: underline;
}
a:active {
}
#wrapper {
width: 760px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
text-align: left;
background-color: #FFF;
border: 1px solid #999;
}
#header {
height: 120px;
}
#breadcrumb {
width: 380px;
float: left;
margin-left: 30px;
margin-top: 30px;
}
.aktualisierungsdatum {
font-size: 0.8em;
text-align: left;
}
#logo {
float: right;
height: 49px;
width: 280px;
margin: 30px;
}
#main {
clear: left;
}
#navi {
width: 150px;
float: left;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 30px;
}
#content {
border-left-width: 1px;
border-left-style: dotted;
padding-top: 0px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 180px;
}
|
Zuletzt bearbeitet von Dexter Paris am So 01.02.2009 00:24, insgesamt 2-mal bearbeitet
|
|
|
|
|
status4
Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
Anzeige
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 05.12.2008 16:08
Titel Re: Frage zu Seitenaufbau und Navigation in CSS |
|
|
Dexter Paris hat geschrieben: | Frage 2: Ich möchte das seitliche Menü mit Bildern/Rollover realisieren, bin aber noch nicht dahinter gekommen wie das mit CSS funktioniert.
|
http://www.kulturbanause.de/?p=196
ansonsten kann ich dir noch einen tipp geben deine css datei schlanker zu halten.
solche Definitionen
Code: |
# content {
border-left-width: 1px;
border-left-style: dotted;
}
|
kannst du auch kürzer notieren
Code: |
# content {
border-left: 1px dotted;
}
|
als Bsp. davon hat es in deinem CSS noch etliche andere.
|
|
|
|
|
Psilo
Dabei seit: 20.02.2007
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Fr 05.12.2008 16:49
Titel
|
|
|
oder auch
Code: | padding-top: 0px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px; |
so
Code: |
padding: 0 30px 10px 30px;
padding:top right bottom left;[/list]
|
|
|
|
|
|
Dexter Paris
Threadersteller
Dabei seit: 28.05.2008
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 10.12.2008 01:13
Titel
|
|
|
Erstmal vielen lieben Dank den Ersthelfern
Das Stylesheet an sich werde ich erst am Schluss zusammenkürzen, oder auch nicht, sonst kenn ich mich bald gar nicht mehr aus. Außerdem weiß ich noch nicht wie der DW darauf reagiert. Ist aber eh ein sehr mildes Stylesheet.
So, nun zu meinem neuen Problem: Das mit den CSS-Sprites habe ich vom Prinzip her kapiert, kann es aber noch nicht praktisch anwenden!
Habe nun vorerst bei der Navi (und auch bei den Breadcrumbs) die DIVs entfernt und eine ungeordnete Liste daraus gemacht. Wie ich aber nun die Bilder zum Rollover bewegen kann hat sich mir in der Praxis noch nicht erschlossen.
Funktional könnte es so funktionieren, dass der Button selbst nur die graue Schrift zeigt, also so wie es jetzt ist. Und im Falle des Rollovers könnte vor dem Button noch ein kleines Bild mit einer grafischen Markierung eingeblendet werden. Eine ganz astreine Lösung wird das wahrscheinlich nicht werden da ich keinen Textlink haben will, aber ohne Textlink habe ich ja dann gegen das Grundprinzip der logischen Trennung von Inhalt und Design verstoßen, oder?
Wie ist der Trick, wie funktioniert das? Bitte um einen Denkanstoß in welche Richtung es gehen muss ...
Hier mal wieder der Link zum aktuellen Stand der Seite: +++ EDIT: Link entfernt +++
HTML der Navi: Code: | <ul id="navi">
<li><a href="#"><img src="navi/up/startseite_up.gif" alt="Startseite" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/ueberuns_up.gif" alt="Über uns" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/fahrerportraits_up.gif" alt="Fahrerportraits" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/termine_up.gif" alt="Termine" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/ergebnisse_up.gif" alt="Ergebnisse" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/fotos_up.gif" alt="Fotos" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/videos_up.gif" alt="Videos" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/marktplatz_up.gif" alt="Marktplatz" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/links_up.gif" alt="Links" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/shop_up.gif" alt="Shop" width="150" height="30" /></a></li>
<li><a href="#"><img src="navi/up/kontakt_up.gif" alt="Kontakt" width="150" height="30" /></a></li>
</ul> |
CSS hierzu: Code: | #navi {
width: 150px;
float: left;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 30px;
list-style-type: none;
} |
Zuletzt bearbeitet von Dexter Paris am So 01.02.2009 00:25, insgesamt 2-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 10.12.2008 09:32
Titel
|
|
|
suchst du nach PseudoKlassen?
|
|
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Mi 10.12.2008 12:52
Titel
|
|
|
Dexter Paris hat geschrieben: |
Hier mal wieder der Link zum aktuellen Stand der Seite: url
|
Hintergrundbilder
[edit Kash: Url korrigiert]
Zuletzt bearbeitet von nicoG am Mo 02.02.2009 14:34, insgesamt 3-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
allgemeine Frage zum Seitenaufbau
Frage zur Navigation (GoLive)
[CSS] - Navigation/Listen Frage
[joomla] frage zur navigation
seitenaufbau beschleunigen
Seitenaufbau mit CSS und DIVs?
|
|