einserver.de

[pichfl]

Ich werden diesen Thread mal "wiederverwenden":

http://einserver.de/luminated

was meint ihr?

Interessant dürfte vor allem das Menü sein, das kommt nämlich komplett ohne Javascript aus.
Falls jmd interessiert ist, erklär ich die Technik gerne.

[Tante Google]

[beaver]

Falls jmd interessiert ist, erklär ich die Technik gerne.

willst du nicht ein tutorial dazu schreiben? interessiert mich nämlich schon

[pichfl]

tutorial wäre zuviel gesagt


viell. kurz in stichpunkten.

wäre das ok?

[beaver]

jepp, danke vielmals

[pichfl]

Wird sicherlich etwas abstrakt...


1. Das Menü besteht aus folgendem Code:

HTML:

Code: Alles auswählen

	<div id="menu">
		<ul>
			<li id="first" ><a href="<?php bloginfo('url'); ?>/start"<?php if ( is_page('start') ) { echo(" class='active'"); }?>><span>start</span></a></li>
			<li id="second" ><a href="<?php bloginfo('url'); ?>"><span>news</span></a></li>
			<li id="third" ><a href="<?php bloginfo('url'); ?>/suite"<?php if ( is_page('suite') ) { echo(" class='active'"); }?>><span>suite</span></a></li>
			<li id="fourth" ><a href="<?php bloginfo('url'); ?>/team"<?php if ( is_page('team') ) { echo(" class='active'"); }?>><span>team</span></a></li>
			<li id="fifth" ><a href="<?php bloginfo('url'); ?>/about"<?php if ( is_page('about') ) { echo(" class='active'"); }?>><span>about</span></a></li>
		</ul>
	</div>

CSS:

Code: Alles auswählen

#menu{
	height:31px;
	width:500px;
	margin:0;
	padding:0;
	background-image:url(style/bg-header.png);
	background-position:0px -161px;
	background-repeat:no-repeat;}
	
#menu ul{
	margin:0;
	padding:0;}

#menu ul li{
	padding: 0;
	margin: 0;
	float:left;
	display:block;}

#menu ul li a{
	height:31px;
	margin:0;
	padding:0;
	border:none;
	text-decoration:none;
	color:#FFFFFF;
	text-align:center;
	font-size:10px;
	font-weight:normal;
	display:block;}

#menu ul li a span{
	display:block;
	overflow:hidden;
	font-size:1px;
	height:0;
	margin:0;
	padding:0;}
	
#menu #first a{
	background: #252525 url(style/bg-menu.png) no-repeat 0 0px;
	width:103px;}
	
#menu #first a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat 0 -31px;
	width:103px;}
	
#menu #first a:active, #menu #first .active{
	background: #252525 url(style/bg-menu.png) no-repeat 0 -62px;
	width:103px;}

#menu #second a{
	background: #252525 url(style/bg-menu.png) no-repeat -103px 0px;
	width:98px;}

#menu #second a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat -103px -31px;
	width:98px;}
	
#menu #second a:active, #menu #second .active{
	background: #232D34 url(style/bg-menu.png) no-repeat -103px -62px;
	width:98px;}
	
#menu #third a{
	background: #252525 url(style/bg-menu.png) no-repeat -201px 0px;
	width:98px;}

#menu #third a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat -201px -31px;
	width:98px;}
	
#menu #third a:active, #menu #third .active{
	background: #232D34 url(style/bg-menu.png) no-repeat -201px -62px;
	width:98px;}
	
#menu #fourth a{
	background: #252525 url(style/bg-menu.png) no-repeat -299px 0px;
	width:98px;}

#menu #fourth a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat -299px -31px;
	width:98px;}
	
#menu #fourth a:active, #menu #fourth .active{
	background: #232D34 url(style/bg-menu.png) no-repeat -299px -62px;
	width:98px;}
	
#menu #fifth a{
	background: #252525 url(style/bg-menu.png) no-repeat -397px 0px;
	width:103px;}

#menu #fifth a:hover{
	background: #232D34 url(style/bg-menu.png) no-repeat -397px -31px;
	width:103px;}
	
#menu #fifth a:active, #menu #fifth .active{
	background: #232D34 url(style/bg-menu.png) no-repeat -397px -62px;
	width:103px;}

und 1(!) Bild:



Das ganze funktioniert dann so:
Jeder < a> im Menü bekomm eine feste ID (z.b. #first), bei der ich dann die Höhe, die Breite und das BG-Image festlege. Das Hintergrundimage ist für jeden < a> exakt das selbe, allerdings verändere ich dessen Position innerhalb der Box, die durch die definierte Höhe und Breite das < a>-tags entsteht. das ist so, als würde man ein Loch der Größe 5*5cm machen und dieses Blass dann auf ein Bild der Größe 50*50cm zu legen - egal, wie man das Bild verschiebt, man kann halt nur einen 5*5cm großen Ausschnitt sehen.
Da für den tag < A> in jedem Browser die Pseudoklassen :hover usw. funktionieren gibts auch keine Probleme im IE.
Am Ende ist es praktisch so, dass ich in dem Bild jeweils eine Auschnitt nehme und diesen dann verschiebe, um den nächsten Status des Bilds anzuzeigen. (daher auch die drei Zeilen in dem Bild: Normal, :hover, :active)

Der Rest ist simples CSS um das ganze etwas ansehnlich zu machen bzw. die Liste richtig darzustellen.

Ich hoffe, jmd. wird daraus schlau.


Zum HTML-Code:
Ich hab pro Menüpunkt ein kleines PHP-script eigefügt, dass über eine Wordpress-Funktion überprüft, auf welcher Seite man sich aufhält, was dazu dient, den aktiven Punkt mt der Klasse "active" zu kennzeichnen, die in der CSS zusammen mit dem Code für :active eines Menüpunkts aufgerufen werden
Bsp:

Code: Alles auswählen

#menu #first a:active, #menu #first .active{
	background: #252525 url(style/bg-menu.png) no-repeat 0 -62px;
	width:103px;}

[Benijamino]

uff ... Klasse, sieht spitze aus.

[Lionhead]

Sieht cool aus. Danke für die kleine Beschreibung.

[pichfl]

http://einserver.de/pichfl/private/img/mein_blog.png


endlich mal "meine" eigene Site.

Was meint ihr? Ich suche eine font in dieser Art, wie sie bereits im Header zu sehen ist, die besser gerendert wird.

[beaver]

gefällt mir! aber (noch) nicht ganz so gut wie die luminated seite
das liegt aber nicht an den farben. die sind cool

[Benijamino]

wie gestern schon gesagt

[pichfl]

und hier schonmal ein ansatz fürs html-coding

http://einserver.de/pichfl/


work in progress!

[pichfl]

und schon wieder starte ich etwas (ich weiß, ich krieg nix fertig)

diesmal: einserver.de ist im moment ne nette site, aber als präsentationsfläche für ein unternehmen ungeeignet.
darum: http://new.einserver.de/

für IE-user: das applet, welches beim ersten betrachten der site irgendwie angezeigt wird ist ungefährlich, es dient allein dazu ungefähr 100 fehler im CSS-rendering des IE auszubessern --> die page sieht dann wenigestens halbwegs so aus wie vom programmierer (mir) gewünscht.

[dead_man_walkin]

wie gestern schon gesagt: extrem gut und extem edel!

[Benijamino]

dito ...

[dead_man_walkin]

achja: zum quellcode sag ich eh schon lange nix mehr das is nur krank.. *gg*