Grafik-Navigation erstellen

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/grafik-navigation_erstellen_217825/page_1 - zur Vollversion wechseln!

Kann mir jemand helfen die navigation aus dem bild umzusetzen?
bin leider nicht wirklich fix unterwegs mit css...



So sieht die Navigation derzeit aus

Wenn der hintergrund des over effekts ein reines schwarz ist, währs mir genauso recht!

Reines schwarz oder das bild da tiled macht auch nicht mehr so viel unterschied.

Also ich weiss nimmer genau wie das joomla li-menu-layout ist, aber du wirst wohl etwas in der art brauchen

Code:

xxx li a:link {
  display:block;
  height: (höhe ohne schw. hor. balken);
  border-bottom: dicke*px solid black;
  /* dicke* durch dicke der schwarzen balken ersetzen */
  padding: top*px right*px bottom*px left*px
  /* blah* steht da für die seite, spiel so lang rum 
      bis die schrift vertikal halbwegs in der mitte ist,
      u.u. wird es nicht perfekt, links schätz ich mal
      grob auf .75em, rechts den gleichen wert ist
      sinnvoll
  */
  background-color: #xxxxxx;
}
xxx li a:hover {
  background-color: black;
  /* und/oder */
  background-image: url(...);
  background-repeat: repeat-x;
}

He! danke für die schnelle rückmeldung und die hilfestellung!!

das die schrift nicht gleich ist macht nichts! die grafik war nur das ursprüngliche screendesign.
Bin schon glücklich wenn die sidnavi halbwegs was gleich schaut

Irgendwie hab ich jetzt anscheinend a bisserl a durcheinander hineingebracht,
jetzt wird der bereich der seitlichen navi gar nicht mehr angezeigt...

Code: PHP

#sidenav{
	width: 192px;
	height: 346px;
	margin: 0px 0px 0px 7px;
	padding: 0px 0px 0px 8px;
	float:left;
	font-size: 14px;
	letter-spacing: 2px;
	}
	#sidenav li a:link {
   display:block;
   height: 325px;
   border-bottom: 3px solid black;
   /* dicke* durch dicke der schwarzen balken ersetzen */
   padding: 0px 8px 8px 0px;
   /* blah* steht da für die seite, spiel so lang rum 
       bis die schrift vertikal halbwegs in der mitte ist,
      u.u. wird es nicht perfekt, links schätz ich mal
       grob auf .75em, rechts den gleichen wert ist
       sinnvoll
   */
   background-color: #2c2c2c;
 }
 #sidenav li a:hover {
   background-color: black;
   /* und/oder 
   background-image: url(...);
   background-repeat: repeat-x; */
 }
	ul li {
	list-style-type: none;
	}
	#sidenav a:link {color:#ffffff; text-decoration: none;
	}
	#sidenav a:visited {color:#ffffff; text-decoration: none;
	}
	#sidenav a:hover {color:#f96f00; text-decoration: none;
	}
	#sidenav a:active {color:#f96f00; text-decoration: none;
	}
	#sidenav a:focus {color:#ffffff; text-decoration: none;
	}

Code: PHP

#sidenav{
	width: 192px;
	height: 346px;
	margin: 0px 0px 0px 7px;
	padding: 0px 0px 0px 8px;
	float:left;
	font-size: 14px;
	letter-spacing: 2px;
	background-color: #2c2c2c;
	}
	#sidenav li a:link {
   display:block;
   height: 325px;
   border-bottom: 3px solid black;
   /* dicke* durch dicke der schwarzen balken ersetzen */
   padding: 0px 8px 8px 0px;
   /* blah* steht da für die seite, spiel so lang rum 
       bis die schrift vertikal halbwegs in der mitte ist,
      u.u. wird es nicht perfekt, links schätz ich mal
       grob auf .75em, rechts den gleichen wert ist
       sinnvoll
   */
   background-color: #2c2c2c;
 }
 #sidenav li a:hover {
   background-color: black;
   /* und/oder 
   background-image: url(...);
   background-repeat: repeat-x; */
 }
	ul li {
	list-style-type: none;
	}
	#sidenav a:link {color:#ffffff; text-decoration: none;
	}
	#sidenav a:visited {color:#ffffff; text-decoration: none;
	}
	#sidenav a:hover {color:#ffffff; text-decoration: none;
	}
	#sidenav a:active {color:#ffffff; text-decoration: none;
	}
	#sidenav a:focus {color:#ffffff; text-decoration: none;
	}

hm.. die grafiken als hintergrund konnte ich jetzt auch schon mal einfügen!
aber die formatierung stimmt noch nicht.. womit muss ich die ansteuern?
und die querbalken sind auch noch nicht zu sehen!?

Sorry für die 3fachcombo, aber ich bin soo kurz davor es zu lösen!

die formatierung passt schon perfekt! das einzige problem was ich noch hab
ist dass das menü um 7px nach rechts hineinverschoben wird obwohl es eigentlich nicht definiert ist!

irgendwie dürften die "#sidenav - margin: 0px 0px 0px 7px;" mit dem
"#sidenav li, #sidenav ul - margin: 0;" gekoppelt sein!?

Code: PHP

#sidenav{
	width: 192px;
	height: 346px;
	margin: 0px 0px 0px 7px;
	padding: 0px 0px 0px 8px;
	float:left;
	font-size: 14px;
	letter-spacing: 2px;
	background-color:#2c2c2c;
	}
	/* Root = Vertical, Secondary = Vertical */
#sidenav li,
#sidenav ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 200px; /*For KHTML*/
  list-style: none;
}

#sidenav li {
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
#sidenav a {
  border: 3px solid #000;
  border-left-style: none;
  border-right-style: none;
  border-top-style: none;
  padding: 0px 0px 0px 17px;
  display: block;
  background: #2c2c2c;
  color: #666;
  line-height: 25pt;
  text-decoration: none;
  height: auto !important;
  height: 100%; /*For IE*/
}

/* Root Menu Hover Persistence */
#sidenav a:hover,
#sidenav li:hover a,
#sidenav li.iehover a {
  background: #000;
  color: #FFF;
}

/* Do Not Move - Must Come Before display:block for Gecko */
#sidenav li:hover ul ul,
#sidenav li:hover ul ul ul,
#sidenav li.iehover ul ul,
#sidenav li.iehover ul ul ul {
  display: none;
}

#sidenav li:hover ul,
#sidenav ul li:hover ul,
#sidenav ul ul li:hover ul,
#sidenav li.iehover ul,
#sidenav ul li.iehover ul,
#sidenav ul ul li.iehover ul {
  display: block;
}

Code:

#sidenav  {
  ...
  padding:0;
  width:200px;
  ...
}

YEAH!!!! Danke noch mal für die hilfe!

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2026