zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS - Container richtig platzieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.04.2015, 11:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2015
Beiträge: 3
faehreri befindet sich auf einem aufstrebenden Ast
Ausrufezeichen 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.04.2015, 11:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.04.2015, 12:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2015
Beiträge: 3
faehreri befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.04.2015, 13:14
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Das erreichst du ohne absolute Positionierung wesentlich leichter. Ich sehe nicht wozu hier eine Positionierung notwendig wäre.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.04.2015, 09:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2015
Beiträge: 3
faehreri befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 09.04.2015, 09:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 09.04.2015, 09:33
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 09.04.2015, 21:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von faehreri Beitrag anzeigen
Normalerweise werden ja span oder div Container nebeneinander positioniert und mit margin und padding kann man „Platz schaffen“ zwischen den containern.
Hallo faehreri

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
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:19 Uhr.