<h4> links und <div> rechts in einer Zeile

[michi]

Hallo,
Ich will eine h4 links bündig und einen <div>-Block rechts bündig darstellen.
Beide sollen in einer Zeile stehen und dazwischen soll nix stehen.

Wollte das so machen, geht aber nicht, bitte um Hilfe:

<h4><a name="Stern">-Stern</a>
</h4>
<div style="float:right; ">
 <a target="_blank" href="http://de.wikipedia.org/wiki/Stern" class="nu">
   <img src="wiki.ico" alt="Wikipedia" title="Wikipedia: Stern"></a>
 <a href="http://www.http://www.astronomia.de/index.htm?http://www.astronomia.de/start.htm" class="nu">
   <img src="astronima.gif" alt="Astronima" title="Astronima: Sternentstehung"></a>
 <a href="http://www.zum.de/Faecher/A/Sa/STERNE/st1.htm" class="nu">
   <img src="http://www.zum.de/gifs/islebil.gif" alt="ZUM im Internet" title="Zum.de: Sternentstehung"></a>
 <a href="http://www.zum.de/Faecher/A/Sa/STERNE/nachhauptreihe.htm" class="nu">
   <img src="http://www.zum.de/gifs/islebil.gif" alt="ZUM im Internet" title="Zum.de: Der Tod eines Sternes"></a>
</div>

[berdn]

Hallo Michi,

das div Element würde ich durch eine Liste ul ersetzen.
die ul und das h4 Element, zu einer Gruppe, in einem div zusammenfassen.

<div class="myGroup">
<h4>...</h4>
<ul>
<li>...</li>
...
</ul>

und im CSS dann

.myGroup {width: 10em;}
.myGroup h4 {width: 5em; float: left;}
.myGroup ul {width: 5em; float: right;}

Das sollte eigentlich funktionieren.

Liebe Grüße,

Bernd

[michi]

das div Element würde ich durch eine Liste ul ersetzen.
die ul und das h4 Element, zu einer Gruppe, in einem div zusammenfassen.

<div class="myGroup">
<h4>...</h4>
<ul>
<li>...</li>
...
</ul>

und im CSS dann

.myGroup {width: 10em;}
.myGroup h4 {width: 5em; float: left;}
.myGroup ul {width: 5em; float: right;}

Das sollte eigentlich funktionieren.

Hä???
1. Wenn ich div durch ul ersetze ist das ne Liste, die Icons werden untereinander angezeigt, das will ich nicht!!! Dich Icons sollen am rechten Rand des Fensters neben einander dargestellt werden!

2. Auch wenn ich das nicht mache klappt das nicht, die Icons werden (wegen dem width: 5em;) in 2 Reihen angezeigt; und auch nicht rechts sondern nur ein kleines Stücken eingrückt!

[Gunnar Bittersmann]

Hello out there!

<div class="myGroup">
<h4>...</h4>
<ul>
</ul>

.myGroup {width: 10em;}
.myGroup h4 {width: 5em; float: left;}
.myGroup ul {width: 5em; float: right;}

Das sollte eigentlich funktionieren.

Aber nur, wenn sämtliche linken und rechten paddings, borders und margins sowohl von 'h4' als auch von 'ul' die Breite 0 haben.

See ya up the road,
Gunnar

[berdn]

Hallo Michi,

dann etwas ausfühlicher ...

CSS:

/*gilt so für a l l e Elemente!*/
* { margin: 0; padding 0; }

.myGroup {width: 10em;}
.myGroup h4 {width: 5em; float: left;}
.myGroup ul {width: 5em; float: right;}
.myGroup ul li {display. inline; }

/*Und auch noch sicherheitshalber die Border auf 0.*/
.myGroup h4,
.myGroup ul,
.myGroup ul li { border: none; }

Gebe mal Den Elementen Testweise Hintergrundfarben, und spiele mit den Breiten, dem Padding ,dem Margin oder mit den Border dannwird einieges klarer.

Uuups, dann gibt es noch display: block und inline

Lese nach, wie sich die Breite eine Elementes durch Margin oder Padding verändert.

Halte Dein CSS in einer externen Datei, kurz beschäftige Dich doch diese Woche mal mit CSS.

Ohne lernen und Eigeninitiative wird das nichts.

Und stelle fest das man im Forumsarchiv, in SelfHTML etc. auch suchen und finden kann.

Liebe Grüße,

Bernd

[Gunnar Bittersmann]

Hello out there!

Ich will eine h4 links bündig und einen <div>-Block rechts bündig darstellen.
Beide sollen in einer Zeile stehen und dazwischen soll nix stehen.

Mit „in einer Zeile“ meinst du nebeneinander? Beide Boxen haben ihre eigenen Zeilen.

<h4><a name="Stern">-Stern</a>
</h4>

Damit dehnt sich die 'h4'-Box über die gesamte Breite aus.

<div style="float:right; ">

Damit wird alles _Nachfolgende_ um diese 'div'-Box gefloatet.

<Gebetsmühle>Und Style-Angaben nicht inline ('style'-Attribute), sondern zentral ('style'-Element, externes Stylesheet)</Gebetsmühle>

See ya up the road,
Gunnar

[michi]

Mit „in einer Zeile“ meinst du nebeneinander?

Ja

Beide Boxen haben ihre eigenen Zeilen.

<h4><a name="Stern">-Stern</a>
</h4>

Damit dehnt sich die 'h4'-Box über die gesamte Breite aus.

<div style="float:right; ">

Damit wird alles _Nachfolgende_ um diese 'div'-Box gefloatet.

<Gebetsmühle>Und Style-Angaben nicht inline ('style'-Attribute), sondern zentral ('style'-Element, externes Stylesheet)</Gebetsmühle>

Und wie mach ich das dan???

[Gunnar Bittersmann]

Hello out there!

<Gebetsmühle>Und Style-Angaben nicht inline ('style'-Attribute), sondern zentral ('style'-Element, externes Stylesheet)</Gebetsmühle>

Und wie mach ich das dan???

Wie in „<http://de.selfhtml.org/css/formate/einbinden.htm#zentral@title=Formate zentral für eine HTML-Datei definieren>“ und „<http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=Formate zentral in separater CSS-Datei definieren>“ beschrieben.

See ya up the road,
Gunnar

[Michael]

<Gebetsmühle>Und Style-Angaben nicht inline ('style'-Attribute), sondern zentral ('style'-Element, externes Stylesheet)</Gebetsmühle>

Und wie mach ich das dan???

Wie in „<http://de.selfhtml.org/css/formate/einbinden.htm#zentral@title=Formate zentral für eine HTML-Datei definieren>“ und „<http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=Formate zentral in separater CSS-Datei definieren>“ beschrieben.

Sprech ich Chinesisch? Wie mann CSS-angaben zentral macht weiß ich natürlich!

Wie mach ich es das <h4> links und <div> rechts in der selben Zeile Stehen???

[Gunnar Bittersmann]

Hello out there!

Sprech ich Chinesisch? Wie mann CSS-angaben zentral macht weiß ich natürlich!

Warum fragst du dann danach?

Wie mach ich es das <h4> links und <div> rechts in der selben Zeile Stehen???

Wenn du meine Antwort nochmal aufmerksam liest, wirst du feststellen, dass dort ein Wort _hervorgehoben_ ist. Das hat seinen Grund.

See ya up the road,
Gunnar

[michi]

Sprech ich Chinesisch? Wie mann CSS-angaben zentral macht weiß ich natürlich!
Warum fragst du dann danach?

HaB ich ja nicht...

Wie mach ich es das <h4> links und <div> rechts in der selben Zeile Stehen???

Wenn du meine Antwort nochmal aufmerksam liest, wirst du feststellen, dass dort ein Wort _hervorgehoben_ ist. Das hat seinen Grund.

:

Damit wird alles _Nachfolgende_ um diese 'div'-Box gefloatet.

Und wie bringt mich das weiter????

Hier nochmal der Code in aktuelle Fassung: Wie muss ich ihn ändern damit er gewünschen Efekt bringt?
<style type="text/css">
<!--
  a.nu { text-decoration:none; color:#ffffff }
  .myGroup { }
  .myGroup h4 {float: left;  display: inline;}
  .myGroup div {float: right; }
-->
</style>

<div class="myGroup">
 <h4><a name="Stern">-Stern</a></h4>
 <div>
Links:
  <a target="_blank" href="http://de.wikipedia.org/wiki/Stern" class="nu">
    <img src="wiki.ico" alt="Wikipedia" title="Wikipedia: Stern"></a>
  <a href="http://www.http://www.astronomia.de/index.htm?http://www.astronomia.de/start.htm" class="nu">
    <img src="astronima.gif" alt="Astronima" title="Astronima: Sternentstehung"></a>
  <a href="http://www.zum.de/Faecher/A/Sa/STERNE/st1.htm" class="nu">
    <img src="http://www.zum.de/gifs/islebil.gif" alt="ZUM im Internet" title="Zum.de: Sternentstehung"></a>
  <a href="http://www.zum.de/Faecher/A/Sa/STERNE/nachhauptreihe.htm" class="nu">
    <img src="http://www.zum.de/gifs/islebil.gif" alt="ZUM im Internet" title="Zum.de: Der Tod eines Sternes"></a>
 </div>
</div>

[Gunnar Bittersmann]

Hello out there!

Warum fragst du dann danach?
HaB ich ja nicht...

Doch, hattest du.

Wenn du fragst „Und wie mach ich das dan???“, dann bezieht sich „das“ auf das unmittelbar davor Stehende, nicht auf irgendwas weit davor Stehendes.

Damit wird alles _Nachfolgende_ um diese 'div'-Box gefloatet.
Und wie bringt mich das weiter????

Wo muss also alles, was um diese 'div'-Box floaten soll, im Quelltext stehen? ...

.myGroup h4 {float: left;  display: inline;}

... es sei denn, es ist auch gefloatet. War es anfangs aber nicht.

'display: inline' ist überflüssig, weil unwirksam. [CSS2 §9.7]

Wenn du keine Breiten angibst, macht der Browser Boxen so breit wie es der Inhalt verlangt.

<div class="myGroup">
<h4><a name="Stern">-Stern</a></h4>
<div>
Links:
  <a target="_blank" href="http://de.wikipedia.org/wiki/Stern" class="nu">
    <img src="wiki.ico" alt="Wikipedia" title="Wikipedia: Stern"></a>
  <a href="http://www.http://www.astronomia.de/index.htm?http://www.astronomia.de/start.htm" class="nu">
    <img src="astronima.gif" alt="Astronima" title="Astronima: Sternentstehung"></a>

Ich möchte gern eine Liste sein. Bitte bitte lass mich doch. (frei nach wahsaga)

Die Klassifizierung der 'a'-Elemente als 'nu' ist hier nicht nötig. Sie sind im Stylesheet als Nachfahren des Elementes der Klasse 'myGroup' selektierbar.

Apropos _des_ Elementes der Klasse 'myGroup': Bist du sicher, dass du da eine Klasse vergeben möchtest, oder nicht doch lieber eine ID?

See ya up the road,
Gunnar

[berdn]

Hallo Michi,

Klasse oder ID, die Frage kannst nur Du beantworten.
Kommt das Konstrukt nur einmal vor oder mehrmals?

Den namen "myGroup" würde ich auf alle Fälle ändern, der ist als Beispiel ja ganz nett, aber für die Umsetzung würde ich eher Namen wie "haupnavigation" oder "themennavigation", also ein Namen der den Zweck beschreibt.

Und wie Gunnar schon sagt ist die Klasse "nu" überflüssig, aber auch hier war grundsaätlich der Name schainbar willkürlich gewählt.

Ich erinnere mich an Klassennamen wie "roterText" und am Ende des Projektes hies die Klasse immer noch so, der Texthatte aber die Farbe blau.

Ich vermute ja stark, das der Code-Ausschnitt Teile einer Linkliste ist ... und da könnte man die HTML-Struktur noch ein wenig verändern. Ich weiß nur,
das Du zwei Elemente neben einander haben möchtest.

Liebe Grüße,

Bernd

[Gunnar Bittersmann]

Hello out there!

Und wie Gunnar schon sagt ist die Klasse "nu" überflüssig, aber auch hier war grundsaätlich der Name schainbar willkürlich gewählt.

Eher ns = noch schlimmer ;-)

a.nu { text-decoration:none; color:#ffffff }

nu = nicht unterstrichen?

Ich erinnere mich an Klassennamen wie "roterText" und am Ende des Projektes hies die Klasse immer noch so, der Texthatte aber die Farbe blau.

Und am Ende seines Projekt wird die Klasse immer noch "nu" heißen, die Links aber werden gar doppelt unterstrichen sein. ;-)

See ya up the road,
Gunnar

[berdn]

Hallo Gunnar,

Wenn du keine Breiten angibst, macht der Browser Boxen so breit wie es der Inhalt verlangt.

Ich dachte immer das bezieht sich nur auf inline-Elemente.
Und Blockelement sind immer so breit wie das Element was sie umschließt, und nur die Höhe wird vom Inhalt bestimmt?

Liebe Grüße,

Bernd

[Gunnar Bittersmann]

Hello out there!

Ich dachte immer das bezieht sich nur auf inline-Elemente.
Und Blockelement sind immer so breit wie das Element was sie umschließt, und nur die Höhe wird vom Inhalt bestimmt?

<div>foo</div>

div {  
  background: #048;  
}

Die Box geht über die geamte Breite (abzüglich deren margin sowie margin und padding von html und body).

div {  
  background: #048;  
  float: right;  
}

Jetzt ist die Box nur noch so breit wie es deren Inhalt verlangt. (Firefox)

IIRC war dort eine Änderung von CSS 2.0 zu 2.1. Möglich, dass sich verschiedene Browser ohne Breitenangaben verschieden verhalten.

See ya up the road,
Gunnar

[berdn]

Hallo Gunnar,

div {
  background: #048;
  float: right;
}

Jetzt ist die Box nur noch so breit wie es deren Inhalt verlangt. (Firefox)

Danke für den Hinweis, hab darüber noch nicht bewusst nachgedacht. Habe bei Listen dann immer ein darin enthaltenes Inline Element bei Bedarf auf block gesetzt und eine Breite gegeben.

Zum Leben gehört lernen ...
Also ist der der nicht lernen will schon Tod?

Liebe Grüße,

Bernd

[michi]

Wenn du fragst „Und wie mach ich das dan???“, dann bezieht sich „das“ auf das unmittelbar davor Stehende, nicht auf irgendwas weit davor Stehendes.

Damit wird alles _Nachfolgende_ um diese 'div'-Box gefloatet.
Und wie bringt mich das weiter????

Wo muss also alles, was um diese 'div'-Box floaten soll, im Quelltext stehen? ...

.myGroup h4 {float: left;  display: inline;}

... es sei denn, es ist auch gefloatet. War es anfangs aber nicht.

Kannst du auch NICHT in RÄTSELN sprechen?
Ich versteh kein Wort von dem was du sagst!
Könntes du mir jetzt also BITTE SAGEN WAS ich schreiben muss, befor ich hir durchdrehe, oder ist es das was du willst?

Wenn du keine Breiten angibst, macht der Browser Boxen so breit wie es der Inhalt verlangt.

Genau das will ich doch, oder?

<div class="myGroup">
<h4><a name="Stern">-Stern</a></h4>
<div>
Links:
  <a target="_blank" href="http://de.wikipedia.org/wiki/Stern" class="nu">
    <img src="wiki.ico" alt="Wikipedia" title="Wikipedia: Stern"></a>
  <a href="http://www.http://www.astronomia.de/index.htm?http://www.astronomia.de/start.htm" class="nu">
    <img src="astronima.gif" alt="Astronima" title="Astronima: Sternentstehung"></a>

Ich möchte gern eine Liste sein. Bitte bitte lass mich doch. (frei nach wahsaga)

Aber wiso??? Eine Liste wird untereinander dargestellt, das will ich aber nicht!!!!!!!!!

[berdn]

Hallo Michi,

"ruhig Brauner".

Eine Liste ist für eine Sammlung von Links das semantisch korrekte HTML-Element.

Listen unterpunkte <li> verhalten sich wie ein Blockelement, nach jeden Listenelement wird ein Zeilenumbruch eingefügt.

Das wollen wir aber nicht.

Deswegen bekommt die das <li> ber CSS die Eigenschaft display: inline.

Schon verhält es sich wie ein inline Element.

Verstanden?

Also ist damit das "Listenproblem" erledigt.

Nun habe wir aber immer noch zwei Blockelemente
<h4> <ul>

Damit die neben einander stehen können verwenden wir float.

Aber Sie sollen nicht nur nebeneinander stehen, das eine soll auch ganz links und das anders ganz rechtsstehen.

Nun brauchen wir float: left und float right.

Daher packen wir die beiden in ein Blockelement das die Ausdehnung begrenzt.

Das war in meinen Beispiel das div class="myGroup"

Damit sich aber die Element in diesem div richtig positionieren können brauchen sie eine Breite.

Un damit sind wir am Anfang meines Postings:

.myGroup { width: 10em}
.h4{ width: 5em}
.ul{ width: 5em}

Und bei der Breite eines Elementes müssen natürlich noch padding und margin und border berücksichtigt werden.

Damit der weitere Elementenfluss danach weiter läuft must Du dann das floaten auch mal wieder clear(ren)

Nun etwas deutlicher?

Ich habe auch eine Zeit gebraucht, das zu kapieren.

Liebe Grüße,

Bernd

PS: Andererseits ist es ein Standard der in diesem Forum immer wieder gefragt wird.

Auch die Sache mit der Liste wird immer wieder erklärt

So bist Du leider der hundertste(?) der Fragt
"Warum schwimmt Eis auf dem Wasser"

[Gunnar Bittersmann]

Hello out there!

Wenn du fragst „Und wie mach ich das dan???“, dann bezieht sich „das“ auf das unmittelbar davor Stehende, nicht auf irgendwas weit davor Stehendes.

[snip]

Würdest du bitte nur soviel zitieren wie nötig; also nur das, auf was du dich beziehst? Das würde deine Postings übersichtlicher machen und dir würde nicht passieren, dass deine Nachfragen sich auf andere Textteile beziehen als du vorhattest.

Damit wird alles _Nachfolgende_ um diese 'div'-Box gefloatet.
Wo muss also alles, was um diese 'div'-Box floaten soll, im Quelltext stehen? ...

Die Lösung dieses „Rätsels“ sollte dich schon anspringen.

.myGroup h4 {float: left;  display: inline;}
... es sei denn, es ist auch gefloatet. War es anfangs aber nicht.
Kannst du auch NICHT in RÄTSELN sprechen?

Anfangs war die 'h4'-Box nicht gefloatet, deshalb nahm sie, wie ich schon sagte, die ganze Breite ein. _Danach_ erst kam die 'div'-Box, um die anderes floaten sollte.

Ich versteh kein Wort von dem was du sagst!

Vielleicht verstehst das, was der/die Autor(en) von SELFHTML zu http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float sagten, besser als mich?

Wenn du keine Breiten angibst, macht der Browser Boxen so breit wie es der Inhalt verlangt.
Genau das will ich doch, oder?

Ich glaube nicht. Wenn sich beide Boxen über die gesamte Breite erstrecken, dann sind sie ja untereinander, nicht nebeneinander.

Ich möchte gern eine Liste sein. Bitte bitte lass mich doch. (frei nach wahsaga)
Aber wiso??? Eine Liste wird untereinander dargestellt, das will ich aber nicht!!!!!!!!!

Nein, eine Liste wird so dargestellt, wie es das in der http://de.selfhtml.org/css/formate/kaskade.htm@title=Kaskade höchstwertige Stylesheet besagt, das dazu Angaben macht. Wenn kein anderes das tut, ist es das browserinterne Styelsheet, was wohl bei allen Browsern besagt, dass Listitems blockbildende Elemente sind.

Du hast im Autoren-Stylesheet die Möglichkeiten, das abzuändern; entweder, wie [berdn] schon sagte, die Listitems keine blockbildenden Elemente sein zu lassen oder aber diese auch floaten zu lassen.

See ya up the road,
Gunnar

[Jap Jap]

Ich will Dir nicht zu nahetreten, ich schätze es sehr dass Du hier vielen im Forum hilfst. Aber lege ab und zu mal die Goldwaage weg. ;)

Satt eines spitzfindigen ellenlangen Threads, der aus Rätseln für michi besteht, hättest Du leicht konkret antworten können und die Sache wäre erledigt. Manchen hilft die (zwar korrekte) aber soch etwas technisch verschlüsselte (bzw für den fragenden unverstöndliche) und belehrende (teilweise herablassende) Antwort nicht sofort weiter.

[Gunnar Bittersmann]

Hello out there!

Aber lege ab und zu mal die Goldwaage weg. ;)

Hm, da antworte ich einmal genau auf die gestellte Frage ... Sonst tu ich das oft nicht, sondern versuche, den Fragen auf Probleme hinzuweisen, nach denen er nicht gefragt hatte, was mir von einigen Konsorten hier immer wieder angekreidet wird. Buhu!! Niemandem kann man’s recht machen!!! Ungerecht ist die Welt!!!11 >;->

hättest Du leicht konkret antworten können

IHMO tat ich das. So konkret, wie es michis Fragen erlaubten.

(teilweise herablassende) Antwort

„Sprech ich Chinesisch?“? Das war ich nicht!

See ya up the road,
Gunnar

[Üloi]

Gunnar wollte Dir sagen das er das Wort "nachfolgende" hervorgehoben hat.

Also float bezieht sich auf das Element das nach dem Element kommt welches Du floatest. (Wobei ich mich an diverse Nebeneffekte in der Praxis erinnern kann, was float angeht. Es betrifft nicht alein das nachfolgende Elelement).

Folglich musst Du die H4 left floaten damit Dein DIV nicht in die nächste Zeile puzelt (weil sonst jedes Blockelement die gesamte Breite für sich nutzt und nichts neben sich duldet).

[Ülp]

Geb der H4 nen float:left;

Wenn das nicht genügt beiden noch eine Breite.