div-element rechts neben aside-element platzieren

[bari]

Guten Tag,

Frage: wie kann ich meine blauen content-Felder rechts von dem aside-element platzieren, ohne dass ich die margin links auf 350px einstelle (ist der Abstand, den das aside-element braucht). Ich hätte gedacht, dass ich das mit float: right hinkriege, doch dann kommt das Element unterhalb das aside-element zu stehen.

der code sieht so aus:

aside {
 margin: 10px 0 0 0;
 padding: 0;
 float: left;
 } 
#content {
 margin: 10px 0 0 350px;
 padding: 5px 20px 10px;
 border-radius: 2px;
 background-color: #330099;
 color: #cdc9c9;
 font-size: .9em;
 text-align: justify;
 line-height: 1.5em;
 letter-spacing: .1em;
 } 

Besten Dank für eine Lösung. bari.

[MrMurphy1]

Hallo,

warum hälst du uns den relevanten Teil vor? Wie sollen wir dir so helfen?

Wenn du unbedingt mit float arbeiten willst sehe ich zum Beispiel folgende Lösung:

      * {
         box-sizing: border-box;
      }
      aside {
         margin: 10px 0 0 0;
         padding: 0;
         float: left;
         width: 340px;
      }
      #content {
         margin: 10px 0 0 0;
         padding: 5px 20px 10px;
         border-radius: 2px;
         background-color: #330099;
         color: #cdc9c9;
         font-size: .9em;
         text-align: justify;
         line-height: 1.5em;
         letter-spacing: .1em;
         width: calc(100% - 340px);
         float: left;
      }

Gruss

MrMurphy

[bari]

Hallo MrMurphy besten Dank für deine Hilfe. Es funktioniert soweit (fast zufriedenstellend) alles.

warum hälst du uns den relevanten Teil vor? Wie sollen wir dir so helfen?

wenn jeweils wüsste, was relevant/nicht relevant ist... aber meintest du, die weiteren aside Konfigurationen, oder was vor dem aside steht?

Oder meintest du den Link zur website? hier

Wenn du unbedingt mit float arbeiten willst sehe ich zum Beispiel folgende Lösung:

      * {
         box-sizing: border-box;
      }
      aside {
         margin: 10px 0 0 0;
         padding: 0;
         float: left;
         width: 340px;
      }
      #content {
         margin: 10px 0 0 0;
         padding: 5px 20px 10px;
         border-radius: 2px;
         background-color: #330099;
         color: #cdc9c9;
         font-size: .9em;
         text-align: justify;
         line-height: 1.5em;
         letter-spacing: .1em;
         width: calc(100% - 340px);
         float: left;
      }

mit float nicht unbedingt. Habe zuerst den tipp von Sara mit inline-block probiert, doch das content element kam trotzdem unterhalb des aside-elements zu stehen. Vielleicht wäre diese Idee trotzdem interessant, weiter zu verfolgen.

Aber mit deiner Version: wie kann ich die border-bottom auf die Fotobreite (300px) begrenzen, oder besser automatisch anpassen? Vorher war das so (sieht man jetzt nicht mehr).

Gruss bari.

[bari]

Aber mit deiner Version: wie kann ich die border-bottom auf die Fotobreite (300px) begrenzen, oder besser automatisch anpassen? Vorher war das so (sieht man jetzt nicht mehr).

habe die Breitenbegrenzung gefunden, war einfacher als ich gedacht habe.

bari.

[Gunnar Bittersmann]

@@bari

Oder meintest du den Link zur website? hier

Die Schrift (insbesondere im Sprachmenü) ist unleserlich klein.

Und wie gelangt man dorthin? Über die vorgeschaltete Seite? Bitte nicht. Der Nutzer hat seine bevorzugte(n) Sprache(n) bereits mitgeteilt. Höre drauf!

LLAP 🖖

[bari]

@@bari

Oder meintest du den Link zur website? hier

Die Schrift (insbesondere im Sprachmenü) ist unleserlich klein.

Und wie gelangt man dorthin? Über die vorgeschaltete Seite? Bitte nicht. Der Nutzer hat seine bevorzugte(n) Sprache(n) bereits mitgeteilt. Höre drauf!

Hallo Gunnar,

ich weiss, dass meine Seite nicht unbedingt für tablet, smartlets oder gar smartphones passt.

Und die Einstiegsseite wurde mir vor zirka 2 Jahren von dem Serverprovider empfohlen. Wenn ich sie weglassen und mich auf die anfragende browserseitige Sprachwahlmitteilung verlassen soll, so muss ich das erst ansehen, was ich da in meinen html-seiten zusätzlich einbauen muss. Dafür habe ich aber nicht gerade sofort Zeit, eher wieder an einem Wochenende.

So oder so, besten Dank für die Hinweise.

Gruss, bari.

[Gunnar Bittersmann]

@@bari

ich weiss, dass meine Seite nicht unbedingt für tablet, smartlets oder gar smartphones passt.

Also für die Mehrheit der Nutzer nicht?

Und die Einstiegsseite wurde mir vor zirka 2 Jahren von dem Serverprovider empfohlen. Wenn ich sie weglassen und mich auf die anfragende browserseitige Sprachwahlmitteilung verlassen soll,

Nicht drauf verlassen. Wie in dem Artikel auch gesagt brauchst du das Sprachmenü trotzdem.

so muss ich das erst ansehen, was ich da in meinen html-seiten zusätzlich einbauen muss.

Gar nichts (je nach Implementierung).

Dafür habe ich aber nicht gerade sofort Zeit, eher wieder an einem Wochenende.

Mit dem einfachen Apache-MultiViews-Ansatz sollte das an einem Wochenende zu schaffen sein.

Du hast die Sprache aber nicht in der Dateiendung, sondern in der Verzeichnisstruktur. Das sollte mit var-Dateien immer noch an einem Wochenende machbar sein.

Für eine Implementierung mit Cookie, in dem sich beim Sprachwechsel die vermutlich tatsächlich vom Nutzer bevorzugte Sprache (und nicht die im Browser angegebene) gemerkt wird, könnte auch zwei Wochenenden in Anspruch nehmen.

LLAP 🖖

[bari]

...könnte auch zwei Wochenenden in Anspruch nehmen.

und wenn's Wetter schön ist, vielleicht auch > 2 ...

Die restlichen Tipps vergesse ich unterdessen nicht und werde mich bei Gelegenheit damit befassen.

Gruss, bari.

[Sara]

Hallo,

ich gehe mal ganz stark davon aus, dass dein umfassendes Element eine zu kleine Breite hat, deshalb wird dir ein gefloatetes Element unterhalb angezeigt.

Float wurde ich hier nicht nehmen sondern lieber display: inline-block;