mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 15:25 Benutzername: Passwort: Auto-Login

Thema: in Navigationsleiste verschiedene Flächen auf einander vom 30.07.2015


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> in Navigationsleiste verschiedene Flächen auf einander
Autor Nachricht
keeka
Threadersteller

Dabei seit: 22.09.2005
Ort: -
Alter: 45
Geschlecht: Weiblich
Verfasst Do 30.07.2015 09:46
Titel

in Navigationsleiste verschiedene Flächen auf einander

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Kartöffelchen

Dabei seit: 16.03.2012
Ort: Strawberry Fields
Alter: -
Geschlecht: Männlich
Verfasst Do 30.07.2015 19:45
Titel

Antworten mit Zitat Zum Seitenanfang

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. * Wo bin ich? *


Zuletzt bearbeitet von Kartöffelchen am Do 30.07.2015 19:51, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
keeka
Threadersteller

Dabei seit: 22.09.2005
Ort: -
Alter: 45
Geschlecht: Weiblich
Verfasst Fr 31.07.2015 10:45
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Kartöffelchen

Dabei seit: 16.03.2012
Ort: Strawberry Fields
Alter: -
Geschlecht: Männlich
Verfasst Fr 31.07.2015 15:06
Titel

Antworten mit Zitat Zum Seitenanfang

Jo, setzt halt das a um den div "navigation".
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 31.07.2015 16:27
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
keeka
Threadersteller

Dabei seit: 22.09.2005
Ort: -
Alter: 45
Geschlecht: Weiblich
Verfasst Mo 03.08.2015 10:16
Titel

Antworten mit Zitat Zum Seitenanfang

Perfekt! Danke schön Kartöffelchen und auch SimonDerDude, ihr habt mir sehr geholfen!!!

* huduwudu! *

Keeka
  View user's profile Private Nachricht senden
 
Ähnliche Themen in einander verschachtelte divs?
*.swf dateien aus einander nehmen!!
Navigationsleiste
navigationsleiste php
[CSS] Navigationsleiste Schwierigkeiten
Navigationsleiste zentrieren
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.