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

Links bearbeiten

T

t-stephan

Neues Mitglied
Hallo

ich wollte fragen wie ich ein border um ein Link ziehen kann der Code sieht so aus:
UND ich würde gerne das der Text nicht so dick ist sondern eher so dünn wie der Header von
https://www.virustotal.com/
HTML: 
   <a href="www.google.com" style="text-decoration: none;font-size: 50%;color: white;font-style: arial;">Google</a>
 
Zuletzt bearbeitet:
Ok, noch eine frage ich mag gerne einen so professionellen wie möglichen quelltext schreiben sollte ich da die CSS Formate in eine bestimmte css datei packen oder lieber im Quelltext offen anzeigen?
 
Auslagern des CSS Codes lohnt sich schon bei kleinen Projekten, da du auf jeder Seite wieder darauf verweisen kannst, da sich oft die Klassen und ids auf den verschiedenen Seiten wiederholen.
Also würde ich sie auslagern. Das ist für mich aber nicht hauptsächlich ein Zeichen von Professionalität (CSS auslagern kann jeder schnell lernen) sondern von Arbeitserleichterung. Es ist also empfohlen, das Design und den Inhalt zu trennen. Dadurch hälst du auch deinen Code schlank und damit übersichtlicher.
 
Auf jeden Fall in eine Extra CSS-Datei. Du sparst traffic, weil der Code vom Server nur einmal abgerufen wird und dann im Cache vorliegt.
Weiterhin hast du nur eine Stelle in der du Änderungen am Design vornimmmst, für alle Seiten der Webpräsenz.
 
Dein Header sollte so aussehen, wenn du auf die Datei style.css verweist:

HTML: 
<!DOCTYPE html>
<html>         
    <head>                 
        <meta charset=utf-8>        
        <title>Titel der Seite         
        </title>                 
        <meta name=description content=Beschreibung>           
        <link href=style.css rel=stylesheet type=text/css>                                
    </head>        

    <body>                                                            
      <!-- hier kommt der Inhalt rein -->

    </body>
</html>

Valides HTML5.
 
Ok, und dann soll ich halt in die css datei die formate so eingeben?

.box { width: 100%;
padding: 0px;
padding-top: 5px;
border: 1px solid #000000;
background:darkred; }
 
Ok danke sehr.
Jetzt habe ich eine Frage ich bin sehr unzufrieden mit mein Link undzwar sieht er immer noch normal aus er ist nicht so dünn und sieht auch nicht gut aus wie hier: https://www.virustotal.com/ .
hier der css code.

.link { font-size:100%;
color:white;
font-style:arial;
border:1px #000000;
text-decoration:none; }

UND hier der HTML code

<div id="box"class="box"> <a id="link"class="link" href="www.google.de">Test</a>
</div>
 
Ich gab dir den Hinweis mit dem Validator.

Der sagt nämlich folgendes:
Value Error : font-style arial is not a font-style value : arial

mal sehen ob du das selber gelöst bekommst.


Hier dein fehlerhaftes CSS:

HTML: 
.link { font-size:100%;
        color:white;
        font-style:arial;
        border:1px #000000;
        text-decoration:none; }

Darüber hinaus folgende Anmerkung:
du referenzierst hier ein klasse mit dem Wert link. Das ist mehr als unglücklich, da es auch ein Element mit Namen Link gibt und es hier zu Verwechselungen kommen kann.
Verwende aussagekräftige Namen über die Funktion der Klasse(oder ID), nicht deren Eigenschaft.

Im HTML schreibst du
<div id="box"class="box"> <a id="link"class="link" href="www.google.de">Test</a>
</div>

Element Div:
ID und Klassen sind doppelt. Wenn du eine ID hast ist die eindeutig und bedarf keiner Klasse mehr.
Du verwendest für Klasse und ID den gelichen Namen, das sollte man nicht machen, führt nur zu Fehlern.

Element a:
Das a-Element ist bereits ein Link. Entweder ID oder eine Klasse verwenden.
Weiterhin gilt, dass wenn ein Element eindeutig identifizierbar ist, ist eine ID oder Klasse nicht notwendig.

Es reicht in deinem Fall also:
<div id="box">
<a href="www.google.de">Test</a>
</div>

Durch das Div und der ID ist die ist der Link eindeutig zu referenzieren durch folgende Anweisung:
div#box a { }

Da Ids eindeutig sind kann man das div auch weglassen:
#box a { }

Bitte diese Seite abspeichern ausdrucken oder auswendig lernen: Selectors Level 3
Ich empfehle den Link in die Bookmarks aufzunehmen.


Noch ein Beispiel für schlechtes Markup:
man sieht oft folgendes
<div id="footer">
<a class="copyright" href="http://www.example.org"> Copyright by ... </a>
</div>

besser:
<div class="footer">
<a href="http://www.example.org"> Copyright by ... </a>
</div>

Und in HTML5:
<footer>
<a href=//www.example.org> Copyright by ... </a>
</footer>
 
CSS Code:

html, body {margin: 0px; padding: 0p; width: 100%;}

.box { width: 100%;
padding: 0px;
padding-top: 5px;
border: 1px solid #000000;
background:black;
height: 50px; }

.h1 { font-size: 135%;
position:middle;
color:black;
font-style:arial;
border:1px grey0; }

.userprofil { float:left;
width:300px;
height:500px;
border:1px solid silver;
margin:5px;
background:rgb(220,230,220); }

.3456box { float:left;
width:750px;
height:900px;
border:1px solid silver;
margin:5px;
background:rgb(220,230,220); }

.navilinks { font-size:200%;
font-family:arial;
color:white;
font-style:normal;
border:1px #000000;
text-decoration:none;


html:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Titel der Seite
</title>
<meta name=description content=Beschreibung>
<link href=style.css rel=stylesheet type=text/css>
</head>

<body>
<div id="box"class="box"> <a id="navilinks"class="navilinks" href="www.google.de">Test</a>
</div>
</body>
</html>



So sehen beide Codes aus
 
Hallo.

Wustersoss hat dir ja schon einige Hinweise gegeben die du leider nicht befolgt hast.

Dein CSS ist fehlerhaft

Einen font-style:arial oder eine position: middle gibt es nicht.

Du verwendest in deinen HTML id's und klassen du hast in deinem CSS aber nur klassen angegeben, also kannst du die id's auch weglassen.
Das h1 solltest du übrigens nicht als Klasse angeben sondern als Typeselektor angeben.
Aber ich glaube den Link über Selektoren und wie man sie einsetzt hast du auch schon erhalten.

Gruss
Elroy
 
Bitte den ganzen Thrad noch mal lesen.

Hier schon mal der HTML-Code:

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Titel der Seite 
        </title>
        <meta name=description content="">
        <link href=style.css rel=stylesheet type=text/css>
    </head>
    <body>
        <div id="box"> 
            <a href="www.example.org">Test</a>
        </div>
    </body>
</html>

Verwende für URL als Platzhalter IANA &mdash; Example domains, diese URL ist extra dafür da.

CSS für den Link und nur für den, den Rest des CSS habe ich jetzt mal ausgeblendet:
HTML: 
#box a {
    font-size:200%;
    font-family:helvetica, sans-serif;
    color:white;
    font-style:normal;
    border:1px solid #000000;
    text-decoration:none; 
}

Noch mal der Hinweis, den Validator zu benutzen um zu schauen ob im Code Fehler sind.
 
Boahr das ist alles so kompliziert da ich jetzt zwischen Webentwicklung und den allgemeinen Programmieren mit C,Java etc.. stehe...

Aber vielen dank
 
So neues Problem undzwar ich mag jetzt gerne noch einen Rollover effekt einbauen habe auch schon den CSS code bzw copy&paste und verändert also muss der richtig sein...
ehm aber wo soll ich das jetzt bei den code einbauen?

CSS code:

#navigation ul {
list-style-type:none;
}

#navigation a {
display:block;
padding:10px;
margin:0px;
text-align:center;
width:150px;
height:30px;
background-color:#0000aa;
text-decoration:none;
color:#ffffff;
}

#navigation a:hover {
background-color:#55f;
}


Html Code:

<div id="box">
<a href="www.example.org">Test</a>
</div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben