How to approach a layout issue
Regular
Location: England
Posted: Tue, 2008-05-20 14:29
Hello,
I have just started drawing up some skeleten pages for a project i've recently started.
The following image is what i have so far:
It will all be displayed within a container that will centre in the users browser window.
The issue is with the boxes (on the diagram) labelled DIV 3 and DIV 7.
I want DIV 3 to display over the top of DIV 7 (which will just contain a background image). i.e. DIV 7 is underneath DIV 3 but still stretches the height of the users browser window.
Will i need to use absolute positioning and z-index for this?
If so, how can i approach this when all other page elements (DIV's 1, 2, 4, 5 & 6) are using either relative or float positioning? How will it affect the rest of the page if i have absolute mixed in with relative and floating page elements.
All help will greatly be appreciated.
Thanks
EGR103
P.S. I don't realy want to use absolute positioning because i'm fully aware of the issues that are involved with it.
Guru
Posts: 2277
Joined: 2005-12-14
Location: Victoria British Columbia
In my opinion your whole
Posted: Tue, 2008-05-20 14:52
In my opinion your whole approach is backwards and will only lead you to much unnecessary toil and trouble. The web is not paper, and it is about content primarily, not being pretty. If you try to shoehorn content into a preconcieved idea of how it should look you are doomed to eternal disappointment. The web, and browsers, just don't work that way.
Instead, start with the content - you know, that actual information people come to your page to get? Without good useful content style is utterly beside the point - the web is not an art gallery it is a tool for sharing information.
Start with content, and mark it up semantically according to the actual meaning of the content. Then when you have that done and your markup is valid, consider how that content can best be presented to the visitor to make it easiest to understand and use. That may require adding a few DIVs or SPANs to allow sufficient hooks for CSS rules to tie in to.
I recommend you read the "Truth and Consequences" site it it's entirety, several times. After that go through the "Web Matters" site as well. Together they should give you the grounding you need to design good web pages that inform, are easy to use, and also look good on all browsers at all screen resolutions.
But if you continue on the path you seem to have chosen I predict eternal disappointment and frustration, and a good deal of entirely unnecessary work and trouble.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Enthusiast
Posts: 90
Joined: 2005-09-23
Location: Liverpool
Really struggling to imagine
Posted: Tue, 2008-05-20 15:04
Really struggling to imagine what possible reason you would want one div to overlap the content of another, thus making Div7 content unreadable.
If you want it to extend out with perhaps a hover then look at some JQuery perhaps.
I think you'll have a few headaches with that. Although things like Div 1 is a logo I assume, so it needn't be it's own div. div2 is a header so that can be within another div.
Without knowing the content, I don't know what else to say about that layout.
Regular
Posts: 37
Joined: 2006-11-14
Location: England
You must be kidding?
Posted: Wed, 2008-05-21 08:45
There is no need to be patronizing, i've been doing web design and development for 5 years. I know how to approach a project. I don't have to justify my layout and ideas to you.
Wow, i'm astonished that you can judge me like this. You have not seen any of my previous projects, nor do you know me or how i work. Come on! I wanted a little advice about how to approach a project like this, not a lecture on how i should conduct my work and/or what i need to consider when building web sites!
You have not participated to this topic at all. I'm open to constructive criticism, e.g. if this layout can cause issues for me and why etc. but i didn't expect this rather undermining lecture on how to do my job.
---------------------
Tom L - Thanks for providing with some more, rather helpful info. There will not be any content on DIV 7, just an image. I have not described where content will be displayed as it has no relevance to my question but don't panic...it's all under control!
I don't wish it to extend anything. My intention will be to display a large flash movie here. This is required by my client but judging by your reply maybe i will need to go a different route.
Can i ask why you think it may cause issues? After all this layout is only to be used on 1 page.
Regards
EGR103
Guru
Posts: 2277
Joined: 2005-12-14
Location: Victoria British Columbia
egr103 wrote:There is no
Posted: Wed, 2008-05-21 14:05
Well, I don't have to justify the kind of advice I give to you, either. You are perfectly free to ignore it.
Judgement? What judgement? I merely made what seems a reasonable conclusion from the evidence at hand. Still does, actually.
And the same is true of me from your viewpoint, but you seem to feel free to ignore mine. Which, I hasten to add is perfectly fine by me.
"You can't always get what you want.."
It appears that you are rather defensive about your chosen methods and don't like it when people disagree with them. That's your right, of course.
But wouldn't it take less of your time and hurt your blood pressure less simply to write me off as an idiot and ignore me?
But around here, you should know, you get the whole package. People are free to comment and have their own opinions, and that's what they do. That's fine by me. People are also generally tollerant of differing opinions, as well. You might consider that possibility if you want to.
I find your whole approach to the design of that page mistaken and unproductive, and apt to lead you into a whole lot of unnecessary toil and trouble. You think I'm wrong. Fine.
"But if you try sometime, you get what you need."
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Regular
Posts: 37
Joined: 2006-11-14
Location: England
Quote:Well, I don't have to
Posted: Wed, 2008-05-21 14:51
My point in my previous post was that, you didn't advise. You merely presumed i knew nothing about what i was doing and had a go at me. All because you didn't 'approve'.
The above statement had nothing to do with my original post. Hence my annoyance at how you came across in your reply. You judged that i knew nothing about web design.
Of course i am defensive of my work...its because i care about it. People who don't care shouldn't be in the job in the 1st place. But i do like to get advice from people about my methods. In this case, a) if it was or was not feasable, b) why? and, c) if there were any alternative ways of approaching it.
Can i finally get some advice from this matter and ask for your technical reasoning for why it will lead me into 'toil and trouble' and how better to approach my layout issue?
Moderator
Posts: 5645
Joined: 2004-06-25
Location: Dallas
Please be aware that since
Posted: Wed, 2008-05-21 18:16
Please be aware that since you made no indication of what kind of content went where, it is easy to assume you're working backwards, that is coming up with the design that you will fit the content into. As a group, we consider this amateurish. That is not to say you are an amateur, but that is the impression your request has made.
I made some assumptions as to content. Your desired layout becomes five blocks, one after the other; a top banner, a nav bar, two content blocks and a footer. Once you start by marking up representative content, the css becomes obvious.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<title></title>
<meta name="generator"
content=
"HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta name="editor"
content="Emacs 21" />
<meta name="author"
content="Gary Turner" />
<style type="text/css">
/*<![CDATA[*/
body {
background: silver url(bg.gif) 75% top repeat-y;
}
div {
background-color: white;
border: 1px dotted red;
margin: 1em 0;
width: 75%;
}
#skiplink {
float: right;
}
#banner h1 img {
border: 1px solid black;
display: block;
}
ul#globalnav {
background-color: white;
border: 1px dotted red;
list-style: none;
margin: 1em 0;
overflow: hidden;
padding: 0;
width: 75%;
}
#globalnav li {
float: left;
width: 24%;
text-align: center;
}
#content1 {
width: 90%;
}
/*]]>*/
</style>
</head>
<body>
<div id="banner">
<p id="skiplink"><a href="#content1">skip to content</a></p>
<h1><img src="logo.png"
alt="ABC Co."
height="100"
width="100" /></h1>
</div>
<ul id="globalnav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">something else</a></li>
</ul>
<div id="content1">
<h2>main content</h2>
<p>blah, blah blah</p>
</div>
<div id="content2">
<h2>secondary content</h2>
<p>blah, blah blah</p>
</div>
<div id="footer">
<p>©2008</p>
</div>
</body>
</html>
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Regular
Posts: 37
Joined: 2006-11-14
Location: England
gary.turner wrote:Please be
Posted: Thu, 2008-05-22 09:40
Okay i see where you are coming from. Thanks. Does this mean that in future posts i will need to state what content is to be displayed where? Thus avoiding all the mess above?
This is just for future reference, so i know how to approach a topic when posting on the forum. Why do you need to make assumptions with regards to content? Why does this effect how or what someone inputs into the post?
Excellent, this isn't what i expected. I really appreciate this. Thanks Gary.
I will have a play around with the code and see how i get on.
Thanks again 2 all
Moderator
Posts: 5645
Joined: 2004-06-25
Location: Dallas
egr103 wrote:gary.turner
Posted: Thu, 2008-05-22 17:53
Go back, and reread the stickies at the top of each forum. We pretty much require that the poster's best attempt at both the html and css be posted with the query. That isn't just some elitist whim; the DTD and validity of the html have strong bearing on the final presentation, and the css will show us your approach to the problem. Even if you have no idea how to begin, it will at least show us that you're making an effort—weeding out the sponges.
The content you mark up need not be the actual content, but should be representational of the real stuff. Why content? Because you can't mark up nothing. The W3 sz that empty <p>s should be ignored, and strongly suggests that all empty block elements be ignored. No content, no markup. No markup, no DOM (document object model), and the DOM is what the css works against.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.