Kleiner Sitecheck

emti · #1 (**permalink**) 30.07.2008, 20:39

Jetzt war es an der Zeit, meine Verteilerseite die ich völlig ekelig unformatiert gelassen hatte - sollte mich ja eh nur zu den Übungen geleiten - , mal nach dem was ich gelernt habe zu „stylen“.

Der Ablauf war dann so:

Ne Idee gehabt: Oben ein heller Bereich, unten ein dunkler Bereich. Das ist ja wohl lachhaft umzusetzen.

Umsetzung: Angefangen, klappt nicht, gelesen, klappt nicht, gelesen, gelesen, klappt nicht, fluchen, gelesen, mal richtig konzentriert, fluchen, was gefunden, umgesetzt.

Nächste Idee: Navileiste horizontal. Schon soviel drüber gelesen. Lachhaft.

Ich spare mir die Ausführung der Umsetzung. Der Post würde zu lang. Hat mich den Rest vom Abend und die Hälfte vom heutigen Tag gekostet.

Für Euch lachhaft, für mich das erste mal etwas umzusetzen, was als Layout in der Birne hängt, sau schwierig.
Drum bitte ich Euch noch mal den QT anzuschauen und wenn nötig, den Rotstift anzusetzen. Kann man das so bringen, oder Uiuiui?

Seite

Problem was ich selbst noch finde ist:

Ich hab nix gefunden, wie ich dies beseitigen kann.

hubspe · #2 (**permalink**) 31.07.2008, 08:34

Moin,

also, li braucht kein display:block; weil es eh schon ein Blockelement ist.
list-style-type:none; würde ich noch einsetzen
Außerdem kannst du die Höhe für li rausschmeissen.

Gib a display:block und entsprechendes padding um die Größe der Schaltfläche einzustellen und sie außerdem komplett anklickbar zu machen.
Damit die Schaltfläche im IE6 komplett anklickbar werden soll braucht a auch noch Layout:

Code:

* html li a  { height:1%; }

am besten natürlich über Cond. Comm.

Gruß
Klaus

emti · #3 (**permalink**) 31.07.2008, 12:54

Vielen Dank derweil, werde mich der Sachen annehmen.
Nur auf die Schnelle:

Zitat:

li braucht kein display:block; weil es eh schon ein Blockelement ist.

Ja schon, nur habe ich dadurch die Aufzählungszeichen entfernt.

Zitat:

Gib a display:block und entsprechendes padding um die Größe der Schaltfläche einzustellen und sie außerdem komplett anklickbar zu machen.

Wunderbar, werde ich versuchen. Das wollte ich auch ursprünglich so umsetzen, nur wußte ich nicht wie, deshalb die herkömmliche Methode.

Zitat:

am besten natürlich über Cond. Comm.

Sorry, dat sacht mir nix.

@andreas
Habe gestern noch versucht es umzusetzen. Nur knapse ich im Moment noch an der richtigen Positionierung und Positionierungsart. Wo dann aber das alt-tag hinkommt, ist mir nicht ganz klar. So vielleicht:

Code:

<h1 alt="logo">webcoords</h1>

fricca · #4 (**permalink**) 31.07.2008, 13:46

Zitat:

Zitat von emti

Wo dann aber das alt-tag hinkommt, ist mir nicht ganz klar. So vielleicht:

Code:

<h1 alt="logo">webcoords</h1>

Wenn du Image Replacement verwendest, dann gibt es kein Alt-Attribut mehr. Der Text steht -- wie du es ja machst -- in dem Element, auf das IR angewandt wird.
Entweder Bild mit Alt-Attribut oder Image Replacement. Beides sorgt auf unterschiedliche Weise dafür, dass die Inhalte zugänglich sind, wenn jemand keine Bilder sehen kann.
Davon abgesehen: "logo" ist alles andere als sinnvoll als Alternativtext. Dort müsste der Textinhalt des Bildes hin. Aber das hat sich ja eh erledigt.

hubspe · #5 (**permalink**) 31.07.2008, 14:14

Mahlzeit,

Zitat:

Zitat von emti

Zitat:

am besten natürlich über Cond. Comm.

Sorry, dat sacht mir nix.

[/CODE]

Conditionell Comments: Eine Möglichkeit den IE-Versionen spezielle CSS-Formatierungen zukommen zu lassen, die auch nur vom IE interpretiert werden.

Man legt sich eine odere mehrere extra CSS-Dateien an, in die man diese Formatierungen reinschreibt.

Eingebunden werden sie so z.B.:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="language" content="deutsch, de" />
  <meta name="author" content="Ich" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  
  <title>Regenwürmer einmal anders!</title>  
  <link rel="shortcut icon" href="images/favicon.ico" />  
  
<link type="text/css" rel="stylesheet" href="bildschirm.css" media="screen" />
<link type="text/css" rel="stylesheet" href="druck.css" media="print" />
  
<!--[if IE 6]>
  <style type="text/css">
    @import url(ie6.css);
  </style>
<![endif]-->  

<!--[if IE 7]>
  <style type="text/css">
    @import url(ie7.css);
  </style>
<![endif]-->  

</head>
<body>
Inhalt
</body>
</html>

Das ist eine Möglichkeit, der erste CC wird nur vom IE6 gelesen, der zweite nur vom IE7.

Lies doch auch mal hier, da steht noch einiges dazu.

Gruß
Klaus

emti · #6 (**permalink**) 01.08.2008, 01:00

Zitat:

Zitat von andreas

webcoords ist eine Überschrift ersten Ranges <h1> Kannst du natürlich durch eine Grafik ersetzten.

Korrigiert.

Zitat:

Zitat von andreas

Da solltest du image replacement einsetzen …

Korrigiert.
Musste mich erstmal rein lesen und habe mich dann für die Phark-Methode entschieden. Danke noch einmal für den Link.

Zitat:

Zitat von hubspe

also, li braucht kein display:block; weil es eh schon ein Blockelement ist.
list-style-type:none; würde ich noch einsetzen

Korrigiert.
Meine Antwort war natürlich quatsch, denn ich habe das „list-style-type: none;“ nicht gesehen, sry.

Zitat:

Zitat von hubspe

Außerdem kannst du die Höhe für li rausschmeissen.

Korrigiert.

Zitat:

Zitat von hubspe

Gib a display:block und entsprechendes padding um die Größe der Schaltfläche einzustellen und sie außerdem komplett anklickbar zu machen.

Korrigiert.

Zitat:

Zitat von hubspe

am besten natürlich über Cond. Comm.

Das saug ich mir später mal auf, wenn ich das Buch durch habe.

@fricca
oO, diesmal bringst Du meinen Kopf nicht zum rauchen. Tut auch mal gut.

Ja, klingt logisch und deshalb verstehe ich andreas´s Satz nicht so richtig.

Bitte nicht über die ausgeprägten Kommentare im QT lachen. Möchte mich direkt dran gewöhnen, um es später nicht zu vergessen.

Das Problem das wenn ich den Viewport horizontal kleiner als das Navileiste mache, und ich dann nach rechts scrolle, ein Teil vom oberen grauen Hintergrundbereich fehlt, besteht leider immer noch. Siehe kleines Bild im ersten Post. Ich dachte, dass ein Element, was man horizontal nicht durch z.B. eine width-Angabe einschränkt, immer volle Sichtbreite hat, auch wenn man scrollen muss. Warum fehlt da also ein Stück? Ist das Fenster wieder so breit, dass die komplette Navileiste (-liste) sichtbar ist, passt es wieder.

Aber noch mal ganz großen Dank für die Tipps.
Hier die korrigierte Site: Seite

fricca · #7 (**permalink**) 01.08.2008, 09:31

Zitat:

Zitat von emti

Das Problem das wenn ich den Viewport horizontal kleiner als das Navileiste mache, und ich dann nach rechts scrolle, ein Teil vom oberen grauen Hintergrundbereich fehlt, besteht leider immer noch. Siehe kleines Bild im ersten Post. Ich dachte, dass ein Element, was man horizontal nicht durch z.B. eine width-Angabe einschränkt, immer volle Sichtbreite hat, auch wenn man scrollen muss. Warum fehlt da also ein Stück? Ist das Fenster wieder so breit, dass die komplette Navileiste (-liste) sichtbar ist, passt es wieder.

width:auto für ein Blockelement heißt nicht: Passe die Breite deinem Inhalt an. (Sowas machen nur Tabellen).
Dein Div ist so breit wie der Viewport. Wenn die Inhalte breiter sind als der Viewport, gibt es einen Scrollbalken, die Inhalte fließen aus deinem Div raus.
Eine Mindestbreite würde helfen.

Geronimo · #8 (**permalink**) 01.08.2008, 11:10

Die Farbe des Logos geht ja mal gar nicht. Hautfarben! Warum verwendest du nicht das recht angenehme Orange der Navigation?

emti · #9 (**permalink**) 04.08.2008, 15:14

@designfanatiker

Was momentan auf der Seite zu sehen ist, soll kein Versuch sein, das Seitenlayout herzustellen, sondern lediglich das Üben im Umgang mit Farben, Grafiken und deren positionierung. Bis ich mal eine gescheite Seite in den Browser bekomme, muss ich noch viel lesen und probieren.

Aber, habe ein wenig geändert. Ob es so besser wirkt, sei dahingestellt. Mit gefällt es. Das Blöde ist, das tat es vorher auch.

hubspe · #10 (**permalink**) 04.08.2008, 15:35

Hi Michael,

Zitat:

Zitat von emti

Aber, habe ein wenig geändert. Ob es so besser wirkt, sei dahingestellt. Mit gefällt es. Das Blöde ist, das tat es vorher auch.

um dem abzuhelfen hätt ich was für dich nach dem Motto "Futter für den Hinterkopf":

Gelungenes Webdesign

Gruß
Klaus

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Re-Design, kleiner Sitecheck	DevStyle	Site- und Layoutcheck	7	22.09.2009 23:02
Kleiner Sitecheck	hallo2008	Site- und Layoutcheck	3	31.08.2009 11:46
Kriterien für den Sitecheck	IChao	Offtopic	106	19.08.2007 14:38
Kriterien für den Sitecheck	laborix	Site- und Layoutcheck	0	08.08.2007 17:31
div Breite nicht kleiner als Inhalt	DcK	CSS	0	18.11.2006 14:44