Menu balk & footer verbreden over hele pagina

  • Melissa

    (@melisanadine)


    9 jaren, 11 maanden geleden

    Hallo,

    Zelf ben ik al een tijdje bezig geweest met het verbreden van mijn menu balk over de hele pagina. Dit zelfde heb ik geprobeerd voor de footer. Alleen wil het niet lukken. Als ik de ”width” aanpas, dan wordt hij alleen verbreed naar links of naar rechts.

    Wie kan mij helpen? Ik gebruik het thema Reddle.

    Dit is mijn style.css die ik heb voor het gedeelte van mijn menu:

    /* =Menu
    ———————————————– */

    #access {
    background: #000;
    clear: both;
    display: table;
    float: none;
    width: 1520px;
    }
    #access ul {
    display: table;
    margin: 0 auto;
    }

    #access li {
    float: left;
    position: relative;
    }
    #access a {
    color: #eee;
    border-bottom: .375em solid #000000;
    display: block;
    line-height: 2.25em;
    margin: 0 1px 0 0;
    padding: 0 28px;
    text-decoration: none;
    }
    #access ul ul {
    background: #b12930;
    border-top: 1px solid #a41c23;
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    position: absolute;
    top: 3.5em;
    left: 0;
    z-index: 99999;
    }
    #access ul ul ul {
    left: 100%;
    top: 0;
    }
    #access ul ul a {
    border: none;
    color: #ffe8ef;
    margin: 0;
    padding: 0 28px;
    width: 200px;
    height: auto;
    }
    #access ul ul li {
    border-bottom: 1px solid #a41c23;
    }
    #access li:hover > a {
    border-color: #ffc4e0;
    color: #fff;
    }
    #access ul ul :hover > a {
    background: #ac242b;
    color: #fff;
    }
    #access ul ul a:hover {
    }
    #access ul li:hover > ul {
    display: block;
    }
    #access li.current_page_item a,
    #access li.current-menu-item a {
    border-color: #ffc4e0;
    }

    Dit is het style.css gedeelte voor mijn footer:

    /* =Footer
    ———————————————– */

    #colophon {
    background: none #000000;
    border-top: 1px solid #ddd;
    margin: 1.615em 0;
    padding: 1.615em 0;
    }
    #supplementary {
    border-bottom: 1px solid #ddd;
    margin: 0 0 1.615em;
    padding: 0 9.464285714286% 3.23em;
    overflow: hidden;
    }

    /* Two Footer Widget Areas */
    #supplementary.two .widget-area {
    float: left;
    margin-right: 3.083700440529%;
    width: 48.458149779736%;
    }
    #supplementary.two .widget-area + .widget-area {
    margin-right: 0;
    }

    /* Three Footer Widget Areas */
    #supplementary.three .widget-area {
    float: left;
    margin-right: 3.083700440529%;
    width: 31.277533039648%;
    }
    #supplementary.three .widget-area + .widget-area + .widget-area {
    margin-right: 0;
    }

    #site-info {
    color: #ffffff;
    font-family: Verdana,sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.75;
    padding: 1.615em 9.464285714286%;
    text-align: center;
    }
    img#wpstats {
    background: #0000000;
    border-radius: 50%;
    display: block;
    margin: 0 auto 1.615em;
    padding: 3px;
    }

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • W.P. Ginfo

    (@wp-ginfo)

    9 jaren, 11 maanden geleden

    Hi Melissa,

    FYI:

    1. Je CSS kunnen we gewoon via je site bekijken… die hoef je hier dus niet te vermelden.
    2. mocht je toch code willen posten, klik dan aan het begin -en aan het einde op de ‘code-knop’
    3. zo voorkom je problemen met de site van het forum…;)

    Over je vraag…

    Geef aub de url van je site, zodat we kunnen zien wat je bedoelt…

    Thread starter Melissa

    (@melisanadine)

    9 jaren, 11 maanden geleden

    De url is http://www.melissanadine.com.

    Welke “code knop”? Ik ben hier nog niet zo thuis in, dus vandaar 🙂

    W.P. Ginfo

    (@wp-ginfo)

    9 jaren, 11 maanden geleden

    Hi Melissa,

    Ik heb naar je site gekeken.

    De maximale breedte die staat aangeduid voor je site is 1120px;
    Dat is ook de huidige breedte van je footer en het menu.
    Dus… alles staat nu al op zijn max…
    Het is de achtergrond [ook wit…] die je nu links en rechts van je pagina ziet… Hij is 1903px breed.

    Welke “code knop”?

    Hij staat direct boven het invoerscherm van dit forum…

    Thread starter Melissa

    (@melisanadine)

    9 jaren, 11 maanden geleden

    Code knop gevonden 🙂 bedankt.

    Maar het is voor mij dus niet mogelijk om alles breder te maken?

    W.P. Ginfo

    (@wp-ginfo)

    9 jaren, 11 maanden geleden

    #access,#colophon {
	background: #000;
	clear: both;
	/*display: table;*/
	float: none;
	width: 2000px;
	margin-left:-400px;
}

    Pas desgewenst de maten aan

    Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
    Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

    Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
    Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
    Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

    Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

    Heb je nog geen childtheme?

    1. installeer en activeer ‘one click childtheme’-plug-in
    2. activeer de originele theme
    3. Dashboard > weergave > child theme
    4. beantwoordt de vragen op het scherm
      >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
    5. Activeer het childtheme.

      6. ==

    6. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
      – Maak je aanpassingen in style.css van het childtheme;
      – mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

    == == == Extra
    Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen,rechtsklik en kies ‘element inspecteren’, of installeer dan bijv de browser-add-on ‘firebug’.

    Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren, layout etc. aanpassen.

    == == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
    Zet de bovenstaande code dan ONDERAAN het bestand ‘styles.css’ van je thema. Ververs je browser <CTRL-F5>

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Menu balk & footer verbreden over hele pagina’ is gesloten voor nieuwe reacties.