Du bist nicht angemeldet.

Spalten mit CSS / nachfolgender Text

hijacker666

Anfänger

  • »hijacker666« ist der Autor dieses Themas

Beiträge: 30

  • Private Nachricht senden

1

Montag, 9. April 2007, 16:20

Spalten mit CSS / nachfolgender Text

Hi,

Ich bin gerade dabei für ne HTML Seite mittels CSS 3 Spalten zu imittieren, allerdings habe ich dabei weniger mit Spalten sondern mit dem drum herum ein paar Probleme.

Die Problemseite kann man HIER sehen.

Das Bild des A2 stellt Spalte 1, der Text "Blubber" Spalte 2 bzw. Spalte 3 dar. Allerdings habe ich jetzt das Problem wenn ich da mehrere "blubber" einbauen das sich das ganze Design verschiebt und noch dazu schiebt sich der nachfolgende Text auch mitten rein, siehe die Passage mit Audi A3.

Ich poste im nachfolgenden einmal die HTML und CSS Passagen.

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div id="data">
<p class="pic"><img src="data/images/a2.jpg"></p>
<div class="benzin">
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
</div>
<div class="diesel">
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
<p>BluBBer</p>
</div>


Quellcode

 
1
2
3
4
5

/* Technische Daten */
#data p{margin:0;padding:0}
#data .pic {float:left;width:30%;}
#data .benzin {float:left;width:30%;}
#data .diesel {float:left;width:30%;}


Vielleicht hat von euch wer kurz ein paar Anregungen oder Tipps ...
Signatur von »hijacker666« www.hijacker.at

LapisInfernalis

Super Moderator

Beiträge: 2 817

  • Private Nachricht senden

2

Montag, 9. April 2007, 16:50

Hi hijacker666,

im Moment habe ich nur wenig Zeit, daher nur eine Vermutung:

Verstehe ich das richtig, dass "Audi A3" eigentlich genauso links stehen soll wie der A2?

Wenn ja liegt das daran, dass Du das floaten erst beenden musst, wenn der normale Textfluß wieder hergestellt werden soll.

Wenn Du also willst, dass "Audi A3" wieder links steht, musst Du einem Element dazwischen, oder der Überschrift selbst ein "clear:both" verpassen...

Und BTW: Was hat das von Dir verwendete CSS mit CSS3 zu tun? Ist doch alles CSS 2... ;)

Grüße

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

hijacker666

Anfänger

  • »hijacker666« ist der Autor dieses Themas

Beiträge: 30

  • Private Nachricht senden

3

Montag, 9. April 2007, 17:17

Hi LapisInfernalis,

Danke fürs antworten ;)

Genau so isses gedacht das A3 links, gleich angeordnet wie das A2 ... mit dem "clear" habe ich mich auch schon gespielt, allerdings kommt dann sowas raus ... Firefox interpretiert das clear richtig wenn ich es mit der im Rahmen der <h2> für den Audi A3 löse, der IE dreht aber komplett durch und löscht das restliche Design der Seite komplett ...

Zitat von »LapisInfernalis«

Und BTW: Was hat das von Dir verwendete CSS mit CSS3 zu tun? Ist doch alles CSS 2... ;)


Wer spricht denn von CSS 3, ich sprach von ner Lösung mit CSS bei 3 Spalten :D

edit: Man schaue sich mal mein Attachment an, das entspricht meiner Darstellung des IE, wenn ich jetzt allerdings mit der Maus über den Bereich drüberfahre wo im Firefox Inhalt steht sehe ich den Text schon, sonst ist er grau ... *hmmm* :irre:
Signatur von »hijacker666« www.hijacker.at

LapisInfernalis

Super Moderator

Beiträge: 2 817

  • Private Nachricht senden

4

Montag, 9. April 2007, 20:38

Hi Hijacker,

Sorry, dass mit dem CSS 3 war ein etwas unpassender Scherz meinerseits... :D :dizzy:

Wenn ich mir jetzt die Demo-Seite aus Deinem ersten Posting ansehe (egal ob FF oder IE) scheint alles in Ordnung zu sein... Klappt es jetzt oder gibt es noch Probleme?

Grüße

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

hijacker666

Anfänger

  • »hijacker666« ist der Autor dieses Themas

Beiträge: 30

  • Private Nachricht senden

5

Montag, 9. April 2007, 21:42

Hi,

nö jetzt passt alles. Ich arbeite eigentlich immer mit Phase 5 (dem uralten aber) und der integrierte Browser hat scheinbar Probleme mit der Interpretation von CSS-Code, da ich aber parallel zum integrierten Browser immer auch IE und Firefox laufen hatte dürfte sich das irgendwie auch auf den IE übertragen haben so stellte mir der IE das ganze auch falsch dar, nachdem ich den Phase 5 geschlossen hatte klappte es auch im IE ;)
Signatur von »hijacker666« www.hijacker.at

Lesezeichen: