Erledigt - Ungewollter Abstand im nav tag

CreativeMind · 29.01.2015

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

cythux · 29.01.2015

Bitte auch den den Korrekten HtML5 doctype nutzen

CSS:

nav ul {
float:right;
width:575px; <- diesen entfernen
display:inline;
}

patrick_l · 30.01.2015

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 · 01.02.2015

Danke für die Tips, ich mache mich gleich mal ran und schau, ob dann der Fehler weg ist

CreativeMind · 05.02.2015

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 · 05.02.2015

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 · 05.02.2015

Enigmon schrieb:
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);
}

CreativeMind · 05.02.2015

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 · 06.02.2015

CreativeMind schrieb:
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;
}

CreativeMind schrieb:
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 · 07.02.2015

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;
}
   
}

Enigmon · 08.02.2015

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

Gruss
Thomas

patrick_l · 08.02.2015

Enigmon schrieb:
<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 · 08.02.2015

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 · 08.02.2015

Enigmon schrieb:
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 · 08.02.2015

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>