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

[ERLEDIGT] Teams unbekannter Abstand

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 bearbeitet von einem Moderator:
Werbung:
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.
 
Hallo,

du hast im rechten auch margin-right:10 und damit auch platz nach recht.

einfach jedes 3 margin-right auf 0 setzen und dann kannst die boxen etwas größer machen.

.team:nth-child(3n+0){margin-right: 0px;}
und .team auf width: 256px; ändern

Cheffchen
 
Werbung:
Hallo tobi1994

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



Grüsse,
soulxheart
 
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
 
Einwandfrei Danke euch :) würd's ne Alternative auch noch geben statt :nth-child das die letzten 10% auch zufrieden sind :D
Gruß
 
Werbung:
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
 
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 bearbeitet von einem Moderator:
Werbung:
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
 
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.
 
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 bearbeitet von einem Moderator:
Werbung:
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.
 
Hallo,

aufteilen must das schon

800 + 10 = / 3 = 270

also 270 box inkl. 10px rechts margin und beim 3ten werden die 10px ja wieder gelöscht.

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

Gruß
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
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.
 
Naja ungerade Zahl. Hab 800 - 3x10 = 770 /:3 = 256.6666666667 also 256px.
 
Werbung:
Ja :) hab gesehen das ich mich vertan hab dann habs ich nochmals geändert, müsst jetzt passen.

Top, Danke :)
 
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 :)
 
Zurück
Oben