Max-width mit Prozentwerten funktioniert nicht für Formularfelder?

josifine

Hallo ihr Lieben,

Ich habe die Maximalbreite meiner Formularfelder innerhalb der Media Queries definiert. Anfangs habe ich mit "max-width" und Prozentangabe gearbeitet, allerdings entsteht dann ein overflow, wenn man das Browserfenster unter 480 Pixel kleiner zieht. Kann mir jemand erklären, warum es nur mit "width" funktioniert?

fetischtraum-kiel.de/kontakt

Code

@media only screen and (max-width: 480px) {


/* Formular  Styling */


input, textarea, select {


     width: 93%;


     margin-left: 7%;


}

Alles anzeigen

Ich wäre über Eure Hilfe sehr dankbar! Ich schreibe gerade eine Hausarbeit über das Projekt und empfehle darin eigentlich, mit max-width zu arbeiten... Habe ich auch in einem CSS Buch so gefunden.

Grüße,
Josi

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

bgeissler

Hast du gelesen?
http://de.selfhtml.org/css/eigenschaf…g.htm#max_width

bionade

Hi josifine,
Gibts einen Link? Ich würds mir gerne ansehen.

@ bgeissler: Ja, ich habs gelesen. Was ist dort die Info, die das Problem erklärt? Ich habs nicht gesehen, aber vielleicht überlesen.

Grüße!

josifine

Hey ihr beiden,
vielen Dank für Eure Antworten! Habe leider keine Mail bekommen, deswegen Eure Antworten nicht bemerkt.

Ja, gelesen habe ich zu max-width und width, habe auch keine Info gefunden, die das Problem klärt.

Seite ist oben schon drin, hier aber noch mal als Link:

http://fetischtraum-kiel.de/kontakt

Melewo

Zitat von josifine

Ja, gelesen habe ich zu max-width und width, habe auch keine Info gefunden, die das Problem klärt.

Dann Link folgen und noch einmal lesen, dabei auch das Beispiel ansehen, in dem gut ersichtlich wird, was passiert, wenn ein Element mit max-width:250px formatiert wurde, jedoch eigentlich mehr Platz als 250px beanspruchen würde.

http://de.selfhtml.org/css/eigenschaf…e/max_width.htm

max-width habe ich letztenz bei einem Image-Element eingesetzt, bei dem sich ein Image im Gegensatz zur restlichen Seite nicht responsiv verhalten sollte, also die max-width Größe beibehalten, ohne jedoch bei Verkleinerung des Browserfensters ein Div zu sprengen und somit nicht bei Verkleinerung des Fensters das ganze Design zerstören sollte, dafür lieber eine Scroll-Leiste einblenden, wenn Div width unter max-width Image kommt.

josifine

Hallo,

tut mir Leid, ich verstehe es einfach nicht.

Die Beispiele habe ich mir angeguckt und auch mal mit Firebug rumprobiert.

Zitat

[COLOR=#333333]Dann Link folgen und noch einmal lesen, dabei auch das Beispiel ansehen, in dem gut ersichtlich wird, was passiert, wenn ein Element mit max-width:250px formatiert wurde, jedoch eigentlich mehr Platz als 250px beanspruchen würde. [/COLOR]
http://de.selfhtml.org/css/eigenscha.../max_width.htm

Das ist klar. Schrift, die über die max-width-Angabe herausgehen muss, wird einfach darübergeschrieben oder versteckt.
Ich habe ja aber ein Forumlar-Feld. Dieses braucht ja nicht mehr Platz, sollte also auch nicht drüber gehen.

Verstehe ich das ganze vielleicht vom Ansatz her falsch?

Wo genau liegt der Unterschied zwischen max-width und width Angaben, wenn ich Prozentwerte verwende? Nehme ich beide Beispiele aus Self-Html ( http://de.selfhtml.org/css/eigenschaften/anzeige/width.htm & http://de.selfhtml.org/css/eigenschaf…e/max_width.htm) und ändere die Breitenangaben in gleiche Prozentwerte, verhalten sie sich gleich. Wozu brauche ich dann überhaupt max-width? Bzw warum funktioniert in meinem Beispiel die width Angabe, aber nicht die max-width? Bezieht sich max-width vielleicht auf ein anderes Element, sodass der Prozentwert nicht mehr funktioniert?

josifine

Also es muss tatsächlich daran liegen, dass sich max-width auf ein anderes Element bezieht.

mit "width" benötige ich einen Wert von 93%, dann bewegt sich die Breite relativ zum Browserfenster mit.
mit "max-width" benötige ich 55%, dann bliebt die Breite aber auch fest, wenn ich das Browserfenster größer ziehe (Außer bei den Breakpoints).

Bei max-width nimmt er sich also anscheinend einen anderen Ausgangswert. Leider weiß ich nicht, wie ich diesen herausfinden soll.

Die Erklärung könnte hier zu finden sein: http://www.thestyleworks.de/ref/max-width.shtml

Zitat

Der berechnete Wert für die Breite des Elements wird vorläufig unter Berücksichtigung der gegebenen anderen Werte bestimmt. Hierbei werden max-width und min-width noch nicht mit einbezogen.

So richtig verstehe ich das aber immer noch nicht ;-)

Ist ja auch zu mühselig für Euch, das herauszufinden. Ich belasse es einfach bei der Angabe "width: 93%". So funktionierts ja.

Über eine Erklärung würde ich mich natürlich trotzdem freuen ;-)

Melewo

Du hast ja bei Input-Elementen immer noch die Attribute zum Formatieren, wie:

Zitat

size bestimmt die Anzeigebreite des Elements

http://de.selfhtml.org/html/referenz/attribute.htm#input

Und bei einer Textarea:

Zitat

cols bestimmt die Anzahl Zeichen pro Zeile
rows bestimmt die Anzahl sichtbarer Zeilen

http://de.selfhtml.org/html/referenz/attribute.htm#textarea

Mit CSS ist es dabei unterschiedlich, was Du bestimmen kannst, bei einem Upload-Formular bestimmt zum Beispiel einzig der Browser. So helfen meist nur Testreihen, bzw. ab und an auch die Suche, ob sich ein CSS-Ersatz für size (oder andere Attribute) finden lässt. Nun habe ich gerade selbst ein wenig getestet und denke das max-width kein CSS-Ersatz für size ist oder sein könnte. Wo ich es anwendete, war ja kein Input-Element im Spiel.

Auch nach dieser Seite (unter Input schauen), kann size nur durch width, nicht jedoch durch max-width ersetzt werden:

Code

HTML-Attribut/Wert     CSS-Realisierung:
    size                 width: <length>

http://www.thestyleworks.de/tut-art/html-css.shtml

Wobei ich nur nach dem gehe, was ich in einem Buch oder im Web finde, ohne die Referenzen im Detail zu kennen. Einige Entwickler kennen sich da sicherlich besser aus.

Und hier noch mein Test, einzig size und/oder width ergaben ein richtiges Ergebnis, max-width wird von den Browsern (habe jetzt nur mit FF getestet) nicht beachtet:

HTML

<!DOCTYPE html>
<html>


<head>
<title>Max und Weit</title>
<style type="text/css">
.inp1 {
    border: 1px solid #f00;
    overflow: hidden;
    width: 200px;
}
.inp2 {
    border: 1px solid #f00;
    overflow: hidden;
    max-width: 200px;
}
.linie {
    margin-left: 0px;
    width: 200px;
}
</style>
</head>


<body>
<h1>Max und Weit</h1>
<h2>Formular 1</h2>
<form action="#">
  <label for="inp1">Input 1:</label><br>
  <input class="inp1" name="inp1" id="inp1" type="text" value="Heute ist das Wetter weniger wunderschön"><br>
  <label for="inp2">Input 2:</label><br>
  <input class="inp2" name="inp2" id="inp2" type="text" value="Heute ist das Wetter weniger wunderschön"><br>
</form>
<h2>Formular 2</h2>
<form action="#">
  <label for="inp3">Input 3:</label><br>
  <input class="inp1" name="inp3" id="inp3" type="text" size="32" value="Heute ist das Wetter weniger schön"><br>
  <label for="inp4">Input 4:</label><br>
  <input class="inp2" name="inp4" id="inp4" type="text" size="32" value="Heute ist das Wetter weniger schön"><br>
</form>
<hr class="linie">
</body>
</html>

Alles anzeigen

Melewo

max-width:

Zitat

Angewendet auf: Alle Elemente, außer auf nicht-ersetzte Inline-Elemente und Tabellenelemente
Prozentwerte: Beziehen sich auf die Breite des umschließenden Blocks

http://www.edition-w3.de/TR/1998/REC-CS…ml#heading-10.4

Wobei aber Input zu den ersetzten Elementen gehören soll (ohne es genau zu wissen, sollte wohl zuvor mehr lesen).

http://www.css4you.de/elemente.html#inline

Wenn Du es nun etwas genau wissen möchtest, es steht da so einiges über ersetzte und nicht ersetzte Elemente und viele andere interessante Dinge (vermute ich zumindest):

http://www.edition-w3.de/TR/1998/REC-CSS2-19980512/

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Max-width mit Prozentwerten funktioniert nicht für Formularfelder?

Jetzt mitmachen!