Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 8
Seite [1]
Beckz


Rock the board




Beiträge: 62
 # Thema - 15.12.2009 um 17:43 Uhr
Grüßt euch,
Habe da ein kleines Problem mit der Ausrichtung eines Textes (bzw. Wörter)

Ich möchte also 6 Wörter neben einander in einer Reihe mit spezielen Wortabstand in ein und dem selben Div stehen haben.(bsp: word-spacing: 10px

Nun soll die Wortreihe aber auch einen spezielen abstand zum linken Rand haben. Also sprich:

|<100px> Beispiel1 <10px> Beispiel2 <10px> Beispiel3 <10px> Beispiel4 usw.

Den abstand zwischen den Wörtern würde ich ja nun mit word-spacing: 10px; hin bekommen..
aber wie bekomme ich den abstand (die 100px) zum linken rand hin?

Wenn ich margin oder padding benutze hat das ja auch auswirkungen auf den Wortabstand?!
Sprich wenn ich margin-left: 100px; nehme, habe ich ja 100px zwischen jedem Wort als abstand.

Gibt es da eine andere möglichkeit wier ich das lösen kann ohne ein weiteres Div zu benutzen?
Inaktiv
Mindcrime


Geekboy





Beiträge: 1155
 # Antwort: 1 - 15.12.2009 um 17:59 Uhr
<div style="word-spacing: 10px; padding-left: 100px">wort1 wort2 wort3 ...</div>


Zuletzt editiert von Mindcrime am 15.12.2009 um 18:00 Uhr (1x Editiert)
Inaktiv
|
Jam2 ClanSphere Team


Highlander





Beiträge: 3291
 # Antwort: 2 - 15.12.2009 um 18:01 Uhr
<div style="margin-left: 100px; word-spacing:10px">test test test</div>

Warum sollte margin-left das word-spacing ändern?

edit: ob padding oder margin musst du entscheiden

mist^^ mindcrime war schneller


------------------
Gruß/ Best regards
Jam2

Nützliche Forumbeiträge/Codepastes: (Useful comments in our board / codepastes)
Template Switch for index.php
Board Navlist last posts

Edi: könnte man denn auch hier eine erweiterung einfügen?
Jam2: das web ist wie toyota.....
Edi: hö ?
Jam2: nichts ist unmöglich!


Zuletzt editiert von Jam2 ClanSphere Team am 15.12.2009 um 18:02 Uhr (1x Editiert)
Inaktiv
|
Miraculix


Going for pro




Herkunft: Füssen
Beiträge: 429
 # Antwort: 3 - 15.12.2009 um 18:02 Uhr
Also ich würde das schon mit padding lösen.
Dem div einfach ein padding-left: 100px; verpassen.

also:
 
1.
1. / 2. / ... 
 <div class="blabla">Beispiel1 <10px> Beispiel2 <10px> Beispiel3 <10px> Beispiel4 usw.</div>
und in der css:
 
1.
1. / 2. / ... 
 .blabla { padding-left: 100px; }

http://www.css4you.de/padding-left.html

Da war ich wohl nicht der schnellste.


------------------
greeetz Miraculix

Band-Page -> www.muddleheaded-scum.de

Zuletzt editiert von Miraculix am 15.12.2009 um 18:03 Uhr (1x Editiert)
Inaktiv
|
Beckz
Thread-Ersteller


Rock the board




Beiträge: 62
 # Antwort: 4 - 16.12.2009 um 11:44 Uhr
Erstmal schönen dank für eure Antworten!

Aber so funktioniert das leider nicht :(
Wäre ich nicht so ein blutiger Anfänger, hätte mir das sofort klar werden müssen,
den ich denke ich habe den fehler selber gefunden...aber leider keine Lösung für :(

HTML:

 
1.
2.
3.
4.
5.
6.
7.
8.
1. / 2. / ... 
  <div id="head">
     <a href="/design/news/recent" class="topmen">Hauptquatier</a> 
     <a href="/design/board/list" class="topmen">Forum</a>
     <a href="/design/gbook/list" class="topmen">Gbook</a>
     <a href="/design/members/teams" class="topmen">Squads</a>
     <a href="/design/events/agenda" class="topmen">Events</a>
     <a href="/design/replays/list" class="topmen">InGameVids</a>
 </div>


Template css:

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
1. / 2. / ... 
 #head, #debug, #bottom {
  width: 1005px;
  background-image: url(images/topnav.jpg);
  color: #757575;
  font-family: Tahoma;
}
#head {
  height: 55px;
  text-align: left;


Content css:

 
1.
2.
3.
4.
5.
6.
7.
8.
1. / 2. / ... 
 .topmen {
padding-left: 204px;
  font-size: 15px;
  font-weight:bold;
  text-decoration: none;
  color: #9EA1AB;
  /*text-align: center;*/
}



Ich denke mal das Problem ist die html Datei... da ja jeder Menü Eintrag die klasse "topmen" hat. Also wird quasi jedes mal das padding übernommen.
Aber wie kann ich das umgehen?


Zuletzt editiert von Beckz am 16.12.2009 um 11:47 Uhr (1x Editiert)
Inaktiv
|
Mindcrime


Geekboy





Beiträge: 1155
 # Antwort: 5 - 16.12.2009 um 11:53 Uhr
das folgende aendern:
.topmen
{
margin-left: 10px;
font-size: 15px;
font-weight:bold;
text-decoration: none;
color: #9EA1AB;
}

#head
{
padding-left: 190px;
height: 55px;
text-align: left;
}
Inaktiv
|
Beckz
Thread-Ersteller


Rock the board




Beiträge: 62
 # Antwort: 6 - 16.12.2009 um 12:00 Uhr
 
1.
2.
3.
4.
5.
6.
1. / 2. / ... 
 #head
{
padding-left: 190px;
height: 55px;
text-align: left;
}



so in etwa hatte ich es auch schon probiert. Das Problem ist, das dann meine Hintergrundgrafik mit Verschoben wird :-(


Inaktiv
|
Mindcrime


Geekboy





Beiträge: 1155
 # Antwort: 7 - 16.12.2009 um 12:03 Uhr
Dan halt
.topmen
{
margin-left: 10px;
font-size: 15px;
font-weight:bold;
text-decoration: none;
color: #9EA1AB;
}

<a href="/design/news/recent" class="topmen" style="margin-left: 190px;">Hauptquatier</a>


Inaktiv
|
Beckz
Thread-Ersteller


Rock the board




Beiträge: 62
 # Antwort: 8 - 16.12.2009 um 12:08 Uhr
jawoll...so hat das funktioniert!!

Vielen Dank!!
Inaktiv
|

Dieses Thema wurde von TeQu!La ClanSphere Team PM geschlossen.
Antworten: 8
Seite [1]