Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

andretti · 27-10-2007, 21:39

aloha!

seit stunden(!) versuche ich, verschieden breite listenbasierende links eines menüs mittels link-status und aktivstatus zu scripten;

witzig:

so, wie ich das angehe, wird das aktive listenelement breiter...das darf es aber net, auf keinen fall...es soll lediglich die schriftfarbe verändert werden..

hier mal zum testen zwei seiten:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html *{margin:0;padding:0;}
html,body{
    behavior:url("body_and_soul_balance_stylesheet/csshover.htc");}
#linkrow
{
    margin-top:10px;
	width:720px;
	height: 25px;
	background-color: #FFFAEA;
}


/* ++++++++++++++++++++++++++++++++++++++ Linkmenü - Navigation ++++++++++++++++++++++++++++++++++++++ */
#linkliste {
    list-style-type: none;
    text-align:left;
    margin: 0 5px;
    padding: 0;
}
#linkliste li {

	float: left;
	position:relative;
	list-style-type: none;		
}



#linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8 {
	display: block;
	height:18px;
	margin-right:1px;
	padding:2px 5px;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	font-weight: bold;	
	border:1px solid #CC6600;
	background-color: #FFFAEA;
}
*>#linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8{
	display: block;
	height:auto;
	margin-right:1px!important;	
	padding:2px 5px;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	font-weight: bold;	
	border:1px solid #CC6600;
	background-color: #FFFAEA;
	color:#993300;
}
#linkliste li a{color:#CC6600!important;}

.pn1, .active1{width:47px;}
.pn2, .active2{width:115px;}
.pn3, .active3{width:155px;}
.pn4, .active4{width:73px;}
.pn5, .active5{width:79px;}
.pn6, .active6{width:88px;}
.pn7, .active7{width:79px;}
.pn8, .active8{width:64px;}



/* ++++++++++++++++++++++++++++++++++++++ Link- Submenü - Navigation ++++++++++++++++++++++++++++++++++++++ */
#linkliste li ul {position: absolute; top: 21px;left:0;display:none;}
#linkliste li ul li{filter:alpha(opacity=100);-moz-opacity: 1;	opacity: 1;}


#linkliste li ul li a{padding-top:-1px; border-top:none!important;}
#linkliste li:hover ul{display:block;}
</style>
</head>

<body>
<div id="linkrow">
<ul id="linkliste">
				<li class="active1">Problem</li>
				<li class="pn4"><a href="problem_2.html" title="Kontakt" target="_self">Problem_2</a></li>
				
</ul>
</div><!-- ende div linkrow -->
</body>
</html>

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html *{margin:0;padding:0;}
html,body{
    behavior:url("body_and_soul_balance_stylesheet/csshover.htc");}
#linkrow
{
    margin-top:10px;
	width:720px;
	height: 25px;
	background-color: #FFFAEA;
}


/* ++++++++++++++++++++++++++++++++++++++ Linkmenü - Navigation ++++++++++++++++++++++++++++++++++++++ */
#linkliste {
    list-style-type: none;
    text-align:left;
    margin: 0 5px;
    padding: 0;
}
#linkliste li {

	float: left;
	position:relative;
	list-style-type: none;		
}



#linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8 {
	display: block;
	height:18px;
	margin-right:1px;
	padding:2px 5px;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	font-weight: bold;	
	border:1px solid #CC6600;
	background-color: #FFFAEA;
}
*>#linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8{
	display: block;
	height:auto;
	margin-right:1px!important;	
	padding:2px 5px;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	font-weight: bold;	
	border:1px solid #CC6600;
	background-color: #FFFAEA;
	color:#993300;
}
#linkliste li a{color:#CC6600!important;}

.pn1, .active1{width:59px;}
.pn2, .active2{width:115px;}
.pn3, .active3{width:155px;}
.pn4, .active4{width:73px;}
.pn5, .active5{width:79px;}
.pn6, .active6{width:80px;}
.pn7, .active7{width:79px;}
.pn8, .active8{width:64px;}



/* ++++++++++++++++++++++++++++++++++++++ Link- Submenü - Navigation ++++++++++++++++++++++++++++++++++++++ */
#linkliste li ul {position: absolute; top: 21px;left:0;display:none;}
#linkliste li ul li{filter:alpha(opacity=100);-moz-opacity: 1;	opacity: 1;}


#linkliste li ul li a{padding-top:-1px; border-top:none!important;}
#linkliste li:hover ul{display:block;}
</style>
</head>

<body>
<div id="linkrow">
<ul id="linkliste">
				<li class="pn1"><a href="problem.html" title="Kontakt" target="_self">Problem</a></li>
				<li class="active4">Problem_2</li>
				
</ul>
</div><!-- ende div linkrow -->
</body>
</html>

andretti · 29-10-2007, 14:23

mal keine antwort der css-götter.....hmmmmm;

ich habe das jetzt mal so gelöst, dass ich das padding dem <li>-tag selbt gegeben habe, und die <a>-tags nicht gepaddet habe, die class für "active" auch nicht gepaddet habe; das funktioniert jedenfalls.

Grafixboy · 02-11-2007, 15:50

Hi

Eins vorweg gehöre nicht zu den CSS-Göttern
beschäftige mich aber auch schon länger mit CSS.
Was ich aber in deinem css-Script sehe ist entweder unrationell oder einfach falsch.
Was ist das --->> *>#linkliste
(Zeile 47 in beiden Dokumenten)

Solche einträge kann man sich sparen --->> list-style-type: none;

Wieso definierst du innerhalb Syledefinition mehrere Pseudoklassen mit unterschiedlichen Klassennamen.
.active1 bis .active8
Was soll das ???
Vergebe doch ein fach active und gebe allen diese ID
wenn sie eh alle die selben Attribute besitzen

Und den ganzen aus meiner sich Attribute überschreibst du dann gleich wieder mit den selben Eigenschaften. *kopfkratz*

Was dein Problem angeht mach erstmal den Unsinn raus vielleicht löst es sich dann von selbst.

Wurde das css generiert oder hast du das selbst geschrieben ?

Sehe noch mehr Unsinn habe jetzt aber keine Zeit mehr zu schauen.
kleiner Tip www.css4you.de hilft dir bestimmt.

Ein weiterer Tip lager dein css-script aus und rufe es in den html's auf.
Sparrt Schreibarbeit und du verhinderst solcherlei Fehler.

zum Beispiel so: <link href="css/test.css" rel="stylesheet" type="text/css">
(natürlich sollte dann die cssdatei in einem Ordner namen css liegen)

Mit der hovercss.htc kenn ich mich nicht aus was soll die machen einen hovereffekt?

Mach erstmal ne einfaches kleines Beispiel und dann wird der Fehler sich schon finden.

andretti · 02-11-2007, 17:46

hallo!

fein, dass du reingeschaut hast;

erstens, wennste gelesen hast, bin ich auf eine "lösung" gekommen;

wennste ein wengerl CSS intensiver wärst, dann würdest erstens bemerken, dass:

1.) ich CSS nicht von der pieke auf erlernt habe, eher ein zusammenflicker bin, und das ganz css noch nicht fertig war(das kannst aber net wissen..)
2.) jedenfalls beim li-tag muss ich das list style type definieren, der feuerfuchs freut sich drüber
3.)wennste genau guckst, siehst du, dass active 1-8 und pn1-8 verschiedene breiten haben....
4.)wenn du meinst ,ich überschreibe das:"*>#linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8"...das ist deswegen, weil ich für internet explorer 6 manches anders scripten müsste
5.)"Was dein Problem angeht mach erstmal den Unsinn raus vielleicht löst es sich dann von selbst.
"...also ist das gar net so unsinnig von mir und hat nix mit dem problem zu tun(habe mit ausschließungsptinzip gearbeitet...)
6.) fein, dass du noch mehr Unsinn siehst...ich habe aber jedenfalls das stylesheet schon fein ordentlich aufgeräumt
7.)danke für den tipp mit dem auslagern, ich bin quasi the man of auslagern, hier im forum hat es sich jedoch bewährt, das so zu posten, um den vielen lieben helfern das betrachten und bearbeiten des problems zu erleichtern..(jaja...)
8.)ad csshover.htc: ist ein workaround für internet explorer 6, um diese art des menüs realisieren zu können
9.)"Mach erstmal ne einfaches kleines Beispiel und dann wird der Fehler sich schon finden."....ahaaaa..habe ja schon geschrieben im post vor deinem post, dass ich das gelöst habe
10.) verzeih mir bitte mein süffisantes schreiben, ich konnte nicht anders.....weil
11.) du auch nicht nur irgendwie geholfen hast......
12.) werde ich mal das momentane stylesheet posten, das ich extern in die html reinhole und teil eines styleswitchers ist...

HTML-Code:

/* CSS Document */
/* ++++++++++++++++++++++++++++++++++++++ Global ++++++++++++++++++++++++++++++++++++++ */
html *{margin:0;padding:0;}
html,body{
    behavior:url("body_and_soul_balance_stylesheet/csshover.htc");
	height:100%; /* needed for container min-height */
    font-family:"Trebuchet MS", Helvetica, Verdana, Arial, sans-serif;
	font-size:13px;
	color:#000;
}
body{background-image:url(../body_and_soul_balance_bilder/bg.jpg)}
p{padding:10px 20px 5px 20px;}


img {padding:2px; border:1px solid #993300;}

a{ text-decoration:none}
a:link{color: #CC6600;}
a:visited{color:#999999;}
a:hover{color: #993300;}
a:active{color: #993300;}

h2{color: #993300; font-size:15px;margin-bottom:10px;text-decoration:underline;}
h3{color: #CC6600; font-size:14px;}
h4{color: #993300; font-size:13px; font-weight: bold;text-decoration:underline; }
h5{color:#000; font-size:13px; font-weight:bold;margin:5px 5px;}
h6{color: #993300; font-size:11px; font-weight:normal;}
/* ++++++++++++++++++++++++++++++++++++++ Divs ++++++++++++++++++++++++++++++++++++++ */
#overall_container{
	position:relative; /* needed for footer positioning*/
	margin-left:20px;
	width:720px;
	background:#fff;	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	border-left:1px solid #CC6600; 
	border-right:1px solid #CC6600;
}
.balken{
    width:720px;
	height:10px;
	background-image:url(../body_and_soul_balance_bilder/balken_1.jpg);font-size:1px;
}

#header{
    width: 720px;
   	height: 150px;
	background-image:url(../body_and_soul_balance_bilder/header_balance.jpg);
}



#linkrow{
    width:710px;
	margin: 10px 5px 0 5px;	
	height: 25px;
	background-color: #FFFAEA;
}


/* ++++++++++++++++++++++++++++++++++++++ Linkmenü - Navigation ++++++++++++++++++++++++++++++++++++++ */
#linkliste {
    width:710px;
    text-align:left;
    padding: 0;
}
#linkliste li {
    float: left;
	position:relative;
	list-style-type: none;
	border:1px solid #993300;
	background-color: #FFFAEA;
	padding:2px 5px;
	margin-right:1px;		
}



#linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8 {
	display: block;
	height:18px;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	font-weight: bold;	

}


.active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8{color: #993300;}

.pn1, .active1 {width:37px;}
.pn2, .active2{width:105px;}
.pn3, .active3{width:142px;}
.pn4, .active4{width:57px;}
.pn5, .active5{width:69px;}
.pn6, .active6{width:78px;}
.pn7, .active7{width:63px;}
.pn8, .active8{width:54px;}



/* ++++++++++++++++++++++++++++++++++++++ Link- Submenü - Navigation ++++++++++++++++++++++++++++++++++++++ */
#linkliste li ul {position: absolute; top: 23px;left:-1px;display:none;}
#linkliste li ul li{filter:alpha(opacity=100);-moz-opacity: 1;	opacity: 1;}


#linkliste li ul li {padding-top:-1; border-top:none!important;}
#linkliste li:hover ul{display:block;}
#content{
	width:700px;
	padding:20px 10px;
	line-height:130%;
}


#rightcontent{float:right;width:156px;margin: 0 0 5px 25px}
#rightcontent img{margin-bottom:5px;}

#content ul{list-style-image: url(../body_and_soul_balance_bilder/li.jpg);margin:10px 40px;}
#content ol {margin:10px 40px;}


#footer {
	position:absolute;
	height:20px;
	width:710px;
	padding:0 5px;
	bottom:0; /* stick to bottom */
	font-size:12px;
	border-top:1px solid #993300;
	background-image:url(../body_and_soul_balance_bilder/footer_bg_1.jpg)
}
#footerleft{float:left;height:18px;padding-left:5px;}
#footerright{float:right;height:18px;}
#footer a{margin-right:5px;color:#FFF;}
#footer img{border:none; vertical-align:middle;}
.clearing{clear: both;height:20px;}
#plan{width:504px;;height:402px;padding:2px;border: 1px solid #993300;text-align:center;}
/* ++++++++++++++++++++++++++++++++++++++ Mail Formular ++++++++++++++++++++++++++++++++++++++ */
form {width:375px;}


.formstar{font-weight:bold;font-size:13px;color:#993300;}
fieldset{width:460px; padding:0 5px;}
legend{padding:5px;font-weight:bold;font-size:13px;color:#993300;}
textarea {
    font-family:"Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	float:left;
	width:315px;
	vertical-align: text-top;
	border: 1px solid #CCCCCC;
	
}

.input {
    width:150px;
	font-size: 12px;
	color: #000;
	border-top:none;
	border-right:none;
	border-left:none;
	border-bottom: 1px solid #CCCCCC;
	
}
.submit {
    height:20px;
	font-size: 13px;
	color: #993300;
}

wenn man dan och abspecken kann, freue ich mich auf jedweige
k o n s t r u kt i v e kritik!

pilzebub · 02-11-2007, 18:36

beim "abspecken" der active1-8, hat er recht: das könnte man zu einer aktiven klasse zusammenfassen:

HTML-Code:

...
#linkliste li a, .aktivenKlasse{
	display: block;
	height:18px;
	margin-right:1px;
	padding:2px 5px;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	font-weight: bold;	
	border:1px solid #CC6600;
	background-color: #FFFAEA;
}
*>#linkliste li a, .aktivenKlasse{
	display: block;
	height:auto;
	margin-right:1px!important;	
	padding:2px 5px;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	font-weight: bold;	
	border:1px solid #CC6600;
	background-color: #FFFAEA;
	color:#993300;
}
#linkliste li a{color:#CC6600!important;}

.pn1{width:59px;}
...

und im html-code dann so:

HTML-Code:

...
<div id="linkrow">
<ul id="linkliste">
				<li class="pn3 activenKlasse">Problem</li>
				<li class="pn4"><a href="problem_2.html" title="Kontakt" target="_self">Problem_2</a></li>
				
</ul>
...

und zu deinem eigentlichen problem, hätte ich bei "font-weight:bold" angefangen. ich kann es aber nicht erklären, warum: mir ist nur waage in erinnerung, wenn man die anweisung mehrmals auf ein objekt(was in deinem fall der text wäre) anwendet.-> ist aber nur eine vermutung <-

gr.

andretti · 02-11-2007, 18:43

aloha!

danke für den code und die erläuterung;

wie gesagt, ich habe nun das padding dem li- tag selbst gegeben, und das haut jedenfalls hin;

pilzebub · 02-11-2007, 18:58

Zitat:

Zitat von andretti

wie gesagt, ich habe nun das padding dem li- tag selbst gegeben, und das haut jedenfalls hin;

hehe, ich weiß (hab ich schon mitverfolgt

), ich hätte aber trotzdem bei "b

ld" angefangen.

gr.

... nach bishop wurde ja schon irgendwo gerufen, hatt den jemand gesehn ?

**sonar** · 02-11-2007, 19:59

Zitat:

Zitat von pilzebub

... nach bishop wurde ja schon irgendwo gerufen, hatt den jemand gesehn ?

Den langweilt's hier... und das eigentlich auch zurecht.

pilzebub · 02-11-2007, 20:06

na den, ist doch alles gut

...

29-10-2007, 14:23	#2 (permalink)
andretti tracer Registriert seit: Jun 2004 Beiträge: 4.415	mal keine antwort der css-götter.....hmmmmm; ich habe das jetzt mal so gelöst, dass ich das padding dem <li>-tag selbt gegeben habe, und die <a>-tags nicht gepaddet habe, die class für "active" auch nicht gepaddet habe; das funktioniert jedenfalls. __________________ Viola per Sempre Alle Angaben ohne Gewehr! trace your open mind in variables ! andretti ActionScript Dictionary

02-11-2007, 15:50	#3 (permalink)
Grafixboy Neuer User Registriert seit: Mar 2004 Ort: Dresden Beiträge: 43	Hi Eins vorweg gehöre nicht zu den CSS-Göttern beschäftige mich aber auch schon länger mit CSS. Was ich aber in deinem css-Script sehe ist entweder unrationell oder einfach falsch. Was ist das --->> >#linkliste (Zeile 47 in beiden Dokumenten) Solche einträge kann man sich sparen --->> list-style-type: none; Wieso definierst du innerhalb Syledefinition mehrere Pseudoklassen mit unterschiedlichen Klassennamen. .active1 bis .active8 Was soll das ??? Vergebe doch ein fach active und gebe allen diese ID wenn sie eh alle die selben Attribute besitzen Und den ganzen aus meiner sich Attribute überschreibst du dann gleich wieder mit den selben Eigenschaften. kopfkratz* Was dein Problem angeht mach erstmal den Unsinn raus vielleicht löst es sich dann von selbst. Wurde das css generiert oder hast du das selbst geschrieben ? Sehe noch mehr Unsinn habe jetzt aber keine Zeit mehr zu schauen. kleiner Tip www.css4you.de hilft dir bestimmt. Ein weiterer Tip lager dein css-script aus und rufe es in den html's auf. Sparrt Schreibarbeit und du verhinderst solcherlei Fehler. zum Beispiel so: <link href="css/test.css" rel="stylesheet" type="text/css"> (natürlich sollte dann die cssdatei in einem Ordner namen css liegen) Mit der hovercss.htc kenn ich mich nicht aus was soll die machen einen hovereffekt? Mach erstmal ne einfaches kleines Beispiel und dann wird der Fehler sich schon finden. Geändert von Grafixboy (02-11-2007 um 16:34 Uhr)

02-11-2007, 18:43	#6 (permalink)
andretti tracer Registriert seit: Jun 2004 Beiträge: 4.415	aloha! danke für den code und die erläuterung; wie gesagt, ich habe nun das padding dem li- tag selbst gegeben, und das haut jedenfalls hin; __________________ Viola per Sempre Alle Angaben ohne Gewehr! trace your open mind in variables ! andretti ActionScript Dictionary

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

02-11-2007, 20:06	#9 (permalink)
pilzebub · Registriert seit: Oct 2003 Ort: ·· Beiträge: 722	na den, ist doch alles gut ...