Autor |
Nachricht |
keeka
Threadersteller
Dabei seit: 22.09.2005
Ort: -
Alter: 45
Geschlecht:
|
Verfasst Do 30.07.2015 09:46
Titel in Navigationsleiste verschiedene Flächen auf einander |
|
|
Hallo Zusammen,
hoffentlich kann mir jemand helfen. Ich erstelle gerade eine Navigationsleiste mit html / CSS.
Ein großes blaues Viereck, auf dem ein kleines graues Viereck liegen soll und auf diesem dann der Text. Das blaue Viereck habe ich schon und auch die Schrift, aber wie und wo zur Hölle darf ich denn jetzt das graue Viereck mit programmieren? Ich stehe total auf dem Schlauch.
Und eine weitere Frage ergibt sich dann. Wenn die Maus über die Flächen geht, schiebt sich die Fläche leicht hoch, blau wird zu hellblau und die weiße Schrift wird zu Anthrazit. Die graue Fläche soll dann orange werden... Ich füge euch mal die bislang erstellte Codierung mit an, vielleicht kann mir jemand helfen...
So soll es aussehen, erstellt mit divs, die ich aber für die Navi nicht gebrauchen kann:
html:
<div id="inm"><div class="invertiert">INM</div><div class="pfeile">>></div></div>
css dazu:
#inm {
width: 14em;
height: 7em;
float: left;
background-color: #3990bf;
margin-top: 0;
padding: 0.8em 0;
}
.invertiert {
width: 14em;
min-height: 3em;
display: table-cell;
vertical-align: middle;
background-color: #333231;
color: #fff;
margin: auto;
padding: 0.8em;
}
.pfeile {
color: #fff;
font-size: 0.8em;
font-weight: 700;
float: right;
font-stretch: ultra-condensed;
padding: 4.5em 1em 0 0;
}
--------------
und das habe ich bislang draus gemacht:
html:
<nav id="navi1">
<ul>
<li><a href="#">INM</a>
</li>
</ul>
</nav>
CSS dazu:
nav:after {
clear: left;
content: "";
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
}
nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
nav ul ul li {
float: none;
margin-bottom: 0.2em;
}
nav a,
nav span {
background-color: #3990bf;
color: #fff;
display: block;
font-weight: normal;
margin: 0.6em 0 0 0;
padding: 0.4em;
text-decoration: none;
width: 14em;
min-height: 6em;
margin-right: 0.5em;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
nav a:focus,
nav a:hover,
nav span {
color: #333231;
background-color: #82b9d7;
}
nav a:focus,
nav a:hover {
margin-top: 0;
padding: 1em 0.4em 0.4em;
}
nav ul ul a:hover {
margin: 0.6em 0 0 0;
padding: 0.4em;
}
Ich bin noch Anfänger und habe lange nicht mit CSS gearbeitet. Ich hatte bei http://wiki.selfhtml.org/wiki/ den Anfang gefunden und den umgeschrieben. Aber ich komme nicht weiter...
Kann mir jemand helfen?
Wenn ihr weitere Infos braucht bitte melden...
Danke schön!
keeka
|
|
|
|
|
Kartöffelchen
Dabei seit: 16.03.2012
Ort: Strawberry Fields
Alter: -
Geschlecht:
|
Verfasst Do 30.07.2015 19:45
Titel
|
|
|
Vielleicht geht das hier in die richtige Richtung?!
HTML
Code: | <div class="navigation">
<div class="balken">
<nav class="navi1">
<ul>
<li><a href="#">INM</a></li>
</ul>
</nav>
</div>
</div>
|
CSS
Code: | .navigation{
width:300px;
height:150px;
margin:0 0 0 0;
background:#3990bf;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
.navigation:hover{
margin-top:-20px;
height:170px;
background:#82b9d7;
}
.navigation:hover .balken {
margin-top:40px;
background:#FF8300;
}
.navigation:hover .balken .navi1 a {
color:#646464;
}
.navi1 ul {
margin:8px;
}
.balken{
position:absolute;
width:300px;
margin-top:20px;
background:#333231;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
.balken:hover{
background:#FF8300;
}
nav li{
list-style:none;
}
nav a{
color:#fff;
text-decoration:none;
}
.navigation a:focus,
.navigation a:hover{
color:#333231;
} |
Habe allerdings mal auf px gesetzt, em verwirrt mich.
Zuletzt bearbeitet von Kartöffelchen am Do 30.07.2015 19:51, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
keeka
Threadersteller
Dabei seit: 22.09.2005
Ort: -
Alter: 45
Geschlecht:
|
Verfasst Fr 31.07.2015 10:45
Titel
|
|
|
Das geht schon in die Richtung, super. Ich werde mal schauen, wie ich das bei mir einpflegen kann. Danke Dir!
Edit: Jetzt besteht jedoch das Problem, dass nur der Text der Link ist, hätte gerne die gesamte Fläche als Link, so dass man nicht erst auf den Text fokussieren muss. Funktioniert das?
Keeka
Zuletzt bearbeitet von keeka am Fr 31.07.2015 10:55, insgesamt 1-mal bearbeitet
|
|
|
|
|
Kartöffelchen
Dabei seit: 16.03.2012
Ort: Strawberry Fields
Alter: -
Geschlecht:
|
Verfasst Fr 31.07.2015 15:06
Titel
|
|
|
Jo, setzt halt das a um den div "navigation".
|
|
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 31.07.2015 16:27
Titel
|
|
|
Ich hab's auch mal versucht.
Das Weglassen der Umbrüche zwischen den Listenelementen ist essenziell zur Vermeidung eines optischen Leerraumes zwischen den Navigationspunkten, welche im Zusammenhang mit inline-block erzeugt werden.
|
|
|
|
|
keeka
Threadersteller
Dabei seit: 22.09.2005
Ort: -
Alter: 45
Geschlecht:
|
Verfasst Mo 03.08.2015 10:16
Titel
|
|
|
Perfekt! Danke schön Kartöffelchen und auch SimonDerDude, ihr habt mir sehr geholfen!!!
Keeka
|
|
|
|
|
|
|
|
Ähnliche Themen |
in einander verschachtelte divs?
*.swf dateien aus einander nehmen!!
Navigationsleiste
navigationsleiste php
[CSS] Navigationsleiste Schwierigkeiten
Navigationsleiste zentrieren
|
|