dringend eine frage wegen links

3Tbles

die page http://anastasiakreidermann.de/TB/galerie.html

also die frage lautet, wie kann ich (vllt mit css) ohne extraseiten zu erstellen es so zu machen, dass wenn ich gerade auf der verschiedenes seite mich befinde dann das entweder andere farbe hat oder unterstrichen ist oder etwas fetter is das is eigentlich egal...

wie geht das? ich kenn mich leider nicht so gtu mit css aus, weiss jemand vllt den richitgen code dafür?

danke

Lu

Entweder du verwendest auf der 'verschiedenes_seite' ein anderes externes css oder du baust ein anderes internes css ein (an Stelle des externen).

3Tbles

wie macht man das?;)

3Tbles

oder braucht man vllt dafür lieber javascript?

DrunkenDX

nein, nur css
entweder du schreibst es in den header rein oder ne externe css die du im header verlinkst!

Lu

Nein, js brauchst du dafür nicht, nur grundlegende Kenntnisse in HTML/css.
Du hast nach dem richtigen code gefragt. Der ist aber nicht so leicht pauschal zu erstellen, anhand deiner Fragestellung (egal ob Hintergrund, unterstrichen...).
Bitte beschreibe dein Problem etwas genauer.

3Tbles

wenn man auf verschiedenes klickt dass das wort verschiedenes sag ich mal so ne andere farbe bekommt, wenn ich dann auf illustrationen klicke dass nur illustationen ne andere farbe hat....

also in der umgangssprache:

der link der gerade gedrückt wurde, soll andere farbe haben.

danke:-*

DrunkenDX

a:visited

das is der befehl mit dem du die besuchten links gestaltest...

meinst du das?

mit a:active formatierst du den momentan besuchten link!

3Tbles

drunkenDX@

mit a:visited ist es nicht...es sollen nicht alle links geändert werden auf denen ich mal war, sondern nur eins auf dem ich grad bin..

im prinzip meine ich das gleiche was mit dem menü passiert, also normalen menü...aber in diesem fall werden halt "bilder gewechselt" und mit 2 diversen html seiten gearbeitet...
einmal mit menü mit weissem rand und einmal normales menü....

was a:active angeht, ich habe gerade ausprobiert und das funktioniert folgendermaßen:

wenn ich mit der maus auf einem link bin (nicht gedrückt) dann verändert der sich wie ichs eingestellt habe...

aber ich möchte es so haben wenn ich auf den link klicke verändert er sich, auch wenn ich die maus irgendwoanderes habe...

wisst ihr was ich meine???

!!!!!!!!!!!!!!!!!!!!! noch ein problem auf dieser seite, ich find den fehler nicht...

galerie und referenzen sind etwas verrutscht, also wenn man mit IE von home auf galerie geht verrutscht die seite etwas(firefox nicht)

wie krieg ich das wieder richtig hin...

liegt wohl irgendwo hier das problem, habe getestet nur find net wo:

Code

<script type="text/javascript"><!--
window.onload=zeigen;
function zeigen(id) {
for (var i = 1; i<=5; i++) {
if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
}
if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
}
//-->
  </script>
  <style type="text/css">
body {
background: #caccf8;
}
a
{
color: #000060;
text-decoration:none;
background: #000060;
font-size: 13px;
}
a:hover
{
background: none;
text-decoration: underline;
font-size: 13px;
color: #000060;
}
a:active {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    font-color: #ffffff;
}
h1
{
color: #53B1FF;
margin: 1em 0;
padding: 0;
font-size: 2em;
text-align: left;
}
h1 span
{
font-size: 1.1em;
color: #34537c;
}
h2
{
color: #B3655A;
margin: 2em 0;
font-size: 1.2em;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul#menue {
width: 50px;
align=left;
margin: 0.5em 0 0 0;
margin-left:10px;
color: #000;
}
ul#menue li a {
margin: 4px 0;
height: 27px;
line-height: 27px;
text-align: left;
border: 0px solid #666;
background: transparent;
display: block;
color: #000060;
text-decoration:none;
}
ul#menue li a + ul.submenue{
display: none;
}
ul#menue li a:focus + ul.submenue {
display: block;
color: #34537c;
}
ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4, ul#submenue5 li a{
background: none; /* IE */
}
  </style>

Alles anzeigen

DrunkenDX

asoooooo

ehhhmm ich bin mir net sicher ob das mitt css geht...
du könntest aber zwei divs ändern... einmal deinen inhalt und einmal den div mit dem link... so kannst du ein neues bild als link einfügen und dein inhalt!

verstanden was ich mein^^

3Tbles

oh leider kenn ich mich gar net mit divs aus..

aber trotzdem danke

3Tbles

und weisst du woran das "springen" von home auf galerie erfolgt? kanns immernoch nciht finden..

DrunkenDX

ich seh da jetzt auf die schnelle auch keinen fehler...

meinst du das die seite komplett nach unten rutscht oder verzieht sie sich?

bzgl den links:

erklär mir das mit deiner js anwendung bitte mal, vieleicht is da der fehler...

ich komm mit deinem js auch net mit... kan kein js...

3Tbles

dieses js habe ich kopiert, kenn mich damit net so aus...:D

ja ich meine die komplette seite etwas nach unten verrutscht...
lg

jojo87

Hi.
Warum sich das blöde Ding verzieht, weis ich net.
Aber wenn du immer ein Link-highlighting der gerade betrachteten Seite (darum geht es doch, oder?) willst,
hätte ich ne lösung mit PHP für dich. Ist nicht das eleganteste, aber funktioniert (Für Textlinks!!!).
Dein Webspace muss dafür aber PHP beherrschen:

Also: Das kommt ganz an den Anfang deiner Index.php (musst du dann so nennen):

PHP

<?php
$page = $_GET['page'];
?>

Ein Link von dir sieht dann so aus:

PHP

<a href="verschiedenes.html?page=1" target="" onclick="" 
<?php if ($page == 1) { 
echo "class=\"active\""; 
} 
else {
echo "class=\"menu\"";
}
?>
>Verschiedens</a>

Dann machst du in deinem css Angaben für die Klassen
.menu{}
.active{}
Fertsch.

Gruß,

Jojo

3Tbles

vieeeeeeeeeeeeelen dank!!! ich probiers mal aus obs geht:-D

is wirklich hammer nett ovn euch:-)

3Tbles

also ich habs gerade ausprobiert, aber ich glaube ich hab alles in die falsche plätze gepackt..deswegen hats net funktioniert....

das is der code von der galerie.html (so sollts bei mir heissen)

HTML

<html>
<head>
<title>The Brushers</title>
<style type="text/css">
<!--
a {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
}


a:active {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
}
a.menu {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
a.menu_active {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
a.menu_active:hover {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}
-->
</style>


  <script type="text/javascript"><!--
window.onload=zeigen;
function zeigen(id) {
for (var i = 1; i<=5; i++) {
if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
}
if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
}
//-->
  </script>
  <style type="text/css">
body {
background: #caccf8;
}
a
{
color: #000060;
text-decoration:none;
background: #000060;
font-size: 13px;
}
a:hover
{
background: none;
text-decoration: underline;
font-size: 13px;
color: #000060;
}
h1
{
color: #53B1FF;
margin: 1em 0;
padding: 0;
font-size: 2em;
text-align: left;
}
h1 span
{
font-size: 1.1em;
color: #34537c;
}
h2
{
color: #B3655A;
margin: 2em 0;
font-size: 1.2em;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul#menue {
width: 50px;
align=left;
margin: 0em 0 0 0;
margin-left:10px;
color: #000;
}
ul#menue li a {
margin: 4px 0;
height: 27px;
line-height: 27px;
text-align: left;
border: 0px solid #666;
background: transparent;
display: block;
color: #000060;
text-decoration:none;
}
ul#menue li a + ul.submenue{
display: none;
}
ul#menue li a:focus + ul.submenue {
display: block;
color: #34537c;
}
ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4, ul#submenue5 li a{
background: none; /* IE */
}
  </style>






</head>


<body bgcolor="#caccf8" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<table cellpadding="0" cellspacing="0" height="100%" width="100%" border="0"> 
<tr>
<td valign="middle" align="center">


<table id="Tabelle_01" width="1023" height="501" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="7">
			[img]Bilder/index_01.jpg[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
	</tr>


	<tr>
		<td colspan="5">
			[img]Bilder/index_02.jpg[/img]</td>
		<td rowspan="9"  background="Bilder/um.jpg" valign="top" align="left">


[img]0.gif[/img]


<ul id="menue">
  [*][url='#']Bodypainting[/url]
     <ul id="submenue1" class="submenue">


      [*][url='werbung.html'][size=8]Werbung&amp;Show[/size][/url]
      [*][url='kunstdarstellungen.html'][size=8]Kunstdarstellungen[/size][/url]
      [*][url='wettbewerbe.html'][size=8]Wettbewerbe[/size][/url]


    [/list]


  


  [*][url='wand.html']Wand&amp;Raumgestaltung[/url]


  


  [*][url='#']Fahrzeugdesign[/url]
    <ul id="submenue3" class="submenue">


      [*][url='lkw.html'][size=8]LKW[/size][/url]


      [*][url='pkw.html'][size=8]PKW[/size][/url]


    [/list]


  


  [*][url='illustration.html']Illustration[/url]


  


  [*][url='verschiedenes.html']Verschiedenes[/url]


  


[/list]


			</td>
		<td rowspan="9">
			<iframe border="0" frameborder="0"  marginheight="10" marginwidth="0"   scrolling="no" width="675" height="388" src="galerie1.html" name="gal"></iframe></td>


		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
	</tr>
	<tr>
		<td>
			<a href="home.html">
				[img]Bilder/home.jpg[/img]</a></td>
		<td colspan="4" rowspan="2">
			[img]Bilder/index_06.jpg[/img]</td>


		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
	</tr>
	<tr>
		<td>
			<a href="galerie.html">
				[img]Bilder/gelerie1.jpg[/img]</a></td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>


	</tr>
	<tr>
		<td colspan="4">
			<a href="referenzen.html">
				[img]Bilder/referenzen.jpg[/img]</a></td>
		<td rowspan="7">
			[img]Bilder/index_09.jpg[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>


	</tr>
	<tr>
		<td colspan="3">
			<a href="ueberuns.html">
				[img]Bilder/ueberuns.jpg[/img]</a></td>
		<td>
			[img]Bilder/index_11.jpg[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>


	</tr>
	<tr>
		<td colspan="4">
			<a href="impr.html">
				[img]Bilder/impressum.jpg[/img]</a></td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
	</tr>
	<tr>


		<td>
			<a href="links.html">
				[img]Bilder/links.jpg[/img]</a></td>
		<td colspan="3">
			[img]Bilder/index_14.jpg[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
	</tr>
	<tr>


		<td colspan="2">
			<a href="kontakt.html">
				[img]Bilder/kontakt.jpg[/img]</a></td>
		<td colspan="2" rowspan="3">
			[img]Bilder/index_16.jpg[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
	</tr>
	<tr>


		<td colspan="2" rowspan="2">
			[img]Bilder/index_17.jpg[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="2">
			[img]Bilder/index_18.jpg[/img]</td>
		<td>


			[img]Bilder/Abstandhalter.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>


		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
		<td>
			[img]Bilder/Abstandhalter.gif[/img]</td>
		<td></td>


	</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

wie sollt dann das endcode aussehen? also an welche stellen alles gepackt werden..

DANKE!

jojo87

Ändere das so, wie ich es geschrieben habe.

Code

[url='verschiedenes.html']Verschiedenes[/url]

Dann machst du in deine css angaben dies hier rein:
[code]
.menu {
deine: angabe;
} /*Angaben für normalen Link*/

.active {
deine: angabe;
} /*gerade aktive Seite*/

ändere doch einfach mal deinen Code und poste ihn mit Änderungen.
Dann kann ich dir sagen, obs richtig ist ok?

gruß
jojo

3Tbles

okay werd ich heute abend machen, und

<?php
$page = $_GET['page'];
?>

wo soll das hin? in den head bereicht? oder sofort nach body?

jojo87

am besten ganz nach oben. noch vor den doctype

Tags