Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Rand durch <ul> unerklärlich...

  1. #1
    Youngster
    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Rand durch <ul> unerklärlich...

    Hallo!

    Ich bin relativ unerfahren in der Formatierung von Homepages mit CSS. Nun habe ich eine horizontale Menüleiste eingebunden, wo ein Rand auftritt, den ich mir nicht erklären kann...

    Homepage.jpg

    Der Rand befindet sich rechts des grünen Auswahlfeldes, innerhalb des provisorischen Rahmens. Ich weiß nicht wie ich diesen weg bekomme.

    Der HTML-Code sieht noch ganz einfach so aus:
    HTML-Code:
    <body>
            <div id="container">
                <div id="header_outer">
                    <div id="header"><img src="images/logo.png"></img></div> 
                </div>
                <div id="wrapper">
                    <ul id="navigation-3">
                        <li><a href="homepage.php" class=" active">Startseite</a></li>
                        <li><a href="#">Ipsum</a></li>
                        <li><a href="#">Dolor</a></li>
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                        <li><a href="#">Dolor</a></li>
                    </ul>
                    <div id="login">Zum Login</div>
                </div>
                <div id="content_outer">
                    <div id="content">                
                        Bedeutete es in ... usw. 
                    </div>
                </div>
            </div>   
        </body>
    Das CSS File dazu sieht folgendermaßen aus:
    Code:
    body,html{
        margin: 0;
        padding: 0;
        background-image: url('../images/background.gif');
        background-color: gray;
        background-repeat: repeat;
        font: normal 16px Helvetica, Arial, sans-serif;
    }
    
    div#header_outer {
        /*background-color: none;*/
        height: 160px;
        width: 860px;
        margin: auto;
    }
    
    div#header {
        padding: 10px;
        text-align: center;
    }
    
    div#container {
        position: absolute;
        margin-left: -430px;
        margin-top: -300px;
        top: 50%;
        left: 50%;
        width: 860px;
        height: 600px;
        background-color: white;
    }
    
    #wrapper {
        width: 800px;
        margin: auto auto 20px 30px;
        float: left;
        border: 1px solid red;
        padding: 0;
    }
    #navigation-3 li {
        background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
        border-left: 1px solid #707F90;
        border-right: 1px solid #3C444D;
        float: left;
        list-style-type: none;
    }
    
    #navigation-3 li a {
        color: #DFE1E2;
        float: left;
        padding: 10px 20px;
        text-decoration: none;
    }
    
    #navigation-3 li a:hover {
        background: #5d91da url(nav-bg-2.jpg) bottom left repeat-x;
        color: #fff;
        text-decoration: underline;
    }
    
    #navigation-3 li a.active {
        background: #6aec7c url(nav-bg-3.jpg) bottom left repeat-x;
        color: #fff;
        text-decoration: underline;
    }
    
    #navigation-3 li.start {
        border-left: 0;
    }
    
    #navigation-3 li.ende {
        border-right: 0;
    }
    
    div#content_outer {
        clear: both;
        width: 800px;
        margin: 20px auto;
        border: 1px solid black;
        height: 300px;
        overflow: scroll;
    }
    
    div#content {
        margin: 15px;
    }
    
    #login{
        padding: 10px;
        float: right;
        background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
        color: white;
        border-left: 1px solid #707F90;
        border-right: 1px solid #3C444D;
    }
    Ich denke mal, dass die Antwort nicht allzu schwer sein dürfte. Für mich als Leihen ist dieser Abstand allerdings unerklärlich.

    mfg Philip
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Firefox - Firebug / Chrome - Element Untersuchen hilft..

    Code:
    #navigation-3 li {
    
        background: url("nav-bg.jpg") repeat-x scroll left bottom #676F7A;
    
        border-left: 1px solid #707F90;
        border-right: 1px solid #3C444D;
        float: left;
        list-style-type: none;
    
    
    
    }
    und welchen Rand kannst du dir nun nicht erklären?

    Wenn du den gestrichelten Rand meinst (den man auf dem Screen nicht sieht) der auftritt sobald man auf die navi klickt, dann handelt es sich um die CSS Pseudoklasse :active und die Eigenschaft outline

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Naja Rand ist vielleicht falsch ausgedrückt, besser gesagt der Abstand des Elements "Startseite" zum roten Rand (Wrapper-Div).

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Versuch's mal mit
    Code:
    ul #navigation-3 {margin: 0;}
    Ansonsten poste mal einen Link zur Seite.

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Hmm... Dadurch wird nur der gewollte Abstand nach oben gestrichen.

    Die Seite ist noch nicht online, bin gerade dran sie lokal aufzubauen...

    mfg

  6. #6
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Code:
    ul {
    margin: 0;
    }
    ul hat einen default marign

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Nein das ist auch nicht die Lösung... Dadurch wird wieder nur der Rand nach oben entfernt, den ich allerdings haben möchte.

  8. #8
    Fortgeschrittene/r Avatar von unknownsoldier
    Registriert seit
    16.06.2010
    Ort
    "Dreamland"
    Alter
    26
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Wenn man Grundlagen können würde, wärst du selbst drauf gekommen...
    Code:
    ul#navigation-3 {margin:15px 0 0 0;}

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Wenn das die Lösung wäre, wäre ich auch drauf gekommen...

    Ich weiß nicht woher dieser Abstand kommt...

  10. #10
    Youngster
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Rand durch <ul> unerklärlich...

    Hat niemand eine Idee an was es liegen könnte?

    Wäre wirklich froh wenn ich das Problem in den Griff bekommen würde...

    mfg

Ähnliche Themen

  1. SQL RAND durch Wert beeinflussen
    Von WWKiller im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 19.05.2011, 16:55
  2. Rand Effekt
    Von Reward im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 01.10.2007, 20:00
  3. Rand-Set
    Von Greg10 im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 2
    Letzter Beitrag: 06.09.2007, 20:52
  4. "Weiter" nur durch Button nicht durch "Enter&
    Von OJMD im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 27.02.2007, 17:16
  5. div-rand
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.10.2006, 21:02

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •