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

Navileiste an Bildschirmbreite autom. anpassen

B

be-proC#

Neues Mitglied
Hallo,
ich suche seit geraumer Zeit ne Möglichkeit meine Navileiste anzupassen, egal ob ich nun einen großen Bildschirm oder einen kleinen habe. Bei mir verschiebt sich immer mein ganzes Design.
ich habe es mit overflow:hidden; versucht, dabei verschwinden aber meine subunterschriften.


Code: 
#hintergrund
{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;

 
}


.ÜberMich a{
    margin:  0 ;
    padding: 0;
    border: none;
    outline: none;
   list-style:none;
  
} 

.ÜberMich{

 
   list-style:none;
   height: 40px;
   width: 100%;
   background: #4c4e5a;
   background:  -webkit-linear-gradient(top,#4c4e5a 0%,#2c2d33 100%);
   background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
   background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
   background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
   background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.ÜberMich li {
    padding-left: 0%;
    list-style:none;
    left: 400px;
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;

}

.ÜberMich ul {
    list-style:none;
    position: absolute;
    top: 40px;
    left: 10;

    opacity: 0;
    background: #1f2024;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
.ÜberMich li:hover> ul{
    list-style:none;
    opacity: 1;
  
}

.ÜberMich ul li {
    list-style:none;
    height: 10;

    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.ÜberMich li:hover > ul li {
    list-style:none;
    left: 0px;
    height: 40px;
    width: 250px;
    overflow: visible;
    padding: 0;
}

.ÜberMich li a {
    list-style:none;
  
    display: block;
    padding: 0 14px;
    margin:  6px 0;
    line-height: 28px;
    text-decoration: none;
    width: 123px;
    border-left: 1.5px solid #393942;
    border-right: 1.5px solid #4f5058;
  
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
  
    color: #f3f3f3;
    text-shadow: 3px 3px 3px rgba(0,0,0,.6);
      
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;  
}

.ÜberMich li:first-child a {
    list-style:none;
    border-left: none;
}
.ÜberMich li:last-child a{
    list-style:none;
    border-right: none;
}
.ÜberMich li:hover> a {
    list-style:none;
    color: #8fde62;
}

.ÜberMich ul li a {
    list-style:none;
    width: 200px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 2px solid #353539;
}
.ÜberMich ul li:last-child a { border: none; }

.Pin
{
    list-style:none;
    position: absolute;
    left: 15px;
    top: 10px;
}

Möglicherweise könnt Ihr mir ein Tipp geben, da ich langsam verzweiflen tue.
Mit freundlichen Gürßen
 
Hallo

Möglicherweise könnt Ihr mir ein Tipp geben, da ich langsam verzweiflen tue.
Zum Vergrößern anklicken....

Ohne Link zur Seite kaum möglich.

Deshalb ein paar allgemeine Infos:

1. Verzichte grundsätzlich auf "position: absolute;". Grade von Anfängern wird das unsinnig angewendet.

2. Gib der Navigation eine Breite von 100% und plaziere sie außerhalb von anderen Containern. Sorge ansonsten dafür das die umgebenden Container auch eine Breite von 100% haben.

Gruss

MrMurphy
 
Hallo,

wie solle wir dir mit den code schnipsel anfangen?
was gehört wo zu und wie ist das html gerüst?
Am einfachsten ein Link und zur not gibts auch free hoster oder live coder wie http://jsbin.com

so würde ich raten position: absolute; ist in der regel der fehler.

Cheffchen
 
MrMurphy schrieb:
Hallo



Ohne Link zur Seite kaum möglich.

Deshalb ein paar allgemeine Infos:

1. Verzichte grundsätzlich auf "position: absolute;". Grade von Anfängern wird das unsinnig angewendet.

2. Gib der Navigation eine Breite von 100% und plaziere sie außerhalb von anderen Containern. Sorge ansonsten dafür das die umgebenden Container auch eine Breite von 100% haben.

Gruss

MrMurphy
Zum Vergrößern anklicken....

Die Seite sit noch nicht online: ich mache sie gerade über netbeans ide 7.4
ich bin normalerweise softwareentwickler und kenne mich daher nicht gut mit php css html aus
bin eher der mit c# java sql

Code: 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css.css">
    </head>
    <body>
<div>
          
          
            <ul class="ÜberMich">             
              <li><a href="Home.php">Home</a>
                <ul>
                  
                    <li><a href="News.php" class="seite"><input type="image" src="pin.png" class="Pin">News</a></li>
                    <li><a href="be-proCSharp.php" class="seite"><input type="image" src="pin.png" class="Pin">be-proC#</a></li>
                    <li><a href="Kalender.php" class="seite"><input type="image" src="pin.png" class="Pin">Kalender</a></li>
                </ul>
                
              <li><a href="Sprachen.php">Sprachen</a>
                <ul>
                    <li><a href="CSharp.php" class="seite"><input type="image" src="pin.png" class="Pin">C#</a></li>
                    <li><a href="SQL.php" class="seite"><input type="image" src="pin.png" class="Pin">SQL</a></li>
                    <li><a href="HTML.php" class="seite"><input type="image" src="pin.png" class="Pin">HTML</a></li>
                    <li><a href="CSS.php" class="seite"><input type="image" src="pin.png" class="Pin">CSS</a></li>
                </ul>
                
              <li><a href="Sprachen.php">Programme</a>
                <ul>
                    <li><a href="Visual Studio 2012.php" class="seite"><input type="image" src="pin.png" class="Pin">Visual Studio 2012</a></li>
                    <li><a href="SQL Server Management.php" class="seite"><input type="image" src="pin.png" class="Pin">SQL Server Management</a></li>
                    <li><a href="NetBeans.php" class="seite"><input type="image" src="pin.png" class="Pin">NetBeans IDE 7.4</a></li>
                    <li><a href="Photoshop CS5.php" class="seite"><input type="image" src="pin.png" class="Pin">Photoshop CS5</a></li>
                  
                </ul>
                
              <li><a href="Sprachen.php">Programmierung</a>
                   <ul>
                       <li><a href="Workflow.php" class="seite"><input type="image" src="pin.png" class="Pin">Workflow</a></li>
                       <li><a href="Dashboard.php" class="seite"><input type="image" src="pin.png" class="Pin">Dashboard</a></li>
                       <li><a href="Management-System.php" class="seite"><input type="image" src="pin.png" class="Pin">Management-System</a></li>
                       <li><a href="Order-System.php" class="seite"><input type="image" src="pin.png" class="Pin">Order-System</a></li>
                   </ul>
              <li><a href="Kontakt.php">Kontakt</a>
                   <ul>
                       <li><a href="Anfahrt.php" class="seite"><input type="image" src="pin.png" class="Pin">Anfahrt</a></li>
                       <li><a href="Referenzen.php" class="seite"><input type="image" src="pin.png" class="Pin">Referenzen</a></li>
                   </ul>
          
              <li><a href="Impressum.php">Impressum</a>
                             
                </li>
            </ul>
        </div>    
    </body>
</html>

das ist mein index, welchen ich in jeder Maske mit include aufrufe (Navigationsleiste)
 
MrMurphy schrieb:
Hallo

da kommt noch ein typisches Anfängerproblem hinzu:

Wie soll die Aufklappnavigation auf Touchscreen-Monitoren funktionieren? Die kennen ja keinen hover-Effekt. Siehe zum Beispiel

http://blog.neofonie.de/2015/02/03/...effekt-die-usability-auf-tablets-beeinflusst/

Gruss

MrMurphy
Zum Vergrößern anklicken....
Ne Tablet ist mir eigentlich ziemlich egal, worum es mir geht, ist schlicht und ergreifend das mein Design auf jeder Bildschirmgröße zu sehen ist und momentan weiß ich eben leider noch nicht, wie das geht
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben