Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Ungewollter Abstand im nav tag“

CreativeMind

Noch nicht viel geschrieben

Hallo Leute, ich habe folgendes Problem:
Ich habe hier (Code im Anschluss) ein nav menu erstellt und jetzt ist zwischen den einzelnen Buttons ein ungewollter Abstand und ich weiß nicht woher dieser kommt. Habe auch *{padding:0;margin:0;font-family:Myriad Pro;} angegeben, dennoch hat es nichts gebracht. Würde mich über die Lösung des Problems freuen und auch über Verbesserungsvorschläge :)
Hier kommt jetzt der Code und ein link zu "meinem" Webspace:
Website:

Code:
index.html:
HTML:
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <header class="clearfix">
        <div id="header">
        <img src="pic/Logo.png" class="logo"/>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Designer</a></li>
                    <li><a href="#">Lookbook</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <img src="pic/slideshow.png" class="slide" />
</body>
</html>

style.css:
CSS:
@charset "UTF-8";
*{padding:0;margin:0;font-family:Myriad Pro;}

header {
    background-color:#5b5b5b;
    border-top:10px #828282 solid;
    border-bottom:10px #828282 solid;
}

img {
    max-width:100%;
}

#header {
    max-width:1250px;
    margin:auto;
}

body {
    max-width:100%;
    max-height: 100%;
}

nav ul {
    float:right;
    width:575px;
    display:inline;
}

nav li {
    display:inline-block;
    width:141px;
    height:43px;
    text-align: center;
    background-color:#828282;
    cursor:pointer;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    margin-top: 48px;

  
}

nav li:hover {
    background:#676767;
}

nav a {
    color:#FFF;
    font-size:17px;
    display:inline-block;
    line-height:43px;
    list-style:none;
    text-decoration:none;
}

.logo {
    float:left;
}
  
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

Bitte die Code-Tag benutzen -Dobi78
 
Zuletzt bearbeitet von einem Moderator:

patrick_l

Hat es drauf

Hier mal (d)ein sauberes (valides) Markup:

HTML:
<!doctype html> <!-- HTML5 Doctype -->
<html lang="de"> <!-- Sprache -->
<head>
    <meta charset="utf-8"> <!-- UTF-8 Zeichensatz -->
    <meta name="description" content="">
    <title>ICLONE Example</title>
    <link rel="stylesheet" href="style.css">
    <!-- HTML5Shiv ("IE Fix") -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
    <header id="header" class="clearfix">
        <div class="container"> <!-- Container zum mittig Ausrichten -->
            <h1 id="brand"><a href="#">iClone Logo</a></h1> <!-- Logo über CSS einbinden -->
            <nav id="nav" role="navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Designer</a></li>
                    <li><a href="#">Lookbook</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main id="primary" class="clearfix" role="main"> <!-- Primärer Inhaltsbereich deiner Seite -->
        <section id="slideshow">
            <img src="slideshow.jpg" alt="slider-image 1" />
        </section>
        <!-- Weitere Bereiche / Inhalte -->
    </main>
</body>
</html>

1. Doctype setzen (HTML5: <!doctype html> )
2. Kodierung notieren (UTF-8 Zeichensatz)
3. Markup/CSS validieren
4. Logo besser als h1 setzen (über CSS Grafik einfügen)
5. Dich mit den Developer Tools deines Browsers anfreunden.

Liebe Grüße, Patrick
 

CreativeMind

Noch nicht viel geschrieben

So hab noch ein Problem, ich verstehe nicht ganz, wie ich per h1 und css das Bild einfügen kann. Und wozu dient ein Link an dieser Stelle?

HTML:
<h1 id="brand"><a href="#">iClone Logo</a></h1>
 

Enigmon

Nicht mehr ganz neu hier

Du hast eine Überschrift (h1) mit der ID "brand".
Über die ID "brand" kannst du ein Background-Image setzen, wie z.B das Logo.
Der Link könnte könnte auf die Startseite verweisen.

Gruss
Thomas
 

CreativeMind

Noch nicht viel geschrieben

Du hast eine Überschrift (h1) mit der ID "brand".
Über die ID "brand" kannst du ein Background-Image setzen, wie z.B das Logo.
Der Link könnte könnte auf die Startseite verweisen.

Gruss
Thomas

Naja, bei mir sieht dass dann eher so aus:

CSS:
#brand {
    max-width:625px;
    max-height:141px;
    float: left;
    background-image: url(pic/Logo.png);
}
 
Zuletzt bearbeitet:

CreativeMind

Noch nicht viel geschrieben

Und ich hab die Lösung zu dem Abstand Problem gefunden, nach der Anleitung von t3n.de. In dem Artikel wird beschrieben, dass dieser Abstand durch den CSS-Befehl 'display: inline-block;' ensteht. Sie haben mehrere Lösungmöglichkeiten angegeben und diese hat für mich funktioniert:
link zum Artikel: http://t3n.de/news/kein-abstand-inline-block-523993/

Vorher:
HTML:
<nav id="nav" role="navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Designer</a></li>
                    <li><a href="#">Lookbook</a></li>
                </ul>
            </nav>

Danach:
HTML:
<nav id="nav" role="navigation">
                <ul>
                    <li><a href="#">Home</a></li><!--
                    --><li><a href="#">Store</a></li><!--
                    --><li><a href="#">Designer</a></li><!--
                    --><li><a href="#">Lookbook</a></li>
                </ul>
            </nav>
 

patrick_l

Hat es drauf

So hab noch ein Problem, ich verstehe nicht ganz, wie ich per h1 und css das Bild einfügen kann.
Mit der ID "brand" ansprechen, dem h1 so die gewünschten Werte mitgeben. Danach den Anker selektieren, und diesen ebenso formatieren. Unter anderem den Text-Link verschieben (ausblenden) und das Logo einbinden.
CSS:
#brand {display:block; float:left;}
#brand a {
    width:100px; /* Breite der Grafik */
    height:100px; /* Höhe der Grafik */
    text-indent:-9999em; /* Link verschieben ("ausblenden") */
    overflow:hidden;
    display:block; /* Für Höhen und Breitenangabe */
    background:url(path/to/brand.png) no-repeat;
}
Und wozu dient ein Link an dieser Stelle?
Das Logo zur Startseite verlinken. Mittlerweile hat man sich daran gewöhnt, das genau dieses einen zur Startseite zurückführt. Unterstützen kann man dies oder anderem mit dem title-Attribut.
HTML:
<h1 id="brand"><a title="Zurück zur Startseite" href="#">Branding</a></h1>

Liebe Grüße, Patrick
 

CreativeMind

Noch nicht viel geschrieben

Also das Bild ist jetzt zwar da, aber die Schrift ist noch da.
Website:
Code:

HTML:
<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" media="(min-device-width : 768px) and (max-device-width : 1024px)" type="text/css" href="style_mobile.css" />
    <!-- HTML5Shiv ("IE Fix") -->
    <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>
<body>
    <header id="header" class="clearfix">
        <div class="container"> <!-- Container zum mittig Ausrichten -->
            <h1 id="brand"><a title="Zurück zur Startseite" href="index.html"></a>Branding</h1> <!-- Logo über CSS einbinden -->
            <nav id="nav" role="navigation">
                <ul>
                    <li><a href="#">Home</a></li><!--
                    --><li><a href="#">Store</a></li><!--
                    --><li><a href="#">Designer</a></li><!--
                    --><li><a href="#">Lookbook</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main id="primary" class="clearfix" role="main"> <!-- Primärer Inhaltsbereich deiner Seite -->
        <section id="slideshow">
            <img src="pic/slideshow.png" alt="slider-image 1"/>
        </section>
        <section id="left_box">
            <!--<p>Find your favorite Designer</p>-->
            <div class="image">
                <a href="#"><img src="pic/left_box.png" alt="Find your favorite Designer"/></a>
            </div>
        </section>
        <section id="right_box">
            <!--<p>Looks great on you</p>-->
            <div class="image">
                <a href="#"><img src="pic/right_box.png" alt="Find your favorite Designer"/></a>
            </div>
        </section>
    </main>
    <footer>
        <div class="container">
            <div class="right">
                <a href="#">Contact</a>
                <a href="#">Imprint</a>
            </div>
        </div>
    </footer>
</body>
</html>

CSS:
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto);
*{padding:0;margin:0;font-family: 'Roboto', sans-serif;font-size:16px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}

#header {
    background-color:#5b5b5b;
    border-top:10px #828282 solid;
    border-bottom:10px #828282 solid;
    position: fixed;
    top:0;
    width:100%;
    height:auto;
    z-index:9999;
}

#brand {
    float: left;
    display:block;
}

#brand a {
    width:625px;
    height:141px;
    text-indent:-9999em; /* Link verschieben ("ausblenden") */
    overflow:hidden;
    display:block; /* Für Höhen und Breitenangabe */
    background:url(pic/brand.png) no-repeat;
}

.container {
    max-width:1250px;
    margin:auto;
}

img {
    max-width:100%;
    display: block;
    margin:0;
}

#nav ul {
    float:right;
}

#nav li {
    display:inline-block;
    width:141px;
    height:43px;
    text-align: center;
    background-color:#828282;
    cursor:pointer;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    margin: 48px 4px 48px 0px;
}

#nav li:hover {
    background:#676767;
}

#nav a {
    color:#FFF;
    font-size:17px;
    text-transform: uppercase;
    display:inline-block;
    line-height:43px;
    list-style:none;
    text-decoration:none;
}

#primary {
    margin-top:159px;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

#slideshow {
    z-index:9998;
}

#left_box {
    width:50%;
    height:36.000em;
    overflow: hidden;
    float: left;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    z-index:9995;
}

#left_box p{
    z-index:9997;
}

#right_box p{
    z-index:9996;
}

#right_box {
    width:50%;
    height:36.000em;
    overflow: hidden;
    float: right;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -ms-transition: all 0.5s ease; /* IE 9 */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

footer {
    width:100%;
    height:43px;
    background-color:#403f3f;
    position: absolute;
    line-height: 43px;
}

footer a {
    color:#f3f3f3;
    font-size:20px;
    text-decoration: none;
    cursor:pointor;
    margin-left:8px;
    margin-right:5px;
    -webkit-transition-property: color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
}

footer a:hover {
    color:#676767;
}

.right {
    width:auto;
    float:right;
}

/*mobile*/
@media screen and (max-device-width:1024px) {
*{font-family: 'Open Sans', sans-serif;}
#header {
    border-bottom: none;
    border-top:5px #828282 solid;
}
   
#primary {
    margin-top:166px;
}

#brand {
    float: none;
    margin:0 auto;
    max-width:50%;
    margin-top:5px;
    margin-bottom:5px;
}
   
#nav ul {
    margin:auto;
    float:none;
}
   
#nav li {
    display:inline-block;
    width: 25%;
    height: 43px;
    text-align: center;
    background-color: #828282;
    cursor:pointor;
    margin: 0px 0px 0px 0px;
}

nav a {
    color:#f3f3f3;
    font-size:17px;
    font-family:'Open Sans', sans-serif;
    display:inline-block;
    line-height: 43px;
    list-style: none;
    text-decoration: none;
}
   
}
 

patrick_l

Hat es drauf

<h1 id="brand"><a title="Zurück zur Startseite" href="#">Hier muss der Text weg</a></h1>

Falsch, ein leerer Anker ist nicht valide. Daher wird der Text des Ankers mithilfe von text-indent außerhalb des Sichtbereiches verschoben.

CSS:
#brand a {
    height:100px;
    width:100px;
    display:block;
    text-indent:-9999em;
    white-space:nowrap;
    overflow:hidden;
    background:url(path/to/branding.png) no-repeat;
}

Liebe Grüße, Patrick
 

Enigmon

Nicht mehr ganz neu hier

Ich habe irgendwo auch gelesen das verschieben aus dem Sichtbereich auch nicht das Wahre ist. Leider kann ich dir die Quelle nicht mehr geben.
Ich glaube es ging um das Problem der Dauer bis die Webpage richtig dargestellt wird.
Kostet also Zeit. Es muss ja eine mindestens 9999px+"width" grosse Seite berechnet werden.

Gruss
Thomas
 

patrick_l

Hat es drauf

Ich habe irgendwo auch gelesen das verschieben aus dem Sichtbereich auch nicht das Wahre ist. Leider kann ich dir die Quelle nicht mehr geben.

Brauchst mir keine Quelle nennen, ist mir auch ohne deine Post durchaus bewusst. ;) Jedoch aus "Gewohnheit" nicht an das Box-Rendering gedacht. Jedoch der leere Anker-Tag ein größeres No-Go ist, da nicht valide.

Gibt auch andere Image-Replacement Techniken. Hier mal aktuelle (mir bekannte) Alternativen zum bereits genannten text-indent. Lediglich als Fallback für den IE 6 und 7 notiert.

CSS:
/* --| image replacement techniques |------- */
/*-- example 1 --*/
selector {
    text-indent:100%;
    *text-indent:-9999px; /* IE6/7 */
    white-space:nowrap;
    overflow:hidden;
}

/*-- example 2 --*/
selector {
    font:0/0 a;
    color:transparent;
    text-shadow:none;
}

/*-- example 3 --*/
selector {
    *text-indent:-9999px; /* IE6/7 */
    background-color:transparent;
    border:0; 
    overflow:hidden;
}

selector:before {
    width:0;
    height:150%;
    display:block;
    content:"";}

Liebe Grüße, Patrick
 

CreativeMind

Noch nicht viel geschrieben

Keine Methoden Funktioniert bei mir. Ich benutzte einfach die alte Methode
HTML:
<a href="index.html" title="Zurück zur Startseite"><img src="brand.png" class="brand"/></a>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben