Werte Positionieren

d82dennis

d82dennis

Well-known member
ID: 324316
L
16 Juli 2008
1.560
95
Guten Tag

ich habe einen Header in diesem Header möchte ich 4 Jackpotstände Positionieren.

Der Header ist in css derzeit so definiert:
Code: 
/* Header im Kopf */
.hauptheader_eins {
width:950px;
height:150px;
margin: 0 auto;
position: relative; 
background-image:url(images/design/hauptheader_eins.png);
}

Im Script sieht das ganze derzeit so aus:
HTML: 
<div class="hauptheader_eins">
  <div class="global_jp_eins" >WERT 1</div>
  <div class="lotto_jp_eins">WERT 2</div>
  <div class="global_kl_jp_eins">WERT 3</div>
  <div class="bankpot_jp_eins">WERT 4</div>
</div>

Das ist der derzeitige stand.

Da ich in CSS so gut wie gar nicht bewandert bin habe ich nun ein kleine Problem, wie bzw mit welchen befehlen bekomme ich die Stände so formatiert. Das diese nebeneinander (auf exakt einer linie) liegen und der Zentrale Punkt eines Wertes immer gleich bleibt.
 
Zuletzt bearbeitet:
du solltest wissen, ein DIV Tag ist wie ein formatiertes BR Tag - d.h. es erfolgt zwangsweise immer nach jedem schließenden DIV Tag ein Zeilenumbruch.
Wenn Du stattdessen nur ein DIV nimmst und darun mehrere SPAN Tags nutzt, kannst du das erreichen was du willst.

de.selfhtml.org wäre für Dich auch eine gute Anlaufstelle um sich alles mögliche anzuschauen. Es gibt auch eine Offline Version zum runterladen, so dass du zu Hause in Ruhe schauen kannst, ohne online sein zu müssen!

PS: man könnte nun im Div ein float einfügen, aber von sowas halte ich persönlich nicht viel, wenn man damit nicht umgehen kann!
 
<div> fände ich schon mal unangebracht, weil es ja eine Aufzählung is. Also <ul> einsetzen. Die Jackpotstände sind dann die <li>s. Diese floatest du. Was der "zentrale Punkt eines Wertes" is, weiß ich nicht. Vermutlich meinst du Zentrieren. Das macht der Browser automatisch, wenn du ihn das anweist.
 
Das es erzwungene Zeilenumbrüche hervorruft ist mir klar.

Ein span einzufügen ist nicht das problem. Ich habe ein problem damit wie ich es hinbekomme, 4 span's in einer linie zu halten, wobei jeder span einen (das zentrum des span's) fest fixierten punkt hat.
 
als erstes solltest du mal überall "class" in "id" ändern, denn so wie es aussieht, ist es das, wie du es nutzen willst

"class" kann für verschiedene DIVs benutzt werden, wobei "id" nur für dieses eine DIV verwendet wird

danach gibst du den 4 DIVs die gleiche "class" z.B. class="header_jp"

allerdings verstehe ich deine ich deine Anfrage nicht so ganz ...
willst du, dass alle einfach nebeneinander gleichen Abstand von einander haben?

dann mach einfach margin: auto; left: auto; right: auto;

oder was meinst du mit "der Zentrale Punkt eines Wertes immer gleich bleibt."?



edit: ach mist, ich tippe einfach langsam ^^
 
Habe jetzt mal nen screen gemacht merke schon das es so einfacher ist.



Wenn ich nun dei einzelnen Jackpotstände in dem Feld positioniere soll der Wert immer zentral in seinem Feld bleiben. als ob nun 10 oder 100000000 der mittelpunkt der Zahl soll fest definiert sein also halt wie ein <center> quasi.
 
und die organgenen Felder sind vom Hintergrundbild?

wenn ja, dann wirst du das nicht schaffen ;)

das würde nur gehen, wenn der Hintergrund des Divs das orangene wäre
denn je nach Browsergröße skaliert das Bild ja, woher soll dein CSS wissen, wo das orangene Feld grad ist?
 
dann pinsel die Felder wieder schwarz und mach die Felder selbst per Div mit orangenem Hintergrund, dort kannst dann deinen Text zentrieren wie du willst
 
Jo aber denn stehe ich wieder vor dem selben problem wie vorher, wie das ganze auf einer linie hinbekommen?

Das alle 4 DIV horizontal auf exakt der selben linie in allen auflösungen liegen.
 
einfach indem du ihnen die gleiche Positionierung gibst, wie z.B. top: 20px; oder so

musst dann halt nur die seitliche Positionierung und die Breite in Prozent machen, damit es mit deinem Bild mitskaliert

wobei dann natürlich doof aussieht, wenn Browser so klein gemacht wird, dass der Text größer wird als das Feld ist ;)
 
Seitlich ist kein thema und top geht nicht, weil vorher ein Zeilenumbruch erzwungen wird. Und genau da liegt doch das Problem welches ich habe. Und mit den Werten spielen bringt nichts, da die Ausgabe auf verschiedenen Bilschirmen und Auflösungen anders sind.

Also ich kann nicht top:48% und den zweiten top:38% machen das haut irgendwie nicht passend hin.
 
Also es gibt auf css-zengarden ein Beispiel, wie man mittels SPAN ein Hintergrundbild setzt. wenn der Span die feste Breite des Hintergrundbildes hat, und man dem SPAN Tag die Option text:center oder so ähnlich, mitgibt, dann wäre jeder Text in diesem Span immer zentriert. D.h. ob 10 oder 10000000!
Es sei die zahl wird größer als der Span an Breite hat.

Aber das ist ja bisher nicht bekannt

Probleme mit Position gibt es nur, wenn man vergisst, welches Element stammt von welchem ab. Vater Sohn Prinzip. Schau nach, welches Element erbt die Eigenschaft Position von seinem Vater und oder gibt es demzufolge seinem eigenen Sohn auch mit !
 
So, so sollte es aussehen




Gelöst damit:
Code: 
#klicklose_jp_eins { 
position:absolute; 
top:8%; 
left:4.5%; 
width:112px; 
height:15px;
z-index:1; 
text-align:center;
font-size:14px;	
font-family:Arial, Verdana;
}


#bankpot_jp_eins { 
position:absolute; 
top:8%; 
left:16.3%; 
width:112px; 
height:15px;
z-index:2; 
text-align:center;
font-size:14px;	
font-family:Arial, Verdana;
}

#global_jp_eins { 
position:absolute; 
top:8%; 
right:13.7%; 
width:120px; 
height:15px;
z-index:3; 
text-align:center;
font-size:14px;	
font-family:Arial, Verdana;
}

#lotto_jp_eins { 
position:absolute; 
top:8%; 
right:1.8%; 
width:112px; 
height:15px;
z-index:4; 
text-align:center;
font-size:14px;	
font-family:Arial, Verdana;
}

HTML: 
<div id = "hauptheader_eins">
  <div id="klicklose_jp_eins"><b>['globaljackpot_klicklose']</b></div>
  <div id="bankpot_jp_eins"><b>['bankpot']</b></div>
  <div id="global_jp_eins"><b>['globaljackpot']</b></div>
  <div id="lotto_jp_eins"><b>['lotto']</b></div>
</div>


Hier kann dann zu gemacht werden, vielen dank für die versuchten hilfen
 
hast du schonmal probiert, den Browser mit deiner aktuellen Lösung zu verkleinern? ^^
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben