|
|||
CSS - Container richtig platzieren
Hallo,
ich brauche Hilfe bei der richtigen Platzierung von span Containern. Ich habe ein span Container (mit position relative) in dem sich zwei span Container (jeweils mit position absolute) befinden. Ich möchte dass ein bestimmter Abstand von ca. 5 px zwischen den containern ist. So dass dieser Abstand konstant bleibt auch wenn ein span Container größer wird (z.B wenn mehr Text drin steht). Danke schon mal für eure Hilfe |
Sponsored Links |
|
|||
Wenn sie absolut positioniert sind dann haben sie keinen Bezug mehr zueinander, dann kannst du auch keine 5px Abstand realisieren.
position:absolute ist auch in 99% der Fälle, wo es eingesetzt wird, nicht notwendig. Hast du ein Beispielbild, was du realisieren willst? Dann kann man dir eventuell einen alternativen Vorschlag machen. |
Sponsored Links |
|
|||
Das rot eingerahmte ist der span Container der position relitive besitzt und der Pfeil ist der erste span mit position absolute und der rote Bereich mit der Prozentzahl ist der zweite span mit position absolute. Ich habe deswegen Position absolute gewählt damit die Positionierung bei verschiedenen Bildschirm Größen richtig skaliert.
Geändert von faehreri (09.04.2015 um 10:25 Uhr) |
|
|||
Ich habe deswegen eine absolute Positionierung gewählt da ich sonst keine Möglichkeit gefunden habe den Pfeil zu positionieren. Normalerweise werden ja span oder div Container nebeneinander positioniert und mit margin und padding kann man „Platz schaffen“ zwischen den containern. Das klappt hier aber irgendwie nicht. Ich vermute das liegt daran das ich den Pfeil durch CSS generiert habe und das der span kein Inhalt hat.
So sieht das ohne absolute Positionierung mit margin = 0, padding = 0 und float left. Geändert von faehreri (09.04.2015 um 10:25 Uhr) |
|
|||
Bilder bringen uns hier nicht weiter, da brauchen wir den Code um dir gut helfen zu können. Das relevante HTML + CSS (nicht dass der kompletten Seite)
So kann man dir nur sagen: Du kannst den Pfeil auch mit ::before erzeugen. Und positionieren wie es dir passt. |
|
|||
Ich kann an der Zeichnung nicht erkennen was sich wo befinden soll?
Und ohne den HTML- und CSS-Code ist es kaum möglich dir zu helfen. Wie schon erwähnt wurde musst du auf position: absolute verzichten und wenn es trotzdem nicht klappt brauchen wir eben den Code. Und was ich nicht ganz verstehe: du schreibst, du hast margin und padding auf 0 gesetzt, willst aber einen Abstand haben, das widerspricht sich? |
|
|||
Zitat:
Wo ist das Problem, wenn du es nebeneinander möchtest. Siehe kleines Beispiel: Edit fiddle - JSFiddle Habe mich teilweise nur am Bild orientiert. Ansonsten wie schon gesagt wurde ... HTML- und CSS-Code zeigen. HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Titel der Webseite</title> <style type="text/css"> body { max-width: 400px; margin: 0 auto; } span.one { background-color: #eee; border: 4px solid red; display: block; text-align: center; } span.one:after { display: block; content: ""; clear: both; } span.one img { float: left; margin: 5px 0 0 5px; } span.one span { background-color: #E69A99; padding: 5px; display: inline-block; margin: 10px 30px 5px 5px; } </style> </head> <body> <span class="one"> <img src="http://placehold.it/25x25/555555/555555.png" alt=""> <span>XXXX XX</span> <!-- <br> <img src="http://placehold.it/25x25/555555/555555.png" alt=""> <span>XXXX XX</span> --> </span> <!-- <span class="one"> <img src="http://placehold.it/25x25/555555/555555.png" alt=""> <span>XXXX XX XXX XX XXXX XXXXXXXX</span> </span> --> </body> </html> MfG Roland |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrundbild via css sprite dynamisch am Div Container anpassen. | BallaBalla07 | CSS | 2 | 04.06.2013 16:40 |
DIV container werden nicht richtig angezeigt | amigo89 | CSS | 1 | 23.04.2011 17:23 |
DIV container verschachteln und pixelgenau platzieren | Yakilo | CSS | 4 | 02.02.2010 20:18 |
Div container plazieren sich nicht richtig | css_newbie | CSS | 0 | 14.02.2008 11:44 |
quicktime .mov dateien in html site bzw. css container abspielen??? | bastien | (X)HTML | 14 | 10.11.2006 10:54 |