Startseite nur mit 3 Felder und sonst nichts

  • Hi,

    ich hab leider keine gute Kenntnis von PHP und dem fortgeschrittenen HTML, ich bin froh, dass ich Wordpress halbwegs gut hinkriege, aber hier hört es echt auf und ich hoffe, Ihr könnt mir helfen.

    Ich würde gerne meine Homepage-Startseite unterteilen, so dass wie auf dem Beispielbild welches ich angefügt habe, nur 3 verschiedenfarbige Bereiche zu sehen sind, mit je einem Link darauf. Toll wäre, wenn noch ein Hover-Effekt möglich wäre. Und wenn man dann auf einen Link klickt, soll man in je einen anderen Bereich der Homepage kommen, wo jeweils ein andere Menü gilt (das ist ja ohne Probleme mittels Plugin fürs Widget machbar).

    Startmenü, Header, Footer und Co sollen alle nicht sichtbar sein.

    Dass man das mit divs macht weiß ich, ich hab auch selber schon rumgetestet, aber bin wirklich unzufrieden. Das letzte Mal als ich ernsthaft HTML gemacht hab, waren noch iframes hin...das ist schon was her :D

    Erstens war es wenn so, dass der Widgetbereich dann immer leer war und das natürlich dämlich aussah.
    Und zweitens ist auch die Größenskalierung total unbefriedigend. Ich dachte eigentlich wenn ich vorgebe es soll 400 hoch sein und 400 breit, dass das immer so ist und nicht nur dann, wenn alles vollgefüllt ist mit Text.

    Fällt jemandem dazu spontan was ein?

    Es würde auch reichen, wenn das nicht direkt in Wordpress wäre (wenns zu schwierig ist wegen Widget, Header, Footer und Co ausschalten), sondern ich dann im Grunde ne eigene index.html erstellen würde, von der aus dann erst auf die eigentliche wordpress-seite verlinkt würde.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Im HTML-Teil schreibst Du sowas:

    Code
    <div class="left">irgendwas links</div>
    <div class="right">irgendwas rechts</div>
    <div class="full">irgendwas volle Breite</div>


    in der css dann das

    Code
    .left{background:#f00;width:50%;float:left;height:200px;text-align:center;padding-top:200px;}
    .right{background:#0f0;width:50%;float:right;height:200px;text-align:center;padding-top:200px;}
    .full{background:#00f;width:100%;clear:both;height:100px;text-align:center;padding-top:100px;}


    Padding wird immer zur width und height addiert, so dass Du z.B. auf 400px (left/right) und 200px (full) kommst.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Sollte für Experimente genügen?
    Bei WP machst Du es nicht anders, nur die Styles in der style.css notieren und den Code für die Ausgabe entsprechend mit den DIVs kombinieren.

  • Cool, herzlichen Dank für die schnelle und unkomplizierte Hilfe.

    Das schöne an der Sache ist, dass ich sehe, dass ich gar nicht so falsch lag.
    Mir fehlte eigentlich nur die margin und padding Sache, wobei ich zugeben muß, dass das genau die zwei sind, die ich nie kapiert hab, von wegen Innenabstand, Außenabstand.. :D

    Habt ihr noch nen Tipp bezüglich dieses Hover-Effekts? Früher waren das doch immer solche onmouseover Dinger, aber die wurden doch auch jetzt substitutiert, oder?

    Nochmals vielen Dank! :)

  • Den Hover bekommst Du z.B. über

    Code
    .left:hover {background:#900;}


    oder

    Code
    div.bereich1:hover  {background-color:#990000}


    hin. Je nach dem welchen Code Du genommen hast.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!