mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 07:04 Benutzername: Passwort: Auto-Login

Thema: Frage zu Seitenaufbau und Navigation in CSS vom 05.12.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Frage zu Seitenaufbau und Navigation in CSS
Autor Nachricht
Dexter Paris
Threadersteller

Dabei seit: 28.05.2008
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.12.2008 14:39
Titel

Frage zu Seitenaufbau und Navigation in CSS

Antworten mit Zitat Zum Seitenanfang

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 Grins

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
  View user's profile Private Nachricht senden
status4

Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 05.12.2008 14:50
Titel

Antworten mit Zitat Zum Seitenanfang

Ist doch schon ganz anständig Lächel Also, optimieren kannst du trotzdem noch ein wenig. Dein breadcrumbs z.B.
kannst du in einer ungeordneten Liste darstellen und das div Element außenrum entfernen. Hier mal etwas
Lektüre zur Gestaltung von Navigationen mittels Listen:

http://css.maxdesign.com.au/listutorial/index.htm
http://css.maxdesign.com.au/listamatic/index.htm
http://css.maxdesign.com.au/listamatic2/index.htm


Die grafische Navigation setzt du am besten so um:

http://www.alistapart.com/articles/sprites/
http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-sprites/
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 05.12.2008 16:08
Titel

Re: Frage zu Seitenaufbau und Navigation in CSS

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
Psilo

Dabei seit: 20.02.2007
Ort: -
Alter: 35
Geschlecht: Männlich
Verfasst Fr 05.12.2008 16:49
Titel

Antworten mit Zitat Zum Seitenanfang

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]
  View user's profile Private Nachricht senden
Dexter Paris
Threadersteller

Dabei seit: 28.05.2008
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 10.12.2008 01:13
Titel

Antworten mit Zitat Zum Seitenanfang

Erstmal vielen lieben Dank den Ersthelfern *Thumbs up!*

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
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 10.12.2008 09:32
Titel

Antworten mit Zitat Zum Seitenanfang

suchst du nach PseudoKlassen?
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Mi 10.12.2008 12:52
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ähnliche Themen allgemeine Frage zum Seitenaufbau
[joomla] frage zur navigation
Frage zur Navigation (GoLive)
[CSS] - Navigation/Listen Frage
[CSS] Seitenaufbau mit DIVs
seitenaufbau beschleunigen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.