[HTML/CSS] Div-Container Anordnung

[Ylloh]

Hallö, ich hätte da gern mal ein Problem.

Bin grad dabei einen Photoblog einzurichten, und wollte dafür natürlich ein eigenes Aussehen erschaffen, nun wird ja soviel erzählt, dass Tabellen-Designs out wären, also wollte ich mich mal an ein DIV-Design wagen, nun stellt sich mir aber ein Problem in den Weg:



Ich habe ein Bild, dass je nach Bild unterschiedlich groß ist, oben drüber soll linksbündig ein Feld für Text sein, rechts oben bündig auch, wie im Bild zu sehen... In Tabellen wär das recht simpel gemacht, die divs wehren sich jedoch (ich hab schon reichlich herumversucht) hat vielleicht jemand einen Tip, wie sich das am geschicktesten realisieren ließe?

Danke und Gruß
Holger

 

[justme69]

Poste doch mal einen deiner div-Versuche

Da läßt sich mehr konkretes sagen.

Ansonsten einen Bereich noch um alles bauen und die oberen Div's dann per align und relativer Positionierung basteln

 

[Claudi]

Ich würds so realisieren:

1. Einen kompletten Rahmen um das ganze Teil (wie justme69 schon gesagt hat)

2. Die beiden Boxen oben jeweils mit float: right und left ausrichten.

3. Das Bild dann inner weiteren Box untendrunter

So müssts eigentlich klappen

 

[Ylloh]

Mein Problem ist, dass sich die Box nicht auf die Breite des Bildes sondern auf 100% des Bildschirmes ausbreitet...

Der derzeitige "Roh-Quelltext" ist (wie gesagt, hatte schon zig verschiedene Varianten ausprobiert...):

<div style="overflow:visible; border:1px solid black; ">

    <div style="float:left; position:relative; border:1px solid black;">Titel</div>
    <div style="float:right; position:relative;">*****</div>
    <br style="clear:both;">
    <img src="exem.jpg">
    

</div>

 

[Claudi]

<div style="overflow:visible; border:1px solid black; ">

    <div style="float:left; position:relative; border:1px solid black;">Titel</div>
    <div style="float:right; position:relative;">*****</div>
    <div style="clear:both;">
        <img src="exem.jpg">
    </div>

</div>

Versuch des ma

 

[Ylloh]

hat immer noch eine Breite von 100%

 

[justme69]

definiere für den div des Bildes eine feste Breite - und schon passt's - oder

 

[Ylloh]

das ist ja grade Sinn der Sache dass das nicht der Fall ist, denn das Bild wird ja aus der Datenbank geholt, und alle Bilder sind unterschiedlich

 

[justme69]

Hmmm... ob das funzt weiß ich nicht..

Ein Ansatz:
ermittle dir die Breite des Bildes zuerst (SQL und/oder php-Code) und setze über php die breite des div-bereichs... mit der Bildgröße... + x-Pixel Rand

 

[Ylloh]

ja super (irgendwie doch sehr umständlich...), dann mach ich lieber ne Tabelle, damit funzt das ohne Probleme

 

[oak]

Gib dem Div die minimale Höhe bzw. Breite an die das Div haben soll, falls das Bild größer ist streckt es sich eh! Ist zwar nicht unbedingt die schönste Lösung, aber die einfachste!

 

[ganzkurz]

<div style="overflow:visible; border:1px solid black; ">

    <div style="float:left; position:relative; border:1px solid black;">Titel</div>
    <div style="float:right; position:relative;">*****</div>
    <span style="clear:both;">
        <img src="exem.jpg">
    </span>

</div>

probier das mal...
Ein div geht immer auf 100% Breite weil ein autom. Zeilenumbruch eingebaut ist. span ist das gleiche (eine Art Container) nur ohne Zeilenumbruch und immer so breit wie sein Inhalt.

Das Verhalten von span lässt sich auch div beibringen

<div style="overflow:visible; border:1px solid black; ">

    <div style="float:left; position:relative; border:1px solid black;">Titel</div>
    <div style="float:right; position:relative;">*****</div>
    <div style="clear:both;display:inline;">
        <img src="exem.jpg">
    </div>

</div>

mfg