nicht angemeldet
Textfeld über verbleibende Bildschirmbreite erstrecken lassen
Hallo und Mahlzeit,
bei meiner DVD-Verwaltung habe ich noch ein css-Problem bei der Formatierung eines Textfeldes.
Die Bildschirmausgabe ist, schematisch skizziert, wie folgt:
+----------------------------------------------------+
|+-----------------+ +--------+ |
||Navigationsleiste| |Textfeld| |
|+-----------------+ +--------+ |
| |
|+--------------------------------------------------+|
||5-spaltige Tabelle über komplette Bildschirmbreite||
|+--------------------------------------------------+|
+----------------------------------------------------+
Die Navigationsleiste wird hier dynamisch über Javascript erzeugt und als formatierte Liste
angezeigt, im Anschluss daran, mit 5px horizontalem Abstand, das Textfeld. Das Textfeld konnte
ich mittlerweile auf die gleiche Höhe "trimmen" wie die Navigationsleiste.
Unterhalb der Navigationsleiste und des Textfeldes, ebenfalls mit 5px Abstand, diesmal aber
vertikal, erstreckt sich eine 5-spaltige Tabelle über die komplette Bildschirmbreite.
Nun möchte ich das Textfeld aber so definieren, dass es sich über die verbleibende Bildschirmbreite
erstreckt und bündig mit dem rechten Rand der sich darunter befindlichen Tabelle abschliesst, ohne
aber einen Zeilenumbruch zu erzeugen und in einer eigenen Zeile dargestellt zu werden.
Problem ist, dass die Navigationsleiste unterschiedlich breit sein kann, da sich die Länge in Abhängigkeit
der Anzahl unterschiedlicher Einträge aus einer Datenbank (js-Datei) ergibt und ich somit nicht mit
absoluten Größenangaben arbeiten kann.
Hier die aktuellen css-Definitionen des Textfeldes:
.Suchfeld
{
position: relative;
left: 5px;
margin: 0;
padding: 3px 0px 4px 5px;
border: 1px #000000 solid;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
color: #95bbae;
}
Hier der zugehörige html-Code:
<div id="navcontainer">
<ul id="Navigationsleiste">
<script type="text/javascript">
<!--
Filterfunktion_aufbauen(Film);
-->
</script>
</ul>
<input class="Suchfeld" type="text" id="tb" [...]>
</div>
Der div "navcontainer" hat keine css-Definitionen, sondern dient nur als Container.
Wie kann ich es bewerkstelligen, dass sich das Textfeld, wie oben beschrieben, über die verbleibende Bildschirmbreite
erstreckt ?
Vielen lieben Dank für Eure Unterstützung.
Gruß,
Enrico
-
Hallo,
wenn ich dein Problem richtig verstehe, kannst du das nur so lösen:
+-------------------------------------------------------------------+
|+-----------------------------------------------------------------+|
|| Tabelle: width:100%; ||
||+------------------++-------------------------------------------+||
||| Tabellenzelle || Tabellenzelle |||
|||+----------------+||+-----------------------------------------+|||
|||| Navigation |||| Textfeld: width:100%; ||||
|||| |||| ||||
|||+----------------+||+-----------------------------------------+|||
||+------------------++-------------------------------------------+||
|+-----------------------------------------------------------------+|
| |
Und unten diese andere Tabelle :D ...Du hast also jetzt noch eine Tabelle außen herum (keinen Rahmen, sie ist also unsichtbar; am besten du machst noch cellspacing="0" und cellpaddng="0"), die so breit wie die Gesamte Seite ist...
Die erste Zelle deiner Tabelle beinhaltet nur die Navigation(die ja variabel breit ist), in der zweiten Zelle befindet sich das Textfeld mit width:100%;. Das Textfeld ist also so groß wie die Zelle und die Zelle nimmt den restlichen Platz der Tabelle ein und die Tabelle ist so breit wie die Seite.Ich hoffe ich konnte dir Helfen.
MfG und schöne Weihnachten glan
-
Hallo glan,
Dir natürlich auch erst einmal schöne Weihnachten :-)
Meine Anzeige sieht jetzt so aus:
+--+ +--------------------------------+
| | |Textfeld |
+--+ +--------------------------------+
| |
+--+
| |
+--+
| |
+--+
|..|+-------------------------------------+
|Tabelle über gesamte Bildschirmbreite|
+-------------------------------------+Die Navigationsleiste wird unschön umgebrochen, das Textfeld erstreckt
sich aber jetzt über die verbleibende Bildschirmbreite.Hierfür schon mal vielen Dank, das hätten wir schon mal.
Den css-Code des Textfeldes habe ich nur um die Ergänzung "width: 100%"
ergänzen müssen.Der html-Code sieht folgendermassen aus:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr width="100%">
<td nowrap>
<div id="navcontainer">
<ul id="Navigationsleiste">
<script type="text/javascript">
<!--
Filterfunktion_aufbauen(Film);
-->
</script>
</ul>
</td>
<td width="100%">
<input class="Suchfeld" type="text" id="tb" [...]>
</td>
</tr>
</table>Wie bekomme ich jetzt den Zeilenumbruch noch weg ?
Gruß,
Enrico-
Hallo nochmal,
Wie bekomme ich jetzt den Zeilenumbruch noch weg ?
Du hast einen Entscheidenden Fehler gemacht!
Relevant dafür sind diese Zeilen:
Nicht so:<td width="100%">
<input class="Suchfeld" type="text" id="tb" [...]>
</td>Sondern so: ~~~html <td> <input width="100%" class="Suchfeld" type="text" id="tb" [...]> </td>(Du musst das Textfeld auf 100% Breite stellen und nicht die Zelle)
MfG und schöne Weihnachten glan
-
Ebenfalls nochmals Hallo :-)
Leider ändert die Beseitigung des Fehlers nicht das gewünschte Ergebnis.
Das Textfeld wird nicht entsprechend ausgedehnt.
<div id="Ausgabe" style="display:none;">
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td nowrap>
<div id="navcontainer">
<ul id="Navigationsleiste">
<script type="text/javascript">
<!--
Filterfunktion_aufbauen(Film);
-->
</script>
</ul>
</div>
</td>
<td>
<input width="100%" class="Suchfeld" type="text" id="tb" [...]>
</td>
</tr>
</table>
</div>Versteh ich nicht...
Gruß,
Enrico
-
-
-