A Few Stylize Question about Page Construction

if you have fixed width divs as a requirement, you need to make sure the min width of the viewport is the max width of the divs and center the divs when the viewport is wider.

  1. you have to have a style if you want a style. it’s a bit confusing what you’re trying for, so responses can only be less specific than you might wish.

I don’t understand what you mean !

SpikeZ - How do you stylize a Wrapper ?

Usually the #wrapper div contains the rest of the content


<div id="wrapper">

    <div id="masthead">Header Image</div>

    <div id="pagecontent">Page content</div>

    <div id="footer">Footer</div>
</div>

That way you can control the position on all the div’s inside the wrapper.

  1. how can the page hug the right side. all divs have width: 950px.

  2. ?

  3. your #footer is missing ; on background declaration:

#footer {
background: #AAAAAA
width: 950px;

also, AAAAAA can be shorted to AAA and 666666 to 666.

  1. to make the divs stretch the entire width of the viewport, just don’t put a width on them, or use width: 100%.

if you have fixed width divs as a requirement, you need to make sure the min width of the viewport is the max width of the divs and center the divs when the viewport is wider.

  1. you have to have a style if you want a style. it’s a bit confusing what you’re trying for, so responses can only be less specific than you might wish.

i don’t know if you noticed, your ul#nav is only wrapping around <li><a href=“#”>Portfolio</a></li>.

as of consequence, the rest of <ul>s and <li>s and <a>s aren’t css styled.

When you said:

I assumed you wanted it aligned to the right – are you saying you just want it fully fluid? To expand to fit regardless of page width on both sides?

If so that’s the default behavior of all the tags, just stop declaring widths.

– edit –

I just uploaded a copy that strips out all the width declarations to make the page fully fluid. Is that what you were asking for?

http://www.cutcodedown.com/for_others/siberianHuskey/template2.html
and the CSS
http://www.cutcodedown.com/for_others/siberianHuskey/screen2.css

If so, that’s the DEFAULT behavior of all the elements involved – which is probably why I didn’t think that’s what you were asking for.

Doh :smiley:

Did you View the Page Source of the Dropline link I gave in my last post? (#33)

Yes, it was using a script to do the drop down which I didn’t want. I was thinking last night, is it possible to create an effect for a drop down, but it would require a script:idea:. What I was thinking about was when you hover over for the drop down it would unfold down then the menu options would unfold left and right.

You have not answered my second ? from that post either. Do sublist items get fixed widths also?

At this point, yes :slight_smile:

Assuming you mean my demo – 1) what browser, 2) at 1024 there should be no ‘space’ on the left, though at 1280 there should… on the left

Since you asked to move the whole thing to the left in your original post. Check it at 1600 and that left side gap gets bigger.

Or is that not what you wanted?

Assuming you mean my demo – 1) what browser, 2) at 1024 there should be no ‘space’ on the left, though at 1280 there should… on the left

I’m viewing the page at a odd resolution (1152x864) and there is a hefty space on the left hand side of the browser, the right hand side flows regardless what size the browser window is but the left doesn’t.

Since you asked to move the whole thing to the left in your original post. Check it at 1600 and that left side gap gets bigger.

Or is that not what you wanted?

No that is not what I wanted, what I wanted is explained just above this sentence :slight_smile: If it’s possible.

While on the subject as I mentioned in post #44 regarding a folding technique. The folding technique I found is not of which I’m after.

When that page is 1024x768 there remains a space on the left hand side.

I didn’t find what I was looking for on scriptaculous. Does anyone understand what I’m seeking ? :slight_smile:

Did you View the Page Source of the Dropline link I gave in my last post? (#33)

You have not answered my second ? from that post either. Do sublist items get fixed widths also?

I figured you did, and I found your post quite weird what you were asking because I know you know :slight_smile:

Upon development, what exactly do you have in mind? Obviously if you’re going to do, for example, a fluid layout, then that stuff won’t change, heights shouldn’t be set…honestly the only changes I can think of that you might do is backgrounds and colors, which should be very easy to update.

I might just be having a blonde moment, could you elaborate? :slight_smile:

I want my footer to look identical to my header, that is the problem that I can’t fix :slight_smile:

Also my ul I’m unable to position as I want it to be at the base of the footer.

This is going to sound silly, but I know that a wrapper, wraps the entire page but how should I stylize it ? I really don’t know (head down in shame)

i only see a html markup, no css style drop down yet, isn’t it? :slight_smile:

hint: the css style is missing…

<ul id="nav">
            <li><a href="#">Portfolio</a></li>
	</ul><ul>
	<li>SelectionA</li>
	<li>SelectionB</li>
	<li>SelectionC</li>
	<li>SelectionD</li>
	</ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">BoA</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

This CSS style drop down is not working, and the other CSS drop downs use similar technique so what am I doing wrong ?

All the rest CSS drop downs use jQuery or some scripting I’m already going to have to use scripting for other parts of the page I prefer not to use it for the drop downs.

Sorry but that is exactly where I placed the UL.

I had also noted that it was just intended to serve as a starting point for you, not the final layout.

The header will be one graphic so will the footer. My question is should I have two slim DIV contained within one div for the graphic and the same goes for the footer for the graphics since they will be PNG ?
They just need to be background images if they are for presentation/decoration.

Can you please tell me what to stylize, don’t layout the entire page just tell me what rule to add to the style to fix it and in return I will explain if that is what I want or not :slight_smile: Don’t take that the wrong way :slight_smile:
I am unsure what your goal is so I can’t advise on fixing anything. You need to explain what the layout needs to do first. Specifically how you want it to behave at various viewport widths.

Rayzurs example appears to be exactly what you’re aiming at given the information you’ve supplied, but with a few extra elements added to flesh it out, namely sample headings, paragraphs and an image. Just remove the elements you don’t need.

If you’d upload your complete design mockup (which I’m guessing may resemble that which you PM’d me recently) rather than a skeleton, things may start to progress more swiftly.

Firstly, you could clarify whether you want a fluid or fixed width layout. Rayzur has understandably assumed fluid because your image seems to indicate a layout extending from one side of the viewport to the other. As you previously stated “…the graphics will be fixed width…” it seems likely you really want a fixed width layout.

For this, give #wrapper a width in px, and to centre it add margin: 0 auto;

#wrapper {
width:960px; /*set haslayout for IE*/
margin: 0 auto;
}


(Sorry about the image being dark, I didn’t change my color setup)

A question regarding the top and base graphic since the graphics will be PNG should it be two divs with a sliced horizontal graphic for the header & footer?

As well about the navigational area which I can’t get to position at the base of the header.

Forget all about the IE comment for now, it seems to be confusing you. Your right , the comment itself does nothing. It is the width property that sets haslayout.
At some point in time though you will need to learn about haslayout.

You are right, at some point soon I’m going cause I just don’t get it. :confused:

So now we have a fixed width wrapper with a fixed position footer.
I would use a min-height:100% layout to give it a full height appearance so it ties in nicely with the fixed footer.

http://www.css-lab.com/demos/stickfo...t-fixfoot.html

Working off of that demo code I have merged your nav styles in and came up with this. Just set the wrapper width to whatever you need and set the width on the .innerfoot div the same as the wrapper width.

http://www.css-lab.com/test/husky-fixfoot.html

This is a nice starting point (thank you) :slight_smile: I was going to ask you with the previous code why there was white space below the footer in IE, but this new code you posted solved it, what was that from anyhow?

I had to set the width of the header div to 1138 (quite huge) in Firefox there is no horizontal scroll bar, but there is in IE7. The graphics are all ready to go I’m getting the structure finished then comes the decor :slight_smile: (I also want to have the page setup for Accessibility)

I’ll probably shrink the header a little more. I have a understanding in terms of how it works with developing across the range of browsers, but I want to make my site compatible with Android and iPhones, which I don’t know very much about developing for mobile phones, I hope you can help ? There is more to the page to come, I’m multi-tasking doing this page and graphic design work, although it is off to a good start :slight_smile: