Beiträge von hüttenliesl

Nach einigem Rumprobieren habe ich festgestellt, dass die Media-Queries bei den drei Problembrowsern anscheinend gar nicht angenommen werden. Sie heißen:

1. Break: @media only screen and (min-width: 480px)
2. Break: @media only screen and (min-width: 768px)
3. Break: @media only screen and (min-width: 1140px)

Der 1. Break funktioniert noch. Aber der 2. und 3. Breakpoint nicht mehr. An was kann das liegen?

Sollte ich es selbst herausfinden werde ich das Forum auf dem Laufenden halten...

Viele Grüße,
Martina

Hi danke für die schnellen Antworten.
Kurz zu mir: Das ist in der Tat nicht meine erste Website, aber die erste Responsive. Ich bin eigentlich Vollblut-Printler, deswegen bin ich froh wenn ein Freund mir ein reales Website-Projekt zur Verfügung stellt, an dem ich üben kann.

Die Grundkenntnisse stammen aus diversen Büchern, ausprobieren, googeln, trotzdem hab ich noch oft Denkfehler und kann mir außerdem auch nicht alles merken. Umso glücklicher bin ich, dass es Menschen wie euch gibt die ihr Wissen teilen.

Online stellen ist ne prima Idee, der Link:
http://www.beliondesign.de/Testeinszwo/Au…ware/index.html

Gruß,
Hüttenliesl

Hallo, mal wieder eine Anfängerfrage:
ich habe eine Headerzeile mit Logo und Navi. Je nach Fenstergröße soll die Navi entweder drunter sein oder aber hoch rechts neben das Logo rutschen.

Selbes Prinzip/Problem gilt auch im Inhalt mit dem Hauptcontent und der Seitenspalte.
Die Rutscherei funktionert in Firefox/Opera einwandfrei, in Safari/Chrome/IE rutscht die Navi aber nicht hoch.

Hier der Code der beim Firefox fürs Hochschieben verantwortlich ist:

#title{
float:left;
display: inline;
}

#nav{
display: inline;
float:right;
width:70%;
}

Und gekürzt das html:

<!--das ist der Kopfbereich-->
<div id="header-container">
<header class="wrapper clearfix">

<div id="title" >
<a href="index.html"><img src =...></a>
</div>

<div id="nav">
<ul>
<li>...

</ul>
</div>
<div style="clear: both;"> </div> <!--cleart die gefloatete navi-->

</header>

</div>

Warum macht das ein Browser und der andere nicht???

Viele Grüße,
Martina

Das wars, Danke Anke!

Hallo!
Und noch eine Frage, da ich beim googeln nichts hilfreiches gefunden habe.

Ich habe ein Suchformularfeld, das in einer Randspalte mitläuft. Die Randspalte hat eine variable Größe in Prozent.
Wenn ich das Fenster skaliere, bleibt das Suchfeld aber immer gleich groß und zerhackt irgendwann das Layout. Wie kann ich das Suchfeld dazu zwingen, sich gefälligst der Spaltengröße anzupassen?

Hier der (vorläufige) Code:

<div id="suchfeld">
<form action="input_text.htm">
<input name="suche" type="search" maxlength="100"><input class="searchbutton" type="submit" value="Suche" />
</form></div>

#suchfeld {
margin:10px 0 10px 0;
display: block;
position: relative;
width: 100%;
}

#suchfeld form {
width: 100%;
display: block;
}

Viele Grüße,
Martina

Au mann ich verreck das war der Fehler. Und es ist eigentlich auch noch logisch dass das </li> hinten dran muss! Ojeoje ich brauch jetz erstmal en Tee^^
Ich danke euch vielmaligst!!!!!

Lg Martina

Wie meinst du, nicht in einem li drin?
Hmm vielleicht etwas unübersichtlich hier mal die Struktur gekürzt...

<ul>
<li>...</li>
<li><a...>Details</a></li>
<ul>
<li><a...>...</a></li>
<li><a...>...</a></li>
<li><a...>...</a></li>
<li><a...>...</a></li>
</ul>
</ul>

ist das falsch?? Muss ich das schließende </li> bei Details ganz ans Ende von der zweiten Liste setzen?

Lg Martina

Hallo zusammen,
ich bin neu hier und auch relativ frisch mit CSS3 unterwegs. Manches möchte noch nicht so funktionieren wie es soll.
Seit Tagen hänge ich an einem CSS-Aufklappmenü für eine (responsive) Website.
Das Menü sieht so aus:

<div id="nav">
<ul>
<li><a href="index.html">Start</a></li>

<li><a href="details.html">Details</a></li>
<ul><li><a href="">Internetfrontend</a></li>
<li><a href="">Features</a></li>
<li><a href="">Verwaltung</a></li>
<li><a href="">Handling</a></li>
</ul>
<li><a href="#">Onlinedemo</a></li>
<ul><li><a href="">Frontend Internet</a></li>
<li><a href="">Backend Admin</a></li>
<li><a href="">Backend Agentur</a></li>
<li><a href="">Musterhomepage</a></li>
</ul>
<li><a href="#">Preisangebot</a></li>
<li><a href="#">Kontakt</a></li>

</ul>
</div>

Solange ich nichts bestimmtes tu, sind alle Menüpunkte bei der Mobile-Version brav untereinander. Ich möchte aber, dass die 2. Naviebene nur beim Hovern eines Listenpunktes eingeblendet wird. Da scheitere ich. Display:none funktioniert noch, aber weiter tut sich nix . Hab ich Tomaten auf den Augen???

/*klapp mich auf*/
#nav ul ul{
display: none;
}


#nav li:hover ul {
display: block;
}

Manche Tutorials arbeiten auch mit verschieben anstatt mit display, hab ich auch getestet, geht auch nicht. Ich vermute den Fehler bei "#nav li:hover ul ", aber ich komm einfach net drauf

Grüße, Martina