Formular-Div mit runden Ecken

pixel24 · #1 (**permalink**) 13.10.2009, 13:42

Hallo zusammen,

ich habe im Forum nach dem Thema gesucht und eigentlich auch einen Hinweis auf eine Lösung gefunden. Leider funktioniert sie nicht. Das Formular soll so aussehen:

Jede dieser Boxen ist ein Div-Container. Die Container sollen mit einer Farbe gefüllt, die Ecken Rund sein und jeder Conainer soll sich in der Breite auf den zur Verfügung stehenden Platz ausdehnen also keine feste Breite haben. Im Forum habe ich eine Lösung gefunden:

HTML-Code:

/* Container für den linken Bereich. */
#suche_1 {
	display: block;
	float: left;
	background: url(../images/bg_searchform1.gif) no-repeat;
	background-position:100% 100%;
	border: 1px solid green;
}

#suche_1 * {
	margin: 5px;
}

#suche_1 a {
	clear: both;
	float: left;
	
}

#suche_1 label {
	clear: both;
	float: left;
}

#suche_1 input {
	float: right;
}

Was leider nicht funktioniert. Ist der Ansatz überhaupt richtig oder gibt es einen anderen Ansatz? Ich habe im Forum auch Hinweise gefunden das es mit JS funktionieren würde aber wenn möglich würde ich es mit XHTML/CSS machen. Ebenfalls gefunden habe ich Hinweise das es mit CSS3 funktionieren üwrde aber soweit ich weiß soll man das ja nocht nicht verwenden da nicht verabschiedet.

Kann mir jemand einen Tip geben wo ich evtl. eine Anleitung für das Problem finde?

Viele Grüße
pixel

hubspe · #2 (**permalink**) 14.10.2009, 08:09

Hi,

guckst du hier.
Das ist für eine voll flexible Box.

Schau dort auch mal nach den Artikeln Runde Ecken 1 und Runde Ecken 2, dabei sind die Voraussetzungen einfacher.

pixel24 · #3 (**permalink**) 14.10.2009, 08:30

Danke für den Tip! Ich habe GEstern noch den ganzen Abend damit verbracht nach einer Lösung zu suchen. Die Lösung in reinem CSS sind aber meiner Meinung zu viele Div's die lediglich als Design-Element dienen.
Deshalb bin ich, entgegen meines ersten Postings, doch dazu über gegangen es mit JavaScript zu machen.

pixel24 · #4 (**permalink**) 14.10.2009, 15:50

Ok, das mit dem JavaScript funktioniert alles andere als gut. Soblad ich meine Formular-Elemente rein setze wird das Layout zerstört. Ich kann leider kein Javascript und somit ist es mir nicht möglich das selbst zu machen. Soweit ich das überblicken kann gibt es verschiede JavaScripts die das leisten. Kann jemand eines empfehlen?

Also hae ich es mit CSS versuch, genauer gesagt mit der hier geposteten Anleitung:
Runde Ecken 3

Ich habe die Grafiken entsprechend meinem Layout erstellt aber es werden keine Rundungen erzeugt. Ein Textcase ist hier zu finden.

Hat jemand einen Tip für mich?

Viele Grüße
pixel24

Reynhard B. · #5 (**permalink**) 14.10.2009, 17:39

Hi

Mit DD_roundies: Code-only rounded HTML boxes habe ich schon gute Erfahrungen gemacht...

fricca · #6 (**permalink**) 14.10.2009, 18:05

Zitat:

Zitat von pixel24

Hat jemand einen Tip für mich?

Ja, habe ich. Mach deine Ecken-Gifs nicht transparent.
Im Moment siehst du nur die Hintergrundfarbe von #container.

hubspe · #7 (**permalink**) 14.10.2009, 18:20

Hi,

Zitat:

Zitat von pixel24

Hat jemand einen Tip für mich?

jep, hör auf Fricca:

Zitat:

Zitat von fricca

Ja, habe ich. Mach deine Ecken-Gifs nicht transparent.
Im Moment siehst du nur die Hintergrundfarbe von #container.

Das sollte ich dahingehend verbessern das keine transparente Grafiken verwendet werden sollten.

pixel24 · #8 (**permalink**) 15.10.2009, 15:59

Ok, das mit den transparenten GIF's hat funktioniert. Ich schaffe es aber nicht meine 4 Elemente in der ersten Box (blau) so anzuordnen wie ich mir das vorstelle. Ich dachte es geht mit float's aber ich habe es nicht hinbekommen. Hier die Box mit eingefügen Elementen:

HTML-Code:

<?xml version="1.0" encoding="utf-8"?>
<!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/xhtm" xml:lang="de-DE" lang="de-DE">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <meta http-equiv="content-style-type" content="text/css" />
        <meta name="robots" content="index, follow" />
        <meta name="description" content="Beschreibung der Webseite, zwei bis drei Sätze oder 200 bis 250 Zeichen" />
        <meta name="keywords" content="wenige, zentrale Begriffe durch Kommata getrennt und können aus ein oder mehreren Wörtern bestehen. Keine Sätze" />
        <meta name="author" content="Sven Gehr" />
        <meta name="author-mail" content="sven.gehr@dreampixel.de" />

 <style type="text/css">

/* <----------- Suchbox 1 -----------> */


/* Container um Suchformular */
#searchformcontainer {
	padding: 10px;
	border: 1px solid black;
}



.suchbox1 {

	background:#ebeff2 url(../images/bg_box1_untenlinks.gif) no-repeat left bottom;
}

.suchbox1 .suchbox1_1 {

	background: url(../images/bg_box1_untenrechts.gif) no-repeat right bottom;
}

.suchbox1 .suchbox1_2 {

	background: url(../images/bg_box1_obenlinks.gif) no-repeat left top;
}

.suchbox1 .suchboxheadline {

	background: url(../images/bg_box1_obenrechts.gif) no-repeat right top;
	padding-top:0.3em;
}



	
/* <----------- Suchbox 1 -----------> */

</style>

<title>Titel - kurze Zusammenfassung</title>
</head>

<body id="startseite">
	<div id="searchformcontainer">
		

		<div class="suchbox1">
			<div class="suchbox1_1">
				<div class="suchbox1_2">
					<p class="suchboxheadline">Einfache Suche</p>
					<label for="suchfeld"">Suchen nach:</label>
					<input type="text" name="tx_indexedsearch[sword]" value="Suchtext eingeben" id="suchfeld" class="suchfeld" />
					<a href="nirgendwo">normale Suche</a>
					<input type="submit" name="tx_indexedsearch[submit_button]" value="Suchen" id="suchknopf" class="knopf" />
				</div>
			</div>
		</div>

		
		
		
	</div>
</body>
</html>

Wie schaffe ich es diese Elemente so anzuordnen das Label und Link links sitzen und die beiden input rechts? Die Überschrift "Einfache Suche" wollte ich eigentlich gar nicht drin haben aber da war im Beispiel ja eine Überschrift und mit dieser wird ja die Grafik oben/rechts positioniert.

Viele Grüße
pixel24

hubspe · #9 (**permalink**) 15.10.2009, 16:26

Hi,

setze als allererste CSS-Anweisung folgendes ein:

HTML-Code:

*  {
   padding:0;
   margin:0;
}

dann sieht es schonmal besser aus.

Danach gibst du .suchbox1_2 p etwas padding,
.suchbox1_2 label etwas margin-left sowie
.suchbox1_2 input etwas margin-right und margin-bottom

Wie ich schon in dem Tut geschrieben habe:

Zitat:

Deshalb bin ich da erstmal vorsichtig, setze alle paddings und margins für die Box auf null und ergänze dann die Abstände mit ständiger Zwischenkontrolle im Browser vorsichtig.

Das hast du leider nicht so beachtet.

pixel24 · #10 (**permalink**) 15.10.2009, 16:46

ok, ich habe das alles mal eingefügt. Eine zentrale Layoutvorgabe:

Label und Link sitzen links und Input (Eingabefeld und Button) rechts läßt sich damit nicht realisieren, oder?

Ich habe auch mal weiter getüftelt und es mit float eigentlich soweit hinbekommen das alle Element auf der Seite sitzen wie es die Layoutvorgabe vorsieht. Die Abstände habe ich (noch) vernachlässigt. Das Testcase ist hier zu finden.
Ist das ein Ansatz? Im Firefox sieht das Ergebnis gut aus. Im IE7 ist das Ergebnis alles andere als befriedigend.

Wenn das anordnen der Elemente ohne Float auch funktioniert (wie in deinem Beispiel) ist mir das natürlich auch recht

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18
3x3 div mit runden ecken	Mischka	CSS	4	03.09.2009 16:35
Linkverhalten im IE6	ChOpSueY!	CSS	19	19.05.2008 22:48
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
div mit runden ecken?!	psycho_dmr	CSS	3	29.12.2004 19:34