[css] textlink mit hintergrund hinterlegen

tomtom · 06.01.2010

schon wieder ich,

hallo liebes forum,
ich habe wieder ein kleines problem, für euch kein problem. ich möchte einen text-link mit farbe hinterlegen. das klappt ja auch mit css sehr gut. ich möchte aber, dass bei einen a:hover nicht nur der text farblich geändert wird, sondern ein bissl mehr hg. ich hoffe ich versteht mich, was ich meine.

so wie hier:

sorry, ich hatte keine bessere vorlage. ich hoffe ihr könnt was erkennen. danke für eure hilfe.

Zero-PSD · 06.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Ich würde dir an dieser Stelle mal empfehlen, uns zu zeigen, was du bisher an Code produziert hast und dann sehen wir weiter

Die folgende Dinge sollten dir bekannt sein:

HTML:

a:link { background: #123456; }
a:hover { background: #654321; }

Selbiges kannst du natürlich auch mit Bildern machen:

HTML:

a:link { background-image: url(bild1.jpg); }
a:hover { background-image: url(bild2.jpg); }

Gruß.

tomtom · 06.01.2010

AW: [css] textlink mit hintergrund hinterlegen

@zero-psd: jo werde das mal probieren. klingt simple, wenn ich mir das durchlese. die links sitzen zur zeit noch in der navigation_oben, die einfarbig ist. aber wenn navi einen vertikalen verlauf hat, muss ich mal testen. wenns nicht klappt, poste ich *html und *css.

Zero-PSD · 06.01.2010

AW: [css] textlink mit hintergrund hinterlegen

wenns nicht klappt, poste ich *html und *css

Das wäre quasi ein weiser Schritt

Chickenshooter · 07.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Hier mal ne Anregung:

HTML:

<style>
a
{
    color:#CCCCCC;
    font-variant:small-caps;
    font-weight:bold;
    cursor:pointer;
}
a.navi
{
 display:block;
 width: 90px;
 height:35px;
 line-height:35px;
 vertical-align:middle;
 text-align:center;
 float:left;
 background:url(navBG.jpg) 0px 0px no-repeat;
}
a.navi:hover
{
    background-position: 0px -35px;
}
</style>
<div>
    <a class="navi">Link 1</a><a class="navi">Link 3</a><a class="navi">Link 3</a>
</div>

nu das bild naviBG.jpg

Das Bild ist genau 70px hoch den a-tag darfst Du in diesem Fall nur mit ner Höhe von 35px angeben.

MfG

tomtom · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Zero-PSD schrieb:
Ich würde dir an dieser Stelle mal empfehlen, uns zu zeigen, was du bisher an Code produziert hast und dann sehen wir weiter
Die folgende Dinge sollten dir bekannt sein:

HTML:

a:link { background: #123456; } a:hover { background: #654321; }

Gruß.

es funktioniert, wie ich schon geschrieben habe. aber ich möchte nicht nur den text als link farblich hinterlegt, sondern ein paar pixel mehr an höhe und breite.

tomtom · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

ich hoffe, ich poste die beiden quelltexte richtig.

HTML:

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<body>
	<div id="content">
     <div id="header">
     </div>
    </div>
    <div id="navigation_oben">
    <div class="menu_oben">
        <ul>
         <li><a href="#">Startseite</a></li>|
         <li><a href="#">Unternehmen</a></li>|
         <li><a href="#">Standorte</a></li>|
         <li><a href="#">Über uns</a></li>|
         <li><a href="#">Partner</a></li>|
         <li><a href="#">Kontakt</a></li>
        </ul>
       </div>
      </div>
    </div>    
</body>
</html>

Code:

* {
	margin:0, padding:0, border:0;
}

html {
	height:100%;
	background:#1a1a1a;
}

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}

#content {
	width:900px;
	background-color:#000000;
	margin:15px auto 0px;
}

#header {
	width:900px;
	height:125px;
	margin:0px auto;
	background:url(../bilder/bg_header.jpg);
	border-bottom:1px solid #000000;
}

#navigation_oben{
	width:900px;
	height:35px;
	background:url(../bilder/bg_navigation_oben.jpg);
	margin:0px auto;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #000000;
}

.menu_oben {
	padding-top:10px;
}

.menu_oben ul, .menu_oben li {
	list-style-type:none;
	display:inline;
	font-size:12px;
	padding:10px;
	color:#1a1a1a;
}

.menu_oben a:link, .menu_oben a:visited, .menu_oben a:active {
	text-decoration:none;
	display:inline;
	color:#ffffff;	
}

.menu_oben a:hover {
	color:#1a1a1a;
	text-decoration:none;
}

Chickenshooter · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Wenn das BG-Bild größer wird (es muss in diesem Fall in der Höhe immer eine
gerade Zahl sein), muss logischer Weise die Css Datei angepasst werden.

Sprich wenn die Grafik vorher 70px hatte war der a-tag mit einer Höhe von 35 px dabei,
bei Grafikhöhhe 90px, a-tag 45px in der Höhe.

Die Breite musst Du nur anpassen wenn Du auch Deine Grafik in der Breite
änderst.

Es sei denn Du hättest gerne liquid Design dann muss der BG so gestalltet sein das Du ihn per

HTML:

 repeat-x

wiederholen kannst.

tomtom · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

@chickenshooter: schnall das nicht so schnell. ich werde mal mir deinen ersten geposteten code zu brust nehmen und diesen bei mir in der .menu_oben einfügen und testen.
erstmal danke.

Chickenshooter · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Ok, lass Dir Zeit.

Manchmal sieht man den Wald vor lauter Bäumen nicht mehr.

tomtom · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Chickenshooter schrieb:
Ok, lass Dir Zeit.

Manchmal sieht man den Wald vor lauter Bäumen nicht mehr.

klappt nicht, sch**ß regenwald. die farbliche hinterlegung kommt sofort und nicht erst beim a:hover.

Chickenshooter · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

tomtom schrieb:
... die farbliche hinterlegung kommt sofort und nicht erst beim a:hover.

Schick mal css code.

tomtom · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Chickenshooter schrieb:
Schick mal css code.

steht unter #7.

Chickenshooter · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

welche farbliche Hinterlegung meinst Du? gib mir mal den Farbcode der BG-Color wenn Du denn mit einer BG-Color arbeitest.

Denn in deinem css a.hover unter #7 steht nichts von background-color.

MfG

tomtom · 08.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Chickenshooter schrieb:
welche farbliche Hinterlegung meinst Du?

ich weiss ich nerve. so nochmal von vorn.
ich habe eine navigation oben, in dieser navi habe ich links (startseite, unternehmen, standorte usw.) diese möchte ich gerne bei einem hover, farblich mit einer farbe (z.Z. egal) hinterlegen, wie in dem beispiel unter #1. nicht die schrift soll farblich geändert werden, sondern der hintergrund. die navi hat dazu noch einen verlauf.

ich hoffe du kannst mir folgen. der regenwald lässt grüßen.

du hast recht, dass bei mir in der css nichts steht von bg-color beim a:hover. hat es gelöscht weil es nicht klappte. diese css unter #7 ist meine aktuelle css.

Chickenshooter · 09.01.2010

AW: [css] textlink mit hintergrund hinterlegen

HTML:

.menu_oben a
{
    display:block;
    padding: 5px 12px;
}

.menu_oben a:link, .menu_oben a:visited, .menu_oben a:active {
    text-decoration: none;
    display:inline;
    color:#ff0000;
}

.menu_oben a:hover {
    color:#EBEBED;
    background: #AB1212 url(ttNavBGhover.jpg) 0px 0px repeat-x;
    text-decoration:none;
    border:1px solid #A80000;
    padding: 5px 11px;
}

bei mir sieht es dan so aus

MfG

tomtom · 09.01.2010

AW: [css] textlink mit hintergrund hinterlegen

Chickenshooter schrieb:

HTML:

.menu_oben a {
    display:block;
    padding: 5px 12px;
}
.menu_oben a:hover {
    color:#EBEBED;
    background: #AB1212 url(ttNavBGhover.jpg) 0px 0px repeat-x;
    text-decoration:none;
    border:1px solid #A80000;
    padding: 5px 11px;
}

hast für mich eine extra nachtschicht eingelegt. vielen vielen dank, hat super geklappt. wie lernt man das? musste noch kleine details einstellen. bei mir hat sich am anfang beim a:hover der text nach rechts verschoben. bei .menu_oben a muss ich doch display auf inline setzen, oder?
das ganze .menu_oben a hatte ich nicht in meiner css. warum ist die so wichtig?
ich hatte doch .menu_oben a:link, .menu_oben a:visited, .menu_oben a:active

nochwas: du hattest am anfang von liquid design gesprochen. was ist das?

Chickenshooter · 10.01.2010

AW: [css] textlink mit hintergrund hinterlegen

CSS ist wirklich wichtig gearde was das Design einer Seite angeht
PSD-Tutorial mal ohne CSS

sieht komisch aus nicht war???

Liquid Design.... Diese Seite hier ist im Liquid Design
sprich die Seite passt sich dem Browserfenster in der Breite an,
außer Bilder, die passen sich nicht an.

wie lernt man das?

eine von vielen Seiten: SelfHTML hier sind auch immer Bsp. dabei.

durch Bücher und probieren, probieren, probieren.....

"learning by doing"

MfG