responsible design

bibifellow · 08.08.2013

Ich habe eine Website mit einem headbereich indem sich links das logo und rechts die Navi befindet. Nun möchte ich im responsible design bei 600px die navi unter das logo fallen lassen. Egal was ich probiert habe das klappt nicht. Er fällt immer unter den headbereich und nur etwas nach links

HTML:

body { 
  background-color:#FFF; 
  color: white; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: small;  
}
 
 
/* Allgemeine Klassen und IDs */ 
div#logo {
 float:left;
 background-color: white;
 color: black;
 width: 30%;
 height: 120px;
    margin-left:-5%;
 
 background-image: url(bilder/Logo2.jpg);
 background-repeat: no-repeat;
}
 

 
/* ====================================== 
   3.  Styles für die Layoutbereiche 
====================================== */
div#wrapper { 
  background:#FFF;
  color: black; 
  width: auto;
  max-width: 960px;  
  padding: 2.08333333333%;
  margin: 0 auto; 
}
div#kopfbereich {
 width: 100%;
 height:200px;
 background: #FFF;
 color: black;
 border-bottom: 1px solid #dcdcdc;
 
}
 
 div#navibereich {
float:right;
 width:55%;
    margin-left:-4%;
 margin-top:120px;
 
 
}
  
div#navibereich_innen {
  padding-right: 10px; 
}
  div#navibereich ul { 
 
  }
  div#navibereich li {
   display:inline;
   list-style-type: none;  
      margin:  1.0416666666666665%;
   
  }  
  div#navibereich a {
 font-family: Verdana, Geneva, sans-serif;
 text-decoration: none;
 color: #848484;
 padding: 7px;
 font-size: 13px;
 background-color: #FFF; 
  
  }
  div#navibereich li a{ width:25px; }
  
  div#navibereich a:hover,
  div#navibereich a:focus {
    color:#b8d56b;
    border-bottom: none; 
 outline:none;
 
  }
   div#navibereich li a.current {
    color:#b8d56b; 
    border-bottom: none;      
  }

HTML:

<div id="wrapper">
<div id="kopfbereich">
<div id="logo"> </div>

<div id="navibereich">
<div id="navibereich_innen">
<ul>
<li ><a href="index.php?seite=startseite" 
class="<?php echo ($_GET['seite'] == 'startseite') ? 'current': 'normal'; ?>"
 tabindex="1" >Startseite</a></li>
  <li > <a href="index.php?seite=leistungen" 
  class="<?php echo ($_GET['seite'] == 'leistungen') ? 'current': 'normal'; ?>" 
  tabindex="1">Leistungen</a></li>
  
  <li> <a href="index.php?seite=referenzen"
  class="<?php echo ($_GET['seite'] == 'referenzen') ? 'current': 'normal'; ?>" 
  tabindex="1" >Referenzen</a></li>
  
  <li> <a href="index.php?seite=kontakt" 
  class="<?php echo ($_GET['seite'] == 'kontakt') ? 'current': 'normal'; ?>" 
  tabindex="1">Kontakt</a>
      <li> <a href="index.php?seite=impressum"  
      class="<?php echo ($_GET['seite'] == 'impressum') ? 'current': 'normal'; ?>" tabindex="1">Impressum</a></li></ul>
      
      
</div> <!-- Ende navibereich_innen -->
</div> <!-- Ende navibereich -->
</div><!-- Ende kopfbereich -->
</div><!-- Ende wrapper -->

in der css habe ich dann noch eingefügt was passieren soll bei 600px

HTML:

@media screen and (max-width:600px) {
  div#logo {width:100%;
   }
  div#navibereich {
   float:left;
   width:100%;
    margin-left:-4%;
 margin-top:0px;
   }
  
          }

aber es klappt nicht

cebito · 08.08.2013

AW: responsible design

bibifellow schrieb:
Egal was ich probiert habe das klappt nicht. Er fällt immer unter den headbereich und nur etwas nach links

Dein Head ist 200px hoch, IMMER, wie hoch ist denn dein Logo bei 600px (100%) Breite? Und warum floatest du die navi nach links, wenn sie doch im Dokumentfluss bleiben soll und gibst ihr auch noch ein negatives margin?

bibifellow · 08.08.2013

AW: responsible design

Das 'Logo ist 200 X 103
Damit bei 600 px die Navi nach unten fällt sollt laut tutorial das div logo bei 600px 100% erhalten
Ich floate es nach links weil normal ist es float:right nur wie hebe ich das bei @media-Screen dann wieder auf. Das negative margin weil es einfach nicht nach links rutscht.

cythux · 08.08.2013

AW: responsible design

Bei RWD arbeitet man nur in Prozentwerten, und nicht mehr in pixeln

cebito · 08.08.2013

AW: responsible design

cythux schrieb:
Bei RWD arbeitet man nur in Prozentwerten, und nicht mehr in pixeln

Das ist so nicht ganz richtig - kann man, muss man aber nicht.

bibifellow schrieb:
sollt laut tutorial

Welches Tutorial?

Rata · 08.08.2013

AW: responsible design

...responsible design klappt nie :lol:, responsive design könnte...

SCNR!

responsible = verantwortlich, fähig, befähigt, kompetent, sachkundig usw.
responsive = antwortend, reagierend, empfänglich usw.

Lieber Gruß
Rata

8)

cythux · 08.08.2013

AW: responsible design

@cebito war bezogen auf div zb nicht auf Text dort nutze ich rem und als fallback px

gute frage welches Tutorial, dort wird bestimmt width : 100%; height: auto; (nur als bsp)

@Bibifellow, wozu die ganzen tabindex

bibifellow · 09.08.2013

AW: responsible design

Für den Kopfbereich habe ich width:100% und height:auto dann klappt das mit der Navi besser jedoch ist der

HTML:

border-bottom: 1px solid #dcdcdc;

dann ganz oben
warum packt er die Divs logo und navi nicht in den kopfbereich so das der Rahmen ganz unten ist

cythux · 09.08.2013

AW: responsible design

kannst mal einen Link posten wo man es sich online anschauen kann.

da könnten wir eventuell auch schneller helfen

Myhar · 09.08.2013

AW: responsible design

Wenn du elemente floatest, nimmst du sie aus dem Dokumentfluss, das heißt, das umgebende Element hat dann keine höhe und der Border wird wohl deshalb oben sein. Das hat aber nichts mit responisve Design zu tun sondern sind Grundlagen von HTML/CSS ;-)
Ob es aber wirklich daran liegt, kann ich nicht sagen, da es kein online-Beispiel gibt, wo man das nachvollziehen kann.
Falls es daran liegt: Entweder du musst auch clearen oder dem umgebenden div ein overflow:auto geben. Musst du schauen, welche Variante bei dir funktioniert.

Generell kann ich dir aber raten, dich mehr mit den allgemeinen Grundlagen zu beschäftigen. Auch die Verwendung von Firebug kann ich dir sehr zu herzen legen, da sieht man gut, wie groß einzelne Elemente sind und wo sie positioniert werden. Falls du Firebug schon verwendest, dann ist der Hinweis natürlich hinfällig.

cythux · 09.08.2013

AW: responsible design

Dies geht auch mittles Chrome unter Tools Entwicklertools

Myhar · 09.08.2013

AW: responsible design

Natürlich. Es geht auch mittels der IE Developer Tools oder von Operas Dragonfly. Aber gerade Anfänger tun sich, meiner Erfahrung nach, mit Firebug am leichtesten.
Verzeih, dass ich es einmal verabsäumt habe, nicht jedes Tool aufzuzählen.

cythux · 09.08.2013

AW: responsible design

@Myhar aus dem Grund habe ich ja auch geschrieben das er uns mal ein link posten soll, oder er könnte uns ja auch ein archive senden.

so das wir mehr von seinem Code sehen können, als diesen snippet von oben

http://livestyle.emmet.io/ Dies auch ein interesanter link

bibifellow · 10.08.2013

AW: responsible design

Ich habe es jetzt mal ganz einfach erstellt mit einem div anstatt mit der navi und dort klappt es
das Problem muss wohl die Navigation sein

HTML:

<!DOCTYPE html>
<html lang="de">

<head>

  <meta charset="utf-8"> 
 
  

<style type="text/css">
body { 
  background-color:#0C9;
  color: white; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: small;  
}

 div#wrapper {
    color: black;
    max-width: 960px;
    padding: 2.08333333333%;
    margin: 0 auto;
    background-color: #F96;
}
img#logo {
    
    width:36.45833333333333%; /* 350 / 960 */%;
    height:auto;
    background-color: white;
    color: black;
    margin-left:-5%;
 
}
div#navi {

     
 float:right;
 width:60%;

 
 }
@media screen and (max-width:600px) {
        
    
        
        div#navi{
            float:left;
            
        
            width:100%;
            }
                         } 


</style>
<body>


<div id="wrapper">
<img src="bilder/logo.jpg" id="logo"  width="350" height="180">
<div id="navi"> Auto</div>
</div></body>
</html>

cythux · 10.08.2013

AW: responsible design

Hier mal auf die schnelle was gebastelt, eventuell hilft es dir ja