"We are back" « oc.at

Grafik-Navigation erstellen

Forum Index > Software > Coding Stuff

slateSC 27.07.2010 - 01:47 1030 6
Posts

slateSC

The Suntoucher
Avatar
Registered: Jul 2004
Location: oö
Posts: 1255
27.07.2010 - 01:47
Kann mir jemand helfen die navigation aus dem bild umzusetzen?
bin leider nicht wirklich fix unterwegs mit css...

click to enlarge

So sieht die Navigation derzeit aus

Wenn der hintergrund des over effekts ein reines schwarz ist, währs mir genauso recht!
Bearbeitet von slateSC am 28.07.2010, 11:49

watchout

Legend
undead
Avatar
Registered: Nov 2000
Location: Off the grid.
Posts: 6845
27.07.2010 - 04:19
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;
}
Die verwendete Schrift ist übrigens nicht die gleiche (nicht mal ähnlich), den selector für den link musst du selbst finden :D

Den vielen linken rand bekommst du weg indem du das umgebende ul bzw. die li elemente formatierst und diverse unnötige padding, margin entfernst.

hth, gute Nacht :)

slateSC

The Suntoucher
Avatar
Registered: Jul 2004
Location: oö
Posts: 1255
27.07.2010 - 15:02
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;
	}

edit: irrtum, die navi ist doch noch da ;)
Das ist jetzt der aktuelle code:
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;
	}
Bearbeitet von slateSC am 27.07.2010, 15:12

slateSC

The Suntoucher
Avatar
Registered: Jul 2004
Location: oö
Posts: 1255
27.07.2010 - 19:19
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!?

slateSC

The Suntoucher
Avatar
Registered: Jul 2004
Location: oö
Posts: 1255
28.07.2010 - 01:15
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;
}

ps. link zur seite ist oben ;)

watchout

Legend
undead
Avatar
Registered: Nov 2000
Location: Off the grid.
Posts: 6845
28.07.2010 - 09:18
Code:
#sidenav  {
  ...
  padding:0;
  width:200px;
  ...
}
:)

slateSC

The Suntoucher
Avatar
Registered: Jul 2004
Location: oö
Posts: 1255
28.07.2010 - 11:49
YEAH!!!! Danke noch mal für die hilfe! :D
All times are GMT +1 hour. The time now is 11:30.
Anmeldung

Noch keinen Account?
Jetzt registrieren.

New Posts
Today's Active Threads
Gothic Remake (Playable Teaser)
11:28 Earthshaker
FYI: Vorsorgevollmachten
11:27 paulus
iPhone 17 / 17 AIR / 17 PRO / 17 PRO MAX / SE4 / Watch 11 /Watch Ultra 3 (2025)
11:19 Garbage
[Hulu] Paradise
10:48 $yrus
current state of encryted email
10:34 dio
WIFI extenden nur ueber Powerline?
10:31 COLOSSUS
Latest News
overclockers.at is back!
25.01. mat
User of the Month: disposableHero
28.10. WONDERMIKE
Neues Unterforum: Artificial Intelligence
10.08. WONDERMIKE
Erweiterung unseres Suche / Biete / Tausche Markplatzes: Alles außer Hardware!
07.04. WONDERMIKE
User of the Moment: Viper780
04.05. böhmi
Archives: News Articles
Links

Partners:
» Gamers.at
» Notebookcheck.com

L E F T B A R
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz
© all rights reserved by overclockers.at 2000-2025
overclockers.at v4.thecommunity based on vBulletin 2.2.5
Page generated in 0.033 seconds (SQL-time: 0.029 seconds, 25 queries)
sponsored by www.nessus.at