Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Janine17" data-source="post: 1894985" data-attributes="member: 168320">AW: Mobile WebseitePardon 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&nbsp; 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<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":-)" title="Smile&nbsp; &nbsp; :-)" loading="lazy" data-shortname=":-)" />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]&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Terra Piú&lt;/title&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/formate.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/mobile.css&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; /&gt;&lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;bilder/header.jpg&quot; width=&quot;1280&quot; alt=&quot;Logo_Terra Piú&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;schaltflaeche&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;ul id=&quot;Navigation&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;one&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;index.html&quot;&gt;Start&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;two&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;terra.html&quot;&gt;Terra pi&amp;ugrave;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;three&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;garten.html&quot;&gt;Gartenanlagen &lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;three_1&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;wasser.html&quot;&gt;Wasserg&amp;auml;rten&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;three_2&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;winter.html&quot;&gt;Winterg&amp;auml;rten &amp; Sommerh&amp;auml;user&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;three_3&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;mauer.html&quot;&gt;Mauern &amp; Wege &lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;three_4&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;licht.html&quot;&gt;Licht &amp; Ambiente&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;four&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;accessoires.html&quot;&gt;Accessoires&lt;/a&gt; &lt;/li&gt;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;five&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;baum.html&quot;&gt;Baumpflege&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li id=&quot;six&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;jahreszeiten.html&quot;&gt;Jahreszeiten&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt; &nbsp; &nbsp; &nbsp; &lt;/ul&gt; &nbsp; &nbsp; &lt;/div&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;content&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;text&quot;&gt;&lt;h2&gt;Terra più – Ihre Gartenarchitekten&lt;/h2&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Ein sch&amp;ouml;ner Garten oder eine Parkanlage ist wie ein entspannender Kurzurlaub für Ihre Seele. Entfliehen Sie dem Alltagsstress, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; entspannen Sie sich und tanken Sie neue Energie in Ihrer gr&amp;uuml;nen Oase. Ihr Garten kann sehr viel mehr sein als nur ungenutzte Au&amp;szlig;enfl&amp;auml;che. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;br&gt;&lt;br&gt;Mit viel Liebe und Sinn für das Stilvolle realisieren wir Ihre Gartentr&amp;auml;ume. Lassen Sie sie mit uns wahr werden. Terra più zeigt Ihnen, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; wie Sie Ihr Gr&amp;uuml;n zu Ihrem Wunschgarten verwandeln können. Themeng&amp;auml;rten schaffen ein besonderes Ambiente. Je nach Ihren W&amp;uuml;nschen – ob &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; mediterran, klassisch oder als Bauerngarten – uns sind keine Grenzen gesetzt.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;bilder_rechts&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;bilder/Bild_20.jpg&quot; alt=&quot;architektur&quot;&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;footer&quot;&gt;&lt;a href=&quot;impressum.html&quot;&gt;Impressum&nbsp; &lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; [/HTML][CODE]/* CSS Document */body{&nbsp; margin:0;&nbsp; padding:0;&nbsp; font: normal 100.01% Verdana, Helvetica, Arial, sans-serif;&nbsp; background-color:#f3cbb4;}#header{&nbsp; z-index:10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:1280px;&nbsp; height:263px;&nbsp; position:relative;&nbsp; left:50%;&nbsp; margin-top:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left:-640px;&nbsp; }#content{&nbsp; z-index:1;&nbsp; position:absolute;&nbsp; width:1280px;&nbsp; height:800px;&nbsp; left:50%;&nbsp; top:50%;&nbsp; margin-left:-640px;&nbsp;&nbsp; &nbsp; margin-top:-400px; &nbsp; background-color:#FFE7C6;}#wrapper{&nbsp; position:relative;&nbsp; margin-left:auto !important;&nbsp; margin-right:auto !important;&nbsp; width:1280px;&nbsp; height:798px;}&nbsp;body{&nbsp; font:normal 100.01% Helvetica, Arial, sans-serif;&nbsp; font-size:13px;}a:link{color:#800021;}a:visited{color:#800021;}a:focus{font-weight:bold; font-weight:bold;}a:hover{color:black;&nbsp; font-weight:bold;}a:active{color:#800021;}#schaltflaeche{&nbsp; z-index:15;&nbsp; width:1280px;&nbsp; position:relative;&nbsp; left:50%;&nbsp; margin-left:-640px;&nbsp; font-family:arial,helvetica,verdana;&nbsp; font-size:12px;}ul#Navigation{&nbsp; margin:0; &nbsp; padding:0;&nbsp; text-align:left;&nbsp; border-bottom:45px solid black;}ul#Navigation li{&nbsp; z-index:7;&nbsp; font-weight:bold;&nbsp; font-size:18px;&nbsp; height:20px;&nbsp; list-style:none;&nbsp; float:left;&nbsp; position:relative;&nbsp; padding-left:50px;&nbsp; padding-top:0.5em;&nbsp; padding-bottom:0.8em;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:-moz-linear-gradient(top, rgb(192,224,0), rgb(144,192,0)); /* Firefox */ } ul#Navigation li ul{&nbsp; z-index:8;&nbsp; margin:0; &nbsp; padding:0;&nbsp; padding-top:12px;&nbsp; padding-left:5px; &nbsp; position:absolute;&nbsp; left:-0.3em;}ul#Navigation li ul li{&nbsp; float:none;&nbsp; display:block;}ul#Navigation a{&nbsp; display:block;&nbsp; color:black;&nbsp; text-decoration:none;}&nbsp; ul#Navigation a:hover, li a#aktuell{&nbsp; color:white;}/* aktuelle Rubrik kennzeichnen */li a#aktuell{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:white; &nbsp; display:inline; }/* Erweiterung zur dynamischen Ein-/Ausblendung */&nbsp;&nbsp; ul#Navigation li&gt;ul{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; display:none;&nbsp; /* Unternavigation ausblenden */&nbsp; }&nbsp; ul#Navigation li:hover&gt;ul, ul#Navigation li&gt;a#aktuell+ul{&nbsp; color: white;&nbsp; display:inline; }ul#Navigation li ul li {display:inline;float:left;width:300px;}#Navigation #one{&nbsp; z-index:5;&nbsp; width:80px;}#Navigation #two{&nbsp; width:130px;}#Navigation #two_1{&nbsp; z-index:4;&nbsp; width:100px; }#Navigation #two_2{&nbsp; z-index:3;&nbsp; width:100px;}#Navigation #three{&nbsp; width:180px;}#Navigation #four{&nbsp; width:187px;}#Navigation #five{&nbsp; width:190px;}#Navigation #six{&nbsp; width:213px;}#text{&nbsp; padding-left:70px;&nbsp; padding-top:40px;&nbsp; max-width:600px;&nbsp; line-height:20px;&nbsp; float:left;&nbsp; height:auto;}#text h1{&nbsp; color:#4682b4;&nbsp; line-height:40px;}#bilder_rechts{&nbsp; padding-top:40px;&nbsp; padding-right:50px;&nbsp; float:right;&nbsp;&nbsp; } &nbsp; #text{&nbsp; padding-top:350px;&nbsp; max-width:650px;&nbsp; float:left;}#bilder_rechts{&nbsp; padding-top:40px;&nbsp; padding-right:50px;&nbsp; float:right;&nbsp; padding-top:405px;&nbsp;&nbsp; }#footer{&nbsp; clear:both;&nbsp; background:-moz-linear-gradient(top, rgb(192,224,0), rgb(144,192,0)); /* Firefox */&nbsp; height:30px;&nbsp; font-weight: bold;&nbsp; font-size:18px;&nbsp; margin-top:764px;&nbsp; padding-top:7px;&nbsp; text-align:center;&nbsp; border-bottom:2px solid black;}#footer a{&nbsp; text-decoration:none;&nbsp; color:black;}#footer a:hover{color:white;}[/CODE]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){&nbsp; &nbsp; &nbsp; #body {&nbsp; width:320px; }#content{&nbsp; width:320px;}#ul Navigation{&nbsp; width:320px;}#text{&nbsp; width:320px;}#footer{&nbsp; width:320px;}}[/CODE]Ok ich habe gerade gelesen das clip nicht bei handheld funktioniert. Kann man irgendwie anders die Bilder beschneiden?</blockquote>

[QUOTE="Janine17, post: 1894985, member: 168320"] [b]AW: Mobile Webseite[/b] 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ù</a> </li> <li id="three"> <a href="garten.html">Gartenanlagen </a> <ul> <li id="three_1"> <a href="wasser.html">Wassergärten</a> </li> <li id="three_2"> <a href="winter.html">Wintergärten & Sommerhä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ö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ünen Oase. Ihr Garten kann sehr viel mehr sein als nur ungenutzte Außenfläche. Mit viel Liebe und Sinn für das Stilvolle realisieren wir Ihre Gartenträume. Lassen Sie sie mit uns wahr werden. Terra più zeigt Ihnen, wie Sie Ihr Grün zu Ihrem Wunschgarten verwandeln können. Themengärten schaffen ein besonderes Ambiente. Je nach Ihren Wü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> [/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; }[/CODE] 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; } }[/CODE] Ok ich habe gerade gelesen das clip nicht bei handheld funktioniert. Kann man irgendwie anders die Bilder beschneiden? [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?