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

Der Spalt muss weg!

X

xthetobs

Neues Mitglied
Hallo =)

habe ein kleines Problem und zwar habe ich ein Header in dem ein Menü liegt jedoch grenzt das Menü nicht mit der top Kante des Headers...hab schon alles versucht finde jedoch nicht den Fehler. Hier der Quelltext dazu und ein Bild:
Code: 
@charset "utf-8";
/* CSS Document */

body, body.strong {
    background-color: #FFFFFF;
    color: #282828;
    font-family: BrandonGrotesque-Regular;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 15px;
    margin 0px;
    padding-top:25px;
    padding-bottom: 0px;
}

.wrapper {
    background-color: #f0f0f0;
    width: 80%;
    min-height: 800px;
    margin:0px auto;
    position:relative;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.7);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.7);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.7);
    border-radius: 15px;

}
.header{
    background-color:#FFA500;   
    height: 100px;
    padding:0px;
    margin:0px;
    overflow: hidden;
    clear: both;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.footer {
    clear:left;
    text-align:center;
    padding:0px;
    margin:0px;
}

.logo{
    float:left;   
    padding: 0px;
    margin: 0px;
}
.menu {
    margin: 0px;
}
.menu ul li{
    margin: 0px;
    padding: 0px;
    float:left;
    list-style-type:none;   
}
.menu ul li a{
    margin: 0px;
    padding: 0px;
    color:#000000;
    text-decoration:none;
    display:block;
    width:150px;
    height:100px;
    text-align:center;
    line-height:36px;
    border-left-style:solid;
    border-left-width:thin;
    border-left-color:#000000;
}
.menu ul li a:hover{
    background-color:#FFAF0A;
}
.ausrichtung_r{
    float:right;   
}

.menu2{
    float: right;
    overflow: hidden;
    border-left-color: #000000;
    border-left-style: solid;
    border-left-width: thin;
    width: 301px;
    height: 700px;;
}
.main{
    float: left;  
    overflow: hidden
}
.newsletter{
    list-style-type: none;
}
http://r08i.imgup.net/Screenshot5a0f.png
Screenshot5a0f.png
 
xthetobs schrieb:
Hallo =)

habe ein kleines Problem und zwar habe ich ein Header in dem ein Menü liegt jedoch grenzt das Menü nicht mit der top Kante des Headers...hab schon alles versucht finde jedoch nicht den Fehler. Hier der Quelltext dazu und ein Bild:
Code: 
@charset "utf-8";
/* CSS Document */

body, body.strong {
    background-color: #FFFFFF;
    color: #282828;
    font-family: BrandonGrotesque-Regular;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 15px;
    margin 0px;
    padding-top:25px;
    padding-bottom: 0px;
}

.wrapper {
    background-color: #f0f0f0;
    width: 80%;
    min-height: 800px;
    margin:0px auto;
    position:relative;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.7);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.7);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.7);
    border-radius: 15px;

}
.header{
    background-color:#FFA500;  
    height: 100px;
    padding:0px;
    margin:0px;
    overflow: hidden;
    clear: both;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.footer {
    clear:left;
    text-align:center;
    padding:0px;
    margin:0px;
}

.logo{
    float:left;  
    padding: 0px;
    margin: 0px;
}
.menu {
    margin: 0px;
}
.menu ul li{
    margin: 0px;
    padding: 0px;
    float:left;
    list-style-type:none;  
}
.menu ul li a{
    margin: 0px;
    padding: 0px;
    color:#000000;
    text-decoration:none;
    display:block;
    width:150px;
    height:100px;
    text-align:center;
    line-height:36px;
    border-left-style:solid;
    border-left-width:thin;
    border-left-color:#000000;
}
.menu ul li a:hover{
    background-color:#FFAF0A;
}
.ausrichtung_r{
    float:right;  
}

.menu2{
    float: right;
    overflow: hidden;
    border-left-color: #000000;
    border-left-style: solid;
    border-left-width: thin;
    width: 301px;
    height: 700px;;
}
.main{
    float: left; 
    overflow: hidden
}
.newsletter{
    list-style-type: none;
}
http://r08i.imgup.net/Screenshot5a0f.png
Screenshot5a0f.png
Zum Vergrößern anklicken....

Ich erkenne kein CSS Problem. Wie wärs mit HTML-Code?
 
scbawik schrieb:
Ich erkenne kein CSS Problem. Wie wärs mit HTML-Code?
Zum Vergrößern anklicken....
Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JFW Startseite</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="wrapper">
    <header class="header">
        <div class="logo">
            <h1>JFW LOGO</h1>
        </div>
      <div class="ausrichtung_r">
          <div class="menu">
            <ul>
              <li><a href="#">Wer wir sind</a></li>
              <li><a href="#">Unser Vorstand</a></li>
              <li><a href="#">Stellungsnahme &amp; Position</a></li>
            </ul>
          </div>
      </div>
    </header>
   
    <div class="container">
        <div class="main">
        <p> Text </p>
            <hr>
        <p>Text 2</p>
        </div>
        <div class="menu2">
            <ul class="newsletter">
            <li><p>Anmelden Newsletter:</p></li>
            <form>
            <li><p>Vorname: <input type="text" name="name"></p></li>    
                <li><p>Nachname: <input type="text" name="nachname"></p></li>  
                <li><p>Herr <input type="radio" name="geschlecht" value="herr"> Frau <input type="radio" name="geschlecht" value="frau"></p></li>  
                <li><p>eMail: <input type="email" name="email"></p></li>  
            <li><input type="submit" value="Abonnieren" name="submit"></li>
            </form>
            </ul>
            </br> <hr>etc.</p>
        </div>
    </div>
</div>
        <footer class="footer">
    <p>© JFW Rietberg 2014 / Designed by Torben Gotowik 2014 </p>
    </footer>
<body>
</body>
</html>
 
Logisch. Dadurch werden alle Innen- und Außenabstände zurückgesetzt, die seitens der Browser vorgegeben werden. Jetzt hast Du die Chance die Abstände selbst zu definieren, statt sie browserabhängig setzen zu lassen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben