nicht angemeldet
DIVs definieren
Hallo zusammen,
ich habe ein Problem mit DIVs, ich hoffe, ich kann mein Problem hier verständlich beschreiben.
Und zwar möchte ich eigentlich etwas ganz simples gestalten, über eine Tabelle wäre das kein Problem. Es ist eine Leiste, die am rechten Ende durch eine runde Ecke abgeschlossen wird. Ich denke, durch zwei nebeneienander liegenende DIVs wird das am intelligentesten gelöst. Nun habe ich folgenden Versuch gestartet (CSS-Datei):
div#suchfeldende {
height: 27px;
width: 50px;
position: absolute;
right: 3px;
clear:both;
background-image:url(../grafiken/BalkenOrangenurende.jpg);
background-repeat: no-repeat;
}
div#suchfeld {
height: 27px;
width: 500px; /*Was muss hier hin?*/
float:left;
background-image:url(../grafiken/BalkenOrangekomplett.jpg);
background-repeat: repeat-x;
margin-right: 2px;
}
div#suchfeldende enthält die Grafik mit den abgerundeten Ecken. Hier mal ein Screenshot:
http://verboten-scheissegal.de/else/screen012.PNG
Wie bestimme ich nun die Breite von div#suchfeld, damit diese in div#suchfeldende übergeht?
Gruß und Danke für die Hilfe,
zettelbox
-
Grüße,
das ist ja direktes 1 zu 1 des tabellenprinzips.. böööse!
ich verstehe aber nicht warum du das "abgerundete" ende unbedingt in einem getrennten element haben willst.. darfst du es nicht im gleichen div behalten?
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
Klar darf ich das.... :-) Nur: Wie stelle ich es dann an? Dann habe ich gar keine Idee mehr ;-)
-
Des gehört jetzt zwar nich direkt zum Thema .. aba ich würde des mit der Auflösungsoptimierung entweder ganz weglassen oda anders einbauen ... iwi mit Javascript erkennen lassen, wenns nur 800x600 sin un dann die Möglichkeit anbieten umzuschalten oda so... oder gleich ganz vernachlässigen
-
-
-
Es ist eine Leiste, die am rechten Ende durch eine runde Ecke abgeschlossen wird. Ich denke, durch zwei nebeneienander liegenende DIVs wird das am intelligentesten gelöst.
Nein, schon alleine, weil ein <div> dort einzubauen, wo ein <img> hin sollte, nicht so ganz im Sinne des Erfinders ist.
Davon abgesehen lässt sich das auch einfacher lösen: Hintergrundbilder lassen sich positionieren. Du benötigst also lediglich ein entsprechend breites Bild, das am rechten Ende die runde Ecke hat. Dieses bindest Du dann mit
background:url(balken.png) no-repeat right;
ein. Du benötigst keine zwei HTML-Elemente. right sorgt dafür, dass das rechte Ende der Grafik, also die runde Ecke, auch am rechten Ende des betreffenden Elements liegt.
Für Grafiken mit wenigen Farben, wie Du sie hast, eignet sich PNG übrigens besser als JPG; PNG verliert keine Pixel, komprimiert dabei stärker und kann dank Alphakanal besser in den Hintergrund übergehen.
-
Danke erst einmal. Aber: Wie breit muss denn ein "entsprechend breites" Bild sein? Schließlich sollen unterschiedliche Bildschirmauflösungen das Design nicht effektiv beeinflussen, daher arbeite ich eigentlich lieber mit relativen Angaben.
Danke für die bisherigen Antworten und Gruß,
zettelbox-
Wie breit muss denn ein "entsprechend breites" Bild sein? Schließlich sollen unterschiedliche Bildschirmauflösungen das Design nicht effektiv beeinflussen, daher arbeite ich eigentlich lieber mit relativen Angaben.
Das Bild, das Du als Beispiel gezeigt hast, auf 2200 Pixel verbreitert, nimmt im PNG-Format etwa 3 kByte ein. Ich denke, das ist in Sachen Dateigröße noch vertretbar und in der Breite vorerst auch zukunftssicher.
Nur mit dem orangen Balken, die grauen Grafiken in ein anderes Element ausgelagert (<body>?), dürfte es vermutlich noch ein Stück weniger werden.-
Astrein, vielen Dank. Funktioniert problemlos und ist total unkompliziert, so eine Lösung habe ich gesucht. Danke und einen schönen Samstag an alle Helfer,
zettelbox
-
-
Grüße,da gibts 2 möglichkeiten -
svg wen du es dir antun willst
annahme dass ein elenment wohl nie in auflösung über 1300px gezeigt wird. wenn du ein wenig traffic speichern wilslt kannst du doch 2 divs nhmen - und einen mit kachlbarem bg vershen - der dann "randfüller" spielt du bist aber je nach layout mit 800 px gut bedient (kan man den entwurf wo sehen?)
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio
-
-