Durchgezogene Linie
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
angeben
beispiel
browser
code
dank
definieren
durchgehende linie
eigenschaft
http
linie
linke teil
linken rand
minimum
problem
punkt
rahmen
setzen
url
verabschieden
-
Hallo,
habe eine kurze Frage.
Ich sitze bestimmt schon den halben Tag an diesem Problem.
Ich will bei einem Gästebuch neben den Eingabefeldern eine vertikale Linie haben, die ganz durchgezogen ist.
Ungefähr genau so wie hier: http://gaijin.at/images/scr_phpgbook_2.png
Wie mache ich sowas?
Ich habe bis jetzt nur geschafft, dass eine Linie da angezeigt wird, wo auch Inhalt ist. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich persönlich würde hier einen div um die Smileys machen und die linke Seite des divs anzeigen.
-
Über die CSS-Eigenschaft Border kannst du einem Kasten (zB Div) einen Rahmen (gesamt oder eine oder mehrere Seiten) geben:
http://www.w3schools.com/css/css_border.asp -
um alle Eingabefelder ein DIV mit einee CSS-Klasse, für die ein Rahmen definiert ist
<div class="eingabefelder">
... (hier stehen die Eingabefelder) ...
</div>
CSS
.eingabefelder { border-right: 1px solid #000000; }
mehr zu CSS Rahmen siehe u.a. HIER: http://de.selfhtml.org/css/eigenschaften/rahmen.htm
oder Link von trueweb
oder bei den Smilies den Rahmen auf der linken Seite (border-left) definieren
Beitrag zuletzt geändert: 4.6.2012 15:47:22 von wzone -
Danke für die Antworten!
Das habe ich schon so gemacht. Hier der relevante Codeauschnitt:
<div class="gb_eintrag_right"> <a href="javascript:seticon(':)');"><img src="<?php echo DIR_IMG . 'smilies/1.gif'; ?>" border="0" alt="Smile" title=":_smile_:" class="imgbottom"></a> <a href="javascript:seticon(':(');"><img src="<?php echo DIR_IMG . 'smilies/2.gif'; ?>" border="0" alt="Wink" title=":_wink_:" class="imgbottom"></a> ... </div>
Für die Klasse "gb_eintrag_right" habe ich
definiert. Das Problem ist aber, dass der Rahmen nur so lange angezeigt wird, bis die Smilies aufhören. Aber ich will ja eine durchgehende Linie, links der Smilies, wie es auch im Beispiel zu sehen ist.border-left:1px dotted #c0c0c0;
Wie bekomme ich das hin? -
Hallo
php-oop schrieb:
Für die Klasse "gb_eintrag_right" habe ich
definiert. Das Problem ist aber, dass der Rahmen nur so lange angezeigt wird, bis die Smilies aufhören. Aber ich will ja eine durchgehende Linie, links der Smilies, wie es auch im Beispiel zu sehen ist.border-left:1px dotted #c0c0c0;
Wie bekomme ich das hin?
div mit minimum height?
mfg
-
voloya schrieb:
Hallo
php-oop schrieb:
Für die Klasse "gb_eintrag_right" habe ich
definiert. Das Problem ist aber, dass der Rahmen nur so lange angezeigt wird, bis die Smilies aufhören. Aber ich will ja eine durchgehende Linie, links der Smilies, wie es auch im Beispiel zu sehen ist.border-left:1px dotted #c0c0c0;
Wie bekomme ich das hin?
div mit minimum height?
mfg
Nein, also die Klasse steht im CSS so:
.gb_eintrag_right { float:right; width:30%; border-left:1px dotted #c0c0c0; padding: 6px 6px 6px 7px; background-color:#ECFFF1; } -
Hallo
php-oop schrieb:
voloya schrieb:
Hallo
php-oop schrieb:
Für die Klasse "gb_eintrag_right" habe ich
definiert. Das Problem ist aber, dass der Rahmen nur so lange angezeigt wird, bis die Smilies aufhören. Aber ich will ja eine durchgehende Linie, links der Smilies, wie es auch im Beispiel zu sehen ist.border-left:1px dotted #c0c0c0;
Wie bekomme ich das hin?
div mit minimum height?
mfg
Nein, also die Klasse steht im CSS so:
.gb_eintrag_right { float:right; width:30%; border-left:1px dotted #c0c0c0; padding: 6px 6px 6px 7px; background-color:#ECFFF1; }
?
Du machst einen div mit minimum height und zeigst den linken Rand an, fertig.
mfg
-
voloya schrieb:
Hallo
php-oop schrieb:
voloya schrieb:
Hallo
php-oop schrieb:
Für die Klasse "gb_eintrag_right" habe ich
definiert. Das Problem ist aber, dass der Rahmen nur so lange angezeigt wird, bis die Smilies aufhören. Aber ich will ja eine durchgehende Linie, links der Smilies, wie es auch im Beispiel zu sehen ist.border-left:1px dotted #c0c0c0;
Wie bekomme ich das hin?
div mit minimum height?
mfg
Nein, also die Klasse steht im CSS so:
.gb_eintrag_right { float:right; width:30%; border-left:1px dotted #c0c0c0; padding: 6px 6px 6px 7px; background-color:#ECFFF1; }
?
Du machst einen div mit minimum height und zeigst den linken Rand an, fertig.
mfg
Und was muss ich bei min-height angeben? -
Hallo
php-oop schrieb:
Und was muss ich bei min-height angeben?
Die gewünschte Länge der durchgezogenen Linie?
mfg
-
du musst garnicht min-height machen, einfaches height genügt wohl auch
.gb_eintrag_right { float:right; height: 320px; width:30%; border-left:1px dotted #c0c0c0; margin: 0px 0px 0px 0px; padding: 6px 7px 6px 6px; background-color:#ECFFF1; }
Aber wenn der linke Teil sowieso immer der "höhere" ist,
dann kannst Du doch auch gleich an der linken Seite (den Rahmen rechts) machen
somit musst man keine Höhen-Angabe machen (wäre flexibel bei Änderung)
.gb_eintrag_left { float:left; width:70%; border-right:1px dotted #c0c0c0; margin: 0px 0px 0px 0px; padding: 6px 6px 6px 7px; background-color:#ECFFF1; }
PS: margin würde ich auch immer definieren, weil manche Browser sonst selber einen setzen
-
wzone schrieb:
PS: margin würde ich auch immer definieren, weil manche Browser sonst selber einen setzen
Früher habe ich auch immer erstmal für alles die margins entfernt, aber mittlerweile lasse ich sie erst einmal dran und entferne margins nur, wenn ich sie wirklich nicht brauche. Einige margins von Elementen wie p-Tags sind nämlich zum Beispiel manchmal ganz sinnvoll.
Vom Traum in allen Browser pixelgleiches Layout zu entwickeln, kann man sich zudem auch gleich verabschieden, dass wird es nicht geben.
Weiterhin sind Angaben wie diese:
margin: 0px 0px 0px 0px;
ziemlich redundant. Stattdessen langt auch
margin: 0;
Ob der Browser nun 0 Pixel, 0 Punkt, 0 Em oder 0 Prozent nehmen soll, ist einerlei. Die Angabe der Einheit ist als bei 0 überflüssig. Weiterhin kann man bei Margin und Padding bei gleichen Werten oftmals Schreibarbeit sparen. Stichwort Kurzschreibweise (engl. Shorthand). -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
