Wie bekomme ich in HTML/CSS die zwei Leisten weg?

3 Antworten

Die Lösung zu deiner Frage hast du ja bereits selber gefunden. Trotzdem nen gut gemeinter Tipp an dich. Klassen sinnvoller verwenden und so unnötige Verkettungen vermeiden. 

Ich kenne dein Markup zwar nicht, jedoch vorne den Element-Selektor weglassen kannst. Sprich das gewünschte Element direkt über die zugewiesene Klasse selektieren und wie gewünscht formatieren kannst. 

.btn-accordion:active, .btn-accordion:hover {
 background-color: #585858;
}

Dein Markup entsprechend anpassen. Mit der Klasse .accordion dann das Accordion selbst ansprichst. Wobei es sinnvoll ist, wenn du dir gleich eine modulare Klassen-Vergabe samt Klassen-Suffixe aneignest. 

Hier auf dein Accordion bezogen mal ein kleines Beispiel, wie das Ganze mit mit modularen Klassen und Suffixes ausschauen könnte. So dein auch CSS verständlicher aufbauen kannst. 

.module_accordion {}
.module_accordion-btn {}
.module_accordion-panel {}

LG medmonk 

Du hast nur CSS Code aber keinen HTML code, das kann ja nicht funktionieren. Bitte lerne erst mal die basics. 

Der war zu lang :D und der fehler lag im css code. Schon klar das ohne html nichts läuft :D

0

HTML / CSS Div-Container bzw. ganze Seite horizontal zentrieren

Hallo...

ich hab ein größeres Problem mit meiner Website. Ich bin noch am Anfang und hab direkt zu Beginn festgestellt, dass viele Websiten zenriert ausgerichtet sind. Sowas wollte ich auch machen, hab gegoogelt, gf durchgeblättert aber noch nichts Brauchbares gefunden.

Ich hab eine Seite aufgeteilt in body und dann einen Div-Container, der alles umschließt (heißt bei mir id="drumrum"). So. Dann wollte ich da weitere Div-Container einfügen, die da heißen sollen kopf, navi, inhalt und footer. Soweit OK, alle möglichen Formatierungsoptionen mit CSS klappen soweit, aber mit der horizontalen Zentrierung komm ich garnicht weiter.

Ich hab schon ausprobiert, margin auf 0px auto zu setzen, text-align:center usw. zu benutzen, aber nichts funktioniert. Damit ihr wisst, wie mein Doctype aussieht:

Hab schon irgendwo gelesen, dass man da vielleicht noch was dran ändern muss, weiß aber nicht genau, was ;)

Hier ist meine CSS-Datei, als Code eingefügt:

/*formate.css*/

drumrum {

width:1000px;
float:left;
margin:0 auto;
text-align:left;

}

kopf {

border-top-left-radius:10px;
border-top-right-radius:10px;
float:left;
width:980px;
height:150px;
border-width:1px;
margin-left:auto;
margin-right:auto;
background-image:url('img/banner.png');
font-weight:bold;
font-size:30pt;
padding-left:10px;
padding-right:10px;

}

navi {

float:left;
width:980px;
border-width:1px;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#00CC00;
font-size:14pt;

}

inhalt {

width:980px;
float:left;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#CCCCCC;
font-size:14pt;

}

footer {

width:980px;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#FFFFFF;
text-align:center;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

} body { background-color:#008800; text-align:center; } * { font-family:Times New Roman; } a:hover { text-color:#00DD66; font-weight:bold; } a:visited { text-color:#FF00EE; } a { text-color:#0022FF; }

Das wäre dann mein momentanes CSS für meine Seite. Wenn mal jemand drübergucken könnte und eine Idee kennt, wie ich "alles" waagerecht in die Mitte krieg, danke schonmal.

Und bitte verlinkt nicht auf eine gf-Seite, leider hat bislang von all den genannten Antworten keine Möglichkeit funktioniert. Vielleicht liegt es ja auch wirklich am Doctype.

Liebe Grüße, HugaTV

...zur Frage

WordPress Menü fixieren?

Hallo, ich würde gerne mein Menü fixieren. Wie gebe ich das genau ein? Ich weiß das diese Frage schon gestellt wurde, habe es aber nicht geschafft mit fixed. Kenn mich da überhaupt nicht aus, bin mir nicht mal genau sicher ob ich die richtige Stelle raus gesucht habe^^. Alles was ich bisher gemacht habe sah echt komisch dann aus...

Wäre sehr dankbar für eure Hilfe!

2.0 Menu
    --------------------------------------------------------------*/
    .main-navigation {
        position: realtive;
        clear: both;
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 1px #adadad;
        background-color: rgba(60, 60, 60, 0.8);
        z-index: 999;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .main-navigation li {
        position: relative;
        display: inline-block;
        padding: 20px 10px;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: all 0.4;
        transition: all 0.4s;
    }
    .main-navigation li:hover {
        background-color: #fbb829;
    }
    .main-navigation li:hover > a {
        color: #fff !important;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #fbb829;
        -webkit-transition: all 0.4;
        transition: all 0.4s;   
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
        text-align: left;
        background-color: rgba(60, 60, 60, 0.8);
    }
    .main-navigation ul ul ul {
        left: -999em;
        top: 0;
    }
    .main-navigation ul ul a {
        width: 200px;
        color: #fff !important;
    }
    .main-navigation ul ul li {
        padding: 10px;
        text-transform: none;
        border-bottom: 1px solid #505050;
    }
    .main-navigation ul ul li:last-child {
        border-bottom: 0;
    }
    .main-navigation li:hover > a {
    }
    .main-navigation ul ul :hover > a {
    }
    .main-navigation ul ul a:hover {
    }.main-navigation {
        position: relative;
        clear: both;
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 1px #adadad;
        background-color: rgba(60, 60, 60, 0.8);
        z-index: 999;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .main-navigation li {
        position: relative;
        display: inline-block;
        padding: 20px 10px;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: all 0.4;
        transition: all 0.4s;
    }
    .main-navigation li:hover {
        background-color: #fbb829;
    }
    .main-navigation li:hover > a {
        color: #fff !important;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #fbb829;
        -webkit-transition: all 0.4;
        transition: all 0.4s;   
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
        text-align: left;
        background-color: rgba(60, 60, 60, 0.8);
...zur Frage

Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

----------------------------------------------------------------------------------------------------------------------------------

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

----------------------------------------------------------------------------------------------------------------------------------

Ich hoffe ihr könnt mir helfen!

...zur Frage

Was möchtest Du wissen?