• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kompleter Rahmeninhalt Link ...

Niklas

Niklas

Neues Mitglied
Hallo,

Ich habe folgendes Problem ich habe um meine Schrift einen Rahmen die Schrift ist ein Link und es sind c.a 25 px abstand von der Schrift bis zu Rand wen man aber in den Zwischenraum vom Rahmen und Link klickt passiert nicht man muss direckt auf die Schrift klicken wie kan man es Einstellen das man auch einfach in den Rahmen klicken kan und nicht direckt auf die Schrift ?

Hier zu sehen : Welt der Browsergames

Hier der Code vom Welt der Browsergames Logo vllt hilft das ein bisschen

Code: 
.klasse {
font-size: 50pt;
font-align: center;
color: red;
border: 5px solid red;
background-color: black;
padding: 25px;
margin: 30px 0px 0px 60px;
border-width: 6px 6px 3px 6px;
width: 798px;
}
FG Niklas
 
Zuletzt bearbeitet:
Weise die Klassen nicht li, sondern a zu:
Code: 
<li><a class="klasse1" href="kleine-stadt/beschreibung.html">Beschreibung</a></li>
 
Hi.

Der Aufbau deiner Seite ist nicht ganz korrekt. Da solltest du nachbessern.

Weil ich heute gute Laune habe, hab ich mal was vorbereitet (die startseite):

HTML: 
<!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>
<title>Welt der Browsergames</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style/style.css" />

</head>
<body>
<div id="wrapper">
<h1 class="klasse"><a href="http://welt-der-browsergames.de/">Welt der Browsergames </a></h1>

<ul>
    <li>
        <a href="kleine-stadt/beschreibung.html">Beschreibung</a>
    </li>
    <li>
        <a href="http://www.kleine-stadt.com/"  class="border">Kleine Stadt</a>
    </li>
    <li>
        <a href="kleine-stadt/video.html"  class="border">Video</a>
    </li>
</ul>

<ul>
    <li>
        <a href="wurzelimperium/beschreibung.html">Beschreibung</a>
    </li>
    <li>
        <a href="http://www.wurzelimperium.de/"  class="border">Wurzelimperium</a>
    </li>
    <li>
        <a href="kleine-stadt/video.html"  class="border">Video</a>
    </li>
</ul>

<ul>
    <li>
        <a href="pennergame/beschreibung.html">Beschreibung</a>
    </li>
    <li>
        <a href="http://www.pennergame.de/"  class="border">Pennergame</a>
    </li>
    <li>
        <a href="kleine-stadt/video.html"  class="border">Video</a>
    </li>
</ul>

<ul>
    <li>
        <a href="shakes-und-fidget/beschreibung.html">Beschreibung</a>
    </li>
    <li>
        <a href="http://sfgame.de/"  class="border">Shakes&amp;Fidget</a>
    </li>
    <li>
        <a href="kleine-stadt/video.html"  class="border">Video</a>
    </li>
</ul>

<ul>
    <li>
        <a href="kleine-stadt/beschreibung.html">Beschreibung</a>
    </li>
    <li>
        <a href="http://wauies.de/"  class="border">Wauies</a>
    </li>
    <li>
        <a href="kleine-stadt/video.html"  class="border">Video</a>
    </li>
</ul>

<ul>
    <li>
        <a href="impressum/impressum.html" class="bottom">Impressum</a>
    </li>
    <li>
        <a href="wauies/wauies"  class="border bottom">Kategorien</a>
    </li>
    <li>
        <a href="gaestebuch/gaestebuch.php"  class="border bottom">Gästebuch</a>
    </li>
</ul>

</div>
</body>
</html>
Das ist der HTML-code. Sollte richtig bzw. valide sein.

Der css code (ich glaube es ist besser, die hexdezimalwerte anzugeben, aber das musst du entscheiden,.. für rot: #ff0000; ):

Code: 
body {
background-color: #000000;
color: red;
padding:0;
margin:0;
}
p {
margin:0 auto;
width:800px;
color: red;
padding: 0px;
}
h1 {
color: red;
padding:0;
margin:30px 0 0 60px;
}

* html h1 {
color: red;
padding:0;
margin:30px 0 0 0px;
}

*+html h1 {
color: red;
padding:0;
margin:30px 0 0 0px;
}

#gaestebuch {
width: 980px;
margin: 0 auto; 
color: red;
text-align: center;
font-size: 25px;
}
label {
color: red;
}
#wrapper {
width: 980px;
margin: 0 auto; 
font-size: 20px;
text-align: center;
}
img { 
border: none; 
}


a:link { 
color: red;
text-decoration:none;

}

a:active {
color: red;
text-decoration:none;

}

a:visited {
color: red;
text-decoration:none;

}

a:hover {
color: red;
text-decoration:none;
}



h1.klasse {
font-size: 50pt;
text-align:center;
color: red;
border: 5px solid red;
background-color: black;
padding: 25px;
border-width: 6px 6px 3px 6px;
width: 798px;

}

ul {padding:0;
    margin:0 0 0 60px;}

ul li {
float: left;
list-style-type:none;


}

li a.border {border-left:1px solid red;}
li a.bottom {border-bottom:5px solid red;}

* html ul {padding:0;
    margin:0 0 0 60px;}
    
*+html ul {padding:0;
    margin:0 0 0 60px;}
    
    
li a {font-size: 25pt;
text-align: center;
color: red;
border: 5px solid red;
background-color: black;
padding:15px 30px;
border-width: 3px 5px 3px 6px;
width: 219px;
display:block;
}
Liebe Grüße :grin:

sunoghlin

PS: Für Fehler haftet meine Tastertur :grin:
 
Zuletzt bearbeitet:
display:block für den Link. Also so:
Code: 
a {
display:block;
}
Dann ist zwar nicht der Rahmen anklickbar (das ist so nicht realisierbar), aber zumindest die gesamte Zelle.

Grüße

PS: Hexadezimalzahlen helfen bei der Änderung von Farbtönen. In den meisten Fällen sollte man auch gar nicht die Primärfarben nutzen. Das ist langweilig (in Kunst aufgepasst ;)). Von deiner Farbkombination kriege ich übrigens Kopfschmerzen. ;)
 
Hallo sunoghlin,

Ist alles so wie vorher keine Verschiebungen garnichts finde ich echt super

Vielen Vielen Dank

Muss mich jetzt erstmal in dem Code zurechtfinden ...

FG Niklas
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben