Archived

This topic is now archived and is closed to further replies.

  • 0

Layout Not Working Well


Question

Posted · Report post

Hi, i have this problem.. i would like to use all the width of a web page.. i sey 1340 pixel and full width section.. but, looks like the allignment in not centred.. is less on the left that on the right and more...

Share this post


Link to post
Share on other sites

28 answers to this question

Posted · Report post

Hi there,

yesterday i was talking about some problem that i found with my site, about layout setting and some feature that is not centered.

Robert give me 2 link for validate html and w3c cause he talk about some error that maybe i do customizing css code.. I have reinstalled all.. and without plugin and css code Pageliens Framework Theme return 933 error html and 3 critical error with W3C. No one reply to me and i'm still waiting with now my site off line and to made as new.

 

Today i build a site for a client and the box (core plugin box) IS NOT CENTERED!! Now i don't think that i lost my view or my browser or css code.. maybe is possible that the section don't center automatically the box dipending on their dimension etc...

 

You can help me to fix the html and w3c error and center the box please?

Thanks for fast reply because i have my site off line caused to this problem..

 

I think that.. is not correct that I have the site off line just because I have reinstalled everything cause I believe i have done something wrong, and instead is the theme or plugin that has some bug or setting to fix. Please now, in light of the fact that it was not a plugin or my css code, after receive a warning unfair because I had every reason to be angry, please help me to put my site online without errors and with the correct aspect.

 

The site of my client is http://studiofalcicchio.com see the box here. and also this site try to validate with html and w3c and you can see how many error have pageliens framework due to original installation and not cutomization code or plugin.

 

my site is: http://stefanoferruggiara.com

Share this post


Link to post
Share on other sites

Posted · Report post

Listen Nick.. which is the best way to understand how have validate site?

I have just reinstall all and give me the same problem.. ok .. the site work but.. you know.. the would be have html clean code.

Any suggest?

You think that i can ask in pros section for resolve this problem?

Share this post


Link to post
Share on other sites

Posted · Report post

It appears that there's some error, somewhere.

 

The solution is below, but you'll need to examin your own custom CSS to find out if you've added some conflicting code.

 

#boxes .content-pad {
    margin: auto -10px auto 25px;
    padding-bottom: 5px;
}

You may need to adjust accordingly, and this may vary from one browser to another. 

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

I've tried to take off all custom code but doesnt change Rob.. and also the width is not perfect like the site i posted.. let me know something.. i send you via email the access if you want. Let me know.. Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

But is not normal that i have to adjust... centered is centered in not absolute.. is relative then you talking about what?

There isn't a way to have simply centered. The box and the footer columns too..

Share this post


Link to post
Share on other sites

Posted · Report post

This is my css code:

 

 

body{}
 
#header.container-group {background: black;}
#footer {background: black;}
#site #page, #site #dynamic-content {background: balck;}
 
.pl-imageframe a:hover img {
background: none repeat scroll 0% 0% rgb(143, 6, 6);
}
 
.navbar .navline > li.current-menu-item > a {
background-color: rgba(0, 0, 0, 0.1);
color: #f76600;
text-decoration: none;
}
 
.navbar .navline > li > a:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #f76600;
text-decoration: none;
}
 
body.fixed_width #page {
padding-top: 38px;
}
 
body.navbar_fixed .page-canvas {
padding-top: 0px;
}
 
#site #page .page-canvas, #site #dynamic-content .page-canvas {
margin: 0 auto;
}
 
a.button, button.button, input.button, #review_form #submit {
color: black !important;
background: #f76600;
padding: 6px;
line-height: 1em !important;
margin: 4px 2px 0 0;
float: left;
font-size: 16px !important;
width: auto !important;
vertical-align: middle !important;
text-align: center;
text-decoration: none;
border: none;
cursor: pointer;
font-family: inherit;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
 
input[type="submit"], .submit, input[type="button"], .button, input[type="reset"], .reset {
padding: 4px 9px;
cursor: pointer;
text-decoration: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: black;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border: 1px solid #BBB;
background-color: black;
background-image: -moz-linear-gradient(top,white,#f76600);
background-image: -ms-linear-gradient(top,white,#f76600);
background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(gainsboro));
background-image: -webkit-linear-gradient(top,white,#f76600);
background-image: -o-linear-gradient(top,white,#f76600);
background-image: linear-gradient(top,white,#f76600);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc', GradientType=0);
box-shadow: inset 1px 1px 0px white;
font-family: "Helvetica", Arial, serif;
}
 
.gform_wrapper textarea {
    outline-style: none;
    font-size: 15px;
    font-family: inherit;
    letter-spacing: normal;
    padding: 2px 0px;
    resize: none;
}
 
.gform_wrapper select {
font-size: 15px;
font-family: inherit;
padding: 3px 0 3px 0;
letter-spacing: normal;
}
 
.widget .widget-title {
color: #f76600;
text-align: left;
padding: 3px 8px 3px 0px;
margin-bottom: .6em;
}
 
.gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"] {
outline-style: none;
font-size: 15px;
font-family: inherit;
padding: 2px 0 2px 0;
letter-spacing: normal;
}
 
body.home .content {
        background: none repeat scroll 0 0 transparent !important;
        margin: 0 auto;
        position: relative;
        width: 100%;
}
 
body.page-id-362 .content {
        background: none repeat scroll 0 0 transparent !important;
        margin: 0 auto;
        position: relative;
        width: 100%;
}
 
body.page-id-1446 .content {
        background: none repeat scroll 0 0 transparent !important;
        margin: 0 auto;
        position: relative;
        width: 100%;
}
 
body.page-id-680 .content {
        background: none repeat scroll 0 0 transparent !important;
        margin: 0 auto;
        position: relative;
        width: 100%;
}
 
body.page-id-112 .content {
        background: none repeat scroll 0 0 transparent !important;
        margin: 0 auto;
        position: relative;
        width: 100%;
}
 
body.page-id-572 .content {
        background: none repeat scroll 0 0 transparent !important;
        margin: 0 auto;
        position: relative;
        width: 100%;
}
 
body.category .content {
        background: none repeat scroll 0 0 transparent !important;
        margin: 0 auto;
        position: relative;
        width: 100%;
}
 
.category-23 #dynamic-content  { background: #bcbcbc;}
 
#featurenav a.activeSlide {
background: #f76600;
color: rgba(0, 0, 0, 0.7);
}
 
#featurenav a {
margin: 0 8px 4px 0;
padding: 1px 10px 0;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background: #BCBCBC;
display: inline-block;
font-size: 12px;
line-height: 20px;
text-align: center;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
color: rgba(0, 0, 0, 0.7);
}
 
#feature_slider .fcontainer .feature-wrap.bg_cover {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(0, 0, 0, 0.9);
border-radius: 3px;
}
 
.pl-imageframe img, img.pl-imageframe {
    padding: 4px;
    background: none repeat scroll 0% 0% rgb(182, 182, 182);
    border: 1px solid rgb(182, 182, 182);
    -moz-box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 3px 3px 3px 3px;
}
 
#eventlist .weekday {
font-size: 0.9em;
text-transform: uppercase;
color: black;
}
 
 
#eventlist .start-date, #eventlist .end-date {
text-align: center;
color: black;
}
 
#branding {
    .mainlogo-link, .mainlogo-img{margin:0 auto;float:none;}
}
 
/* Centered Navigation */
#page {
  #navbar,
  #nav{
    .navline,
    .main-nav{
      float:none;
      text-align: center;
      li {
    display:inline-block;
        float:none;
        text-align:center;
      a {
        float:none;
        text-align:center;
      }
      }
    }
    .dropdown-menu {
        text-align:left;
    }
  } 
}
/* Centered Navigation Media Query*/
@media(max-width:767px){
body.pagelines {
  #page {
     #navbar {
        .navline {
          float:none;
          text-align:left;
          li,a {
            display: block;
            float: none;
            text-align: left;
          }
        }
      }
    }
  }  
}
 
body.fixed_width #page {
padding-top: 0px;
}
 
#page #navbar .navline li a, #page #navbar .main-nav li a, #page #nav .navline li a, #page #nav .main-nav li a {
    float: none;
    text-align: center;
    font-size: 1.3em;
}
 
.main-nav li a,#navbar li a {font-weight:bold;}
 
.main_nav ul li a {
    line-height: 1em;
    padding: 8px 15px;
    text-decoration: none;
    display: block;
    border-width: 1px 1px medium;
    border-style: solid solid none;
    border-color: transparent transparent -moz-use-text-color;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}
 
#footer li.link-list a, #footer .widget-title {
color: white;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Stefano,

 

You have Firebug or Chrome tools.  Looking at the boxes in Firebug,  I see that the image is not aligned within the box area. What happens is that the image aligns left without coding, by default.  Since the box area is so wide, the space has to be filled and without no alignment for the images, the flush left.  This is the result, I'm sorry to say, of your coding and not something PageLines did.

 

The solution Batman offered was correct.

 

Here's what I found works too, and this was independent of Batman's correct response:

.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {
    margin-left: auto;
    margin-right: auto;
 }

Let me explain this.   The "auto" option allows the image to be automatically aligned.  With no other alignment, this will follow the rest of the site's alignment and essentially center... IF you make both left and right auto margins set to auto.   It's telling the image to align equally on both sides.

 

As soon as I applied that to one of your client sites, the three boxes lined up in the center of each box and the left and right space were even.

 

On a personal note, I know you get upset when things don't work, but as one Italian to another, don't go into panic mode every time. Nothing is so "URGENT" that you need to go into crisis mode and post bug reports, panic posts and be upset.  This is not worth having cardiac arrest from.  It's just page styling.  It will always be fixed but if it takes 24 hours to do it, then it takes 24 hours to do it. Solutions in a forum are not provided instantly.  You've just got to be patient.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

First of all please do not paste all custom CSS into your post, if its more than one small snippet then use our pastie service.

 

http://paste.pagelines.com/

 

Secondary, your site is all centered - http://i.imgur.com/LnvHQ.png

 

I added a red background to your content area and this shows your site in my opinion is centered correctly.

Share this post


Link to post
Share on other sites

Posted · Report post

This is the ABOUT page not the HOME Page... i'm talking about HOME Page and specially the BOX and the footer columns.

Share this post


Link to post
Share on other sites

Posted · Report post

The footer is the same regardless of the page, the homepage is also centered. I am not sure why you think otherwise. The columns are aligned to the left but each footer column when using is four of them are 25% in width, your footer columns are aligned to your site.

 

If you wish to have your text centered then use the following code.

 

 

 

#site .pprow {
text-align: center;
}

Also please stop reporting this as a bug to our helpdesk, it is not a bug.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Stefano

Please try with

  .top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {     margin-left: auto;     margin-right: auto;}

 

Uuupsss I don´t see the danny´s reply, try this first

:)

Share this post


Link to post
Share on other sites

Posted · Report post

Yes ... Danny sorry.. the footer is the same but you see the image? The box is not centered..

Share this post


Link to post
Share on other sites

Posted · Report post

Ok, here is the code you have used in your text widget to display you image.

 

 

<a href="http://www.stefanoferruggiara.com'>http://www.stefanoferruggiara.com"><img class="alignleft size-full wp-image-1627" title="" src="http://www.stefanoferruggiara.com'>http://www.stefanoferruggiara.com/wp-content/uploads/2012/11/SFLOGOFOOTER.jpg" alt="" width="115" height="100"></a>


As you can see you have the class alignleft, please remove this and add center instead. So it looks like this:

 

 

 

<a href="http://www.stefanoferruggiara.com'>http://www.stefanoferruggiara.com"><img class="center size-full wp-image-1627" title="" src="http://www.stefanoferruggiara.com'>http://www.stefanoferruggiara.com/wp-content/uploads/2012/11/SFLOGOFOOTER.jpg" alt="" width="115" height="100"></a>

 

Which will look like this:

 

http://d.pr/i/XG7q

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, and not the foto box in the footer but the box feature just down my image is not centered.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Stefano

Do you add this ? 

  .top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {     margin-left: auto;     margin-right: auto;}

To center the image...

Share this post


Link to post
Share on other sites

Posted · Report post

Stefano,

 

A note on Bug Reports.  Let me be perfectly clear that each time in past that you've reported bugs they turned out to be coding errors on your part and not a bug.  Such reports take critical time away from our staff to research the report, since we take bug reports quite seriously.  Falsely reporting bugs because you can't find your own coding errors is not proper and will be dealt with in the most severe terms.  You've been warned. Doing this again and your forum privileges will be removed for 30 days.

 

You really need to use validators for your custom code and not post volumes of CSS or HTML here.  We are not going to spend our time reading or fixing your customization errors.  That is not what the forum is for.  A CSS Validator may be found here. Use the Direct Input tab.   An HTML Validator is found here.

 

Please bookmark and use those links BEFORE using this forum to resolve your errors.

Share this post


Link to post
Share on other sites

Posted · Report post

OK MANY THANKS ROB AND PAGELIENS STAFF!!! ;)

Share this post


Link to post
Share on other sites

Posted · Report post

Do you need any further assistance?

Share this post


Link to post
Share on other sites

Posted · Report post

But when i found error in the code .. if is note Jigoshop or something else ... how i can fix if is not a part of the custom code that i have put.

If i made some error is cause, like you know very well, i'm not technical and then.. when i do by my self, i human and not technical and i made some error.. if i take of all my custom code.. how i can resolve my problem???

I need to reinstall all??? I will do if is necessary.. but if some technical help me i don't have to do.

Tell me...

I can use the like you give me but i don't know what i have to do with the response i receive from the validation.. then??? Explain to me what i have to do .. if i have a problem and i need some technical that can help me to resolve.

Share this post


Link to post
Share on other sites

Posted · Report post

I reinstall all.. wp and all.. after i dont put any custom code ... and i made the validation at the link you give me.. i want to see if return me any error.. if yes where i can share the result cause in this case can be only the Theme and Pagelines Plugin. And after where and how i have to ask about support... here? via mail? with the support form?

Let me know.

Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

OK ... just reinstalled all.. new DATA BASE now WP.. new all.. no plugin activated ... no css

At your link htlm valitation this thema have 963 ERROR and for W3C 3 Critical Error... now .. yesterday i receive a warning for what!!! Now it's me that i'm crazy??? i lost time and money.. who give me back? now i dont have my site on line cause i have to rebuild again.. who fix this 963 error that the cause is not me... view that i have just reinstalled all new?!!

Share this post


Link to post
Share on other sites

Posted · Report post

Stefano, I apologise but I don't understand your post above, are you saying that on a fresh install you encounter 963 HTML errors ? 

Share this post


Link to post
Share on other sites