• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

vertical-align in einem div

zyzm

Neues Mitglied
Hallo.

Ich hänge jetzt seit knapp zwei Stunden an einem Problem mit dem IE7. Ich selbst benutze den FF3 und auf Opera habe ich auch schon getestet. Aber erstmal mehr zum Problem.

Ich habe auf meiner Website einen div angelegt mit fester höhe. In diesem div befindet sich ein Formular (quick search). Das Formular besteht nur aus zwei Wörtern, einem Eingabefeld und einer Grafik als Button. Ich versuche das Design mit css anzupassen. Alle elemente sollen vertikal vermittelt dargestellt werden in dem div. Für FF und Opera scheint das kein Problem zu sein. Der IE jedoch schiebt immer meinen Text und das Eingabefeld nach ganz unten in den div.

Hier erstmal der verwendete code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta name="author" content="Marcel Havenith" />
    <title>CSS Test</title>

<style type="text/css">

form {
  margin: 0;
  }

input.search {
  width: 260px;
  border: none;
  background: #ffffff;
  padding: 0px;
  margin: 0px;
  color: #000000;
  }

input.button {
  padding: 0px;
  margin: 0px 4px 0px 4px;
  background: url(qs-go.png) no-repeat;
  width: 42px;
  height: 42px;
  border: 0px;
  }

</style>

</head>
<body>

<div style="float:left;height:42px;background:url(qs-mid.png) repeat-x;">
  <form method="get" action="searchresults.php">
    <span>quick search: <input type="text" name="searchtext" class="search" value=" " /></span><input type="submit" value=" " class="button" />
  </form>
</div>

</body>
</html>
Ich habe schon so viele Kommandos und Tags ausprobiert, dass ich schon garnicht mehr sagen kann ob alles was im css-Teil steht wirklich nötig ist. Entweder bin ich zu dumm/unerfahren oder ich habe mich einfach nur festgefahren. Auf jeden Fall finde ich alleine keine Lösung mehr^^

Wäre super wenn sich das mal jemand ansehen könnte. Bin für jeden Vorschlag zu haben. Wichtig ist nur, dass der umfassende container ein div bleibt mit float:left, height:42px und dem Hintergrundbild.
 
nicht schön, aber so gehts. hab erstmal einfach padding:10px genommen. müsste ggf. noch genau angepasst werden:

HTML:
<style type="text/css">
form {
  margin: 0;
  }
input.search {
  width: 260px;
  border: none;
  background: #ffffff;
  padding: 0px;
  margin: 0px;
  color: #000000;
  }
input.button {
  padding: 0px;
  margin: 0px 4px 0px 4px;
  background: url(qs-go.png) no-repeat;
  border: 0px;
  }
</style>
</head>
<body>
<div style="float:left;height:22px;background:url(qs-mid.png) repeat-x; border:1px solid #000; padding:10px;">
  <form method="get" action="searchresults.php">
    <span>quick search: <input type="text" name="searchtext" class="search" value=" " /></span><input type="submit" value=" " class="button" />
  </form>
</div>
</body>
 
Danke für die schnelle Antwort!

Also ich habe mal den ganzen Kram auf einen alten Webspace von mir hochgeladen.

Meine alte Version:
CSS Test

Deine Überarbeitete Version:
CSS Test

Ok der Rahmen von 1px kann ja erstmal ignoriert werden. Ist nehme ich an nur zu anschaulichen Zwecken^^
Bei der neuen Version werden in allen Browsern Text und Input mittig angezeigt. Leider hat der grafische Button wohl sehr gelitten :D

Wenn ich dem Button wieder eine Feste Größe von 42x42px gebe gerät alles aus den Fugen weil der Button kein Padding braucht :(

Noch ne Idee? ^^
 
HTML:
<div><div float; text und textinput mit padding /><div float; submitbutton ohne padding  /></div>

alternativ auch eine tabelle oder absolute positionierung.
 
Hab zwischendurch an was anderem gearbeitet und mich dann nochmal ran gesetzt. Und so wie es aussieht ist deine Lösung genau wie meine Lösung. Hier das Ergebnis:
CSS Test

Wird in allen Browsern gleich angezeigt.
margin-top: 12px; muss angepasst werden je nachdem in welchem Umfeld sich das Quicksearch-div befindet. Das liegt aber an der jeweils verwendeten Schriftart und Schriftgröße nehme ich an. Denn die sind auf meiner Projektseite anders als in unserer Versuchsumgebung.

Hier nochmal der komplette funktionierende code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta name="author" content="Marcel Havenith" />
    <title>CSS Test</title>

<style type="text/css">

form {
  margin: 0;
  }

input.search {
  width: 260px;
  border: none;
  background: #ffffff;
  padding: 0px;
  margin: 0px;
  color: #000000;
  }

input.button {
  padding: 0px;
  margin: 0px 4px 0px 4px;
  background: url(qs-go.png) no-repeat;
  width: 42px;
  height: 42px;
  border: 0px;
  }

</style>

</head>
<body>

<div style="float:left;height:42px;background:url(qs-mid.png) repeat-x;">
  <form method="get" action="searchresults.php">
    <div style="margin-top: 12px; padding: 0px;float: left;">quick search: <input type="text" name="searchtext" class="search" value=" " /></div><input type="submit" value=" " class="button" />
  </form>
</div>

</body>
</html>

Leider gibt validator.w3.org einen Fehler aus. Allerdings versteh ich den nicht ganz:
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

Liegt wohl am Doctype.
 
Leider gibt validator.w3.org einen Fehler aus. Allerdings versteh ich den nicht ganz:
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

Liegt wohl am Doctype.

Es liegt an deinem input type="submit", welches ein Inline-Element ist und in einem Blockelement stehen muss.

Ausserdem sind deine <div>'s falsch. Eingabefelder gehören in ein <fieldset> und die Beschriftung der Eingabefelder zeichnet man als <label> aus, damit auch der Bezug zu dem Eingabefeld hergestellt werden kann.

PHP:
<fieldset>
  <label for="qsearch">Quick search</label>
  <input id="qsearch" value="" name="qsearch" />
  <button type="submit" id="submit" name="submit">Submit</button>
</fieldset>
Dem <fieldset> kannst du dann die feste Höhe und das Hintergrundbild geben.
 
Hmm ok das verstehe ich soweit. Aber wenn ich das jetzt umschreibe würde das bedeuten, dass Text, inputfield und button wieder von den selben höhenänderungen betroffen sind. Und das führt dann wieder dazu, dass der button vollkommen verschoben wird. Wäre nicht so ideal.

Habe ich außer dieses Validierungsfehlers noch irgendwas zu befürchten? Weil es scheint ja trotzdem zu funktionieren :D
 
Habe ich außer dieses Validierungsfehlers noch irgendwas zu befürchten? Weil es scheint ja trotzdem zu funktionieren :D

Ja, es ist fehlerhaft und semantisch Inkorrekt, wodurch z.B. Benutzer eines Screenreaders falsche Informationen bekommen oder Suchmaschinen dein Seite schlechter Bewerten, da sie den Inhalt nicht Interpretieren können.
 
Code:
<div style="float:left;height:42px;background:url(qs-mid.png) repeat-x;">
  <form method="get" action="searchresults.php">
<fieldset style="height: 42px; border: 0px;">
    <div style="margin-top: 8px; padding: 0px; float: left;"><label>quick search: <input type="text" name="searchtext" class="search" value=" " /></label></div><input type="submit" value=" " class="button" />
</fieldset>
  </form>
</div>
Fieldset ist jetzt integriert. Div darf drin bleiben und spuckt keine Fehler aus. Dem Fieldset darf ich wie gesagt kein padding oder margin geben sonst wandert der button nach unten. Bei dem div habe ich jedoch das interessante Problem, dass z.B. dieses margin-top:8px in den Browsern unterschiedlich aussieht. Wie können 8 Pixel verschieden angezeigt werden? :D

Hier noch das Testobjekt: CSS Test

Und ich sehe gerade, dass auf diese Art der Button im FF trotzdem nach unten rückt. Ich hasse dieses Formular :D
 
So funktioniert es.
PHP:
<fieldset>
  <div>
    <label for="qsearch">Quick search</label>
    <input id="qsearch" value="" name="qsearch" />
    <button type="submit" id="submit" name="submit"><span>Submit</span></button>
  </div>
</fieldset>
Code:
fieldset {
    background-image: url('http://www.zyzm.de/test/qs-mid.png');
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
    border: none;
}

fieldset div {
    line-height: 42px;
}

fieldset div button {
    background-image: url('http://www.zyzm.de/test/qs-go.png');
    background-repeat: no-repeat;
    height: 42px;
    width: 42px;
    border: none;
}

fieldset div button span {
    visibility: hidden;
}
 
Habe mir das mal angesehen und noch etwas angepasst:

Code:
fieldset {
    background-image: url('qs-mid.png');
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
    border: none;
}

fieldset div {
    line-height: 42px;
}

fieldset div label {
    display: block;
    float: left;
    margin: 0px 4px 11px 0px;
}

fieldset div input {
    width: 260px;
    border: 0px;
    margin-bottom: 11px;
}

fieldset div button {
    background: url('qs-go.png') no-repeat;
    height: 42px;
    width: 42px;
    border: none;
    margin: 0px 4px 0px 4px;
}

fieldset div button span {
    visibility: hidden;
}

Code:
  <fieldset>
   <div>
    <label for="qsearch">Quick search:</label>
    <input id="qsearch" value=" " name="qsearch" />
    <button type="submit" id="submit" name="submit"><span>Submit</span></button>
   </div>
  </fieldset>

Und jetzt wird es in allen Browsern genau richtig angezeigt! Endlich hat die Fehlersuche ein Ende ^^

Vielen Dank euch beiden. Ihr habt mir sehr geholfen!
 
Tja war wohl nichts. Ich musste einige Werte nochmals anpassen weil die Suchfunktion nicht mehr das tat was sie soll. Jetzt funktioniert die Suche wieder. Das Design ist in allen Browsern gleich. Aber dieser Fehler ist wieder da...

So sieht der code gerade aus. Ich habe mal alle css-Daten direkt in die Tags geschrieben. So wars für mich leichter die sachen zu editieren.

Code:
 <form method="get" action="searchresults.php">
  <fieldset style="background-image: url('qs-mid.png'); background-repeat: repeat-x; margin: 0; padding: 0; border: none;">
    <label style="display: block; float: left; margin: 0px 4px 11px 0px;" for="qsearch">Quick search:</label>
    <input style="width: 260px; border: 0px; margin-bottom: 11px;" type="text" id="qsearch" name="searchtext" value="EIN_PFAD" />
    <button style="background: url('qs-go.png') no-repeat; height: 42px; width: 42px; border: none; margin: 0px 4px 0px 4px;" type="submit" value="EIN_PFAD"><span style="visibility: hidden;">Submit</span></button>
  </fieldset> 
 </form>
Alle divs weg. Jetzt stehen da nur noch form, fieldset, label, input, button und ein span. Wo liegt denn jetzt noch das Problem?
 
Der einzige Fehler der gemeldet wird ist:
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

Die Suchfunktion funktioniert einwandfrei und das Design stimmt auch in jedem Browser.

Der Style dürfte sich ja nicht auf die Funktion auswirken. Wenn ich also alle Styleangaben weg nehme steht nur noch das da:

Code:
 <form method="get" action="searchresults.php">
  <fieldset>
    <label for="qsearch">Quick search:</label>
    <input type="text" id="qsearch" name="searchtext" value="TEXT_EXTERNE_QUELLE" />
    <button type="submit" value="TEXT_EXTERNE_QUELLE"><span>Submit</span></button>
  </fieldset> 
 </form>

Also für mich sieht das nicht falsch aus ^^
 
Ich wollte mich mal hier einklinken, da es evtl. etwas mit meinem Prob zu tun hat.

Erstmal ein Hallo an alle, denn ich bin neu und hoffe mal nett aufgenommen zu werden.

So, nu zu meinem Problem:

Ich wollte in meiner links-seitigen Menü-Leiste die Buttons Impressum und Kontakt ans untere Ende der gerade aufgerufenen Site legen. Eigentlich ist schon alles fertig, nur dieses Problem kann ich irgendwie nicht lösen. Ich hoffe es geht einfach mit einem CSS Befehl, den ich nur noch nicht gefunden habe. Und ja, ich würde es mir wünschen, wenn jeder Browser diesen Befehl auch gleich umsetzt ;)

Danke!
 
Wenn sich "Impressum" und "Kontakt" in einem div befinden könntest du mal versuchen dem div per css folgende Werte zuzuweisen:

Code:
position: absolute;
bottom: 0px;

Wäre möglich, dass das klappt.
 
Danke für die schnelle Antwort, doch leider funktioniert es nicht.

Ich hoffe ihr versteht, was ich gerne hätte... Ich kann mich manchmal sehr unglücklich ausdrücken.
 
alternativ auch eine tabelle oder absolute positionierung.
Es geht doch hier um ein Darstellungsproblem. Was hat das mit einer Tabelle zu tun? Eine Tabelle ist ein Mittel zur logischen Textauszeichnung.

Aber wenn ich das jetzt umschreibe würde das bedeuten, dass Text, inputfield und button wieder von den selben höhenänderungen betroffen sind. Und das führt dann wieder dazu, dass der button vollkommen verschoben wird. Wäre nicht so ideal.
Deswegen rate ich jedem CSS-Neuling, sich als erstes mit HTML zu befassen. Die optimale Reihenfolge zur Erstellung einer Website ist nunmal:
1. Inhalt
2. Logische Auszeichnung
3. Layout/Design

Wärest Du in der Reihenfolge vorgegangen, hättest Du das Problem jetzt nicht, dass sich wieder alles verschiebt. Aber lässt Du es jetzt so, ist das ja dann inhaltlich falsch, weil die Semantik nicht stimmt. Clients, die Deinen HTML-Code interpretieren (u.a. Suchmaschinen) interpretieren Deine Seite dann falsch. Das kann natürlich zu Problemen führen. Deswegen ist eine valide und semantisch sinnvolle Basis aus HTML immer eine zwingende Grundlage für CSS-Layout.
Deswegen auch die o.a. Reihenfolge. Wer sich daran nicht hält, muss seinen CSS-Code u.U. neu schreiben, wenn sich der HTML-Code darunter wieder ändert.

Das war jetzt als Anmerkung für alle CSS-Neulinge, nicht nur speziell für Dich. In dem Zusammenhang ist es auch mal wieder wichtig, von der strikten Trennung von Inhalt und Layout zu sprechen. Wird das befolgt, treten solche Probleme nicht auf.
 
Das klingt ja alles ganz schön Effchen.

Aber ich hatte am Anfang ein komplett funktionierendes html-Formular. Danach habe ich erst mit dem Layout begonnen. Und nach vielem hin und her habe ich nun endlich ein passendes Layout welches überall korrekt angezeigt wird. Das formular funktioniert ja immer noch. Aber beim validator-check wird als einziger Fehler angekreidet, dass ich an dieser Stelle kein input field machen darf.

Und selbst wenn ich alles was css betrifft entferne habe ich ein blankes funktionierendes Formular mit der selben Fehlermeldung. Sogar auf einer blanken html-Datei ohne restliche Inhalte. Also scheint ja irgendwas nicht zu stimmen. Und ich sehe diesen Fehler einfach nicht bzw. kann die Fehlermeldung anscheinend nicht korrekt interpretieren.

Und das ist der Moment an dem ich Hilfe brauche und mich vertrauensvoll an ein Forum wende in der Hoffnung, dass mir jemand nen guten Tipp geben kann. Was ich sicher nicht brauche sind Auflistungen á la 1. 2. 3.

Dein Post mag vielleicht gut gemeint sein aber helfen tut es glaube ich keinem.

Ok, innerhalb dieses Threads hat sich mein Problem etwas verlagert. Es handelt sich ja eigentlich nicht mehr um ein css-Problem. Sollte ich heute zu keiner Lösung kommen poste ich halt mein Anliegen nochmal woanders.

@ ama: Ich habe gestern noch ein paar Sachen probiert aber bin auch bei deinem Problem noch zu keiner Universallösung gekommen. Am besten machst du ein seperates Thema auf und erläuterst nochmal ganz genau wie das später aussehen soll.

Danken nochmal an alle die mir geholfen haben.
 
Zurück
Oben