[ERLEDIGT] Teams unbekannter Abstand

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
T

tobi1994

Guest
Moin,

wieso bzw. welcher Abstand ist hier drin das ich die Teams nicht auf kompletter Breite machen kann wie der DIV mit 800px, sobald ich nun ein bisschen ein Team breiter mache um die 800px Breite zu erhalten, dann verschiebt es mir ein Team nach unten und ich habe nur noch 2 Teams in einer Reihe.



Danke
 
Zuletzt von einem Moderator bearbeitet:

Der Hans

Mitglied
5 September 2011
44
1
8
Bei drei Elementen auf 800px darf jedes halt maximal 266px breit sein und du bist mit 260px (width + margin) schon nah dran. Ein bisschen mehr Spielraum würdest du haben, wenn das letzte DIV einer Zeile kein margin-right bekommt. Dann könntest du den drei DIVs width:260px geben und mit jeweils 10px Freiraum würden die genau in den Wrapper passen.
 

soulxheart

Mitglied
26 Oktober 2012
117
0
16
Schweiz
Hallo tobi1994

Beachte aber, dass :nth-child (CSS3) in älteren Browsern, z. B. im Internet Explorer 8, nicht funktioniert.



Grüsse,
soulxheart
 

Cheffchen

Senior HTML'ler
21 Oktober 2008
3.154
104
63
Berlin
code.klassentreffen-seelow-92.de
Hallo,

voll kommen richtig.

aber IE8 endet 04.2014 also ist das absehbar das die restlichen 10% sehr bald unter 1% liegen wird.

Und mal im ernst, ich halt auch nichts da von, das ersteller sachen verlangen vom User, aber wem seine Sicherheit wurst ist, da is mir das auch wurst das der mal was nicht so ganz 100 sieht wie alle anderen :O).
Selbst MS rät von der nutzung des IE8 ab :O)

Cheffchen
 
T

tobi1994

Guest
Einwandfrei Danke euch :) würd's ne Alternative auch noch geben statt :nth-child das die letzten 10% auch zufrieden sind :D
Gruß
 

soulxheart

Mitglied
26 Oktober 2012
117
0
16
Schweiz
Hallo

Es gibt noch genügend Personen/Firmen, die den Internet Explorer 8 verwenden. Warum sollte man die ignorieren? Jedenfalls bis ins Jahr 2014 sollte man dies beachten.

@tobi1994:

Du kannst dem letzten Team einer Zeile bspw. eine weitere Klasse vergeben:

HTML:
.last {
   margin:0px;
}


Grüsse,
soulxheart
 
T

tobi1994

Guest
Wie kann ich das mit jquery script machen, wäre glaub die einfachste Lösung, wenn mal mehrere/wenigere dazukommen:


Muss ich in der CSS da auch noch was anpassen?

Gruß & Danke
 
Zuletzt von einem Moderator bearbeitet:

Cheffchen

Senior HTML'ler
21 Oktober 2008
3.154
104
63
Berlin
code.klassentreffen-seelow-92.de
Hallo,

ist recht einfach
Code:
$(function() {
    $('.team').each(function(e){  
      if(e % 3 === 2){
        $(this).addClass('last'); 
      }     
    });   
});
damit wird auf der Seite die class team durch gezählt und jeder 3te bekommt zusätzlich eine neue class last.
jetzt natürlich in css die werte geben sonst bringt das ja nichts :O)
Code:
.last{margin-right: 0;}
dann kannst die boxen breiter machen da das rechte kein anbstand rechts mehr hat.

Cheffchen
 
B

bdt600

Guest
Stellt sich doch die Frage, wo die Daten herkommen. Da PHP im Einsatz ist, würde ich auf jquery (scheint für manche ein Allheilmittel zu sein) verzichten.
 
T

tobi1994

Guest
Hätte es jetzt soweit eingebaut, aber trotzdem komme ich erst auf 798px :)


boarder insgesamt 10 px oder?
dann 3x die Teams 3x je 250px
und zwischenabstände gerade 2x je 19px

aber wenn ich jetzt noch die 2 px bei den Zwischenabstände auf margin-right 20px mache wird es mir die wieder untereinander :(

Gruß
 
Zuletzt von einem Moderator bearbeitet:
B

bdt600

Guest
Wir haben, nachdem du Beiträge geändert hast, keinen Quellcode und keinen Link mehr. Somit könnte dieser Thread auch geschlossen werden, denn wirklich helfen kann man dir so nicht.
 
T

tobi1994

Guest
So hab ich es jetzt, glaub ich aber irgendwie immer noch untereinander :) :lol:

Gruß
 
Zuletzt von einem Moderator bearbeitet:
B

bdt600

Guest
Deine Class team hat eine Breite von 270px. Wie soll das 3x in 800px passen?
Ein Tipp: nutze den Firefox mit installiertem Addon Firebug. Damit erkennst du, wo welche Styles benutzt werden.
 
T

tobi1994

Guest
Naja ungerade Zahl. Hab 800 - 3x10 = 770 /:3 = 256.6666666667 also 256px.
 
T

tobi1994

Guest
Ja :) hab gesehen das ich mich vertan hab dann habs ich nochmals geändert, müsst jetzt passen.

Top, Danke :)
 
T

tobi1994

Guest
Hallo,

was stimmt den da nicht, das es nun jetzt nicht funktioniert?

http://bit.ly/1eStoQ8

irgendwie findet er die classe nicht, aber was habe ich vergessen/falsch gemacht?

Hab da in der pages.css eigendlich gar nichts verändert.

Danke :)
 
Werbung: