Erste homepage in bau css probloeme [ verschoben]

  • Ja tach auch . auch ich möchte mal so langsam eine HP haben und bin deswegen dabei da schon etwas zu basteln damit ich das auch hinbekomme.

    Aber die Probleme fangen schon bei der ersten Seite an . So ein Mist.

    1 tes Problem die beiden Fotos oben ,passen sich der größte nicht besonders toll an. Sieht man auf jeden Fall.

    2 tes Problem links die links. Die Links sollen untereinander stehen und nicht hintereinander weg . gibt es da ein CSS Befehl das er jedes a Elemente in einer neuen Zeile anfängt und so.

    3 Problem der Footer. Den habe ich jetzt zwar mit fusch da hinbekommen wo er soll, aber das geht doch bestimmt auch mit CSS irgendwie .. so wie es jetzt angeordnet ist soll es auch bleiben. Also von den einzelnen kästen her .. der blaue und der graue Bereich soll noch größer werden . mit Inhalt schätze ich ml so 1000 Pixel height insgesamt.

    Vielleicht könnt ihr da mal gucken wie man das besser responsiv machen kann und vielleicht mit flexbox aufpeppen.

    Nur ich blicke bei den flexboxen nicht durch. Geht das mit Flex so wie es jetzt ist mit flexboxen umzubauen ??

    * Link entfernt , weil existiert nicht mehr *

    Bitte nicht über die Farben lästern die sind nur zur Verdeutlichung da und für ich da mit ich besser sehe was für ein Mist ich da mache

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Bin kein Profi und auch noch ziemlicher Laie. Hier im Forum gibt es immer viele Wege nach Rom; - daher nimm meine Vorschläge als Hinweis. Ich habe damit rumgespielt und es hat bei mir soweit geklappt. Ob das Ganze aber für Dich passt? Das weiß ich leider nicht ganz.


    Vorschlag für die 1. Frage:

    Im CSS für beide Bilder:

    Code
    1. background-size:100% auto;

    wenn Du beides in background-size:100% 100%; machst verzerrst Du nur die Bilder.



    Vorschlag für die 2. Frage:

    Probier es mal mit html tag <p>. Hier mal ein Beispiel für den ersten Link den ich einfach mal ausprobiert habe und funktionniert (den Rest kannst Du dann in Deinem Gusto zusammen stellen. Die Zeilenbreite könnte dann wichtig werden, - das ist dann CSS)

    Code
    1. <a id="script1" class="scripte" href="#"><p>1link zum script</p></a>


    Vorschlag für die 3. Frage:

    Ich bin hier eher ein Fan von diesem hier im #fuss:

    Code
    1. position: fixed;
    2. bottom: 0;

    Allerdings mußt Du dann die "top" Definition rauswerfen Allerdings bin ich mir nicht ganz sicher, was Du konkret brauchst bei dieser Frage, da Du mit Pixel arbeitest. Ich bin da eher ein Freund von "em". Wenn man dann mit Prozent kommt, passt sich das Ganze dann mit RWD ganz gut ein.



    Ansonsten ist die Einteilung aber gut gelungen. Lass mal sehen, wie sich Deine HP entwickelt.


    P.S.: Ist das bei Porta Westfalica?

  • das mit den bilder background 100% hatte ich auch versucht. komisch ist dann nur das das buld in der höhe abgeschnitten wird.also da fehlt immer ein stück. es gibt irgendeine einstellung ,so viel cover die das fast perfekt machte,aber ich weiss nicht mehr wie .. das mit den footer hätte ich ja auch selber drauf kommen müssen das mit bottom 0 zu machen ,da kann man mal sehen das so nee kleinigkeit doch übersehen werden kann,aber doch ein den nerv klaut . habe aber fixed weg gelassen weil mein footer soll nicht immer sichtbar sein sondern nur ganz unten für meine email und kontaktdaten ,also nix wichtit+ge was immer sichtbar sein muss, habe es auf absolute gesetzt. was aber merkwürdig ist wenn ich bottom 0 mache ,ist der aber nicht auf botton sondern so weit weg wie gross der footer ist ...


    also footer ist 100 px height dan erscheint fer footer bei bootom 100px: verstehe nicht warum .habe das mit bottom:calc(opx - 100px) geregelt. aber das ist ja eigentlich nicht richtig ,da muss noch ein harken sein .


    das mit den links on <p> tag zu packen ist ja auch nicht schlecht ,aber wie kriege ich das hin das er für jeden p tag eine neue zeile anfängt???? da stehe ich auf den schlauch . habe da schon einiges versucht aber nix zeigt die wirkung wie ich es wollte.. habe schon überlegt mit javascript einfach replace('</p>',</p>\n'} oder so zumachen . aber ist wohl nee blöde idee,das muss auch mit css gehen

  • Hi basti1012,


    stehe jetzt ein wenig auf dem Schlauch wo das Problem mit dem <p> tag sein soll. Habe das in Deinem Fiddle von oben nochmals mit den ersten drei Linkzeilen ausprobiert (jetzt der ganze Code):



    und hier das Bild wie es rauskommt (Ich glaube, dass es das ist was Du gerne wolltest)::

    p-tags.GIF

    wie gesagt: die Zeilenabstände solltest Du in CSS über line-heigt anlegen. Das überlasse ich aber Dir.


    Bezüglich der Bilder:

    Wenn das mit der Höhe abgeschnitten ist, dann mach es halt anderst herum:

    Code
    1. background-size:auto 100%

    Hat natürlich dann das Problem, dass das Bild eventuell nicht so hineinpasst, wie Du Dir das vorstellst, dann solltest Du Dir mal über das Bild Format und Dein Format, wie Du es positionnierst nachdenken. Da weiß ich nicht was Du erreichen willst.


    Beim Rest, sprich footer; - kann ich Dir nicht so richtig helfen. Habe nicht so ganz verstanden was Du möchtest. Bin aber auch nicht so der richtige Experte.


    Hoffe dass Dir meine 5 Cents ein wenig helfen.

  • das mit den fotos da muss ichnoch etwas basteln ,das ist auch nicht daas wahr.


    das mit <p> tag hat jetzt funktiobiert ,wo ich deinen code kopiert habe ,ich hatte da wohl ein fehler drinne irgendwo, auch komisch .


    ja mein footersoll ganz unten sein . auch wenn die seite 1200 pixel hoch ist soll der footerauch 1200 pixel weit weg sein und nicht bottom an bilschirmrad .. aber das habe ich jetzt ja, zwar mit leichten umweg aber funzt. aber mal kucken der fehler muss auch noch weg gehen ,vieleicht habe ich da auch ein fehler drinne . ich baue heute nocht noch etwas und presentiere dann mein nächsten versuch .


    dann noch nee frage . ich habe ja 10 links,und hinter jeden link soll ein script rein mit beschreibung und code zumkopieren für den benutzer halt . soll ich für den link jedesmal eine neue hp seite aufmachen oder alles in einer seite reinhauen und mit display none und block ein und ausblenden .


    oder wie macht man das beim hp erstellen???ß

    Dier erste seite heist doch index.html oder so und wie geht es den weiter ??

  • Servus basti1012,


    schön das das mit den <p> tags funktioniert hat.


    Ich gehe mal davon aus, dass Du schon eine HP Adresse hast und ein wenig Webspace, auf dem Du die Dateien drauf legen kannst (Hier hilft Dir Axel im HTML-Seminar https://www.html-seminar.de/online-stellen.htm recht gut). Auch das übermittlen der Dateien z.B. über FileZilla sollte für Dich dann schon klar sein


    Zu Deinen Fragen mit den einzelnen Seiten: Auch hier führen mehrere Wege nach Rom.


    A.) Die etwas "schreibintensive" Variante ist genau die, die Du erwähnst.

    1. Startseite muß index.htm sein, die die links zu den anderen Seiten enthält.

    2. Jede einzelne Seite dann separat aufbauen


    Funktioniert; - ist aber nicht nur schreib-, sondern auch zeitintensiv, da Du bei jeder Änderung in der Kopf-, Steuerung- , Fußbereich immer alle anderen Seiten mit auf den Stand bringen musst. Bei wenigen Seiten kein Problem, aber nicht sonderlich motivierend.


    B.) Die "schreibfaule" Variante:

    Hier bietet PHP eine echt schlaue Alternative.

    1. Separate htm Dateien für Kopf-, Steuerung- , Fußbereiche erstellen. Zum Beispiel sind die links dann auch in der Steuerungs htm Datei (vermutlich).

    2. Startseite mit index.php (muss so heißen) erstellen. Hier musst Du dann die unter B.) 1. genannten htm Dateien mit "include" Befehl "mit hineinbringen".

    3. Alle verlinkten Seiten sind als PHP Dateien dann genauso mit "include" Befehle für die htm Dateien eingebracht.


    Funktioniert super. Erleichtert ungemein den Überblick. Bei meiner HP mit popeligen 6 links habe ich das so gemacht. Ich will es gar nicht anders mehr missen.

    Ein Problem hat das aber: Die Programmierung erfolgt entweder

    a.) direkt im Webspace (aufwendig) oder

    b.) über XAMPP. Hier muss man die Installation verdammt genau beachten. Wenn es aber dann richtig installiert ist, fluppt es richtig gut.





    Hier kann ich übrigens die erste PHP DVD wärmstens empfehlen (Hallo Axel: wie schaut es mit Werbetantiemen aus??) :D:D:D

  • J also php habe ich überhaupt kein plan vonn. habe zwar schon mal öffters über den code geschaut ,wo auch einige sachen mit javascript gleich sind aber sonst kein plan davon .. hp ja da habe ich mich bei https://www.bplaced.net/ angemeldet. blicke da aber nicht durch wie man da nee hp drauf bekommt .. habe mich da gerade mal wieder eingeloggt und jetzt steht da was von deaktiviertes konto obwohl ich nix gemacht habe bis jetzt. kein plan was ich da falsch gemacht habe bzw was ich nicht gemacht habe .. gibt es was besseres als das ?? und was einfacheres ,weil bin ja nicht doof aber schecke da nix. wenn ich meine startseite fertig habe kannst du mir ja mal helfen was ich tun muss damit die online kommt .. am besten baue ich alles so ohne php weil ich muss erstmal javascript fertig lernen bevor ich mit php beginne

  • Nur zur Info:


    Ich habe den link von oben verwendet und bin bei strato gelandet (1und1 wird von Axel empfohlen, was auch nicht schlecht ist Eine Bekannte, für die ich eine einfache HP programmiert habe nutzt diesen und ich muss sagen - fluppt genauso gut). Ich habe meine HP Adresse dort online registriert und mich gewundert warum ich nichts machen kann (klar das das nicht geht, da der Webspace gefehlt hat).

    Dann habe ich die Service Hotline dort angerufen. Sehr kompetent und geduldsam. Zuerst habe ich Webspace gebucht und danach haben die mir telefonisch gezeigt was ich tun muss um über FileZilla die Daten rüberzukopieren. Kosten: 24,- Euronen für 6 Monate. Wenn ich es nicht weiter nutzen will, dann geht das relativ einfach. Der telefonische Service hat mich aber sehr überzeugt.



    Vielleicht überlegst Du Dir zuerst bei einem kompetenten Anbieter einzusteigen. Danach kannst Du immer noch wechseln.

  • Wenn man Bilder als Hintergrund einbindet, hat man immer Probleme, sie responsiv zu machen, weil sich der Container nicht an ihre Größe anpasst. Ich empfehle, sie besser als img-Elemente einzubinden, dann geht es besser:

    https://jsfiddle.net/jf9tu9vh/4/

    Noch nicht ganz perfekt, aber ich wollte vor allem demonstrieren, wie man die Bilder ohne Verzerrung responsiv machen kann.

  • Wenn man Bilder als Hintergrund einbindet, hat man immer Probleme, sie responsiv zu machen, weil sich der Container nicht an ihre Größe anpasst. Ich empfehle, sie besser als img-Elemente einzubinden, dann geht es besser:

    https://jsfiddle.net/jf9tu9vh/4/

    Noch nicht ganz perfekt, aber ich wollte vor allem demonstrieren, wie man die Bilder ohne Verzerrung responsiv machen kann.

    Ach seh mal an . das wusste ich nicht. ich wusste das es besser geht ,so wie du es gemacht hast ,aber das es an Hintergrundbild lag das wusste ich nicht . gut zu wissen. Dann nutze ich demnächst den <img> tag ,weil wie man sieht in dein Beispiel ist es eigentlich schon so wie ich es wollte. Ich hatte es zwischen zeitig auch so gelöst .

    * Link entfernt , weil existiert nicht mehr *

    da regt mich nur der Footer noch auf. Aber da bin ich dran . bei den Header Laufbild habe ich jetzt 98vw benutzt damit es beim Durchlauf nicht ruckelt. Normalerweise muss man ja 100vw nehmen damit ist ja so ist ,aber wieso brauche ich da 98vw damit der Effekt des kurzen Ruckelns nicht auftritt?? Liegt das an der border?

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Ich bin ja noch am Basteln und komme mal wieder nicht weiter .

    und zwar .

    wenn man links auf den ersten beiden links klickt wird ein iFrame von fiddle geladen je nachdem wie Gros das Browserfenster ist verschiebt sich der iFrame unter den Footer . ich verstehe nicht, warum weil alle Prozentzahlen sind so angepasst das es eigentlich nicht möglich ist .. na gut möglich ist es weil ist ja so ,ich weiß nicht wie ich das sonst ausdrücken soll.

    * Link entfernt , weil existiert nicht mehr *

    wie auch immer man das lösen kann ,weiß ich nicht. der Grundbau Kasten wurde in vorderrein schon mal von wem bearbeitet( Namen sage ich nicht, wenn ich nicht darf). ich weiß nicht ob man darauf aufbauen kann, oder nochmal alles umwerfen muss damit der iFrame nicht unter den Footer verschwindet (zum Teil verschwindet) . ihr seid die Profis ihr wisst es besser, ob es ohne großen aufwand anpassbar ist .


    Zur Info . erstmal soll die Seite im Grundaufbau so bleiben ,ich will erstmal testen ob ich das alles hinbekomme und wenn die erste Seite fertig ist will ich mal gucken ob ich die online bekomme . wenn alles irgendwann geklappt hat dann muss ich mir Gedanken machen wie meine HP mal aussehen soll und wie man webdesignerisch es besser machen könnte . ich bin er der bunte Typ wie man jetzt ja schon sehen kann

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von basti1012 ()

  • Ich glaube, mein erster guter Vorsatz wird sein die HP am nagel zu hängen.


    Egal was ich mache, an irgendeiner Stelle passt es nicht.

    Der header ist gut. Der linke Bereich auch ok. Aber dann. Sobald ich link klicke, verschiebt dich der mittlere teil unter den Footer und noch weiter hinaus. Dann habe ich es noch paar mal anders versucht und jetzt, wenn ich auf einen Link klicke, ist der mittlere Teil ziemlich weit unten und kein plan warum. Ich finde keine Höhenangabe oder Prozent Angabe die das macht. So langsam reicht es. Glaube, ich setze alles fixed und untereinander weg, da kann man nichts falsch machen. Sieht zwar scheiße aus. Aber passt zu mir.

    * Link entfernt, weil existiert nicht mehr *

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Nicht so schnell aufgeben!

    Zu dem Fiddle aus #11: Wie möchtest Du es denn haben? Du schreibst:

    Zitat

    verschiebt sich der iframe unter den footer

    Nebeneinander? Dafür ist doch gar nicht genug Platz. "Footer Laufschrift" ist zwar irreführend aber im HTML ist es #mittekopf und das passt zu dem Bild im Ergebnis: Kopf über Inhalt.

    Edit: Habe dich leider falsch verstanden. Du meinst die Tatsache, dass der iFrame vom Footer überdeckt wird. Ich sehe es mir an ...

  • bei einer bestimmten fenster grösse läuft der iframe darunter weg und schiebt dann den footer höher. ich glaube ich werde mal die ganze woche nur was überflex boxen lesen,weil denke damit sollte es doch prima gehen . bin die ganze zeit dabei mit relativ und absolute. aber wenn mal eins passt und dann wieder was dazu kommt ,wie der iframe dann ist es wieder mist

  • Ja da gibt es nix mehr dran zu meckern.der iframe passt sich in der höhe an.auch wenn lings mehr links rein kommen.verschiebt sich nix mehr ,auch beim vollbild nicht. also sollte es perfekt sein. vom layout selber soll da erstmal auch nix passieren.das soll erstmal soweit bleiben. ganz unten im footer noch mini menü oder links wo ich wohne und wo man so antrift und dann ist erstmal gut. dann muss ich kucken wie ich es online bekomme.. am anfang nur erst die eine seite. eigentlich dachte ich das jeder link der auf der linke seite einen eigenen link bekommt. was ist von den beiden sachen sinnvoller? ich denke wenn ich die scripte über iframe einbinde sollte das wohl gehen. wenn ich jetzt jedes script komplett mit code in der seite mit einbaue wird es wohl zu gross.. was meinst du ??


    Erstmal besten dank Sempervivum für deine mühe und hilfe. auch vielen dank für die anderen hilfen die du mir das letzte jahr gegeben.ohne die ganzen hilfe währe ich wohl irgendwann verzweifelt

  • Hey,


    warum entwickelst du deine Webseite in jsFiddle, bzw. in einem online Editor? Dies ist sehr unpassend dafür und der falsche Weg.

    Ich rate dir am besten deine Webseite lokal zu erstellen. HTML, CSS und JS-Dateien kannst du auch lokal ausführen.


    Empfehlen kann ich dir dafür den Editor "Brackets". Dabei ist es gut, dass die ganzen Inhalte gleich in der Live-Vorschau der Seite aktualisiert werden.

  • Alles scheiße. Habe alles aus der fidel übernommen und es kommt nur Müll bei raus. wie kann das sein.

    * Link entfernt , weil existiert nicht mehr *

    und fidel sieht so aus

    * Link entfernt , weil existiert nicht mehr *

    ganz großer unterschied . fängt ja wieder super an

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Jimdo ist nicht geeignet für dich. Es ist gedacht für Benutzer, die ohne Programmierkenntnisse auf der Basis von Vorlagen eine Homepage erstellen wollen. Benutze besser bplaced.net, wie früher schon empfohlen.