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

Nav-Bearbeitung

B

benbas39

Mitglied
Hallo, ich habe jetzt ein Menu, mit Einem Icon und der Schrift. Da das zusammen geschrieben ist, weiss ich nicht wie ich das auseinander machen soll, oder nur die Schrift kleiner machen kann ?
Mein Html-Listitem:

<li><a id="icon" class="fa fa-home fa-2x" href="#">Home</a></li>

Website:
http://ni292107_1.vweb12.nitrado.net/#
 
Werbung:
Ja, dann werden aber auch die Icons kleiner. Und wie kann ich noch ne Abstand zwischen icon und z.B home verändern. Ich weiss schon wie das geht. Diesmal ist das alles einfach im gleichen a tag? @pax
 
Werbung:
Kannst es doch auch so aufbauen.
HTML: 
<a href="#"><i class="fa fa-icon"></i> Dein Linktext</a>
 
Ne dann krieg ich es nich hin., dass das ganze li ein Link ist. , könntest du ein Beispiel machen ?Kriege das nicht hin:
Website http://ni292107_1.vweb12.nitrado.net/

Html:
<li><a id="icon" class="fa fa-home fa-2x" href="#">Home</a></li>

Css:

* {
margin: 0;padding: 0;color: black;text-decoration: none;}

body {
background-color: white;}

#sidebar_left {
position: fixed;float: left;width: 350px;background-color: #222729;height: 100%;}

#sidebar_nav {
margin-top: 100px;font-size: 10px;}

#sidebar_nav ul li {
height: auto;}

#sidebar_nav ul li a {
display: block;width: 100%;height: 45px;transition: all 900ms;}
#sidebar_nav ul li a:hover {
margin-left: 50px;transition: all 900ms;background-color: #222721;}
a#icon {
padding-top: 13px;margin-left: 30px;}
 
benbas39 schrieb:
Ne dann krieg ich es nich hin., dass das ganze li ein Link ist. , könntest du ein Beispiel machen ?Kriege das nicht hin:
Website http://ni292107_1.vweb12.nitrado.net/

Html:
<li><a id="icon" class="fa fa-home fa-2x" href="#">Home</a></li>

Css:

* {
margin: 0;padding: 0;color: black;text-decoration: none;}

body {
background-color: white;}

#sidebar_left {
position: fixed;float: left;width: 350px;background-color: #222729;height: 100%;}

#sidebar_nav {
margin-top: 100px;font-size: 10px;}

#sidebar_nav ul li {
height: auto;}

#sidebar_nav ul li a {
display: block;width: 100%;height: 45px;transition: all 900ms;}
#sidebar_nav ul li a:hover {
margin-left: 50px;transition: all 900ms;background-color: #222721;}
a#icon {
padding-top: 13px;margin-left: 30px;}
Zum Vergrößern anklicken....

ID's sind einmalig und haben im CSS nichts zu suchen…
Außer man weiß was man tut.
 
Werbung:
HTML: 
<ul>
   <li><a href="#"><i class="fa fa-home"></i>Startseite</a></li>
   ...
</ul>

CSS schreibe ich jetzt mal nicht dazu, da ich dazu einfach mal auf Google verweise. Suchbegriffe dafür müssten eigentlich klar sein. ;)
 
Alternativ zu diesem zusätzlichen Element könnte man auch mit :after oder :before arbeiten. :)
 
Werbung:
benbas39 schrieb:
Hi, danke. Würde das einen Unterschied machen ? Könntest du mal ein Beispiel machen ? LG
Zum Vergrößern anklicken....
Das sind Pseudoelemente die vor oder nach einem Element beliebigen Inhalt einfügen.

HTML: 
<style type="text/css">
h1:before{
   content:"Achtung!";
   color:#ff0000;
}
</style>

HTML: 
<h1>Irgendeine Überschrift,   vor der das Wort "Achtung!" steht</h1>
 
Ah also z.B p::before { content: url (bild.jpg)} ?

Und dann wird vor dem p element wo z.B test drinnen steht das bild.jpg gezeigt ?
 
Werbung:
Kannst du natürlich auch, find ich jetzt persönlich nur nicht so schön. So sparst du dir außerdem HTML-Code.
 
Werbung:
Ein img-Element sollte man nicht unbedingt für Gestaltungsmittel nutzen sondern für Inhalte mit semantischer Bedeutung. Daher bietet es sich an background-image und/oder Pseudoelemente zu verwenden, was wenn man CSS-Sprites verwenden will, sogar noch einen Vorteil beim Laden der Seite hat.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben