zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Meine ersten Gehversuche - brauche noch ein bisschen Hilfe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.08.2005, 19:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2005
Beiträge: 4
wellness befindet sich auf einem aufstrebenden Ast
Standard Meine ersten Gehversuche - brauche noch ein bisschen Hilfe

Hallo zusammen!

Dies ist mein erster Post hier, bislang habe ich immer nur heimlich mitgelesen Jetzt habe ich mich auch endlich mal an meine erste eigene Seite gewagt, die komplett auf Tabellen verzichtet und mit XHTML umgesetzt wurde. Das Seitentemplate steht soweit, aber wie immer steckt der Teufel im Detail. Ich hoffe, dass ich die Probleme mit eurer Hilfe noch schnell lösen kann, denn ich habe meinen Vater den Relaunch noch diese Woche versprochen *dummerfehler*

Vor allem meine Navigation macht mir noch ein bisschen Bauchschmerzen. Vielleicht könnt ihr mir dabei helfen?

Hier erst mal der Link: http://www.steinhueser.de/relaunch/template.html

Jetzt zu meinen Problemen:

Da das meine ersten Gehversuche sind, befindet sich in dem Stylesheet noch viel "Probiererei", da gibt es sicher noch ne Menge Optimierungsbedarf. Mein Hauptproblem ist aber die Navigation. Ich wollte eigentlich erreichen, dass die Aufklappbox automatisch immer so breit ist, wie der längste Untermenüeintrag an Platz benötigt. Das habe ich mit width: 100% aber nicht hingekriegt und mich irgendwann (damit es dann überhaupt funktionierte) so hingewurschtelt, wie es jetzt ist.

Guckt man sich die Seite mit nem Firefox oder Netscape 7 an, sieht auch alles aus wie gewünscht. Im IE 6 sieht das aber schon anders aus: Der rechte Rand wird gesetzt, wenn das Wort zu Ende ist und nicht, wenn der Kasten am Ende ist. Außerdem wird das Hintergrundbild nicht überall bis auf die volle Kastenbreite verlängert (siehe Untermenü Kontakt).

Ich habe die Seite jetzt in IE6, NS7.1, FF1.0.x, Opera 7.5 (alles PC) und Safari angesehen, bis auf Kollege Explorer ist die Darstellung überall annehmbar einheitlich. Mich würde vor allem noch die Darstellung im IE5 PC/MAC interessieren. Konquer dürfte eigentlich auch keine Sorgen machen...

Die Navigation ist relativ unflexibel, was das verändern der Schriftgröße im Browser angeht. Kann man da wohl noch was machen? Auf die genaue Ausrichtung bis an den Seitenrand würde ich nur ungerne verzichten.


Außerdem ist ebenfalls im IE irgendwo eine Differenz von 1 Pixel, da das Hintergrundbild (das den rechten grauen Kasten bis Seitenende und den Schatten links und rechts erzeugt) im IE nicht ganz genau die weißen Außenlinien verlängert. Ist mir eigentlich relativ egal, aber wenn jemand spontan weiß, woran das liegt, würd ich es natürlich anpassen.

So, das wars eigentlich auch schon... Ich würde mich sehr über eure Hilfe bei dem Menü und über generelle Anregungen, Vorschläge und Kritik freuen!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.08.2005, 01:13
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Du solltest auch nicht vergessen, BODY eine feste Hintergrundfarbe zu geben - sie ist nicht immer überall weiß
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.08.2005, 01:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2005
Beiträge: 4
wellness befindet sich auf einem aufstrebenden Ast
Standard Re: Meine ersten Gehversuche - brauche noch ein bisschen Hil

Erstmal vielen Dank für die Antworten!

Zitat:
Zitat von Valentino
Nimm dir den Druck weg und sag` deinem Vater, dass es eben nicht so einfach ist und ihm eine gut gemachte Seite wichtiger sein sollte, als eine unter Zeitdruck hingewurschelte. (Mach doch eine Übergangsseite nur mit Inhalt und entwickle die neue Seite in Ruhe weiter.)
Erzähl das mal meinem Vater Ich hab ihm das fest versprochen und ja lang genug vorher gewußt...

Zitat:
Zitat von Valentino
Zitat:
Zitat von wellness
Außerdem wird das Hintergrundbild nicht überall bis auf die volle Kastenbreite verlängert (siehe Untermenü Kontakt).
Ich habe es mir nicht im Detail angesehen, da leider wenig Zeit, aber Problem mit Rändern und Abständen dazu ergeben sich meist aus der untschiedlichen Interpretation von Innen- und Aussenrand: http://www.css4you.de/wsboxmodell/index.html
Den Link kenne ich schon, ist ne super Seite wenn man CSS-Anfänger ist! Aber mit dem Box-Modell-Problem des IE hat mein "Fehler" glaube ich nichts zu tun, sondern eher mit einem logischen Problem der Aufklappmenüs. Die werden im Stylesheet irgendwie an der gleichen Stelle formatiert, wie die Hauptmenüpunkte. Da ich das Menü von einer anderen CSS-Seite übernommen und nur angepasst habe und es auch noch nicht vollständig verstanden habe fällt es mir aber schwer, den Denkfehler zu erkennen. Mir würde es helfen, wenn mir an dieser Stelle jemand mit dem Code helfen könnte!

Zitat:
Zitat von Valentino
Zitat:
Zitat von wellness
Die Navigation ist relativ unflexibel, was das verändern der Schriftgröße im Browser angeht.
Angabe in em macht Schrift flexibel.
Naja, flexibel ist sie ja zumindest im Feuerfuchs auch bei Pixelangaben. Aber die Flexibilität ist ja das eigentliche Problem. Wenn der User die Schriftgröße höher eingestellt hat, passen nicht mehr alle Punkte in den vorgegeben Container und die letzten Punkte der Navizeile brechen dann in die nächste Zeile um. Das zerhaut dann das ganze Layout. Bei dem Content hat der User die Möglichkeit, alles anzupassen ohne das was passiert. Bei der Navigation wär mir eigentlich lieber, wenn dort Schriftgrößeanpassungen gar keinen Einfluß nehmen würden...


Hintergrundfarbe habe ich wieder "entkommentiert", danke für den Hinweis!



Edit:

Bei den Menüs habe ich übrigens auch mal ausprobiert, eine absolute width-Angabe per style-Anweisung direkt im a-Tag einzufügen. Das klappt dann zwar auch im IE mit dem Auffüllen der Box, die Boxen sind dann aber ca. 30 Pixel breiter als angegeben??
Mit Zitat antworten
  #4 (permalink)  
Alt 24.08.2005, 12:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 162
Xavier befindet sich auf einem aufstrebenden Ast
Standard

Hi!
Großes Lob, coole Seite! Wenn ich an meine ersten Versuche zurück denke und die damit vergleiche...
Du solltest die Header Grafik auch per CSS einbinden.
und sowas
Code:
<p id="Abstand"></p>
durch CSS ersetzen.
Was mir nicht so gefällt, ist der Hover Effekt: Rot auf dunklem Grau ist schwer zu erkennen. Vielleicht würde das helle Grau des aktiven Menüpunkts besser passen...
Mit Zitat antworten
  #5 (permalink)  
Alt 24.08.2005, 23:26
Anonymous
Gast
 
Beiträge: n/a
Standard

so sieht's im opera 8 win. aus:
Angehängte Grafiken
Dateityp: gif layout_151.gif (59,6 KB, 427x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 25.08.2005, 01:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2005
Beiträge: 4
wellness befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Xavier
Hi!
Großes Lob, coole Seite! Wenn ich an meine ersten Versuche zurück denke und die damit vergleiche...
Du solltest die Header Grafik auch per CSS einbinden.
und sowas
Code:
<p id="Abstand"></p>
durch CSS ersetzen.
Was mir nicht so gefällt, ist der Hover Effekt: Rot auf dunklem Grau ist schwer zu erkennen. Vielleicht würde das helle Grau des aktiven Menüpunkts besser passen...
Vielen Dank, das freut mich zu hören! Die Headergrafik per CSS einbinden, hm, sowas mit Image-Replacement meinst du? Ich hab da schon mal was gehört... ^^ Aber keine Ahnung, warum das so sein soll und vor allem auch nicht, wie man das macht...

Der <p id="Abstand"> ist doch mit CSS gemacht? Verstehe nicht ganz, was du meinst... Das Leerzeichen dadrin ist nicht für die Höhe, sondern nur damit der Tag nicht leer ist. Ist das so nicht richtig?

Jo, und mit dem dunklen Grau hast du recht... ich wollte es eigentlich noch mit ner anderen, silberneren (?) Hintergrundgrafik mit Metalllook versuchen.




@legman: Vielen Dank für den Screenshot... Komisch, mit meinem Opera 7.54u2 sieht alles richtig aus, bis auf eine Kleinigkeit: Dem unteren Eintrag im Aufklappmenü von Kontakt fehlt in diesem Browser mal ne Ecke, mal wird die Hintergrundgrafik nicht ganz aufgefüllt, manchmal wirds normal angezeigt, manchmal bleiben Bruchstücke auch nach dem MouseOut noch sichtbar... siehe Screenshot. Bei allen anderen Untermenüs funzt es ganz normal. Ich habe irgendwie den Eindruck, dass das ein browserspezifisches Problem ist, dass man auch mit nem Hack nicht lösen kann?

Hast du vielleicht auch eine Idee, woran die zerrissene Darstellung in Opera8 liegen kann?
Angehängte Grafiken
Dateityp: jpg opera-problem.jpg (32,3 KB, 415x aufgerufen)
Mit Zitat antworten
  #7 (permalink)  
Alt 25.08.2005, 01:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2005
Beiträge: 4
wellness befindet sich auf einem aufstrebenden Ast
Standard

Ach, das mit der Navigation hab ich jetzt übrigens Quick ´n Dirty hingekriegt. Einfach per style direkt im a-Tag des Untermenüs die absolute Breite rein, dann machen alle Browser das gleiche und das Untermenü sieht aus, wie bei dem Punkt Infoabruf. Die 30 Pixel zuviel kamen von nem vererbten Margin, war einfach nur schon zu spät, das zu merken

Aber das ist eigentlich nicht das, was ich will. Wenn ein neuer Menüeintrag dazu kommt oder einer wegfällt, muss ich die Breite neu ausmessen und dann alle Punkte anpassen. Nicht, dass das häufig der Fall wäre... Aber schöner fände ich es, wenn sich die Punkte automatisch an dem breitesten Eintrag im Menü orientieren und sich dementsprechend breit aufziehen würden. Schon alleine wegen Schriftgrößenveränderungen...
Kann mir dabei jemand helfen und mir sagen, wie ich das konkret hinkriege?
Mit Zitat antworten
  #8 (permalink)  
Alt 25.08.2005, 02:14
Anonymous
Gast
 
Beiträge: n/a
Standard

Zitat:
Zitat von wellness
Vielen Dank, das freut mich zu hören! Die Headergrafik per CSS einbinden, hm, sowas mit Image-Replacement meinst du? Ich hab da schon mal was gehört... ^^ Aber keine Ahnung, warum das so sein soll und vor allem auch nicht, wie man das macht...
die header grafik als <background: url> einfügen.
Zitat:
Zitat von wellness
Hast du vielleicht auch eine Idee, woran die zerrissene Darstellung in Opera8 liegen kann?
also es sieht im opera 8. fast so aus wie mit ff. mit der background-color funzt es aber nicht im opera. wie du siehst ist es immer noch grau (screenshot)
Mit Zitat antworten
  #9 (permalink)  
Alt 25.08.2005, 02:37
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Ändere das mal:

Code:
background-color: #FFFFFF;
background: url(../img/shared/schatten.gif) center repeat-y;
In das:

Code:
background: #fff url(../img/shared/schatten.gif) center repeat-y;
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.08.2005, 11:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 162
Xavier befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von wellness
Die Headergrafik per CSS einbinden, hm, sowas mit Image-Replacement meinst du? Ich hab da schon mal was gehört... ^^ Aber keine Ahnung, warum das so sein soll und vor allem auch nicht, wie man das macht...
Siehe legman
Da das Bild keine wirklichen Informationen liefert (ein Logo) hat es streng genommen nichts im HTML Code zu suchen und sollte mittels CSS - background: url(...); - eingebunden werden.

Zitat:
Zitat von wellness
Der <p id="Abstand"> ist doch mit CSS gemacht? Verstehe nicht ganz, was du meinst... Das Leerzeichen dadrin ist nicht für die Höhe, sondern nur damit der Tag nicht leer ist. Ist das so nicht richtig?
Habe mir deine CSS Datei nicht genau angesehen, aber ich denke, dass man <p id="Abstand"> entfernen und stattdessen #tickertext noch ein margin-top gibt. Steht auch schon dar, ist aber auskommentiert.
Noch ein Verbesserungsvorschlag: wenn die letzte Zeile vom Contentbereich erreicht ist, endet dort auch die Seite. Ich finde es eleganter, wenn unter der letzten Zeile noch eine leere Zeile ist (margin-bottom: 1em oder padding-bottom: 1em)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Masonry und Infinite Scroll (Brauche hilfe) ClaymanX Javascript & Ajax 0 06.05.2014 22:38
Navigation - Brauche Hilfe dctrjns CSS 7 16.02.2013 15:28
Brauche hilfe zu vhost.conf bei einem Apache debian vServer onkel-tom Serveradministration und serverseitige Scripte 5 16.11.2008 13:42
HILFE, ich brauche Hilfe von Profis! frambuesa CSS 13 13.06.2008 23:46
Brauche HILFE bei CSS:ebay seite erstellen! BRAUCHE MUSTER beavis-2005 CSS 2 23.11.2005 19:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:07 Uhr.