Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
div-Eelement verdeckt Spalte
Autor: willi0513
Datum: 01.02.2012 22:10:41
Hallo zusammen,
ich habe ein 3-spaltiges layout. Links Menü, Mitte Hauptausgabe, Rechts Erklärungen.
Funktioniert auch.
In der Mitte sollen jetzt persönliche Daten eingegeben werden.
Dafür habe ich mir eine Grafik mit abgerundeten oberen Ecken erstellt.
Darunter ein farbiges Rechteck und darunter kommen die Eingaben.
Das sieht dann so aus:
.profiltop {
background: #00700#;
}
.profiltop h3 {
background-image: url(/grafiken/pt.png);
background-repeat:no-repeat;
width: 700px;
color: white;
line-height: 20px;
margin:0px;
padding: 0px 10px;
}
.profilnext {
background-color: #90EE90;
border-left: 1px solid #007000;
border-right: 1px solid #007000;
width: 698px;
height: 55px;
color: #007000;
}
.profilnext h3 {
line-height: 18px;
margin:0px;
padding: 2px 10px;
}
.profilbottom {
height: 100px;
width: 698px;
border-right: 1px solid #007000;
border-bottom: 1px solid #007000;
border-left: 1px solid #007000;
}
Die Augabe ist dann so:
<div class="profiltop">
<h3>Alter, Wohnort</h3>
</div>
<div class="profilnext">
<h3>Einige grundlegende Angaben.</h3>
</div>
<form id="PDaten" name="PDaten">
<div class="profilbottom">
Vorname<input id="VN" name="VN" type="text" size="20" maxlength="20">
Geburtsdatum<input id="Geb" name="Geb" type="text" size="10" maxlength="10">
text
<br>
Nachname<input id="NN" name="NN" type="text" size="20" maxlength="20">
</div>
</form>
Wenn ich jetzt das Fenster schmaler mache, dann schiebt sich meine Ausgabe über
die rote Linie der mittleren Spalte in die rechte Spalte hinein.
Hier ein Bild dazu:
http://www.s368162809.online.de/ausgabe.png
Wie erreiche ich nun, dass sich der ganze Seiteninhalt nach rechts aus dem Fenster schiebt, bevor meine neue Augabe
den roten Begrenzungsrand der mittleren Spalte erreicht? Hat das überhaupt mit der neuen Ausgabe zu tun,
oder liegt es an der Formatierung der mittleren Spalte?
Die nächste Frage wäre, muss ich für jedes einzelne Text und Eingabefeld, wie Vorname, Geburtsdatum usw.
eine eigene div-Klasse definieren? Oder gibt es eine bessere Möglichkeit?
Gruß
Willi
Re: div-Eelement verdeckt Spalte
Autor: Matthias
Datum: 02.02.2012 09:38:04
> ich habe ein 3-spaltiges layout. Links Menü,
> Mitte Hauptausgabe, Rechts Erklärungen.
> Funktioniert auch.
> In der Mitte sollen jetzt persönliche Daten
> eingegeben werden.
> Dafür habe ich mir eine Grafik mit abgerundeten
> oberen Ecken erstellt.
> Darunter ein farbiges Rechteck und darunter
> kommen die Eingaben.
> Das sieht dann so aus:
Warum hast Du Dir soviel Mühe gemacht, eine vollständige HTML-Datei derart auseinanderzupflücken, dass sie nicht mehr funktioniert?
Ich konnte es mangels funktionierender Datei nicht testen aber dem Augenschein nach solltest Du in etwa diese HTML-Ausgabe anstreben:
<h3>Alter, Wohnort</h3>
<h4>Einige grundlegende Angaben.</h4>
<form id="PDaten" name="PDaten">
<p class="profilbottom">
Vorname
</p>
<input id="VN" name="VN" type="text" size="20"
maxlength="20">
Geburtsdatum
<input id="Geb" name="Geb" type="text" size="10"
maxlength="10">
Geb
<br>
Nachname<input id="NN" name="NN" type="text" size="20"
maxlength="20">
</form>
Reich einfach eine vollständige Datei oder einen Link darauf nach und wir kommen dem Problem näher.
Grüße
Matthias
Re: div-Eelement verdeckt Spalte
Autor: gaby
Datum: 02.02.2012 09:40:50
> Wie erreiche ich nun, dass sich der ganze
> Seiteninhalt nach rechts aus dem Fenster schiebt,
> bevor meine neue Augabe
> den roten Begrenzungsrand der mittleren Spalte
> erreicht?
Hallo,
Es hat schon seinen Grund, warum ich Dir vor einiger Zeit schrieb:
| Verlinke deshalb bitte bei deinen Fragen grundsätzlich
| eine auf das notwendige Minimum reduzierte Testdatei,
| auch aus dem Grund, damit sich deine Helfer nicht deine
| Code-Fragmente zusammenbasteln und zu einer vollständigen
| Datei ergänzen müssen.
--> http://www.selfhtml.de/forum/zeigebeitrag_1_134785_134784_0.php
Muß man das denn immer wieder sagen? :-(
Nimm mal deine hier geposteten Fragmente, setze sie zu einer Datei zusammen, und schaue dann einmal, ob man daraus das Problem nachvollziehen kann.
- kann man nicht! ...
Wenn dein Auto kaputt ist, bringst du doch auch das ganze Auto zum Mechaniker, und nicht die Einzelteile, auf daß der Gute sich das erstmal selbst zusammen basteln solle, bevor er das Zusammenspiel der einzelnen Komponenten testen kann. ;-)
Grüße
gaby
--------
Edit:
'min-width' für das Element, das sich ab einer bestimmten Breite nicht weiter verkleinern soll.
Re: div-Element verdeckt Spalte
Autor: willi0513
Datum: 02.02.2012 12:08:38
Hallo zusammen,
ihr habt ja recht. Ich werde es mir für die Zukunft merken.
Ich habe die Dateien jetzt auf ein Minimum reuziert und hoffe, ihr könnt mir jetzt weiterhelfen.
http://www.s368162809.online.de/php/fprofil.php
Gruß
Willi
Re: div-Element verdeckt Spalte
Autor: gaby
Datum: 02.02.2012 18:24:47
Hallo,
- das Div "profiltop" braucht eine Hintergrundfarbe, die der des Hintergrundbildes ähnlich ist.
Ist keine vorhanden, siehst du hier, was passiert, wenn ein User sich die Schrift vergrößert, oder wenn Grafiken nicht angezeigt werden können.
http://s14.directupload.net/file/d/2788/ulk8sv4j_png.htm
- schlecht, da pflegeaufwendig ist auch, daß du
".profiltop" , ".profiltop h3" , ".profilnext" , ".profilnext h3" , und ".profilbottom"
eine Breite gibst. Bei Änderungen mußt du somit an zig Stellen die Breite anpassen.
Laß bei diesen Elementen die Breite weg, (sie nehmen sich dann den maximal zur Verfügung stehenden Patz (=100% des Eltern-Elements, abzüglich evtl padding-Werte), setze sie in ein umfassendes Div #profil, und gib _diesem_ die gewünschte Breite, zb 98%.
Laß auch bei "profilbottom" die Höhe weg.
Für Abstand nach unten sorgt ein padding-bottom.
Grüße
gaby
Edit:
| gib _diesem_ die gewünschte Breite, zb 98%.
... oder laß sie ganz weg. ;-)
Re: div-Eelement verdeckt Spalte
Autor: Freddy
Datum: 03.02.2012 16:48:57
Hallo,
> <form id="PDaten" name="PDaten">
> <p class="profilbottom">
> Vorname
> </p>
> <input id="VN"
> name="VN" type="text" size="20"
>
> maxlength="20">
Warum statt P nicht lieber LABEL?
"Für Formularelemente wie Eingabefelder oder Auswahllisten gibt es normalerweise keine logische Beschriftungsmöglichkeit. Sie können zwar Text vor ein solches Element setzen wie "E-Mail-Adresse:", aber ein solcher Text ist normaler HTML-Text, der keinen definierten Bezug zu dem Element hat, für das er als Beschriftung dient. Mit Hilfe von Labels können Sie jedoch einen solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen."
(Zitat: <http://de.selfhtml.org/html/formulare/strukturieren.htm#label>)
Das man evtl. noch umfassende Elemente fürs Styling braucht, lasse ich jetzt mal außer Acht.
Bei gleichem Wert für das "for"-Attribut des LABELs und "id"-Attribut des INPUTs kann man in "coolen" Browsern auf das Label klicken, was den Fokus auf das jeweilige Feld gibt.
Ich weiß das Du das weißt, wollte nur darauf hinweisen. :-)
Gruß,
Freddy
Re: div-Element verdeckt Spalte
Autor: willi0513
Datum: 03.02.2012 19:13:40
Hallo Gaby,
ich habe alle deine Ratschläge befolgt und jetzt dem "profiltop" eine Hintergrundfarbe gegeben, aber dadurch sind jetzt die abgerundeten Ecken der Grafik nicht mehr zu sehen. Was muss ich machen, damit sie wieder sichtbar sind?
Jetzt schiebt sich aber das ganze Element nicht mehr über die rechte Spalte. Das ist schonmal super, DANKE!
Ich mußte dafür aber auch die Breite der mittleren Spalte anpassen.
So sieht es jetzt aus:
http://www.s368162809.online.de/php/fprofil.php?Titel=In Arbeit
Was meinst du mit einem umfassenden div #profil? Da ich jetzt die Beitenangaben ganz weggelassen habe, sehe ich nicht, was ich da reinpacken kann.
Gruß
Willi
Re: div-Eelement verdeckt Spalte
Autor: willi0513
Datum: 03.02.2012 19:17:18
Hallo Freddy,
wußte ich nicht, deshalb werde ich mir das gleich einmal ansehen. Vielen Dank für den Hinweis.
Gruß
Willi
Re: div-Element verdeckt Spalte
Autor: gaby
Datum: 03.02.2012 19:44:21
> Hallo Gaby,
>
> ich habe alle deine Ratschläge befolgt und jetzt
> dem "profiltop" eine Hintergrundfarbe gegeben,
> aber dadurch sind jetzt die abgerundeten Ecken
> der Grafik nicht mehr zu sehen.
Hallo,
Das scheint nur so. ;-)
Weil die Ecken deiner Grafik transparent sind, scheint jetzt die grüne Hintergrundfarbe durch.
Mache die Ecken zb weiß oder wie auch immer, und schneide die Grafik "pt.png" auseinander:
die linke Seite sollte klein werden, zb 30px breit
die rechte Seite ganz lang.
#profiltop bekommt nun die lange Grafik als bg-Bild, die du rechts positionierst (background-position)
#profiltop h3 bekommt die kurze Grafik, die du links positionierst.
So bleiben rechts und links die Ecken sichtbar, egal wie breit oder schmal der Anzeigebereich ist.
> Was meinst du mit einem umfassenden div #profil?
> Da ich jetzt die Beitenangaben ganz weggelassen
> habe, sehe ich nicht, was ich da reinpacken
> kann.
Wenn du die Breite ganz weggelassen hast, brauchst du auch kein umfassendes DIV mehr.
Grüße
gaby
Re: div-Element verdeckt Spalte
Autor: willi0513
Datum: 04.02.2012 18:14:07
Hallo Gaby,
mir ist schon bewußt, dass die Ecken lediglich transparent sind. Aber wenn man die schon abrundet, sollen sie ja auch sichtbar sein. Ich habe deine Tipps jetzt angewendet, funktioniert natürlich. So sieht es jetzt aus.
http://www.s368162809.online.de/php/fprofil.php
Aber optimal ist es ja nur, wenn der Hintergrund einfarbig ist. Da ich als Hintergrund einen Farbverlauf habe, sieht man beim zusammenschieben des Fensters die Ecken dann doch wieder. Aber da kann ich mit leben. Also vielen Dank für deine vielen Tipps und Erklärungen.
Im 1. Beitrag wollte ich ja noch wissen, ob man für jedes Text- und Eingabefeld eine eigene div-klasse definieren muss. Freddy hatte schon von "Label" geschrieben, aber damit wird ja nur der Bezug vom Text- zum Eingabefeld hergestellt und nicht das Styling definiert.
Wenn ich jetzt 10 Text- und Eingabefelder von unterschiedlicher länge habe, gibt es daür eine einfache Variante die zu formatieren? oder muss ich dann 20 unterschiedliche Klassen definieren?
Gruß
Willi
| 