H1 soll sich über H2 anordnen!
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
code
container
digital designer
element
entdecken
entwickler
http
jemand
leute
navigation
nehmen
position
positionieren
same
schliessen
text
url
wissen
zufall
-
Hey Leute,
ich sitze an meinem Portfolio und krieg den einfachsten CSS-Kram nicht hin.
Wie krieg ich hin das H1 immer 5px Abstand nach unten zum H2 hat?!
Hier der Link zur ZIP wo alle Daten sind:
http://same-one.lima-city.de/coding/
https://dl.dropboxusercontent.com/u/24232479/coding_17feb2015.zip
Wäre echt toll wenn sich da jemand die Zeit nehmen kann und mir
das erklären kann – würde nämlich gern mal fertig werden. :/
Danke im voraus..
Beitrag zuletzt geändert: 17.2.2015 16:23:33 von same-one -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ich weiss nicht ob du das hinbekommst, dass du den Abstand NUR zu einem anderem Überschriftentyp definierst.
Prinzipiell suchst du nach den Attributen Margin und Padding.
http://www.w3schools.com/css/css_boxmodel.asp
EDIT: du kannst natürlich auch der H2 sagen, dass sie den Abstand oben haben soll, so hast du den Abstand nur bei H2 definiert.
Allerdings auch dann nicht nur im Vergleich zu H1 sondern zu allen Elementen.
Beitrag zuletzt geändert: 17.2.2015 12:47:37 von airfield-manager -
same-one schrieb:
Hier der Link zur ZIP wo alle Daten sind:
https://dl.dropboxusercontent.com/u/24232479/coding_17feb2015.zip
Wäre echt toll wenn sich da jemand die Zeit nehmen kann und mir
das erklären kann –
Die Zeit ist vermutlich das kleinere Problem, aber niemand hat Lust, sich dafür Dateien runterzuladen. Stell die Seite online und gib uns einen Link, so kann man schnell und unkompliziert schauen und helfen. -
fatfreddy schrieb:
… aber niemand hat Lust, sich dafür Dateien runterzuladen.
http://same-one.lima-city.de/coding/
sorry, hatte alles hochgeladen als erstes (über den web-transfer) und hat mir die
Seite nicht komplett angezeigt, deswegen... naja bla bla – jetzt sieht man's!
Beitrag zuletzt geändert: 17.2.2015 16:15:36 von same-one -
Also, abgesehen davon, dass ein "Digital Designer" sowas wirklich wissen sollte:
Zum Beispiel:
h1 + h2{ margin-top: 5px; }
Deine Navigation ist übrigens nur durch Zufall zu entdecken. ;)
Beitrag zuletzt geändert: 17.2.2015 15:22:34 von tchab -
So ist's fein!
Oha! Da hast Du aber was zusammengebastelt.
Vorab dazu: Viewport Units sind zur Definition von Schriftgrößen gedacht nicht zur Positionierung.
Du gehst hin und verwendest absolute Positionierung und mischt anschließend absolute und relative, bzw. errechnete Werte, die sich dann noch auf unterschiedliche Ausgangswerte beziehen, zur Positionierung.
Das kann nur in die Hose gehen!
Verändere mal die Größe deines Browserfensters und Du siehst, was passiert.
Um das jetzt alles zu entwirren und aufzuräumen, müßte man erst Mal wissen, was Du willst. Ich vermute, die Seite soll immer bildschirmfüllend und ohne Scrollbalken gezeigt werden. Ist das richtig?
-
fatfreddy schrieb:
So ist's fein!
Vorab dazu: Viewport Units sind zur Definition von Schriftgrößen gedacht nicht zur Positionierung.
Du gehst hin und verwendest absolute Positionierung und mischt anschließend absolute und relative, bzw. errechnete Werte, die sich dann noch auf unterschiedliche Ausgangswerte beziehen, zur Positionierung.
Das kann nur in die Hose gehen!
Verändere mal die Größe deines Browserfensters und Du siehst, was passiert.
Um das jetzt alles zu entwirren und aufzuräumen, müßte man erst Mal wissen, was Du willst. Ich vermute, die Seite soll immer bildschirmfüllend und ohne Scrollbalken gezeigt werden. Ist das richtig?
Yepp, die Seite soll immer bildschirmfüllend sein (ohne Scrollbalken).
bzw. soll die Punktmuster-Fläche nach unten oder nach rechts weiterlaufen falls aussenliegender Inhalt existiert.
HTML&CSS war nie meine Stärke – mir fehlen halt einfachste Grundkenntnisse. Ich will mich auch nicht als "Frontend"-Entwickler hinstellen – ich hätte meine Seite nur gerne in eine bestimmte Richtung und experimentiere gern herum, merkt man ja! :P
Also position sollte bei allen Elementen das gleiche sein?
Ja, das mit dem Browserfenster vergrössern ist ja der Grund weshalb ich eure Hilfe brauche. :)
vw und vh nicht benutzen für's Postionieren?
Funktioniert doch so gut in meinem Broswer?! :/
tchab schrieb:
Also, abgesehen davon, dass ein "Digital Designer" sowas wirklich wissen sollte
Deine Navigation ist übrigens nur durch Zufall zu entdecken. ;)
Darüber kann man sich streiten – wäre toll wenn ich das mitbringe, stimm ich dir zu.
Das mit der Navi ist sehr interessant zu wissen. Ja ich setze da auf die Neugierde des Besuchers! :)
Da nicht viele Elemente auf der Seite sind, gehe ich davon aus das jemand ausprobiert..
Meinst du jemand würde die Seite wieder schliessen, a la "nichts entdeckt"?!
Beitrag zuletzt geändert: 17.2.2015 16:12:16 von same-one -
same-one schrieb:
tchab schrieb:
Also, abgesehen davon, dass ein "Digital Designer" sowas wirklich wissen sollte
Deine Navigation ist übrigens nur durch Zufall zu entdecken. ;)
Darüber kann man sich streiten – wäre toll wenn ich das mitbringe, stimm ich dir zu.
Das mit der Navi ist sehr interessant zu wissen. Ja ich setze da auf die Neugierde des Besuchers! :)
Da nicht viele Elemente auf der Seite sind, gehe ich davon aus das jemand ausprobiert..
Meinst du jemand würde die Seite wieder schliessen, a la "nichts entdeckt"?!
Ich habe die Navigation nur entdeckt, weil im Dock was geblinkt hat und mein Cursor dann drüber gefahren ist, war eigentlich schon dabei die Seite zu schließen. Außerdem wird es auf mobilen Browsern noch schwieriger sein, das zu entdecken.
Edit: Zu deiner Positionierung ... https://paste.xinu.at/uwUx/ ;)
Beitrag zuletzt geändert: 17.2.2015 16:27:35 von tchab -
tchab schrieb:
Edit: Zu deiner Positionierung ... https://paste.xinu.at/uwUx/ ;)
Also soll ich bottom und left mit Prozent angeben, oder was ist noch alles falsch in dem Code?
.dotgrid { position: absolute; background-image: url('../files/dotgrid-w.png'); background-repeat: repeat; top: 60px; left: 60px; padding: 30px; height: -moz-calc(100% - 120px); /* Firefox */ height: -webkit-calc(100% - 120px);/* WebKit */ height: -o-calc(100% - 120px);/* Opera */ height: calc(100% - 120px); width: -moz-calc(100% - 120px); /* Firefox */ width: -webkit-calc(100% - 120px);/* WebKit */ width: -o-calc(100% - 120px);/* Opera */ width: calc(100% - 120px); z-index: 4; } .dotgrid h1 { position: absolute; bottom: 32vh; left: 15vw; padding: 5px 7px; font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 3px; line-height: 15px; background-color: #000; text-transform: uppercase; color: #fff; float: left; } .dotgrid h2 { position: absolute; bottom: 2vh; left: 14.38vw; width: 350px; font-family: 'Oswald', sans-serif; font-size: 4.8em; letter-spacing: 3px; line-height: 1em; text-transform: uppercase; color: #fff; float: left; }
Zum Menü, soll ich noch ein Hamburger-Icon hinzufügen?
Ich werde paar Leute davor setzen und schauen wie die sich die Seite anschauen..
Mobile muss ich noch überlegen – MouseOver wahrscheinlich weg und
die weiße Fläche etwas größer mit den Navi-Punkten direkt sichtbar.
Ich kann deinen Screenshot nicht als realistisches Szenario mir vorstellen.
Soll das ein Handy quer sein oder einfach nur "meine" Positionierung schachMatt setzen?! :)
Beitrag zuletzt geändert: 17.2.2015 16:46:33 von same-one -
Die beiden Headlines kann man ja quasi als Logo sehen.
Dementsprechend würde ich die beiden in einen Container packen und darin mit margin und/oder padding anordnen.So ist ihre Relation zueinander definiert.
Den umfassenden Container kannst Du dann, wie bisher die einzelnen Headlines, positionieren und skalieren.
Zum Menü, soll ich noch ein Hamburger-Icon hinzufügen?
Das kann nicht schaden. Du willst schließlich etwas zeigen, also solltest Du es den Usern so einfach wie möglich machen, das auch zu finden.
Funktioniert doch so gut in meinem Broswer?! :/
Dann gäbe es diesen Thread vermutlich nicht. Zudem ist die Zeit vorbei, wo ein Entwickler ein "Best viewed with XXX" auf seine Seite klatschte und die Gewohnheiten seiner User einfach ignorierte. :D
Schau dir deinen Entwurf mal mit den Entwicklertools von Chrome an. Dann erkennst Du schneller, was es mit dem "Viewport" auf sich hat. Der ist eben nicht abhängig vom Browser, sondern in erster Linie vom Device.
In Chrome funktionieren übrigens auch einige deiner Effekte nicht.
Beitrag zuletzt geändert: 17.2.2015 17:25:56 von fatfreddy -
fatfreddy schrieb:
Dementsprechend würde ich die beiden in einen Container packen und darin mit margin und/oder padding anordnen.So ist ihre Relation zueinander definiert.
Den umfassenden Container kannst Du dann, wie bisher die einzelnen Headlines, positionieren und skalieren.
Zum Menü, soll ich noch ein Hamburger-Icon hinzufügen?
Das kann nicht schaden. Du willst schließlich etwas zeigen, also solltest Du es den Usern so einfach wie möglich machen, das auch zu finden.
In Chrome funktionieren übrigens auch einige deiner Effekte nicht.
Okie dokie, endlich…
Jetzt muss ich das Menü-Icon noch rechtsbündig hinkriegen.
Updated:
http://same-one.lima-city.de/coding/
Du meinst die cubic-beziers?!
Ja, ich klemm mich nochmal hinter meinen ganzen CSS-Kauderwelsch und versuch Ordnung zu machen.
Dankeschön.
Beitrag zuletzt geändert: 17.2.2015 20:58:03 von same-one -
hallo same-one,
um den hamburger rechtsbündig anzuzeigen gib der .hamburger doch einfach right:0px; - position:absolute hat der ja eh schon
lg hechma -
hechma schrieb:
um den hamburger rechtsbündig anzuzeigen gib der .hamburger doch einfach right:0px; - position:absolute hat der ja eh schon
ja prima.. das motiviert mich total, die endlich mal fertig zu bekommen!
ich sitz da schon mehrere Monate dran und irgendwann gibt man auf...
danke leute! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
