WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] right sidebar has moved to the bottom of the page (10 posts)

  1. igorlaszlo
    Member
    Posted 1 year ago #

    hello !

    theme : twenty eleven child theme
    page where you find the sidebar : http://webdesign.igorlaszlo.com/tutoriels-astuces-composants/

    i tried all of those solutions : http://wpbtips.wordpress.com/2012/05/19/sidebar-at-the-bottom-and-related-issues/#comment-52104 - it did not help.

    probably it has moved today when i changed the style.css... i changed the web site width structure. before, the page, primary, content, secondary were in % and i fixed them in px because i do not like when the page is resized and some elements resize but some elements move, so the page becomes massy...

    can someone look at my css what wrong is ?

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try validating your HTML and CSS -- errors often cause problems like that:

    http://codex.wordpress.org/Validating_a_Website

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Also look at the width of your primary div -- it 1200px wide which is the max width of the whole page -- so there is no room for the sidebar -- hence it goes below.

  4. Joshua Ray
    Member
    Posted 1 year ago #

    It looks like your container div #primary has a width of 1200px which is pushing down the sidebar.. If you remove the width on that div the sidebar aligns to the right again.

  5. igorlaszlo
    Member
    Posted 1 year ago #

    Hello WPyogi and pdxollo,
    thanks for the suggestions !

    What i made as change :

    • page width from 100% to 1200px
    • primary from 100% to 1200px
    • content from 70% to 840px
    • secondary from 25% to 300px

    I just calculated everything from % to px. So, before the ratio was the same.
    But for your suggestion, i reduced the primary to 1190px and later 1180px, the sidebar did not move back to its place...
    In the primary there is still place because : 15px margin + 840 width + 300px width + 15px margin = 1170px, so there is still 30px d'espace between the content and the sidebar...

    I used the suggested validator, i corrected the major html errors and i do not see major problems of the css :

    URI : http://webdesign.igorlaszlo.com/wp-content/themes/ilwebdesign/style.css
    656	 #access li:hover > a, #access ul ul :hover > a, #access a:focus	 impossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
    656	 #access li:hover > a, #access ul ul :hover > a, #access a:focus	 La propriété progid n'existe pas : DXImageTransform
    656	 #access li:hover > a, #access ul ul :hover > a, #access a:focus	 Erreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.Shadow(color=#777777, Direction=333, Strength=10);
    657	 #access li:hover > a, #access ul ul :hover > a, #access a:focus	 Erreur lors de l'analyse grammaticale. }
    680	 #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a	 impossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
    680	 #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a	 La propriété progid n'existe pas : DXImageTransform
    680	 #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a	 Erreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.Shadow(color=#777777, Direction=333, Strength=10);
    681	 #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a	 Erreur lors de l'analyse grammaticale. }
    1601	 .error404 #main #searchform	 Propriété erronée : border inline n'est pas une valeur de color : 1px inline #e0e0e0
    1874	 .featured-post .feature-text:after, .featured-post .feature-image.small:after	 impossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
    1874	 .featured-post .feature-text:after, .featured-post .feature-image.small:after	 La propriété progid n'existe pas : DXImageTransform
    1874	 .featured-post .feature-text:after, .featured-post .feature-image.small:after	 Erreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    1875		 Erreur lors de l'analyse grammaticale. [: linear-gradient(top]
    1875		 Erreur lors de l'analyse grammaticale. [ rgba(255]
    1875		 Erreur lors de l'analyse grammaticale. [,255]
    1875		 Erreur lors de l'analyse grammaticale. [,255]
    1875		 Erreur lors de l'analyse grammaticale. [,0) 0%]
    1875		 Erreur lors de l'analyse grammaticale. [,rgba(255]
    1875		 Erreur lors de l'analyse grammaticale. [,255]
    1875		 Erreur lors de l'analyse grammaticale. [,255]
    1881		 Erreur lors de l'analyse grammaticale. [,1) 100%); /* W3C */ width: 100%; height: 45px; position: absolute; top: 230px; } .featured-post .feature-image.small:after]
    2338	 .commentlist > li.comment	 Propriété erronée : text-shadow Trop de valeurs, ou valeurs non reconnues : non
    2453	 .commentlist > li.bypostauthor	 Propriété erronée : text-shadow Trop de valeurs, ou valeurs non reconnues : non
    3233	 #ie7 article.intro	 Propriété erronée : padding-left Les valeurs négatives de -7.6% ne sont pas autorisées : -7.6%
    3234	 #ie7 article.intro	 Propriété erronée : padding-right Les valeurs négatives de -7.6% ne sont pas autorisées : -7.6%

    Any suggestion ?

  6. igorlaszlo
    Member
    Posted 1 year ago #

    Maybe the problem comes from the fact that on page resize, the sidebar does not stay at its place but it moves with the page resize movement (dynamique) ? Anyway, all my change from % to pixel was for that aim, i would like to let my page always in its size and if someone's screen is smaller, he/she must use scrollbars...
    In css, how can i fixe the positions and the web site size (but scrollable down of course) ?

  7. Joshua Ray
    Member
    Posted 1 year ago #

    igorlaszio,
    the issue is still with the width of #primary.. it was set to 100% before which is a relative measurement { 100% of the available space } now you have an explicit width 1200px. #primary is essentially a wrapper for your list of posts so you would have to make it smaller than the overall site wrapper if you want the sidebar to be to the right.

    #page { 1200px }
    #primary { 885px }
    #secondary { 300px }

    Try this out with firebug or chrome developer tools and you can see this fixes the issue.

  8. igorlaszlo
    Member
    Posted 1 year ago #

    Ahhh, thanks a lot pdxollo !!! You brought the light :)
    What i understood is that the primary contains both the content and the secondary... but it contains only the content. Now i see why it pushed down the sidebar.
    Thanks again, i can close the topic !

  9. igorlaszlo
    Member
    Posted 1 year ago #

    Auh, i forgot to ask a question... now, when i resize my page for example from right to the left, after i got the max size of the #page (1200px), the sidebar moves down. But i would like that everything (including the sidebar) stays at its place, then the page will not be massy, the visitors just have to use scrollbars... how can i fixe the sidebar on its place at resize movement ?

  10. igorlaszlo
    Member
    Posted 1 year ago #

    Sorry, i close this topic, i started a new one here : http://wordpress.org/support/topic/how-to-fixe-the-page-disable-resizing?replies=1

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags