Suche im Forum:
Suchen


Autor Nachricht
Beitrag16.02.2011 um 13:11 (UTC)    
Titel: Links mit Css definieren

Hallo zusammen,

ich habe jetzt schon länger gesucht, aber irgendwie komme ich nicht weiter.

Ich bin absoluter CSS-Neuling und suche nach den Codes um Hyperlinks zu formatieren.

Ich bräuchte also einen CSS-Code in dem ich die Variablen wie Farbe, Schriftart,... einstellen kann. Optimalerweise auch noch die Funktion, dass sich der Link in einem neuen Fenster öffnet.

Wenn ich das dann habe, wie sähe dann mein HTML-Code aus?

Danke und Gruß,
Sven
______________
Gruß,
Sven
Beitrag16.02.2011 um 13:47 (UTC)    
Titel:

Das HTML Grundgerüst für einen Link sieht so aus:
Code:
<a href="Linkadresse">Linkname</a>

"a" ist der HTML Tag für Links, also kannst du Links mit diesem Tag per Css gestalten:
Code:
 a {
font-size: 14px;
color: #2c2c2c;
background: #f2f2f2;
border: 1px solid #000;
}

Mit diesem Code legst du den Style für alle Links auf deiner Seite fest. Natürlich kannst du das aussehen definieren wie du willst.

Möchtest du Links einzeln oder nur eine bestimme Gruppe von Links definieren, so muss du im Css Code spezifischer werden.
Allen Links im Inhaltsbereich deiner Seite kannst du z.B so bearbeiten:
Code:
#content a {
...
}

Du kannst auch mehrere Links einer Klasse zuweisen und diese anschließend über die Homepage verteilt verwenden:

HTML
Code:
<a href="Linkadresse" class="klasse">Linkname</a>

Css
Code:
a.klasse {
...
}


Dass der Link sich in einem neuen Fenster öffnet erreichts du mit folgendem HTML Zusatz:
Code:
target="_blank"

<a href="Linkadresse" target="_blank">Linkname</a>

______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag18.02.2011 um 16:43 (UTC)    
Titel:

Hallo Badweb,

ich habe jetzt folgenden Code eingesetzt:

a {
font-size: 16px;
color: #a52a2a;
}

Hierzu sehen (WORT): http://sifletest.de.tl/

- Gibt es noch eine Codeerweiterung, dass der Text die gleiche Schriftgröße beibehält?
- Kann man das target="_blank" auch mit in den CSS Code reinpacken?

- BTW: Ist die Stelle vom Code im "Text über dem Design" egal?

Danke und Gruß,
Sven
______________
Gruß,
Sven
Beitrag18.02.2011 um 16:51 (UTC)    
Titel:

notstation hat Folgendes geschrieben:
- Gibt es noch eine Codeerweiterung, dass der Text die gleiche Schriftgröße beibehält?
Du meinst, dass der Text die gleichen Eigenschaften hat, wie der Link?

- Kann man das target="_blank" auch mit in den CSS Code reinpacken?
Nein.

- BTW: Ist die Stelle vom Code im "Text über dem Design" egal?
Ja.


Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag18.02.2011 um 17:05 (UTC)    
Titel:

Hi,
zur weiteren Hilfe gibts ein Tutorial bei den "Design-Tutorials".
http://www.homepage-baukasten.de/forum/viewtopic.php?t=113128

Gruss
Riki
Beitrag19.02.2011 um 14:07 (UTC)    
Titel:

Hallo zusammen,

Wie oben beschrieben, sieht mein Code im Moment so aus:
a {
font-size: 16px;
color: #a52a2a;
}

- Schriftgöße auf 16, da meine Standard-Schriftgröße auch 16 sein soll.
- und die Farbänderung

Jetzt sieht das wie hier zu sehen aus: http://sifletest.de.tl/
Immer wenn ich über den Link fahre wird die Schriftart kleiner. Ziel ist es, einen Link genauso wie normale Schrift darzustellen. nur eben mit einer anderen Farbe und einem Unterstrich, wenn ich mit dem Mauszeiger drüberfahre.

Rikis Link habe ich ausprobiert, aber ich schnalle die Funktionsbeschreibung nicht...

Gruß,
Sven
______________
Gruß,
Sven
Beitrag19.02.2011 um 14:11 (UTC)    
Titel:

Code:
a:hover {
font-size:16px;
color:#xxxxxx;
text-decoration:underline;
}

Nur die Farbe fehlt noch Wink
Beitrag19.02.2011 um 14:50 (UTC)    
Titel:

Danke!
Das sieht doch schon mal gut aus.
Allerdings habe ich jetzt noch ein neues Problem.
Auf der Startseite habe ich den Text mit H1 in Schriftgröße 20 definiert.
Der Text wird dann aber wieder mit </h1> geschlossen.
http://notstation.de.tl

Der Text mit der Linkdefinition müsste also wieder in der Standardschriftgröße 16 erscheinen. Macht er aber nicht.

Zitat:
<h1>Du hast auch eine Notstation<br>und m&ouml;chtest hier gerne gelistet werden?</h1>
Schreib uns einfach über den <a href="/Notstation-melden.htm" title="Meerschweinchen Notstation melden">
Kontakt</a>an


Hier mal mein kompletter CSS Code:
Zitat:
<style type="text/css">
<!--
table.edit_main_table{width: 100% !important;}
table.edit_main_table, table[height="102"]{margin: 0 auto;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}

td.edit_header_full{background-image:url(http://img.webme.com/pic/n/notstation/headernotstation.jpg);background-color:#a52a2a;width:
2000; height: 104px;background-position: center top;background-repeat: no-repeat;border: 5px solid #a52a2a;}



/* Textfarbe - Schriftart - Textgröße */
div {
color: #000000;
font-size: 16px;
font-familiy: Verdana, Tahoma, Arial, Helvetica, sans-serif;}

/* H1 Textfarbe - Schriftart - Textgröße */
H1 {
color: #000000;
font-size: 20px;
font-familiy: Verdana, Tahoma, Arial, Helvetica, sans-serif;}


table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 5% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 5% !important;}
td.edit_rechts_cbg{width:100%;}

td.edit_main_tr{height: 0px !important;}
td.edit_rechts_cbg{height: 0px !important;}
td.edit_rechts_bottom{height: 0px !Important;}
td.edit_navi_headbg{height: 0px !important;}

td.edit_content{background-image:url(http://img.webme.com/pic/n/notstation/burlywood.jpg);background-color:#c0c0c0;border: 2px solid #a52a2a;}

td#nav_leer1{visibility:hidden;height:20px;}
td#nav_leer2{visibility:hidden;height:20px;}
td#nav_leer3{visibility:hidden;height:20px;}
td#nav_leer4{visibility:hidden;height:20px;}

/* Links Textfarbe - Schriftart - Textgröße */
a {
font-size: 16px;
color: #a52a2a;
}

/* Link Hoovereffekt Textfarbe - Schriftart - Textgröße */
a:hover {
font-size:16px;
color:#a52a2a;
text-decoration:underline;
}




td.nav:hover{background-image: url(http://img.webme.com/pic/n/notstation/hover.jpg);background-color:#XXXXXX;width:
185px;height: 33px;border: 0px solid #2D3738;}

td.nav{background-image: url(http://img.webme.com/pic/n/notstation/navbutton.jpg);background-color:#XXXXXX;width:
185px;height: 33px;border: 0px solid #2D3738;}

td.edit_below_nav img{visibility: hidden;}
td.edit_below_nav{background-image: url();
background-position: center top;background-repeat: no-repeat;}

td.edit_rechts_cbg{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}

body{background-color:#343434;
background-image:url(http://img.webme.com/pic/n/notstation/background.jpg); }
body {background-attachment:fixed;border: 0px solid #c0c0c0;}

td.edit_rechts_sbg{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}

td.edit_rechts_bottom{background-image:url();background-color:#XXXXXX;border: 0px solid #ffffff;}

td.shouty, td.shouty2, td.shouty3, td.shouty4, td.shouty5{
background-image:url(http://img.webme.com/pic/n/notstation/navbutton.jpg);
background-repeat:repeat;
background-color:#XXXXXX;font-family: arial;font-size: 12px;
color:#000000;border: 0px solid #2D3738;}

td.edit_content_top,td.edit_content_top:hover{background-image:url(http://img.webme.com/pic/n/notstation/edit_content_top.png);height: 25px;background-color:#XXXXXX;text-align:center;}

td.edit_navi_headbg{background-image:url(URL);background-color:#XXXXXX;}

td.nav_heading{background-image:url(http://img.webme.com/pic/n/notstation/edit_content_top.png);height: 30px;background-color:#XXXXXX;border: 0px solid #c0c0c0;}

td.sidebar_heading{background-image:url(http://img.webme.com/pic/n/notstation/edit_content_top.png);height: 30px;background-color:#XXXXXX;border: 0px solid #c0c0c0;}

td.edit_rb_footer{background-image:url();height: 15px;background-color:#XXXXXX;border: 0px solid #c0c0c0;}

td.edit_content_bottom2{background-image:url();background-color:#XXXXXX;height: 30px;border: 0px solid #2D3738;}

td.edit_content_bottom{background-image:url(http://img.webme.com/pic/n/notstation/edit_content_top.png);height: 0px; width: 0px; background-color:#XXXXXX;border: 0px
solid #c0c0c0;background-position: center top;background-repeat: no-repeat;}

td.nav_heading{font-family: arial;font-size: 12px;color: #ffffff;padding-left:26px;text-align: left;}
td.nav a{font-family: arial;font-size: 12px;color: #000000;text-decoration: none}
td.sidebar_heading{font-family: arial;font-size: 12px;color: #ffffff; text-align: center;}

td.edit_content_main div{overflow: hidden!important;}


-->
</style>

______________
Gruß,
Sven
Beitrag19.02.2011 um 15:59 (UTC)    
Titel:

Bei mir stimmt glaub ich alles, kann dir von daher nicht weiterhelfen. Oder
hast du vielleicht nur die Schriftgröße für Links definiert, für die Schrift aber nicht?
Vielleicht isses dat?

Code:
html{
font-size:16px;}
Beitrag19.02.2011 um 17:30 (UTC)    
Titel:

Hi,
ich dachte, dass ich die Schrift hiermit definiert habe:
Zitat:
/* Textfarbe - Schriftart - Textgröße */
div {
color: #000000;
font-size: 16px;
font-familiy: Verdana, Tahoma, Arial, Helvetica, sans-serif;}

/* H1 Textfarbe - Schriftart - Textgröße */
H1 {
color: #000000;
font-size: 20px;
font-familiy: Verdana, Tahoma, Arial, Helvetica, sans-serif;}

______________
Gruß,
Sven
Beitrag19.02.2011 um 17:40 (UTC)    
Titel:

Zitat:
Hi,
ich dachte, dass ich die Schrift hiermit definiert habe:
Code:
/* Textfarbe - Schriftart - Textgröße */
div {
color: #000000;
font-size: 16px;
font-familiy: Verdana, Tahoma, Arial, Helvetica, sans-serif;}

/* H1 Textfarbe - Schriftart - Textgröße */
H1 {
color: #000000;
font-size: 20px;
font-familiy: Verdana, Tahoma, Arial, Helvetica, sans-serif;}



Vorraussetzung dafür ist aber, dass der Text in einem Div-Bereich steht.
Besser ist denk ich die Variante mit "html" als Selektor.
Beitrag20.02.2011 um 09:26 (UTC)    
Titel:

Hi,
ich habe jetzt herausgefunden, dass Firefox 3 es "fehlerhaft" darstellt.
Im Internet Explorer 8 wird es korrekt dargestellt.
Hilft das weiter?
______________
Gruß,
Sven
Beitrag25.02.2011 um 17:50 (UTC)    
Titel:

schieb
______________
Gruß,
Sven
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de