Positionierung mit CSS -wie jetzt?!
CäsariStanhungsloS
- css
- design/layout
0 Der Martin0 St33l0 Gunnar Bittersmann0 MrMurphy1
Hallo Forum,
ich verzweifle an einem Positionierungproblem und würde mich sehr freuen, wenn mir jemand helfen könnte.
Ich definiere per CSS einen body mit einer Breite von 1000(px) und habe dort einen Titel-Block angelegt, der
relative, left 10, top 10
erfolgreich an seinem Platze sitzt. Jetzt möchte ich insgesamt zehn weitere Blöcke folgendermaßen platzieren: Fünf Grafiken (Links) sollen mit einem Abstand von 10 zum Titel in einer Zeile positioniert werden, fünf Textblöcke (Links) weiter unterhalb in einer Spalte. Die Textblöcke habe ich erfolgreich untergebracht, nur mit den Grafiken haperts: Die erste Grafik lasst sich dort hinsetzen, wo gewünscht. Alle anderen sitzen dann leider nur unterhalb der ersten. Selbst mit
top:-nn;
kommt nichts vernünftiges zustande. Hat jemand eine zündende Idee?
Vielen Dank im Voraus! und Grüße von
Sebastel
Hi,
ich verzweifle an einem Positionierungproblem und würde mich sehr freuen, wenn mir jemand helfen könnte.
gerne, es liegt aber an dir, die Voraussetzungen dafür zu schaffen.
Ich definiere per CSS einen body mit einer Breite von 1000(px) und habe dort einen Titel-Block angelegt, der
relative, left 10, top 10
erfolgreich an seinem Platze sitzt. Jetzt möchte ich insgesamt zehn weitere Blöcke folgendermaßen platzieren: Fünf Grafiken (Links) sollen mit einem Abstand von 10 zum Titel in einer Zeile positioniert werden, fünf Textblöcke (Links) weiter unterhalb in einer Spalte. Die Textblöcke habe ich erfolgreich untergebracht, nur mit den Grafiken haperts: Die erste Grafik lasst sich dort hinsetzen, wo gewünscht. Alle anderen sitzen dann leider nur unterhalb der ersten. Selbst mit
top:-nn;
kommt nichts vernünftiges zustande. Hat jemand eine zündende Idee?
Ja: Zeig uns ein Online-Beispiel und lass uns daran weiterdiskutieren und experimentieren. Deine flüchtig hingeworfenen CSS-Schnipsel leiden schon mal alle an fehlenden Einheiten oder sind sonstwie unvollständig, und wie sie wirken, kann man sowieso nur mit dem kompletten(!) CSS und dem Markup, auf das es angewendet wird, beurteilen.
So long,
Martin
Danke, Martin, für die freundliche Antwort. Bisher hatte ich in CSS Breiten, Höhen und Abstände problemlos ohne die Angabe der Einheit "px" genutzt. Und was den "Hinwurf" betrifft, ich denke das Problem lässt sich auch ohne die hier unerwünschten Vollzitate lösen... Grüße!
Hi,
Bisher hatte ich in CSS Breiten, Höhen und Abstände problemlos ohne die Angabe der Einheit "px" genutzt.
das mag in den meisten Fällen funktionieren, weil die gängigen Browser dann wohl stillschweigend die Einheit px annehmen - müssen sie aber nicht, und das Weglassen ist ein Fehler.
Und was den "Hinwurf" betrifft, ich denke das Problem lässt sich auch ohne die hier unerwünschten Vollzitate lösen...
Natürlich. Wer redet von Vollzitat? Ich bat um ein vollständiges Online-Beispiel, an dem das Problem deutlich wird.
Ciao,
Martin
Hi!
Was Martin schon sagt. Mir fehlen Infos. Im Augenblick sehe ich einen Titel und darunter 5 Grafiken in einer Reihe. Da Grafiken das gewoehnlich von allein machen, sehe ich da jetzt nicht wirklich das Problem.
Ein kleiner Beispielcode waere gut.
Gruss, Steel
Hallo,
Was Martin schon sagt. Mir fehlen Infos. Im Augenblick sehe ich einen Titel und darunter 5 Grafiken in einer Reihe.
ach, das siehst du? Wo? Vor deinem geistigen Auge?
Ein kleiner Beispielcode waere gut.
What I said.
Ciao,
Martin
Moin,
[...] Im Augenblick sehe ich einen Titel und darunter 5 Grafiken in einer Reihe.
ach, das siehst du? Wo? Vor deinem geistigen Auge?
Genau dort. Da wo gewoehnlich der Platz fuer Glaskugeln reserviert ist. ;) (n bischen angestaubt dort)
Gruss
Eiwei, Spaßvögeln scheint angesagt... Hier also der gewünschte Code
body
{
width:1000;
height:1000;
padding-top:auto; padding-bottom:auto;
margin-left:auto; margin-right:auto;
border:1px solid white;
overflow:hidden;
}
#start
{
position:relative;
top:5; left:5;
width:245; height:100;
background-color:#adadad;
z-index:1;
}
#flg1
{
position:relative;
top:25;
width:45;
height:30;
z-index:1;
}
#flg1, #flg2, #flg3, #flg4, #flg5
{
position:relative;
top:10;
}
#flg1:hover, #flg2:hover, #flg3:hover, #flg4:hover, #flg5:hover
{
top:5;
}
#flg1
{
background:url(../pics/cn.jpg);
}
#flg2
{
background:url(../pics/en.jpg);
}
#flg3
{
background:url(../pics/de.jpg);
}
#flg4
{
background:url(../pics/hk.jpg);
}
#flg5
{
background:url(../pics/tw.jpg);
}
#nav1, #nav2, #nav3, #nav4, #nav5
{
position:relative;
left:5;
width:100; height:25;
background-color:#adadad;
z-index:1;
}
#nav1
{
top: 20;
}
#nav2
{
top: 30;
}
#nav3
{
top: 40;
}
#nav4
{
top: 50;
}
#nav5
{
top: 60;
}
Freue mich auf nun unb´gebremste Kompetenz
Hallo,
Eiwei, Spaßvögeln scheint angesagt...
nein, das ist was anderes - das gibt's oft bei kinderlosen Paaren. ;-)
Hier also der gewünschte Code
Was ist an Online-Beispiel so missverständlich?
An deinem Stylesheet sieht man nur, dass konsequent die Einheiten fehlen, und dass du vermutlich viel zu viel mit direkter Positionierung machst, wo es gar nicht nötig wäre (weil es mehr Probleme schafft als es löst). Ansonsten ist das Stylesheet ohne das Markup, auf das es angewendet wird, ziemlich aussagefrei. Aber das sagte ich ja schon.
So long,
Martin
@@Der Martin
nein, das ist was anderes - das gibt's oft bei kinderlosen Paaren. ;-)
Nicht nur bei denen. Oder meinst du, mit dem ersten Kind hört der Spaß auf?
Was ist an Online-Beispiel so missverständlich?
Hätteste mal verlinkt …
An deinem Stylesheet sieht man nur
LLAP 🖖
@@CäsariStanhungsloS
Ich definiere per CSS einen body mit einer Breite von 1000(px)
Schon schlecht. Die meisten[1] Viewports sind schmaler als 1000 Pixel. Tendenz steigend (was die Anzahl der Geräte angeht, nicht die Viewportbreite).
Eine Breitenangabe für body
ist nicht sinnvoll. Maximal eine Maximalbreite (no pun intended).
LLAP 🖖
abhängig von der Zielgruppe im Bereich von viele bis die allermeisten ↩︎
Offenbar ist es in diesem Forum nicht möglich, folgende einfache Frage zu beantworten*:
Wie positionniere ich innerhalb eines bodys unterhalb eines Blocks fünf kleinere Blöcke in einer Zeile?
Weder hatte ich nach Beratung zu meiner Zielgruppe bezüglich body-Breite gefragt, die kommt mit den 1000 (extra für Einheitspedanten:) PIXEL nämlich bestens klar, noch benötige ich andere Glaskugelspaßvögeleien.
Vielleicht gibt es ja doch noch fachlich qualifizierte Teilnehmer in diesem Forum.
Schönen Abend noch ...
*denn die steckt hinter meinem Offline-"Hinschmiss".
Hi,
Offenbar ist es in diesem Forum nicht möglich, folgende einfache Frage zu beantworten*:
Wie positionniere ich innerhalb eines bodys unterhalb eines Blocks fünf kleinere Blöcke in einer Zeile?
das ist doch immerhin schon mal ein Ansatz, das Problem verständlich zu formulieren!
Und eine Antwort könnte sein: Mit display:inline-block und dem weitgehenden Verzicht auf die CSS-Eigenschaften position, left und top. Abstände stattdessen lieber mit margin und/oder padding.
Weder hatte ich nach Beratung zu meiner Zielgruppe bezüglich body-Breite gefragt, die kommt mit den 1000 (extra für Einheitspedanten:) PIXEL nämlich bestens klar, noch benötige ich andere Glaskugelspaßvögeleien.
Es ist ein besonderes Merkmal dieses Forums, dass man dem Fragesteller nicht beim Ausbau des Holzwegs hilft, auf dem er sich befindet, sondern ihm stattdessen hilft, sein eigentliches Problem in den Griff zu bekommen. Dazu muss man aber manchmal zwei oder drei Schritte zurückgehen.
Vielleicht gibt es ja doch noch fachlich qualifizierte Teilnehmer in diesem Forum.
Ja. Einige. Zwei bis drei haben schon versucht, dir zu helfen. Und ich bin zuversichtlich, dass du die anderen auch noch verprellst.
Ciao,
Martin
Schön Martin!
nur leider nützt mir Dein Hinweis auf inline-block genau nichts. Vielleicht könntest Du ja, außer Code-Konfetti zu werfen, mit einer Online- oder Komplett-Code-Version dienen?
Du sprichst von Verprellen? Hast Du deine erste Reaktion auf meine Anfrage, in der die "vereinfachte Version" bereits impliziert war (wenn man bereit gewesen wäre, sie zu lesen und versucht hätte sie zu verstehen), eigentlich gelesen, bevor Du sie abgeschickt hast? Ich fand sie zumindest alles andere als freundlich (daher mein einleitender Satz als Antwort, aber Ironie muss man halt erkennen...)
Schönen Abend noch!
n'Abend,
nur leider nützt mir Dein Hinweis auf inline-block genau nichts.
und warum nicht?
Vielleicht könntest Du ja, außer Code-Konfetti zu werfen, mit einer Online- oder Komplett-Code-Version dienen?
Nein, genau das werde ich nicht tun. Weil ich nicht jemand anders meine Lösung aufdrängen will, sondern ihn so weit bringen möchte, dass er selbst zu einer Lösung kommt.
Du sprichst von Verprellen? Hast Du deine erste Reaktion auf meine Anfrage, in der die "vereinfachte Version" bereits impliziert war (wenn man bereit gewesen wäre, sie zu lesen und versucht hätte sie zu verstehen), eigentlich gelesen, bevor Du sie abgeschickt hast?
Ja, mehrmals. Und zweimal vor dem endgültigen Absenden die Formulierung entschärft.
Ich fand sie zumindest alles andere als freundlich
Ach was. Dabei hatte ich dich anfangs nur gebeten, ein komplettes Online-Beispiel zur Verfügung zu stellen (was du bis jetzt immer noch nicht getan hast), weil deine Darstellung zumächst völlig unzureichend war.
Ciao,
Martin
@@Der Martin
Ja. Einige. Zwei bis drei haben schon versucht, dir zu helfen. Und ich bin zuversichtlich, dass du die anderen auch noch verprellst.
Du wirst nicht enttäuscht.
LLAP 🖖
Aloha ;)
Ja. Einige. Zwei bis drei haben schon versucht, dir zu helfen. Und ich bin zuversichtlich, dass du die anderen auch noch verprellst.
Du wirst nicht enttäuscht.
Was mich immer wundert ist nicht so sehr, wo die ganzen Hering-Liebhaber herkommen, sondern, dass sie derart viel Energie in das Ergattern eines solchen stecken. Dass die Problemlösung nicht wirklich im Sinne des TO ist, ist offensichtlich. Und trotzdem lässt er sich ne Story einfallen und gibt nen Quellcode dazu raus, gespickt mit Dingen, die hier im Forum zuhauf als bad practice gebrandmarkt wurden... Wenn das Absicht ist, dann steckt da tatsächlich Energie drin. Mir wäre meine Zeit für sowas echt zu schade...
Übrigens...
Offenbar ist es in diesem Forum nicht möglich, folgende einfache Frage zu beantworten*:
Wie positionniere ich innerhalb eines bodys unterhalb eines Blocks fünf kleinere Blöcke in einer Zeile?
Doch, das ist diesem Forum möglich. Die einfache Antwort lautet: Entweder modern-elegant mit flexbox oder traditionell-umständlich mit display: table-row / display: table-cell. Einfache Frage, einfache Antwort. Nur irgendwie beschleicht mich das Gefühl, dass die unserem TO hier ziemlich schnuppe ist...
Grüße,
RIDER
@@CäsariStahnungloS
Weder hatte ich nach Beratung zu meiner Zielgruppe bezüglich body-Breite gefragt
Die bekommst du hier ungebeten obendrauf.
Vielleicht gibt es ja doch noch fachlich qualifizierte Teilnehmer in diesem Forum.
Zumindest gibt es in diesem Forum immer wieder unqualifizierte Teinehmer, die erst Fragen stellen und dann den Antwortenden dummkommen.
LLAP 🖖
Hallo,
In HTML habe sich bestimmte Vorgehensweisen bewährt und werden deshalb empfohlen.
Abstände werden in HTML mit CSS erstellt. Abstände zwischen Elementen mit dem margin-Attribut.
Positioniert werden nur einzelne Elemente, bei denen Abstände nicht verwendet werden können. Das kann sein weil sie auf anderen Elemente erscheinen sollen, wie zum Beispiel wenn Text auf einem Bild erscheinen soll.
Deine Angaben sind leider nicht sehr aussagekräftig. Ich habe mal eine Beispielseite nach den Informationen aus deinen bisherigen Beiträgen erstellt. Da die Bilder mir nicht vorliegen habe ich einfach die Pfade von dir übernommen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Positionieren 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
margin: 0;
}
a {
color: black;
text-decoration: none;
outline: none;
}
a:hover {
color: black;
}
}
/*Spezielle Einstellungen*/
@media all {
body {
width: 1000px;
height: 1000px;
padding: 0 auto;
padding-bottom: auto;
border: 1px solid white;
margin: 0 auto;
}
div:nth-child(1) {
background-color: #adadad;
font-size: 0.8rem;
width: 245px;
height: 100px;
margin: 5px 0 0 5px;
}
body > div:nth-child(2) {
display: block;
overflow: hidden;
width: 250px;
padding: 0;
margin: 0 0 0 5px;
}
body > div:nth-child(2) a {
background-color: #adadad;
float: left;
display: block;
width: 45px;
height: 30px;
border: 1px solid green;
margin: 10px 0 0 5px;
}
body > div:nth-child(2) a:hover {
margin-top: 5px;
}
body > div:nth-child(2) a:nth-child(1) {
background-image: url(../pics/cn.jpg);
margin-left: 0;
}
body > div:nth-child(2) a:nth-child(2) {
background-image: url(../pics/en.jpg);
}
body > div:nth-child(2) a:nth-child(3) {
background-image: url(../pics/de.jpg);
}
body > div:nth-child(2) a:nth-child(4) {
background-image: url(../pics/hk.jpg);
}
body > div:nth-child(2) a:nth-child(5) {
background-image: url(../pics/tw.jpg);
}
body > div:nth-child(3) {
display: block;
width: 100px;
margin: 10px 0 0 5px;
}
body > div:nth-child(3) a {
background-color: #adadad;
text-align: center;
display: block;
width: 100px;
height: 25px;
margin: 0 0 10px 0;
}
}
</style>
</head>
<body>
<div>
</div>
<div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</body>
</html>
Gruss
MrMurphy
@@MrMurphy1
Ich habe mal eine Beispielseite nach den Informationen aus deinen bisherigen Beiträgen erstellt.
Vollständige Beispiele halte ich oft zur Problemlösung nicht dienlich und dem Geist dieses Forums widersprechend. Der Fragende kopiert den Code, ohne ihn zu kapieren.
<meta name="description" content="HTML5, CSS3">
Was hat das in einem Beispielcode zu suchen? Der Fragende kopiert den Code und hat dann Unsinn drin zu stehen.
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
Dass man das so nicht mehr machen sollte, hatten wir doch erst kürzlich. Du schlägst aber auch alles in den Wind, oder?
@media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; }
Und dass das völlig überflüssig ist, weil das der Shiv schon macht, hatten wir im selben Thread auch geklärt. Du schlägst aber auch alles in den Wind, oder?
Und was soll das @media all
? Du willst alte Browser unterstützen, aber alte Browser nicht unterstützen?
/*Grundeinstellungen*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
Das ist keine Grundeinstellung.
Was hat das in einem Beispielcode zu suchen? Der Fragende kopiert den Code und lädt dann eine Schrift runter, die er überhaupt nicht braucht.
Zumal Iconfonts keine wirklich brauchbare Methode für Icons sind. Verwende SVG.
html { font-size: 120%; }
Das ist auch nichts, was in einem allgemeinen Beispielcode was zu suchen hätte. Im allgemeinen ist man mit der Standardschriftgröße 1em
gut bedient.
a { color: black; text-decoration: none; outline: none; }
Es wird immer abenteuerlicher. Alle Links schwarz und nicht unterstrichen ist Blödsinn; dann sind Links im Fließtext überhaupt nicht mehr als solche zu erkennen.
outline: none
ist Blödsinn; dann ist der aktuell angewählte Link bei Navigation per Tastatur nicht zu erkennen. Das kann man nur dann setzen, wenn man eine andere Kennzeichnung für a:focus
vorsieht.
body { width: 1000px; height: 1000px; padding: 0 auto; padding-bottom: auto; border: 1px solid white; margin: 0 auto; }
Zu width
hatte ich schon was gesagt; height
auf einen festen Wert zu setzen dürfte auch kaum sinnvoll sein.
Erst setzt du padding-bottom
auf 0
, um es gleich danach auf auto
zu setzen? Dein Code sieht so aus, als würdest du immer mal was dazufügen ohne zu kucken, ob das in der Gesamtheit Sinn ergibt.
Und was soll border: 1px solid white
bezwecken?
body > div:nth-child(2)
Dass derartige Selektoren nicht robust gegenüber Änderungen im Markup sind, hatten wir auch letztens erst.
body > div:nth-child(2) a:nth-child(1) { background-image: url(../pics/cn.jpg); margin-left: 0; }
Und der hat gleich doppelte Chancen, sich nicht auf das gewünschte Element zu beziehen.
body > div:nth-child(2) a:nth-child(2) { background-image: url(../pics/en.jpg); } body > div:nth-child(2) a:nth-child(3) { background-image: url(../pics/de.jpg); } body > div:nth-child(2) a:nth-child(4) { background-image: url(../pics/hk.jpg); } body > div:nth-child(2) a:nth-child(5) { background-image: url(../pics/tw.jpg); }
Was soll das Ganze überhaupt werden? Flaggen für Sprachen? cn
, hk
, tw
sind keine Sprachkürzel.
LLAP 🖖
@MrMurphy
Guten Morgen und herzlichen Dank für Deinen Tipp!
Auch wenn Ihre Forums-Durchlaucht Gunnar Bittersmann kaum ein gutes Haar an Deinem Code lässt, ist es wenigstens ein Versuch meine Frage zu beantworten, den es in inzwischen knapp einem Dutzend an Posts der Besserwisserei ansonsten nur als ärmlich vereinsamt hingeschis... Code-Konetti gab.
Stattdessen wird in diesem Forum gemutmasst, was für eine Anwendung (die hier gar nicht zur Debatte steht), in einer Umgebung (die hier keiner kennt und für das eigentliche Problem auch völlig irrelevant ist) und mit Bewertungen zu Abkürzungen (deren Sinn selbst von Heiligkeiten aus keiner Glaskugel geglotzt werden kann), dass der Fragesteller zu dumm ist, Beispielcode zu verstehen. Und das alles im "Geiste" eines Forums, in dem (hoffentlich nur eine Minderheit von) Schreiber(n), offenbar den Versuch betreiben, das Trollen zur Weisheit des CSS zu erheben.
Während ich dies schreibe, sehe ich am unteren Rand eine der Forumsregeln: Formuliere höflich und wertschätzend. Für mich nicht das geringste Problem. Aber wenn selbsternannte Experten auf eine konkrete Frage (und die fand sich bereits in meinem ersten Post) nicht anderes als besserwisserische Nebelkerzen anzubieten haben, statt tatsächlicher Antworten, ist dieses Forum wertlos.
Es ist erstaunlich, wieviel Zeit manche Menschen mit Unsinn verplempern können. Aber das ist natürlich deren Sache. Das Schlimme daran ist nur, dass sie damit auch anderen die Zeit rauben. Ich werde hier keine mehr in den Sand setzen und mich weiter meiner Arbeit widmen. Denn inzwischen konnte ich das Problem mithilfe anderer Quellen lösen und meine Flags sitzen genau da, wo sie es sollen.
@MrMurphy: Vielen Dank noch mal und ein schönes Wochenende!
@die anderen: Viel Spaß noch beim Trollen und dem geistreichen Gestalten der Forumskultur!
@admin/moderator, usw: Sollte meine Kritik hier unerwünscht sein, dann lösche wenigstens den gesamten Thread, denn er ist inhaltlich so unnötig wie ein Kropf und sicher keine Empfehlung für dieses Forum. In diesem Sinne (pardon: Geiste) dftt
@@CäsariStahnungsloS
Auch wenn Ihre Forums-Durchlaucht Gunnar Bittersmann kaum ein gutes Haar an Deinem Code lässt, ist es wenigstens ein Versuch meine Frage zu beantworten, den es in inzwischen knapp einem Dutzend an Posts der Besserwisserei ansonsten nur als ärmlich vereinsamt hingeschis... Code-Konetti gab.
Das wirklich Tragische an MrMurphys Codebeispielen: dass Leute, die von der Sache kein bisschen Ahnung haben, diese als „hilfreich“ ansehen.
Während ich dies schreibe, sehe ich am unteren Rand eine der Forumsregeln: Formuliere höflich und wertschätzend. Für mich nicht das geringste Problem.
Anscheinend ist es das doch. Deutliches Beispiel, wie stark Eigenwahrnehmung und Fremdwahrnehmung voneinander abweichen können.
Hier im Forum gibt es einige Regeln, die für alle gelten. Eine besagt: Keine persönlichen Angriffe! Daran hast auch du dich zu halten!
LLAP 🖖
Hallo
@die anderen: Viel Spaß noch beim Trollen und dem geistreichen Gestalten der Forumskultur!
Autoradio: „Wir warnen vor einem Geisterfahrer auf der A5… “
Fahrer: „Nur Einer? – Da sind Hunderte!“
Gruß,
Orlok
@@Gunnar Bittersmann
Zumal Iconfonts keine wirklich brauchbare Methode für Icons sind. Verwende SVG.
LLAP 🖖