CSS Responsive Webdesign - Fehlersuche

WhiteShark · 4. September 2014

Speedy. schrieb:
Der Unterschied zwischen den beiden Grids ist in der Tat ziemlich groß: während Bootstrap noch auf Floats setzt, arbeitet purecss mit dem Flexbox-Modell von CSS3 und ist damit wesentlich moderner.

Stimmt, darauf hatte ich gar nicht geachtet. Aber ich meinte auch eher, dass es vom reinen HTML-Aufbau nicht viel ausmacht. An sich sind nur die Klassenbezeichnungen anders.

Flexbox ist wirklich eine schöne Sache. Aber leider erst ab IE 11 supportet.
Wobei das verlinkte flexboxgrid größtenteils die gleichen Klassen verwendet wie Bootstrap (col-xs-6 bspw).
Da kann man dann für IE<11 ein Conditional Statement setzen und Bootstrap laden, ansonsten flexboxgrid.

Speedy. · 4. September 2014

Yep, aber wird Flexbox nicht schon ab IE10 unterstützt? Eventuell muss man mit Prefixen arbeiten, ich glaube aber der kann das schon. Daher echt empfehlenswert, ich supporte den IE9 auch nur noch wenn notwendig.

Ein weiterer Pluspunkt von purecss: es arbeitet mit em und nicht px wie bei Bootstrap, was im Bereich Responsive Design mehr Sinn macht.

Daaron · 5. September 2014

Speedy. schrieb:
Yep, aber wird Flexbox nicht schon ab IE10 unterstützt?

Jep, wenn man die dämliche Tweener-Notation verwendet. display: -ms-flexbox; -ms-flex-pack: space-between; und so weiter.

Ein weiterer Pluspunkt von purecss: es arbeitet mit em und nicht px wie bei Bootstrap, was im Bereich Responsive Design mehr Sinn macht.

Haben die auch schon rem im Einsatz? Das, muss ich sagen, ist ne echt geile Einheit.
Mich haben die px-Geschichten bei Bootstrap immer gestört. Was bringt es, wenn der untere Abstand eines <p> oder <h*> ein fester Pixelwert ist, der überhaupt keinen Zusammenhang mit der Schriftgröße hat? Das sieht doch nicht aus, weder responsive noch klassisch.

Speedy. · 5. September 2014

Ne, die haben bisher nur em's und % für manche Schriftgrößen im Einsatz. Von rem habe ich nichts gesehen, aber in Zukunft vielleicht. rem ist sowieso nicht weit verbreitet, oder? Ich kenne trotz gutem Browsersupport keine Seite, die darauf setzt (ich persönlich habe den Schritt auch noch nicht gemacht, möchte mich aber bei den nächsten Projekten unbedingt damit befassen).

Daaron · 5. September 2014

Ich bau grad an einem Projekt, bei dem explizit kein Support für IE8 gewährt wird und für IE9 nur notdürftige Fallbacks. Alles ab IE9 kann mit rem umgehen, also nutze ich das schamlos aus. Das einzige, wo ich also wirklich Fallbacks brauche, ist das Flex Model. Zum Glück reicht da oft ein display:inline-block...

raven16 · 8. September 2014

Ich habe mir jetzt mal Bootstrap angeguckt und bisher konnte ich noch nichts negatives feststellen. Bin natürlich auch offen für andere Lösungen

Ich will es natürlich selbst auch verstehen, wie's funktioniert. Daher werd ich in Zukunft sicherlich noch ein bisschen zu dem Thema lernen.

Für meinen Kunden (Fliesenleger) ist es egal, wie seine Homepage erstellt wird, hauptsache er hat mal endlich eine. Und er wird außerdem für das wenige Geld, was er mir bezahlt, der erste Handwerker in meiner Stadt sein, der überhaupt ein Responsive-Design besitzt

Seine Homepage wird jedenfalls mit Wordpress realisiert, womit ich mich in dem letzten halben Jahr schon ein wenig beschäftigt hab. Ich selbst habe leider auch nicht zu viel Zeit neben meinem Studium, mir alles anzuschauen. Große Fortschritte haben Eure Vorschläge schon gebracht, also nochmals danke

Ich hab außerdem noch eine kleine andere Frage, die ich jetzt noch nicht in den Griff kriegen konnte mit meinen begrenzten CSS-Kentnissen. Ich möchte den Rand in der Liste im Mobile-Phone-Design noch wegbekommen:

HTML:

<div class="mainmenubox col-xs-12">
	<ul class="mainmenu nav navbar-nav">
		<li class="active"><a href="#">Startseite</a></li>
		<li><a href="#">Dienstleistungen</a></li>
		<li><a href="#">Referenzen</a></li>
	</ul>
</div>

CSS

Code:

.mainmenubox{
	background: #2d2626;
}

.mainmenu{
	margin: 0;
	padding: 0;
}

.mainmenu li a:link, .mainmenu li a:visited{
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 1.500em;
}
.mainmenu li a:hover, .mainmenu li a:active, .mainmenu li.active {
	background: #ff3651;
}

MFG

Daaron · 8. September 2014

raven16 schrieb:
Ich habe mir jetzt mal Bootstrap angeguckt und bisher konnte ich noch nichts negatives feststellen.

Das kommt mit der Erfahrung... die Kritikpunkte wurden ja schon oft genug breit getreten.

Und er wird außerdem für das wenige Geld, was er mir bezahlt,...

Wenn ich was von "das wenige Geld" höre, da krieg ich sofort Brechreiz!
Wenn du, aufgrund welcher Ausbildung auch immer, eine Zylinderkopfdichtung wechseln könntest... würdest du selbige für 50€ austauschen?
Wenn du richtig tolles Brot backen oder richtig tolle Wurst machen könntest, würdest du ein Brot für 50ct verkaufen?

Seine Homepage wird jedenfalls mit Wordpress realisiert

Wordpress ist Scheiße und nichts, was man für gewerbliche Projekte verwenden sollte.

Ich hab außerdem noch eine kleine andere Frage, die ich jetzt noch nicht in den Griff kriegen konnte mit meinen begrenzten CSS-Kentnissen. Ich möchte den Rand in der Liste im Mobile-Phone-Design noch wegbekommen:

Da fehlt mir ein "list-style-type:none"...

Außerdem: Sowas errät man nicht, für so etwas gibt es Browser Tools. Guck, was den Abstand erzeugt....

raven16 · 9. September 2014

Daaron schrieb:
Das kommt mit der Erfahrung... die Kritikpunkte wurden ja schon oft genug breit getreten.
Außerdem: Sowas errät man nicht, für so etwas gibt es Browser Tools. Guck, was den Abstand erzeugt....

Ja stimmt. Da kann ich dich durchaus nachvollziehen. Habe den Fehler mit Firebug finden können... Ein Padding war Schuld.

Ich hab jetzt noch einen weiteres Problem, was ich diesmal mit Firebug leider bisher nicht ausfindig machen konnte. Ich fühl mich schon langsam wie ne Nervensäge bzw. dumm, dass ich den Fehler nicht selbst finde

Die Child-Elemente in dieser DIV-Box haben kein margin/padding/vertical-align-center, sind aber trotzdem vertikal in dem DIV zentriert. In dem CSS-Code von Bootstrap finde ich auch keine solche CSS-Eigenschaft, die für diese Box diesen Effekt festlegt.

mfg

Daaron · 9. September 2014

Ist es denn wirklich zentriert, oder ist da nur ein Abstand von oben, so dass es aussieht, als wäre es zentriert? Margins von vorherigen Elementen können quasi über Containergrenzen hinweg "ausstrahlen".
In deinem Falle: Das darüber (mit dem Lorem Ipsum) ist doch sicher ein <p>, oder? <p> hat quasi immer ein margin-bottom, auch wenn selbiges bei Bootstrap echt beknackt gewählt ist. Da könntest du den Übeltäter haben...

Manchmal kann es ganz nützlich sein, dem letzten <p> innerhalb eines gemeinsamen Containers die untere Margin wegzunehmen. :last-child hilft.

Und ein praktischer Tip: Weg mit Firefox/Firebug. Chrome hat nach meiner Erfahrung die mit Abstand besten Entwicklertools. Vieles, was mir im Chrome wunderbar von der Hand geht, geht im Firebug wahlweise gar nicht oder nur rudimentär oder irgendwie krüppelig.

John Reese · 14. September 2014

Daaron schrieb:
Und ein praktischer Tip: Weg mit Firefox/Firebug. Chrome hat nach meiner Erfahrung die mit Abstand besten Entwicklertools. Vieles, was mir im Chrome wunderbar von der Hand geht, geht im Firebug wahlweise gar nicht oder nur rudimentär oder irgendwie krüppelig.

Die da wären?
Noch nie Probleme mit Firebug gehabt.. und das Look and Feel von Firebug ist viel besser, als das von Chrome (gut, ist natürlich subjektiv).
Benutze seit circa 5 Jahren Firebug, zwischenzeitlich mich mal an den Chrome-Tools versucht, das war nix -.-

Suche

CSS Responsive Webdesign - Fehlersuche

WhiteShark

Admiral

Speedy.

Gast

Daaron

Fleet Admiral

Speedy.

Gast

Daaron

Fleet Admiral

raven16

Lieutenant

Daaron

Fleet Admiral

raven16

Lieutenant

Daaron

Fleet Admiral

John Reese

Lt. Commander

Ähnliche Themen