zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit Floats

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.08.2012, 00:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2012
Beiträge: 6
julthetool befindet sich auf einem aufstrebenden Ast
Unglücklich Probleme mit Floats

Liebe Forumsgemeinde,

Ich habe ein Problem mit floats und google ist erschöpft. Anbei eine Grafik worauf ich hinaus will.

Vielleicht ist auch die Verteilung der Container so gar nicht richtig ( oder notwendig) jedenfalls ist die geplante seite full-width.

Zur weiteren Beschreibung: Das Logo steht ganz links, die beiden Menüs links und rechts und darunter ein Strich (der eben nicht über die ganz Länge geht sondern die Breite des Logos ausnimmt und das ist die Schwierigkeit)

Fällt euch dazu was ein?

Vielen Dank für eure Hilfe im Vorraus.

Liebe Grüße
Angehängte Grafiken
Dateityp: png floatproblem.png (9,3 KB, 16x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.08.2012, 01:28
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Du kannst es mal so versuchen, ich aber habs nicht getestet.
Die Stylesheets werden normal ausgelagert.
HTML-Code:
<div style="width: 800px; height: 800px; border: solid 1px #FF0000; padding: 1px; margin: 5px auto;">
	<div style="float: left; width: 200px; height: 200px; ">
		<img src="adresse.jpg" style="border: double; width: 200px; height: 200px;" alt="Logo" />
	</div>
	<div style="float: right; width: 590px; height: 200px; border-bottom: solid 2px; ">
		<div style="float: left; width: 290px; height: 190px; padding: 5px; padding-top:150px ;">
			<ul style="display: inline;">
				<li style="display: inline; text-decoration: none;">Link1</li>
				<li style="display: inline; text-decoration: none;">Link2</li>
				<li style="display: inline; text-decoration: none;">Link3</li>
			</ul>
		</div>
		<div style="float: right; width: 280px; height: 190px; padding: 5px; padding-top:150px ;">
			<ul style="display: inline;">
				<li style="display: inline; text-decoration: none;">Link4</li>
				<li style="display: inline; text-decoration: none;">Link5</li>
				<li style="display: inline; text-decoration: none;">Link6</li>
			</ul>

		</div>
	</div>
</div>
MfG

Geändert von gabischatz (13.08.2012 um 01:37 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.08.2012, 06:50
Benutzer
neuer user
 
Registriert seit: 14.09.2009
Beiträge: 88
Hook befindet sich auf einem aufstrebenden Ast
Standard

Hi,
der Ansatz von Gabischatz ist schon ganz gut, leider fehlt noch ein clearendes Element, die horizontale Linie geht über die gesamte Breite des div und ein paar div sind zuviel. Hier mal ein möglicher Aufbau:
HTML-Code:
<img style="display:block;float: left; width: XXXpx; height: YYYpx; src="adresse.jpg"  alt="Logo" />

<div style="height:YYYpx">
	<ul style="float: left;margin-top: XYZpx;display: inline;">
		<li style="display: inline; text-decoration: none;">Link1</li>
		<li style="display: inline; text-decoration: none;">Link2</li>
		<li style="display: inline; text-decoration: none;">Link3</li>
	</ul>
		
	<ul style="float: right;margin-top: XYZpx;display: inline;">
		<li style="display: inline; text-decoration: none;">Link4</li>
		<li style="display: inline; text-decoration: none;">Link5</li>
		<li style="display: inline; text-decoration: none;">Link6</li>
	</ul>
        <div style="clear:both;"></div>
        <hr style="width:90%;" />
</div>
Hook
Mit Zitat antworten
  #4 (permalink)  
Alt 13.08.2012, 10:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Hi Hook,
den Ansatz ist auch nicht schlecht, es kommt nur darauf an wie es hinterher aussehen soll, wobei das Irrelevant ist da jeder Benutzer sich seine Ansicht selber einrichten kann.
Es ging mir nur darum ihm zu zeigen wie man so etwas aufbaut.
Ob man einige DIVs weglassen kann, hängt von den Hintergrund-Grafiken ab
oder ob ich es zentriert haben möchte oder oder oder.
HR setze ich ein, um bei aus geschalteten Stylesheet Informationsbereiche von einander zu trennen. Deshalb steht bei mir in der CSS-Datei
HTML-Code:
hr {
	display: none;
	clear: both;
}
Also ich hätte ihm auch ein fertiges Template reinstellen können, aber bringt es ihm was? Lernen muss er schon allein.
MfG
Mit Zitat antworten
  #5 (permalink)  
Alt 13.08.2012, 10:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von Hook Beitrag anzeigen
Hier mal ein möglicher Aufbau:
Wenn Du schon Code zeigst, Dan bitte so:

HTML-Code:
<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Beispiel</title>

<style type="text/css">

...............................................

</style>

</head>
<body>

............................................

</body>
</html>
____________
Gruß,
Roland
Mit Zitat antworten
  #6 (permalink)  
Alt 13.08.2012, 10:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2012
Beiträge: 6
julthetool befindet sich auf einem aufstrebenden Ast
Standard

sensationell wie schnell in diesem Forum wer antwortet - Danke!

Als Schwierigkeit kommt hinzu (und das ist ja genau das Problem) das Logo hat natürlich eine gewisse Breite (sagen wir jetzt 150px), der Rest (also das im gelben Kästchen) geht immer über die restliche Breite des Fensters...

Ideen?
Mit Zitat antworten
  #7 (permalink)  
Alt 13.08.2012, 11:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2012
Beiträge: 6
julthetool befindet sich auf einem aufstrebenden Ast
Standard

Jetzt hat es tatsächlich geklappt.

Das float des gelben Kästchens weg und noch ein paar Margins und jetzt gehts. Vielen Dank!!!!
Mit Zitat antworten
  #8 (permalink)  
Alt 13.08.2012, 12:08
Benutzer
neuer user
 
Registriert seit: 14.09.2009
Beiträge: 88
Hook befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gabischatz Beitrag anzeigen
Hi Hook,
den Ansatz ist auch nicht schlecht,
Danke


Zitat:
Zitat von gabischatz Beitrag anzeigen
Ob man einige DIVs weglassen kann, hängt von den Hintergrund-Grafiken ab oder ob ich es zentriert haben möchte oder oder oder.
Das würde ich genau umgedreht formulieren. Warum sollte der TO so viel "Ballast" mitschleppen, wenn er ihn gar nicht braucht. Selbstverständlich kann es notwendig werden, weitere Boxen anzulegen, allerdings nicht bei dem gezeigten Bild.

Zitat:
Zitat von gabischatz Beitrag anzeigen
HR setze ich ein, um bei aus geschalteten Stylesheet Informationsbereiche von einander zu trennen. Deshalb steht bei mir in der CSS-Datei
HTML-Code:
hr {
	display: none;
	clear: both;
}
Das ist ja auch sinnvoll, hindert aber nicht darann eine hr auch (semantisch korrekt) innerhalb der Seite anzeigen zu lassen, dann muss eben eine extra Klasse eingeführt werden.
Zitat:
Zitat von gabischatz Beitrag anzeigen
aber bringt es ihm was? Lernen muss er schon allein.
Volle Zustimmung. Deswegen ja auch nur der prinzipielle Aufbau. Der To hat jetzt schon mal zwei Ansätze, auf denen er weiter Aufbauen kann.

@K.Roland
Warum sollte ich das gesamte Grundgerüst mit angeben. Ich kenne weder die gewünschte DTD noch weiß ich welcher Zeichensatz genommen werden soll.

Für mich ging es hier nur um einen Codeschnippsel, der den rudimentären Aufbau darstellt, ohne jeden überflüssigen Kram. Und inline-Styles sind zwar nicht schön, aber auch nicht falsch.

Hook
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
CSS-Anfänger: im IE7 Probleme mit clear und falling floats blablub CSS 7 24.08.2009 20:38
Probleme mit floats bei Bildern fex89 CSS 1 16.03.2009 19:22
IE: Probleme mit ul-Menü Ares CSS 4 18.10.2006 11:42
IE und Probleme mit floats insanic! CSS 2 28.08.2006 20:03
Probleme mit geschachtelten divs und floats im Firefox thalon CSS 5 04.11.2004 13:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:55 Uhr.