Mobile Webseite

Janine17 · 13.01.2012

Hallo ihr Lieben,

ich hab da mal ne Frage. Und zwar versuche ich mich an einer mobilen Webseite. Ich eine zweite css angelegt und darin am Anfang:
@media all and (min-width: 320px) geschrieben.

Ist auch alles fein, hab meinen content angepasst etc. auch alles fein.

Meine Frage ist, ich hatte vorher Text im Content will nun aber meine Navis als Buttons in der Mitte platzieren und die sollen bei klick dann den Inhalt anzeigen. Muss ich dafür auch eine neue html Datei anlegen? und die mobil css darauf anwenden? Ich bin irgendwie total verwirrt. Ich dachte man legt ne zweite css an und darauf greift die Datei dann zu aber wie mach ich das mit dem Textinhalten etc.?

Vlt. habt ihr ja nen Tipp oder nen feines Tutorial für mich, welches eine Webseite zeigt und die passende mobile Seite. Ich möchte gerne mal eine Umsetzung sehen.

Ich danke euch vorab schon mal

cebito · 14.01.2012

AW: Mobile Webseite

Janine17 schrieb:
@media all and (min-width: 320px)

Dir scheint nicht klar, was diese Anweisung bewirkt. "media all" heißt alle Medien, sprich auch print usw. Hier wäre "media screen" angebracht. "min-width: 320px" bewirkt, das Alle mit einem Screen größer 320px (was wohl zu 99,9% zutrifft) diese Regeln übernehmen. "max-width" wäre hier passender, da die Regeln ja für kleine Bildschirme gelten sollen.

Wenn du diese Probleme bereinigst, erübrigt sich vielleicht auch der Rest der Frage, sonst bitte einen Link einstellen, so lässt sich gezielt helfen.

patrick_l · 14.01.2012

AW: Mobile Webseite

Du kannst dein direkt im head-Bereich (head-tag) deiner Seite festlegen welches Stylesheet gelesen werden soll. Legst also ein separates CSS an und mit:

HTML:

<link rel="stylesheet" type="text/css" href="css/name.css" media="only screen and (max-width:600px)" charset="utf-8" />
oder
<link rel="stylesheet" type="text/css" href="css/handheld.css" media="only handheld and (max-width:?px)" charset="utf-8" />

Funktioniert ähnlich bzw. wie die Konditionalen Kommentare (Conditional Comments) für den IE. Du sprichst halt die einzelnen Geräte an, auf denen die Website angezeigt werden soll. So ist es auch möglich die Site für bestimmte Auflösungen anzupassen bzw. das passende CSS zu laden.

Grüße Patrick

Janine17 · 14.01.2012

AW: Mobile Webseite

Pardon ich meinte natürlich max-width und das mit media=all war nur mal als Test ob ich es überhaupt hinbekomme. Ich weiß das es screen, handheld, etc. gibt. Das ist auch nicht mein Problem. Ich weiß auch das ich via link rel die beiden css einbinde.

Meine Frage war: Wenn ich auf meiner Webseite Text habe und diese will ich bei meiner mobilen Seite erst beim Klick auf den Button haben, wie ich sowas anstelle.

Danke aber trotzdem

Ps: Hier mal der Code, aber ich weiß nicht wie ich meine Navi als Buttons in der Css angebe und wie ich den Text von der Startseite wegbekomme und hinter einen Button lege. Vlt. habt ihr ne Idee.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Terra Piú</title>
<link rel="stylesheet" type="text/css" href="css/formate.css">
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="handheld" />
</head>  
<body>      
  <div id="wrapper">                
    <div id="header">    
      <img src="bilder/header.jpg" width="1280" alt="Logo_Terra Piú">      
    </div>           
    <div id="schaltflaeche">
      <ul id="Navigation">        
        <li id="one">
          <a href="index.html">Start</a>
        </li> 
        <li id="two">
          <a href="terra.html">Terra pi&ugrave;</a>
        </li>         
      <li id="three">
          <a href="garten.html">Gartenanlagen </a>      
           <ul>
            <li id="three_1">
              <a href="wasser.html">Wasserg&auml;rten</a>
            </li>        
            <li id="three_2">
              <a href="winter.html">Winterg&auml;rten & Sommerh&auml;user</a>
            </li> 
            <li id="three_3">
              <a href="mauer.html">Mauern & Wege </a>
            </li> 
            <li id="three_4">
              <a href="licht.html">Licht & Ambiente</a>
            </li>   
          </ul>   
           </li>
        <li id="four">
          <a href="accessoires.html">Accessoires</a> </li>   
          <ul>        
            <li id="five">
              <a href="baum.html">Baumpflege</a>
            </li>                   
        <li id="six">
          <a href="jahreszeiten.html">Jahreszeiten</a>
        </li>  
      </ul> 
      </ul> 
    </div>   
    <div id="content">
            <div id="text"><h2>Terra più – Ihre Gartenarchitekten</h2>
             Ein sch&ouml;ner Garten oder eine Parkanlage ist wie ein entspannender Kurzurlaub für Ihre Seele. Entfliehen Sie dem Alltagsstress, 
             entspannen Sie sich und tanken Sie neue Energie in Ihrer gr&uuml;nen Oase. Ihr Garten kann sehr viel mehr sein als nur ungenutzte Au&szlig;enfl&auml;che. 
             <br><br>Mit viel Liebe und Sinn für das Stilvolle realisieren wir Ihre Gartentr&auml;ume. Lassen Sie sie mit uns wahr werden. Terra più zeigt Ihnen, 
             wie Sie Ihr Gr&uuml;n zu Ihrem Wunschgarten verwandeln können. Themeng&auml;rten schaffen ein besonderes Ambiente. Je nach Ihren W&uuml;nschen – ob 
             mediterran, klassisch oder als Bauerngarten – uns sind keine Grenzen gesetzt.
            </div>
            <div id="bilder_rechts">
        <img src="bilder/Bild_20.jpg" alt="architektur"> 
      </div> 
      <div id="footer"><a href="impressum.html">Impressum  </a>  
      </div>  
    </div>  
  </div>
</body>
</html>

Code:

/* CSS Document */
body{
  margin:0;
  padding:0;
  font: normal 100.01% Verdana, Helvetica, Arial, sans-serif;
  background-color:#f3cbb4;
}

#header{
  z-index:10;            
  width:1280px;
  height:263px;
  position:relative;
  left:50%;
  margin-top:50px;            
  margin-left:-640px;  
}

#content{
  z-index:1;
  position:absolute;
  width:1280px;
  height:800px;
  left:50%;
  top:50%;
  margin-left:-640px;   
  margin-top:-400px; 
  background-color:#FFE7C6;
}

#wrapper{
  position:relative;
  margin-left:auto !important;
  margin-right:auto !important;
  width:1280px;
  height:798px;
}
 
body{
  font:normal 100.01% Helvetica, Arial, sans-serif;
  font-size:13px;
}

a:link{color:#800021;}
a:visited{color:#800021;}
a:focus{font-weight:bold; font-weight:bold;}
a:hover{color:black;  font-weight:bold;}
a:active{color:#800021;}

#schaltflaeche{
  z-index:15;
  width:1280px;
  position:relative;
  left:50%;
  margin-left:-640px;
  font-family:arial,helvetica,verdana;
  font-size:12px;
}

ul#Navigation{
  margin:0; 
  padding:0;
  text-align:left;
  border-bottom:45px solid black;
}

ul#Navigation li{
  z-index:7;
  font-weight:bold;
  font-size:18px;
  height:20px;
  list-style:none;
  float:left;
  position:relative;
  padding-left:50px;
  padding-top:0.5em;
  padding-bottom:0.8em;                                      
  background:-moz-linear-gradient(top, rgb(192,224,0), rgb(144,192,0)); /* Firefox */ 
} 

ul#Navigation li ul{
  z-index:8;
  margin:0; 
  padding:0;
  padding-top:12px;
  padding-left:5px; 
  position:absolute;
  left:-0.3em;
}

ul#Navigation li ul li{
  float:none;
  display:block;
}

ul#Navigation a{
  display:block;
  color:black;
  text-decoration:none;
}
  
ul#Navigation a:hover, li a#aktuell{
  color:white;
}

/* aktuelle Rubrik kennzeichnen */
li a#aktuell{                          
  color:white; 
  display:inline; 
}

/* Erweiterung zur dynamischen Ein-/Ausblendung */   
ul#Navigation li>ul{                   
  display:none;  /* Unternavigation ausblenden */
  
}
  
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul{
  color: white;
  display:inline; 
}

ul#Navigation li ul li {
display:inline;
float:left;
width:300px;
}

#Navigation #one{
  z-index:5;
  width:80px;
}

#Navigation #two{
  width:130px;
}

#Navigation #two_1{
  z-index:4;
  width:100px; 
}

#Navigation #two_2{
  z-index:3;
  width:100px;
}

#Navigation #three{
  width:180px;
}

#Navigation #four{
  width:187px;
}

#Navigation #five{
  width:190px;
}

#Navigation #six{
  width:213px;
}

#text{
  padding-left:70px;
  padding-top:40px;
  max-width:600px;
  line-height:20px;
  float:left;
  height:auto;
}

#text h1{
  color:#4682b4;
  line-height:40px;
}

#bilder_rechts{
  padding-top:40px;
  padding-right:50px;
  float:right;   
} 
  
#text{
  padding-top:350px;
  max-width:650px;
  float:left;
}

#bilder_rechts{
  padding-top:40px;
  padding-right:50px;
  float:right;
  padding-top:405px;   
}

#footer{
  clear:both;
  background:-moz-linear-gradient(top, rgb(192,224,0), rgb(144,192,0)); /* Firefox */
  height:30px;
  font-weight: bold;
  font-size:18px;
  margin-top:764px;
  padding-top:7px;
  text-align:center;
  border-bottom:2px solid black;
}

#footer a{
  text-decoration:none;
  color:black;
}

#footer a:hover{
color:white;
}

Ich würde meine mobile Seite dann mit:
@media screen and (max-width:320px)
und dann die einzelnen Bereiche bearbeiten, aber irgendwie klappt da nix...
Ich wollte meinen header mit clip beschneiden aber das klappt auch nicht:-(

hier der code (mobile)

Code:

@media screen and (max-width:320px)
{      
#body {
  width:320px; 
}

#content{
  width:320px;
}

#ul Navigation{
  width:320px;
}

#text{
  width:320px;
}

#footer{
  width:320px;
}


}

Ok ich habe gerade gelesen das clip nicht bei handheld funktioniert. Kann man irgendwie anders die Bilder beschneiden?