Überschrift verlinken??

[Rennsemmel]

Hallo,
habe da ein kleines Problem.
Im Headbereich erstellte ich eine Überschrift die ich verlinken möchte.
Im Body habe ich bereits einen Link im text den ich auf blau und unterstrichen gesetzt hab.
Mein Problem besteht nun darin das die Überschrift im Headbereich ebenfalls diese Eigenschaften annimmt sobald ich diese verlinke.
Kann man die Verlinkungseigenschaften im Body sowie Headbereich auseinanderhalten?

Danke

[MrMurphy]

Hallo

ja das geht. Ohne konkretes Beispiel kann ich dir das natürlich nur allgemein erklären. Es gibt verschiedene Möglichkeiten, wie du das lösen kannst, je nachdem wie dein Quelltext strukturiert ist und was noch hinzukommt.

Ich gehe davon aus, das der Headbereich in ein eigenes DIV mit der id="header" eingekapselt ist. Dann kannst du dir die vorhandenen Eigenschaften für deine jetztigen Links schnappen und direkt dahinter kopieren. Das könnte dann so aussehen:

  a { color:#4D87C7; background:transparent; text-decoration:none; }
  a:visited  { color:#036; }
  a:focus { text-decoration:underline; color:#000; background: #fff; outline: 3px #f93 solid; }
  a:hover,
  a:active { color:#182E7A; text-decoration:underline; outline: 0 none; }

  a { color:#4D87C7; background:transparent; text-decoration:none; }
  a:visited  { color:#036; }
  a:focus { text-decoration:underline; color:#000; background: #fff; outline: 3px #f93 solid; }
  a:hover,
  a:active { color:#182E7A; text-decoration:underline; outline: 0 none; }

Anschließend setzt du vor jede der neuen Eigenschaften die id "header":

  a { color:#4D87C7; background:transparent; text-decoration:none; }
  a:visited  { color:#036; }
  a:focus { text-decoration:underline; color:#000; background: #fff; outline: 3px #f93 solid; }
  a:hover,
  a:active { color:#182E7A; text-decoration:underline; outline: 0 none; }

  #header a { color:#4D87C7; background:transparent; text-decoration:none; }
  #header a:visited  { color:#036; }
  #header a:focus { text-decoration:underline; color:#000; background: #fff; outline: 3px #f93 solid; }
  #header a:hover,
  #header a:active { color:#182E7A; text-decoration:underline; outline: 0 none; }

und änderst wie gewüscht die Eigenschaften

  a { color:#4D87C7; background:transparent; text-decoration:none; }
  a:visited  { color:#036; }
  a:focus { text-decoration:underline; color:#000; background: #fff; outline: 3px #f93 solid; }
  a:hover,
  a:active { color:#182E7A; text-decoration:underline; outline: 0 none; }

  #header a { color:#green; background:silver; text-decoration:none; }
  #header a:visited  { color:red; }
  #header a:focus { text-decoration:none; color:aqua; background: #fff; outline: 5px #f93 solid; }
  #header a:hover,
  #header a:active { color:#182E7A; text-decoration:none; outline: 0 none; }

Wenn im Header mal andere Links hinzukommen sollten und sich die Formatierung nur auf die Überschrift h1 beziehen soll, kannst du das entsprechend weiter eingrenzen:

  a { color:#4D87C7; background:transparent; text-decoration:none; }
  a:visited  { color:#036; }
  a:focus { text-decoration:underline; color:#000; background: #fff; outline: 3px #f93 solid; }
  a:hover,
  a:active { color:#182E7A; text-decoration:underline; outline: 0 none; }

  #header h1 a { color:#green; background:silver; text-decoration:none; }
  #header h1 a:visited  { color:red; }
  #header h1 a:focus { text-decoration:none; color:aqua; background: #fff; outline: 5px #f93 solid; }
  #header h1 a:hover,
  #header h1 a:active { color:#182E7A; text-decoration:none; outline: 0 none; }

Dann gelten diese Angaben nur für die Überschriften h1 im header.

Gruss

MrMurphy

[Rennsemmel]

Hi MrMurphy,

danke für die Aufklärung.Ich denke das ich weiß was du mir damit sagen möchtest aber es hapert an der Umsetzung :-)
Dann hab ich noch das Problem das bei einem auf der Überschrift gesetztem Hyperlink der Zeilenabstand zwischen H1 und H2 viel größer wird.
Vielleicht lässt sich das ganze irgendwie einfacher realisieren als ich es gerade vorhabe?

Was ich gerne möchte ist das die beiden Überschriften im Headbereich auf die Startseite zurückführen.

Hier der 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=utf-8" />
<title>Hochzeitsfotograf Adam Marcinowski, Hochzeitsreportagen und Hochzeitsfotos aus Heinsberg</title>
<style type="text/css">
<!--
body {
	background-color: #FFF;
	text-align: center;
	padding: 0px;
	width: auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#container {
	text-align: left;
	width: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#header {
	height: 150px;
	background-color: #FFF;
	text-align: center;
	width: auto;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	line-height: 5px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	font-size: 45px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #000;
}
#inhalt {
	margin-top: 0px;
	padding-top: 30px;
	height: 420px;
	background-color: #FFF;
	width: auto;
	text-align: center;
	font-size: 18px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	line-height: 3px;
}
#footer {
	height: 10px;
	background-color: #FFF;
	width: auto;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 12px;
	color: #000;
	text-align: left;
	font-style: normal;
	padding-left: 5px;
}
a:link {
	color: #09F;
	text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style: italic;
	font-size: 36px;
}
h1 {
	font-size: 70px;
	color: #000;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Button/hochzeitfotos ov.jpg','Button/kontakt OV.jpg','Button/impressum OV.jpg','Button/Portrait, Fashion OV.jpg')">
<div id="container">
  <div id="header">
    <h1>Adam Marcinowski</h1>
    <h2>Hochzeitsfotograf </h2>
  </div>
  <table width="828" border="0" align="center">
    <tr>
      <td width="250"><a href="hochzeitfotos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild1','','Button/hochzeitfotos ov.jpg',1)"><img src="Button/hochzeitfotos.jpg" name="Bild1" width="250" height="70" border="0" id="Bild1" /></a></td>
      <td width="250"><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild2','','Button/kontakt OV.jpg',1)"><img src="Button/kontakt.jpg" name="Bild2" width="250" height="70" border="0" id="Bild2" /></a></td>
      <td width="250"><a href="impressum.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild3','','Button/impressum OV.jpg',1)"><img src="Button/impressum.jpg" name="Bild3" width="250" height="70" border="0" id="Bild3" /></a></td>
      <td width="60"><a href="http://www.adam-m-foto.de/fotos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild4','','Button/Portrait, Fashion OV.jpg',1)"><img src="Button/Portrait, Fashion.jpg" name="Bild4" width="250" height="70" border="0" id="Bild4" /></a></td>
    </tr>
  </table>
  <div id="inhalt">
    <blockquote>
      <p>Als Hochzeitsfotograf biete ich Ihnen gefühlvolle Hochzeitsreportagen und natürliche Hochzeitsportraits </p>
      <p>Ihres schönsten Tages.Gerne begleite ich Ihre Hochzeit und halte die schönsten Momente  für Sie in </p>
      <p>gefühlvollen Fotos fest.Dabei arbeite ich so unauffällig wie möglich und versuche die Emotionen, </p>
    <p>die Nervosität, die Freudetränen und die kleinen Patzer  festzuhalten, um </p></blockquote>
<p>eine lebendige Erinnerung für Sie zu schaffen an die Sie sich noch Jahre später gerne zurückerinnern.</p>
    <p>Eine Hochzeitsreportage ist da genau das Richtige.Sie beginnt mit dem Kaffee morgens, dem Termin beim Friseur, </p>
    <p>Braut und Bräutigam machen sich fertig, die Aufregung steigt, der Gang zum Standesamt, Ringe, Küsse, </p>
    <p>Freudetränen, Kirche, die Hochzeitsfeier bis in die Nacht hinein. Das alles sind Augenblicke die so lebendig wie </p>
    <p>möglich Ihre Geschichte erzählen sollen.Bin als Hochzeitsfotograf-Heinsberg im Kreis Heinsberg, Erkelenz,</p>
    <p> Mönchengladbach, Düsseldorf und Aachen tätig.Meine weiteren Einsatzgebiete sind: </p>
<p>Fashion, Feiern, Paarshootings, Erotik uvm. Schauen Sie einfach unter <a href="http://www.adam-m-foto.de">www.adam-m-foto.de</a></p>
</div>
  <div id="footer">© 2010 Adam Marcinowski</div>
</div>
</body>
</html>

Danke

[KnoxX]

Ich nehme an, dass du mit "Headbereich" den oberen Teil deiner Website meinst also:

<h1>Adam Marcinowski</h1>
<h2>Hochzeitsfotograf </h2>

Du kannst dort wie gewohnt deinen Link einfügen und diesem Link eine Klasse vergeben:

<h1><a class="head_link" href="">Adam Marcinowski</a></h1>
<h2><a class="head_link" href=""Hochzeitsfotograf</a> </h2>

Nun kannst du deine Links wie gewohnt ansprechen und diese beiden Links speziell über die Klasse:

a:link {
	color: #09F;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

a.head_link:link {
	color: #09F;
	text-decoration: none;
}

a.head_link:visited {
	text-decoration: none;
}
a.head_link:hover {
	text-decoration: none;
}
a.head_link:active {
	text-decoration: none;
}

Dann musst du die CSS-Werte nur noch so abändern das es passt.