Fetching latest tweet ...
closed resolvedI have made a visual mock up of how I want my landing page to look like. (I have a pretty traditional wp look at the moment).
I want the menu, the title in the header , the body and the footer content to act as a 1080 width page but have the header photo and the foorter to be 1980 wide. Can i do this in graphene? how can I arrange for this setup at all?
sorry for the ftp password popping up... put the png in the ftp folder tree obviously...
JW
Fixed your first post.
thanks. for fixing. I hope it makes clear what i am trying to establish here?
JW
Don't assume that everyone viewing your web page will have the same width monitor you do. 1980px is fairly wide. Anyone with a smaller monitor will have to do some horizontal scrolling to navigate your site. This is annoying and is a disincentive to stick around and keep reading.
I do understand your worries on this, I have to elaborate a little on what i am after: just because people have different screen sizes my main body, footer tekst/images and menu line will not be wider then 1080. But at the same time many people do have wider screens. It is about aesthetics so how to make an argument? To me the boundary of the body vs the background in graphene is not that nice.... it makes the website look caged in... not making use of the real estate many do have...also many themes/websites are totally adaptive to different screen sizes and that makes your argument a mute one. I do want to aim at a reasonable size for the body parts of the page. As to make it a nice experience for many also with bigger screens. Resizing the browser should be no problem at all with having the left and right side being relative and the middle absolute in width. the body will be in the centre anyway so resizing horizontally is not obliged at all. As a side point: I am sitting on a ton of nice photo's that I can use 1:1 with the communication accents I want to make with my site. They allow for a wide view if available... so why not?
- So how can I put the menu in the top bar? positioned to the body with of 1080 while
- having a header image of 1980, having a slogan that stays in the middle of the body text regardless of resizing
- same for pay off beneath the photo
- the body will have same color as background without any border between them (body with 1080)
- the footer will stretch the full width of the browser but logo and contact information will align to the body width.
You can not see the effect here I am looking after.
jw
.also many themes/websites are totally adaptive to different screen sizes and that makes your argument a mute one.
Those are fluid-width themes (including the link you provided). Graphene does not support fluid widths. If you make your header and footer an absolute width, horizontal scrolling will be required by those with narrower monitors; therefore my argument is not moot.
I would suggest finding a way to make the header and footers fluid width, rather than an absolute width, which will obviate the need for horizontal scrolling. Somebody managed this a year ago (approximately) on this forum. Unfortunately, I don't have that page bookmarked, but you can search for it. You might even take a look at the css of the web page you linked to, using Firebug, to gain insight into how they did it.
This is going to be to complicated for me at this time to solve. I will adjust my site within graphene theme with the fixed with.
I'll submit new post to address my direct questions on this.
We are talking about responsive theme, right. Graphene currently don't have that functions. It although has Mobile theme version but that is for small resolution monitors (smartphones and tablets).
But some small adjustments can be done via Child theme. For instance, try to add this in child theme css and follow where it's going to take you :):
#container {
width:100%;
}
#content {
width:1080px;
margin:0 auto;
}
etc.This will maybe do what you wanted but you'll need to make some compromises.
For further info try Google things like responsive design, fluid-width and some tools like modernizer.
Btw. I know that there is a difference between fluid-width themes and responsive themes. I assume that you only need fluid-width for larger monitor sizes.
I will have a look at how this code will help what i am trying to achieve. thanks for suggestions.
jw
This topic has been closed to new replies.