formatierung eines Formulars/Select Menü

[Voselix]

Hallo Leute,

ich hab mal wieder eine dumme Frage :-)

Ich hab ein Formular erstellt und per css formatiert mit:

.contactblock {
    display:block;
}

input,
textarea {
    width:100%;
    padding:.5em;
    border:1px solid #ccc;
}

input:focus,
textarea:focus {
    background:#f2f2f2;
}

.submit_container {
    margin-top:2em;
    margin-bottom:1em;
}

Jetz kriege ich die Formatierung des Select Menüs nicht angepackt---mir fehlt der Bezeichner, mit dem ich die Abstände und den block setzen kann.

Kann mir da jemand helfen?

GLG
Vosi

[Kahmoon]

Ganz einfach "select"

select {
    margin:15px 0;
}

[folkfreund]

ich hab mal wieder eine dumme Frage :-)

Es gibt (fast) keine dummen Fragen, aber dumme Leute, die keine Fragen stellen

Die Elemente musst du nicht erraten. Du kannst sie im Browser mit den Entwicklertools untersuchen. Das ist allerdings manchmal etwas tricky, wenn die Elemente nur dynamisch erzeugt werden. Aber wenn sie erstmal sichtbar sind, dann sollten sie auch im Inspector erscheinen.

[Voselix]

ok---danke....sieht jetzt schon besser aus....aber.....................

Das Select Menü lässt sich nicht mehr aufklappen.....wenn man drunter rumklickt ziemlich links öffnet sich das Menü....

das hat irgendwie den Bereich, der anklickbar im Select Menü ist nicht mitgenommen....

:-(

[Kahmoon]

Geht bei mir

[Voselix]

Hab folgendes noch reingesetzt...jetzt geht es...

aber irgendwie scheint das nicht der beste Weg zu sein....oder?

select {
margin:15px 0;
padding:.5em;
}

label.select {
display:block;
}

.styled_select.select {
width:100%;
}

select#ctrl_4 {
width:100%;
margin-top:-22px;
}

[Andreas]

Wieder mal ne schlechte Idee zu meinen, wenn man alle möglichen JS-Bilbliotheken lädt und alle zur Verfügung stehenden JS-Plugins, würde man der Seite was Gutes tun.

Entscheide dich für jQuery o. MooTools (es gehen beide zusammen, das sollte man aber nur machen, wenn man es wirklich benötigt). Lade sie am besten lokal.

Entscheide dich für die Plugins, welche du benötigst,

• nur ein Accordion (nicht 2), brauchst du überhaupt eins?
• nur eine Lightbox (nicht 3 - colorbox, mediabox, slimbox), hast du überhaupt eine im Einsatz?
• nur einen Tablesorter (nicht 2), benutzt du überhaupt sortierbare Tabellen?
• brauchst du den mediaelementplayer? Bietest du Videos oder Audios an?
• nur einen Slider (nicht 3 - 2x core und flexslider), brauchst du einen Slider?
• brauchst du Chosen? Hast du Formularelemente, welche davon profitieren würden?

Brauchst du wirklich die Thirdparty-Ressource href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"?

Validiere dein HTML

Result: 3 Fehler / 0 Warnungen

Info: W3c Online Validation

line 15 column 82 -
  Fehler: Bad value “https://fonts.googleapis.com/css?family=PT Sans”
  for attribute “href” on element “link”: Illegal character in query: space is not allowed.
line 98 column 89 -
  Fehler: Bad value “files/images/referenzen/slideshow/1 2_result.jpg”
  for attribute “src” on element “img”: Illegal character in path segment: space is not allowed.
line 101 column 89 -
  Fehler: Bad value “files/images/referenzen/slideshow/2 3_result.jpg”
  for attribute “src” on element “img”: Illegal character in path segment: space is not allowed.
line 90 column 37 -
  Info: Section lacks heading. Consider using “h2”-“h6” elements
  to add identifying headings to all sections.

SELECT: Chosen bringt auch stylect mit, evtl. passt das dort nicht zu deinem restlichen CSS. Wenn du das ausschaltest, kannst du dir das SELECT nochmal ansehen.

[Voselix]

boahhh....das muss ich morgen mal abarbeiten....

danke für deine ausführliche Antwort!!!!!

GLG
Vosi

[Voselix]

so...ich hoffe ich habe jetzt alle html fehler rausbekommen...bei einem html validator bekommen ich jedoch komische Fehlermeldungen:

https://html5.validator.nu/

da habe ich www.vohsen.de eingegeben....und hier sollen zwei Fehler drinsein...ich seh da aber nix:

sieht da jemand nen Fehler?
<div class="floatbox"><p align="center"><br><br><h1><a href="{{link_url::1}}">Linktext</a></h1></p></div>

[dazzle89]

Ich habe es nicht validiert, aber <h1> innerhalb von <p> ist schon mal falsch. <h1> ist eine Überschrift und sollte somit VOR dem Absatz stehen, nicht darin.

[Andreas]

Am besten das P dort ganz entfernen

<div class="floatbox">
  <p align="center">
    <br>
    <br>
    <h1><a href="{{link_url::1}}">Linktext</a></h1>
  </p>
</div>

besser:

<div class="floatbox">
  <h1><a href="{{link_url::1}}">Linktext</a></h1>
</div>

Du hast bestimmt versucht über den TinyMCE zu zentrieren und der hat dir das da rein gehauen. Hast du einen alten Tiny? Denn der dürfte das eigentlich nicht machen.

Auch die unsinnigen BRs sollten da nicht stehen. Formatiere einfach von außen über dein CSS. Beispiel:

.floatbox h1 {
  text-align: center;
  margin-top: 2em;
}