Jump to content


Photo
- - - - -

How can I get an element to stretch across the width of the browser?


This topic has been archived. This means that you cannot reply to this topic.
5 replies to this topic

#1 dawsonbarber

dawsonbarber

    Super Member

  • Members

  • 168 posts

Posted 25 August 2012 - 04:49 PM

I've checked videos, documentation, as well as the forum, but haven't found the answer I'm looking for, so I'm posting my question here (disregard the site URL as the site I'm referencing is a local installation at the moment). I want to be able to create elements that span the entire width of the browser. Specifically, I want to have page headings/h1 sit above and across the content and sidebar so that they are centered on the page and so that I can add a background color to them that stretches across the full width of the browser. It seems that, as thing stands, banners, features, and boxes are contained within a div that restricts their width to the width of the content/sidebar container. I know that I can probably work this out with some CSS on the containing element/s, but then I have to deal with the fact that that would probably result in a bit of a mess with other elements that I would then probably also have to deal with via CSS. I have played around with the grid - rows and spans - but didn't get anywhere. Please let me know what I can do. Thanks Dawson

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 25 August 2012 - 05:15 PM

Dawson, I'm not sure of the purpose of your request, but full-width is potentially problematic with some browsers and particularly with mobile views, such as iPad, iPhone, Android and other devices. There is, I believe a 1230px limit (could be wrong about the number) that is set in Dashboard > PageLines > Site Options > Layout Editor. However, you can select "Full Width Sections' under "Site Design Mode " Elements you want going to the maximum width can be set using Dashboard > PageLines > Drag & Drop by adding them in Page Templates (full width). The Content Area is where the sidebars will also appear if selected. I use a full width image background that goes from edge to edge in any browser. With Full Width Sections selected, I simply add my background image and it goes full width. Setting background colors via Color Control also goes edge to edge with that mode, no matter how wide the canvas area is set in Layout Editor. Using Firebug (

Please Login or Register to see this Hidden Content

) you can find the full-width element and apply color changes there. An example of this would be our default Twitter bar.

#3 dawsonbarber

dawsonbarber

    Super Member

  • Members

  • 168 posts

Posted 25 August 2012 - 07:31 PM

Hi there Thanks very much for your quick response. I did know about the layout editor option, but failed to do anything with it because I could not get it to work for me. The "draggable" parts of the editor did not respond to my cursor...until it occurred to me, after seeing your reply, that perhaps I needed to save my layout handling selection before trying to adjust the layout widths. That did the trick, so now all that's left for me to do is a little custom CSS to get the header/nav, content/sidebar, and footer the way I want them. As for the purpose of my request, I just want to have a heading centered across the content and sidebar with a background color that spans across the width of the browser (basically like the header/nav bar here, but between the header/navbar and the content/sidebar). Cheers Dawson

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 26 August 2012 - 12:59 AM

Dawson, I think the best solution here isn't a color control, but a graphic one. Create a 1px wide image in your graphics editor (Photoshop, Paint Shop Pro, etc.) and make it the exact height you want it to be. In Dashboard > PageLines > Site Options > Color Control, upload the new image. Set the vertical distance to 0 and the horizontal to 50 and make sure it's set to tile horizontally. Don't supersize the background. Personally, I use one wide image which you can see at

Please Login or Register to see this Hidden Content

I suspect that with a single, small, tiled image the color you want, you'll have exactly the effect you desire.

#5 dawsonbarber

dawsonbarber

    Super Member

  • Members

  • 168 posts

Posted 28 August 2012 - 10:40 PM

Yes, I guess I'm going to have to go the graphic route. I had wanted to achieve the effect through CSS, but I'll do as you recommend. Thanks very much for you help. Cheers

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 29 August 2012 - 01:55 AM

Dawson, Just use a graphic for the background, rather than a color. It's possible to do a color, but it works very well with an image too.