divs `floaten´

HerrSamsa · 22.09.2011

Ich hab mich gerade durchs Inet bewegt um eine Lösung zu finden, aber irgendwie... naja, ich RAFFS NET

Ganz einfache Grundidee:

Auf meiner Website möchte ich im Portfolio Bereich (im Content Container) ein 3 Spaltiges Layout. Das möchte ich aber NICHT mit einer Tabelle umsetzen sondern mit div Containern.

Das nebeneinandersetzen der Container scheint das berühmte "floaten" zu sein - also zumindest, was ich nun in Erfaharung bringen konnte.

ABER - an der Umsetzung haperts.

Wie baue ich das alles 3x3 div container in meine Seite ein OHNE eine externe Css Datei?

Myhar · 22.09.2011

AW: divs `floaten´

Styles kann man, sofern man keine CSS Datei verwenden möchte, auch als inline Styles deklarieren

Code:

<p style="float:left;border:3px solid red; ">
Ich bin ein left floatender Paragraph und habe einen roten Border
</p>

Wieso möchtest (musst?) du auf eine CSS Datei verzichten?

PS: Wenn du schon unnötige Anführungszeichen verwendest, dann bitte auch richtige (") und keine accents.

L. G.

HerrSamsa · 22.09.2011

AW: divs `floaten´

sorry ;(

das ding ist in ein CMS eingebaut. Wegen der einmaligen Verwendung und um Konflikte zu vermeiden würde ich es eben gerne direkt einsetzen.....

fexx · 22.09.2011

AW: divs `floaten´

Und das clearen nicht vergessen... ;-)

tomschy · 22.09.2011

AW: divs `floaten´

Hallo,

du definierst einfach deine 3 div´s in einer CSS und legst die Breiten fest.
Dem linken Div gibst du ein float: left mit, in der CSS natürlich, und dem rechten ein float: right.
Das mittlere setzt sich automatisch dazwischen. Natürlich musst du alle noch mit margin/padding ausstatten.

Ganz wichtig: wehr floatet muss auch clearen !
Heisst also, daß am Ende ein clear:both folgen muss. Das kannst du dann zum Beispiel in einem Div festlegen, dass die Fusszeile darstellen soll.
Andernfalls auch direkten Code im Html am Ende deiner Inhalte (div´s)

Google mal nach 3 spaltugem Layout und css.
Da findest du eigentlich alles, auch fertigen Code, den du vielleicht nur noch etwas anpassen musst.

Grüsse
Thomas

HerrSamsa · 22.09.2011

AW: divs `floaten´

guter tipp

habe gegooglet und eine übersicht gefunden, die mir echt gefällt - aber die ist 2 spaltig und das will ich 3 spaltig....

was muss ich da ändern?

<div class="gallery">
<div class="gallery_item first">
<h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
<a class="shadow_light" href="/Portals/0/usr/folio-sakura/1.jpg"><img alt="" width="280" height="150" class="gallery_img" src="/Portals/0/usr/folio-sakura/1_resize.jpg" /></a>
Est neque commodo quis dignissim quis tempor eget maecenas sodales ligula non nunc rutrum bibendum elit bibendum consectetuer.
<a title="Details" class="go_details" href="#"></a>
</div>
<div class="gallery_item first">
<h4><a href="#">Vitae auctor curabitur</a></h4>
<a class="shadow_light" href="/Portals/0/usr/folio-sakura/2.jpg"><img alt="" width="280" height="150" class="gallery_img" src="/Portals/0/usr/folio-sakura/2_resize.jpg" /></a>
Orci tempor vivamus neque ridiculus mauris consequat sagittis velit pede et et nonummy id dis sed eget donec.
<a title="Details" class="go_details" href="#"></a>
</div>
<div class="gallery_item">
<h4><a href="#">Nam a sollicitudin</a></h4>
<a class="shadow_light" href="/Portals/0/usr/folio-sakura/3.jpg"><img alt="" width="280" height="150" class="gallery_img" src="/Portals/0/usr/folio-sakura/3_resize.jpg" /></a>
Neque maecenas nulla nibh tristique eget nulla bibendum sapien amet quam ut. Itaque convallis nulla a aliquet et sit diam mauris vel nisl mus.
<a title="Details" class="go_details" href="#"></a>
</div>
<div class="gallery_item">
<h4><a href="#">Sed bibendum ac</a></h4>
<a class="shadow_light" href="/Portals/0/usr/folio-sakura/4.jpg"><img alt="" width="280" height="150" class="gallery_img" src="/Portals/0/usr/folio-sakura/4_resize.jpg" /></a>
Eget praesent tincidunt in arcu tellus. At erat sed nullam sit porta. Augue augue quam sed amet habitasse sed et condimentum nonummy feugiat.
<a title="Details" class="go_details" href="#"></a>
</div>
<div class="gallery_item">
<h4><a href="#">Quam sed ante</a></h4>
<a class="shadow_light" href="/Portals/0/usr/folio-sakura/5.jpg"><img alt="" width="280" height="150" class="gallery_img" src="/Portals/0/usr/folio-sakura/5_resize.jpg" /></a>
Vitae ligula placerat massa arcu ligula hymenaeos risus magna eros nullam dignissim lacinia ut sit nisl lectus amet.
<a title="Details" class="go_details" href="#"></a>
</div>
<div class="gallery_item">
<h4><a href="#">Convallis neque enim</a></h4>
<a class="shadow_light" href="/Portals/0/usr/folio-sakura/6.jpg"><img alt="" width="280" height="150" class="gallery_img" src="/Portals/0/usr/folio-sakura/6_resize.jpg" /></a>
Sodales sed duis vestibulum quam massa amet aliquet facilisis fusce sed ultricies. Accumsan elit luctus dui aenean erat at vitae pede.
<a title="Details" class="go_details" href="#"></a>
</div>
<div class="gallery_item">
<h4><a href="#">Proin pulvinar libero</a></h4>
<a class="shadow_light" href="/Portals/0/usr/folio-sakura/7.jpg"><img alt="" width="280" height="150" class="gallery_img" src="/Portals/0/usr/folio-sakura/7_resize.jpg" /></a>
Ligula magna lobortis enim est eu morbi interdum diam vestibulum in nascetur in faucibus praesent eu varius ut vestibulum.
<a title="Details" class="go_details" href="#"></a>
</div>
<div class="gallery_item">
<h4><a href="#">Sit sodales orci</a></h4>
<a class="shadow_light" href="/Portals/0/usr/folio-sakura/8.jpg"><img alt="" width="280" height="150" class="gallery_img" src="/Portals/0/usr/folio-sakura/8_resize.jpg" /></a>
Vitae tellus tristique lacus dui sodales viverra egestas vitae dis pellentesque porttitor et mauris vivamus tortor vel dictumst.
<a title="Details" class="go_details" href="#"></a>
</div>
</div>

Myhar · 22.09.2011

AW: divs `floaten´

Was passt dir an den vielen Lösungen, welche , denn nicht?

L. G.

HerrSamsa · 22.09.2011

AW: divs `floaten´

na nichts - hab ja eine Lösung gefunden.....
Oder geht das mit dem oben stehenden ding nicht?

LaFaSiLuc · 22.09.2011

AW: divs `floaten´

bei intensivstation.ch findest du eigentlich alles, was mit css machbar ist als template. und zu dem obigen kann man nuscht sagen, weil ja das css nicht mit bei steht. Ansonsten quetsch doch einfach einen div container dazwischen und bastel es dir zurecht (?)

PS: und ein CMS ist doch gerade dafür prädestiniert. CSS Elemente im HTML sind unfein...

HerrSamsa · 22.09.2011

AW: divs `floaten´

erstmal danke für den link

Mein Hauptproblem ist halt , dass ich sowas von keine Ahnung von dem Krempel hab. Ich gehe nach - gefällt mir, gefällt mir net

,

tomschy · 22.09.2011

AW: divs `floaten´

dann solltest du dich zunächst auch mit den Grundkenntnissen html und css befassen, denn ohne die wirds nahzu unmöglich sein etwas Fertiges auf deine Wünsche abzuändern.
Durch diese Schule musste jeder durch,.... ;-)
Empfehlenswert dazu www.selfhtml.org

Auf der Basis deren Beispiele solltest du dann anfangen, deine Änderungen zu machen.
Wenns dann noch Probleme gibt, dann wird dir hier bestimmt geholfen.
Dann solltest du deinen html und css Code posten, dann kann man sich die Probleme auch anschauen.
Ich empfehle dir deine Kolumne auf CSS Basis zu machen, denn sonst wirds unübersichtlich im html.

Thomas

HerrSamsa · 22.09.2011

AW: divs `floaten´

hmm... das ist das was ich eben auch befürchte - das ding als tabelle - neee ist doof :

tomschy · 22.09.2011

AW: divs `floaten´

Da hast du allerdings recht ;-)

fexx · 22.09.2011

AW: divs `floaten´

Ich versteh nur noch Bahnhof... -.-

Was genau ist dein Problem bzw. was genau hast du bitte vor? Um drei Elemente nebeneinander zu Positionieren braucht man keine Tabellen (mal davon abgesehen, dass das semantisch völliger Nonsens wäre).
Du redest die ganze Zeit von "gefällt mir/gefällt mir nicht" ... vielleicht zeigst du uns mal, was du dir genau vorstellst.

jickmagger · 22.09.2011

AW: divs `floaten´

Selfhtml ist eine gute Wahl. Noch ein gutes Buch dazu und fertig.
Investiere etwas Zeit in die Grundlagen von HTML und CSS, - dann baut sich sowas im Handumdrehen.
Fertige Templates zusammenzusuchen und einzubauen stelle ich mir schwierig vor wenn gewisse Grundlagen unklar sind.
Wenn du vorhast mehr an Websitekonstruktion auf die Beine zu stellen solltest du etwas Zeit opfern.
Macht alles einfacher.

lg udo

HerrSamsa · 22.09.2011

AW: divs `floaten´

Ich habs geschafft - :=)
Ihr hattet ja recht - ein bisschen was dazu lesen (ok - oder ein bisschen mehr) und es war ganz einfach

danke!

LaFaSiLuc · 22.09.2011

AW: divs `floaten´

und? wie hast es nun gelöst?