zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden spezielles CSS floating Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.03.2013, 21:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2013
Beiträge: 4
towerlexa befindet sich auf einem aufstrebenden Ast
Standard spezielles CSS floating Problem

Hallo liebe Forenteilnehmer,

ich bin zwar neu hier im Forum, jedoch nicht unbedingt im Webdesign und in der Homepageprogrammierung. Das soll nun nicht heißen, dass jetzt alles perfekt ist...

Ich habe gerade ein besonderes CSS Floating Problem wo ich nicht weiß, wie ich es lösen soll.

Unter folgendem Link könnt Ihr Euch die Seite anschauen, um die es geht.

Links und Empfehlungen

Folgende Grafik soll dies etwas genauer verdeutlichen:

site_links_outline_floated_elements.png

--------------------------------
Bei der mit (1) markierten Stelle ist das floating noch in Ordnung

bei (2) gibt es den ersten Versatz, den ich mir derzeit nicht erklären kann.

bei (3) ist dann der Versatz komplett und mir ist nicht klar wie ich die Verschiebung korrigieren kann.

Jetzt ist mir nicht klar, wie ich mit meinem tabellenlosen & DIV-Element basierten Design ein korrektes floating erzeugen kann.

Daher würde ich mich freuen, wenn mir vielleicht jemand helfen könnte und sich mein Design anzuschauen.

Danke.
Angehängte Grafiken
Dateityp: png site_links_outline_floated_elements.png (427,5 KB, 16x aufgerufen)
__________________
--
viele Grüße towerlexa

Geändert von towerlexa (04.03.2013 um 21:41 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.03.2013, 21:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ehrlich gesagt verstehe ich nicht, worauf du hinaus willst. Bitte erklär doch mal, was du eigentlich erreichen willst.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.03.2013, 21:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2013
Beiträge: 4
towerlexa befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Bitte erklär doch mal, was du eigentlich erreichen willst.
Hallo Fricca,

danke schon mal für Deine Antwort.

Also was ich möchte, ist, dass jeweils die DIV-Elemente von (1) bündig an der Oberkante, ebenso wie (2) und (3) an der Oberkante ausgerichtet sind.
Die funktioniert bei (1) noch, bei (2) ist dies bereits nicht mehr möglich, da das rechte DIV-Element länger als das linke (2) ist.

Jetzt ist nun meine Vorstellung, dass das linke (3) Element erst beginnt, nachdem Element (2) auf der rechten Seite endet.

Ich möchte also, dass die jeweils linken und rechten Elemente (1), (2), (3) usw. jeweils an der Oberkante nebeneinander ausgerichtet sind.

Natürlich könnte ich nun die Elemente (2) mit einem eigenen DIV-Element umschließen, das wollte ich mir aber sparen, weil ich dieses umschließende Element eigentlich für unnötig halte.

Ich hoffe, ich konnte mich soweit erklären, als dass ich verständlich machen konnte, was ich erreichen möchte.

Falls nicht, bitte ich nochmals um Feedback, dann ordne ich die Elemente 1x künstlich so an, wie der gedachte Zielzustand ist.

Danke
__________________
--
viele Grüße towerlexa
Mit Zitat antworten
  #4 (permalink)  
Alt 04.03.2013, 21:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

*arg* 123 -- das ist verdammt mühsam. Aber jetzt dämmerts.
Zitat:
Zitat von towerlexa Beitrag anzeigen
Natürlich könnte ich nun die Elemente (2) mit einem eigenen DIV-Element umschließen, das wollte ich mir aber sparen, weil ich dieses umschließende Element eigentlich für unnötig halte.
Nein, es ist nicht unnötig. Genau deshalb habe ich nicht verstanden, was du willst: Weil dein Code nicht erkennen lässt, was zusammen gehört. Fass zusammen was zusammen gehört.
Dann versteht dich auch der Browser (und ich).

Überflüssig sind hingegen die Divs, die du um die Links geschachtelt hast (s_link_def_1).

Geändert von fricca (04.03.2013 um 21:58 Uhr) Grund: zu schnell getippt ...
Mit Zitat antworten
  #5 (permalink)  
Alt 05.03.2013, 09:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2013
Beiträge: 4
towerlexa befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
*arg* 123 -- das ist verdammt mühsam. Aber jetzt dämmerts.

Nein, es ist nicht unnötig. Genau deshalb habe ich nicht verstanden, was du willst: Weil dein Code nicht erkennen lässt, was zusammen gehört. Fass zusammen was zusammen gehört.
Dann versteht dich auch der Browser (und ich).
erstmal Sorry & tut mir leid, dass ich Dir so viel Mühe bereitet habe. Wenn Du einen einfacheren Weg weißt die Elemente zu strukturieren, ohne dass ich explizit Tabellen verwenden muss, dann immer gern...

Jetzt habe ich 2 Varianten gemacht:

1. Variante mit einem DIV-Element um den Link, oder das Bild zusammen mit der Beschreibung zu gruppieren:

Links und Empfehlungen

Code:
<!-- Start with the table_defining -->
<div class="t_link_def">

<!--  <a class="int" href=""></a>                        -->

<!-- www.reiseweg.at -->
<div class="s_link">
<div class="s_link_def"><a class="int" target="_blank" href="http://www.reiseweg.at"><img class="photo" src="/images/logos/fotoreiseberichte_de_kl.png"  width="195" alt="fotoreiseberichte_de_kl.png" title="fotoreiseberichte_de_kl.png"></a></div>

<div class="s_link_desc"><h4 id="www.reiseweg.at"><a class="int" target="_blank" href="http://www.reiseweg.at">www.reiseweg.at</a></h4>
Sch&ouml;ne Seite mit Bildern zu div. Reisen und dem Thema Streetfotografie</div>
</div>
Zitat:
Zitat von fricca Beitrag anzeigen
Überflüssig sind hingegen die Divs, die du um die Links geschachtelt hast (s_link_def_1).
2. Variante, wenn ich den DIV-Container um den Link/Grafik weglasse:

Links und Empfehlungen

Code:
<!-- Start with the table_defining -->
<div class="t_link_def">

<a class="int" target="_blank" href="http://www.reiseweg.at"><img class="photo" src="/images/logos/fotoreiseberichte_de_kl.png"  width="195" alt="fotoreiseberichte_de_kl.png" title="fotoreiseberichte_de_kl.png"></a>

<div class="s_link_desc"><h4 id="www.reiseweg.at"><a class="int" target="_blank" href="http://www.reiseweg.at">www.reiseweg.at</a></h4>
Sch&ouml;ne Seite mit Bildern zu div. Reisen und dem Thema Streetfotografie</div>
Dann wirds aber eher schlimmer, als besser, es sei denn ich habe da noch was falsch verstanden.

Wenn ich mich da jetzt hier ein wenig verrant haben sollte, wäre ich über einen Stubs in die richtige Richtung dankbar.

Was mich persönlich noch sehr stört, ist der extreme Verhau mit den DIV-Elementen...
So habe ich zwar Design und Inhalt getrennt, aber letztlich keine Vereinfachung erreicht.

Danke noch mal für Deine Mühe!
__________________
--
viele Grüße towerlexa
Mit Zitat antworten
  #6 (permalink)  
Alt 05.03.2013, 10:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von towerlexa Beitrag anzeigen
erstmal Sorry & tut mir leid, dass ich Dir so viel Mühe bereitet habe.
Die Mühe entsteht, weil dein Code nicht sinnvoll ist -- und man deshalb auch nicht sinnvoll darüber reden kann. Das musst du doch selbst merken. 123?

Zitat:
Wenn Du einen einfacheren Weg weißt die Elemente zu strukturieren, ohne dass ich explizit Tabellen verwenden muss, dann immer gern...
Ich habe keine Ahnung, was du mit Tabellen willst.

Du listest Linkempfehlungen auf. Also könnte das ganze eine Liste sein.

Zitat:
1. Variante mit einem DIV-Element um den Link, oder das Bild zusammen mit der Beschreibung zu gruppieren:
Genau. Das ist Schritt eins. Zusammenfassen, was zusammen gehört.
Was an der Darstellung entspricht jetzt noch nicht deiner Vorstellung?

Zitat:
2. Variante, wenn ich den DIV-Container um den Link/Grafik weglasse:
Da fehlt schon wieder das zusammenfassende Element. Es ist kein "entweder/oder", was ich oben geschrieben habe, sondern ein "und".
Du brauchst das gruppierende Elemente aus Variante 1, damit dein Code logisch wird. Logischen Code kann man dann auch besser gestalten.
Wenn du das div um den Link weglässt aber die Klasse brauchst, die du vorher dem div gegeben hattest -- dann gib sie jetzt dem Link.


Zitat:
Was mich persönlich noch sehr stört, ist der extreme Verhau mit den DIV-Elementen...
Div-Elemente haben die Aufgabe, Zusammengehöriges zusammenzufassen. Jeweils ein Link und ein Textblock gehören zusammen. Also muss das in deinem Code auch so stehen.
Was man nicht braucht, ist ein Div, in dem nur ein einziges Element steht -- wie bei deinem Link. Alles, was du mit dem Div gemacht hast, kannst du auch mit dem Link direkt machen.

Zitat:
So habe ich zwar Design und Inhalt getrennt, aber letztlich keine Vereinfachung erreicht.
Mit Design hat das alles erstmal nichts zu tun, sondern mit sinnvollem HTML. "Vereinfachung" ist dabei nicht das erste Ziel, sondern die Struktur des Inhalts abzubilden.
Bei dir fehlen z.B. noch Textabsätze in den Textbereichen. Die <br> brauchst du wiederum nicht.

Geändert von fricca (05.03.2013 um 10:39 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 05.03.2013, 10:41
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallöchen,

da Bild, Überschrift und Beschreibung je eine Einheit bilden, gehören diese auch in ein gemeinsames div-Element. Innerhalb des div-Elements sind dann nur noch ein hX-Element für die Überschrift, ein img-Element für das Bild und ein p-Element für den Text nötig. Ein möglicher Aufbau wäre somit:
Code:
<div>
    <h2>
        <a href="URL">
            <img src="URL" alt="Beschreibung">
            <span>Überschrift</span>
        </a>
    </h2>
    <p>
        Text
    </p>
</div>
Dieses Beispiel soll zeigen, wie das Ganze in der Praxis aussehen könnte.

Mit freundlichen Grüßen,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #8 (permalink)  
Alt 06.03.2013, 07:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2013
Beiträge: 4
towerlexa befindet sich auf einem aufstrebenden Ast
Standard

Hallo Lotti & Fricca,

danke für Eure Antworten. Ich muss nun erstmal in Ruhe verdauen und mir den Vorschlag von Lotti mal genauer anschauen.

@Fricca,

danke auch für Deine ausführliche Antwort. Klar, so wie im Beispiel 1 in meiner letzten Antwort gezeigt, war das ja auch genau die Umsetzung von der Gruppierung mit DIV-Elementen, wie Du es bereits vorgeschlagen hattest.

Ich habe jetzt verstanden, dass die DIV-Elemente zum Gruppieren da sind, was ich ja vorher auch bereits so gemacht hatte, nur eben nicht bis ganz zum Schluß.

Ich hatte noch herausgelesen, dass nicht klar rübergekommen ist, was ich mit den Tabellen meinte... Letzten Endes sind die DIV-Elemente (zumindest derzeit bei mir) ja so angeordnet, dass sich im Prinzip eine Tabellenstruktur ergibt


Code:
<div1>
         <div2>..........</div2>           <div3> ..........</div3>
</div1>


<div1>
         <div2>..........</div2>           <div3> ..........</div3>
</div1>
So habe ich also eine tabellenartige Anordnung dann nachgebildet.
__________________
--
viele Grüße towerlexa
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 16:09
CSS Problem Design auf anderen Rechnern verschoben MALPI CSS 3 09.10.2008 10:51
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript chrisol_76 CSS 2 21.07.2008 17:37
Css und Steam Problem justinlenz Offtopic 3 27.03.2008 21:58
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:34 Uhr.