Siri: CSS Overhead?

SELF-Forum

CSS Overhead?

Siri
– Informationen zu den Bewertungsregeln

Hallo,

unten stehender Code stellt eine kleine Menuleiste dar. Beim überfahren des inaktiven Tabs(nav1unselected) soll der Tab bestimmte Farben annehmen (nicht zwangslügig nav1selected!). Jetzt kommt mir das aber ein bisschen viel CSS für so einen kleinen Effekt vor... Gibt es Optimierungspotential?

Viele Grüße
Siri

<?xml version="1.0" encoding="UTF-8"?>  
<!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">  
	<head>  
		<meta charset="utf-8"/>  
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
		<title></title>  
		<style type="text/css">

BODY  {  
	position: absolute;  
	top: 0px;  
	left: 0px;  
	width: 100%;  
	background-color: #FFFFFF;  
	margin: 0;  
	padding: 0;	  
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	  
	font-weight: normal;	  
}		  
ul  {  
	position: absolute;  
	top: 0;  
	left: 30px;  
	list-style: none;  
	margin: 0;  
	padding: 0;		  
	height: 26px;  
	line-height: 26px;  
	  
}  
li.nav1selected {  
	display: inline;  
	float: left; 	  
	padding-left: 20px;	  
	padding-top: 0px;	  
	padding-right: 20px;	  
	padding-bottom: 0px;	  
	margin: 0;		  
	white-space: nowrap;	  
	background-color: #393949;  
	vertical-align: middle;  
	font-size: 11px;  
	font-weight: bold;  
}  
li.nav1selected a:link, a:hover, a:active, a:visited {  
	text-decoration: none;  
	height: 26px;  
	color: #B2B1DF;  
}  
li.nav1unselected {  
	display: inline;  
	float: left; 	  
	padding-left: 20px;	  
	padding-top: 0px;	  
	padding-right: 20px;	  
	padding-bottom: 0px;	  
	margin: 0;		  
	white-space: nowrap;	  
	vertical-align: middle;  
	font-size: 11px;  
	font-weight: bold;	  
	background-color: #B2B1DF;	  
}  
li.nav1unselected a:link, a:active, a:visited {  
	text-decoration: none;  
	height: 26px;  
	color: #393949;	  
}  
li.nav1unselected a:hover {  
	text-decoration: none;  
	color: #B2B1DF;	  
	background-color: #393949;  
}  
li.nav1unselected:hover a:link, a:active, a:visited {  
	text-decoration: none;  
	color: #B2B1DF;	  
}  
li.nav1unselected:hover {  
	text-decoration: none;  
	color: #B2B1DF;	  
	background-color: #393949;  
}  


	</style>  
	</head>  
	<body>  
		<ul>  
			<li class="nav1selected" titype="standard" name="treeitem">  
				<a href="index.html">Start</a>  
			</li>  
			<li class="nav1unselected" titype="standard" name="treeitem">  
				<a href="newscalendar.htmml">Kalender</a>  
			</li>  
		</ul>  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS Overhead?

    suit Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    unten stehender Code stellt eine kleine Menuleiste dar. Beim überfahren des inaktiven Tabs(nav1unselected) soll der Tab bestimmte Farben annehmen (nicht zwangslügig nav1selected!). Jetzt kommt mir das aber ein bisschen viel CSS für so einen kleinen Effekt vor... Gibt es Optimierungspotential?

    Kurzschreibweisen / Sammeleigenschaften:

    magin: n n n n; anstatt margin-top, margin-right usw. (font, padding, backgroud ...)

    Überall wo 0 steht muss keine Einheit stehen 0 ist 0 egal in welcher Einheit.

    Viel wichtiger aber:
    Ordentlich struktriertes HTML, dann kann man CSS-Selektoren besser zusammenfassen - ab mit deiner Navigation in ein Container-Element (nav im Fall von HTML5) oder das ul-Element mit einer Klasse ausstatten ("nav1" z.B.). Mit deinem Dokument ist jedenfalls etwas nicht in ordnung :) content type text/html mit xml-Deklaration, HTML5-Charset aber XHTML 1.0 Doctype - einige Syntaxfehler und Phantasieattribute - räum' da mal auf.

    Dann kannst du dir nav1selected und nav1unselected sparen und brauchst nur 1x das selected markieren. Das spart dir dann einen signifkaten Teil deines CSS ein.

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. CSS Overhead?

      Siri
      – Informationen zu den Bewertungsregeln

      Hallo;

      ... deinem Dokument ist jedenfalls etwas nicht in ordnung :) content type text/html mit xml-Deklaration, HTML5-Charset aber XHTML 1.0 Doctype - einige Syntaxfehler und Phantasieattribute - räum' da mal auf.

      Bis hierhin hab ich alles verstanden. Danke!

      Dann kannst du dir nav1selected und nav1unselected sparen und brauchst nur 1x das selected markieren. Das spart dir dann einen signifkaten Teil deines CSS ein.

      Da versteh ich leider nicht, was du meinst. Nur 1x das selected markieren?

      Viele Grüße
      Siri

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS Overhead?

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Dann kannst du dir nav1selected und nav1unselected sparen und brauchst nur 1x das selected markieren. Das spart dir dann einen signifkaten Teil deines CSS ein.
        Da versteh ich leider nicht, was du meinst. Nur 1x das selected markieren?

        li.nav1selected {
        display: inline;
        float: left;
        padding-left: 20px;
        padding-top: 0px;
        padding-right: 20px;
        padding-bottom: 0px;
        margin: 0;
        white-space: nowrap;
        background-color: #393949;
        vertical-align: middle;
        font-size: 11px;
        font-weight: bold;
        }

        li.nav1unselected {
        display: inline;
        float: left;
        padding-left: 20px;
        padding-top: 0px;
        padding-right: 20px;
        padding-bottom: 0px;
        margin: 0;
        white-space: nowrap;
        vertical-align: middle;
        font-size: 11px;
        font-weight: bold;
        background-color: #B2B1DF;
        }

        bei selected und unselected gibts viele doppelungen, das kannst du massiv verkürzen - und das nur durch etwas sinnvoller gestaltetes HTML.

        ul.nav li {  
	display: inline;  
	float: left; 	  
	padding-left: 20px;	  
	padding-top: 0px;	  
	padding-right: 20px;	  
	padding-bottom: 0px;	  
	margin: 0;		  
	white-space: nowrap;	  
	background-color: #393949;  
	vertical-align: middle;  
	font-size: 11px;  
	font-weight: bold;  
}  
  
ul.nav li.selected {  
	background-color: #B2B1DF;  
}
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. CSS Overhead?

    Baba
    – Informationen zu den Bewertungsregeln

    Das ist Dein Original.

    Verbessern kann man:

    • li.nav1selected und li.nav1unselected haben sehr viele gemeinsame
        Eigenschaften. Einfach die Klasse weglassen und einen selector li
        benutzen.
    • Paddingangabe (statt padding-top, etc... padding: 0 20px;)
    • a auf ganze li Größe aufziehen. Dann ist nicht nur der Hovereffekt
        auf dem ganzen li, sondern auch das ganze li verlinkt!
    • background-color entweder auf a oder li. nicht mixen.

    Das geht auf jeden Fall sehr viel kürzer. Versuch es mal im fiddle und klick dann auf "Update" und poste den Link hier.

    Cheers,
    Baba

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS Overhead?

      Siri
      – Informationen zu den Bewertungsregeln

      Hallo,

      Verbessern kann man:

      • li.nav1selected und li.nav1unselected haben sehr viele gemeinsame
          Eigenschaften. Einfach die Klasse weglassen und einen selector li
          benutzen.
      • Paddingangabe (statt padding-top, etc... padding: 0 20px;)
      • a auf ganze li Größe aufziehen. Dann ist nicht nur der Hovereffekt
          auf dem ganzen li, sondern auch das ganze li verlinkt!
      • background-color entweder auf a oder li. nicht mixen.

      Danke für die Tipps, insbesondere für den a auf li Größe, dann kann ich mir das gehovere auf das li sparen, richtig?

      Viele Grüße
      Siri

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. HowTo: JSFiddle

      dave
      – Informationen zu den Bewertungsregeln

      Hi,

      wenn du bei JSFiddle im HTML ein body-Element einfügst wird das Dokument invalide.

      Wenn du an die URL /show dranhängst kannst du den erzeugten Code ansehen. Bei dir wird der body zweimal geöffnet und geschlossen.

      ~dave

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. CSS Overhead?

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Nachtrag: wenn du den derzeitig gewählten Menüpunkt nicht verlinkst, kannst du ihn auch bequem anders formatieren.

    Zur Not ersetzt du ihn durch ein span-Element.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS Overhead?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@suit:

      nuqneH

      Nachtrag: wenn du den derzeitig gewählten Menüpunkt nicht verlinkst, kannst du ihn auch bequem anders formatieren.

      Zur Not ersetzt du ihn durch ein span-Element.

      a-Element ohne @href-Attribut tut’s auch.

      Qapla'

      --
      „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS Overhead?

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Zur Not ersetzt du ihn durch ein span-Element.

        a-Element ohne @href-Attribut tut’s auch.

        Oder so rum, ja.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  4. CSS Overhead?

    MudGuard Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hi,

    li.nav1unselected:hover a:link, a:active, a:visited {

    Dir ist der Unterschied zu

    li.nav1unselected:hover a:link, li.nav1unselected:hover a:active, li.nav1unselected:hover a:visited {

    klar?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. CSS Overhead?

      Siri
      – Informationen zu den Bewertungsregeln

      Hallo,

      li.nav1unselected:hover a:link, a:active, a:visited {

      Dir ist der Unterschied zu

      li.nav1unselected:hover a:link, li.nav1unselected:hover a:active, li.nav1unselected:hover a:visited {

      Nein, nicht wirklich.

      Viele Grüße
      Siri

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS Overhead?

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        li.nav1unselected:hover a:link, a:active, a:visited {

        Dir ist der Unterschied zu

        li.nav1unselected:hover a:link, li.nav1unselected:hover a:active, li.nav1unselected:hover a:visited {

        Nein, nicht wirklich.

        li.nav1unselected:hover a:link, a:active, a:visited {

        ist gleichbedeutend mit

        a:active, a:visited, li.nav1unselected:hover a:link {

        Wird der Unterschied zu

        li.nav1unselected:hover a:link, li.nav1unselected:hover a:active, li.nav1unselected:hover a:visited {

        so deutlicher?

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS Overhead?

          Siri
          – Informationen zu den Bewertungsregeln

          Hallo,

          li.nav1unselected:hover a:link, a:active, a:visited {

          ist gleichbedeutend mit

          a:active, a:visited, li.nav1unselected:hover a:link {

          Du meinst, diese Deklaration gilt für das gesamte Dokument,

          Wird der Unterschied zu

          li.nav1unselected:hover a:link, li.nav1unselected:hover a:active, li.nav1unselected:hover a:visited {

          während das nur für die Kinderelemente gilt?

          Viele Grüße
          Siri

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  5. CSS Overhead?

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Siri:

    nuqneH

    <?xml version="1.0" encoding="UTF-8"?>

    Die Zeile ist überflüssig. Dadurch werden einige Browser unnötigerweise in den Quirksmodus geschickt.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Waum nicht HTML5?

      <meta charset="utf-8"/>

    Fehler: @charset gibt’s in XHTML 1 nicht.

      	<li class="nav1selected" titype="standard" name="treeitem">

    Fehler: Weder das Phantasieattribut @titype noch @name sind gültige Attribute für li-Elemente.

      	<li class="nav1unselected" titype="standard" name="treeitem">

    Wozu soll die Klasse 'nav1unselected' gut sein? Zu Unterscheidung genügt, ob @class="nav1selected" gesetzt ist oder nicht.

    Und worauf suit schon hinwies: „Verlinke niemals auf die aktuelle Seite.“ Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

    Qapla'

    --
    „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS Overhead?

      Siri
      – Informationen zu den Bewertungsregeln

      Hallo,

      Danke für die Hinweise.

      Viele Grüße
      Siri

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln