PDA

View Full Version : Footer at the bottom...


Enrico B
07-01-2010, 09:40 AM
What do i need to do to set my footer at the bottom?
I'm creating a fluid website and I want to set the footer at the bottom and want it to pull the content area with it so there's no space between the content area and the footer...

edbr
07-01-2010, 09:51 AM
#footer{ float:left; width :100%; clear:left;} that would be a start

Enrico B
07-01-2010, 09:56 AM
http://www.enricobandolin.com/Index.html
The footer is the gray 180x25px located below the image of the nebula, I want it to set at the bottom.
If you want me to upload the HTML and CSS rules of this page please tell me how.

EDIT: Thanks, I'll try that!

Enrico B
07-01-2010, 10:03 AM
Sorry edbr, didn't work...I also tried positioning it with bottom: 0px; but nothing...

gentleone
07-01-2010, 10:11 AM
http://www.cssstickyfooter.com/

Enrico B
07-01-2010, 10:56 AM
Thanks! I Think it worked, can anyone check?

Enrico B
07-01-2010, 11:02 AM
Where exactly do I add the IE7 code to my HTML?

Enrico B
07-01-2010, 11:12 AM
Is it inside the head, inside the body, or between both?

gentleone
07-01-2010, 03:01 PM
I don't see a footer in Fitefox on the Mac. Just read the instructions carefully... it's all explained what to put where.

Enrico B
07-02-2010, 01:25 AM
I'm confused by this, if I upload my whole site can anyone open it in dreamweaver and fix it? I suppose it would only take a few minutes for you guys...I've been trying for hours yesterday...

Enrico B
07-02-2010, 01:30 AM
My site is only one HTML page, one CSS rule, and one folder with images inside, so it's nothing complicated.

Enrico B
07-02-2010, 01:49 AM
Ok, I uploaded it here if anyone wants to take a look at it...
http://www.megaupload.com/?d=4HXI6431

The content is also at the wrong place, I want it to be to the right of the navigational bar.
Kinda like this site:
http://www.astro-physics.com/

Enrico B
07-02-2010, 07:19 AM
Ok never mind the above, I think I got it.
I tested it in 5 browsers, firefox, chrome, opera, safari, and internet explorer. The only one that is not working is on IE, and I'm pretty sure I put the IE code in the wrong place...
Can anyone take a look at my HTML please? just go to www.enricobandolin.com/Index.html and click properties on the page to see the HTML...

Enrico B
07-02-2010, 07:40 AM
The IE code I'm talking about should show in green if you open the HTML with internet explorer...

edbr
07-02-2010, 08:33 AM
move it up before the closing </head>

Enrico B
07-02-2010, 08:49 AM
Thanks!
I tried but nothing though...
I'm having the impression that no matter where I put it it's not going to have any effect because of the gray color I get in WC, which usually means that it's just a comment in the HTML or CSS...
I just copied and pasted it from this page http://www.cssstickyfooter.com/using-sticky-footer-code.html

Is there something wrong with the code they give you there?

Enrico B
07-02-2010, 09:17 AM
Damn it, another problem. When I expanded the content the footer didn't go with it, so the dark-gray part of the navbar didn't go dawn to the bottom as I want it to.

I know this is probably too much to ask, but If I upload my project can anyone open it in DW and fix it for me?

Enrico B
07-02-2010, 09:19 AM
Or if it's easier, just create the page from scratch for me? it took me only a few minutes to create it up to where it is now, but as I'm stuck with this footer/expansion problem It's been hours since I started with a blank page...

I would really appreciate it of someone could help me!

Enrico B
07-02-2010, 09:30 AM
I suppose it would take a very short time for someone who actually knows what they're doing in DW to create a page like this:
www.astro-physics.com

If anyone is up to it, all I want in my page is a color #111, 180px wide navigational bar on the left, and inside the 180px gray area, a 170px wide image with buttons on it, and to the right of it a content area.
The nav bar should stay the same width in all browsers, but expand/contract vertically as the content expands, just like the site above. The content area should expand/contract both ways like a liquid template to accommodate all screen resolutions.

Basically the looks of the page I have right now is what I want.

If possible I'd like only the content area to scroll down instead of the whole page, just like the website above. But I have no idea on how to do that so I just didn't.

If anyone can do this simple page for me I would really REALLY appreciate it!

Enrico B
07-02-2010, 02:25 PM
Never mind the above...I'll figure it out...
Can anyone just please download this, extract it, open it in DW and take a look at it?
all I want is for both the navigation bar and the content area to expand to the bottom of the page, and if there's content that exceeds the page's limit, so be it, but the navigational bar need to expand with the content area, so the final website looks like the astro-physics one...
http://www.megaupload.com/?d=LPT6O7DM

Enrico B
07-03-2010, 03:20 AM
Anyone? please?
It would only take a minute...

Enrico B
07-03-2010, 05:05 AM
Ok, can anyone just please tell me how I can post an HTML code then? last time I posted a code in a forum the thread was messed up...

Enrico B
07-03-2010, 06:24 AM
Forget it, If I'm going to be ignored like this I won't waste any more time...
All it takes is "no, I don't want to help you because I'm not being paid to do so". Much better than being ignored.
All I wanted is for someone to write a few words on how I can share my HTML code in these forums, because if I post the HTML code I'm afraid either it won't show or it will mess up the thread, but I guess even that is too much to ask.
Thanks for all the help so far but I honestly didn't accomplish what I wanted in the last two days by asking stuff here...

back to google...

Enrico B
07-03-2010, 09:33 AM
Sorry, I was just trying to get attention.

Is there any way of writing "height = same as content height" in CSS?
just please answer this one and I won't any more questions.

Corrosive
07-03-2010, 10:35 AM
Couple of things; if you want to post code then use the code tags and you should be fine. For code tags use the # symbol in the post text editor.

The second point is that if you leave out a height value in CSS (and if you have it coded correctly) then div heights will just grow with the content you add.

Sorry if you think you are being ignored. That's not our intention but I thought gentleone had this thread covered and he gave a good tutorial earlier for getting your footer right.

It does seem a little quiet around this forum at the moment...

Enrico B
07-03-2010, 11:05 AM
Thanks for answering! It feels good to know I'm not being ignored...

Okay, the problem I have isn't that the content area isn't expanding as I add the content, the problem is that the side bar to the left of it isn't expanding with it.
The code is making the side bar expand by the height of the browser, but if I add content to the content area and scrow down, the side bar doesn't expand, it just stays the height of whatever the browser is at the moment.

I managed to get the footer at the bottom with the link gentleone gave me, but this new problem emerged.

here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enrico bandolin's Astrophotography | Index</title>
<link href="CSS/weblayout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="main">
<div id="mainnavigation">
<div id="navigation"></div>
</div>
<div id="content">
<p>This website is under construction</p>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
And here's the CSS:
* {
margin: 0px;
}
html, body {
height: 100%;
}
#wrap {
float: left;
background-color: #FFF;
min-height: 100%;
height: 100%;
width: 100%;
}
#main {
overflow:auto;
height: 100%;
width: 100%;
}
#wrap #main #mainnavigation{
background-color: #111;
height: 100%;
width: 180px;
float: left;
}
#wrap #main #mainnavigation #navigation {
background-color: #111;
background-image: url(../Images/navigationbg.jpg);
margin-right: auto;
margin-left: auto;
height: 300px;
width: 170px;
}
#wrap #content {
background-color: #FFF;
height: auto;
width: auto;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 15px;
float: left;
}
#footer {
position: relative;
margin-top: -0px;
height: 0px;
clear:both;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}

Corrosive
07-03-2010, 11:09 AM
Ah right, I see. No, you won't get the sidebar to expand with the content in the div next to it because content of a div usually dictates height but you can create the same effect using a faux column height; http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

Good luck :)

Enrico B
07-03-2010, 11:18 AM
here's the page so you can look at what's happening:
http://www.enricobandolin.com/

as you can see the footer is pulling the gray side bar down to the size of the browser (not working with IE yet so please look at it with firefox), but when there's more content (I added content to the page, but not shown in the HTML code above to make it shorter) it just doesn't go all the way to the bottom...

Enrico B
07-03-2010, 11:20 AM
sorry I posted without seeing your post. That looks interesting I'll try it and hopefully it will fix it! Thanks!

Corrosive
07-03-2010, 11:22 AM
I've just read back through the whole thread and there are a number of things that folks aren't comfortable with here and may be the cause of your unanswered threads;

1. This isn't a help desk, don't treat it like one. Members will help because they want to and not because they have to.

2. Asking people to download files from unknown sources... I mean, would you do it???

3. Asking people to do your coding for you (it's not about money btw). Everyone who wants to build a website has to learn. We know it is hard sometimes and we know it can be frustrating!

Bear these points in mind and we can move on :)

Enrico B
07-03-2010, 11:22 AM
one question, do I really need a footer? all I want is for the side bar to expand and always fill the page from top to bottom...

yeah, sorry for that I apologize...
downloading files doesn't cause any harm unless you install it, and in my download there's nothing to install, just images and files...
I just asked if anyone was up to it, didn't demand anything, so I waited a day to see if anybody was up to it. No one responded so I asked for someone to just tell me how to post a code, then you responded and here we are...

Corrosive
07-03-2010, 11:26 AM
OK, having looked at your page I'd say make the wrapper the same colour as your sidebar and then give the content a background colour of #fff. That way the wrapper background colour will show through when the sidebar ends making it look like it is stretching all the way down. Make sense?

BTW, you have a number of colours as backgrounds fro #wrap in your CSS. You may want to simplify your approach.

Corrosive
07-03-2010, 11:27 AM
Let me see if I can knock up a quick example. Two ticks.

Enrico B
07-03-2010, 11:28 AM
wow I did not think of that! thanks I'll try it!
Thank you sir!

(edit: sorry I didn't get your post above, what do you mean two ticks?)

Corrosive
07-03-2010, 11:42 AM
edit: sorry I didn't get your post above, what do you mean two ticks?

Oh, that's just me being English lol! It means I won't be long :)

Corrosive
07-03-2010, 11:51 AM
OK, I know this isn't pretty but it should give you the right idea to get your sorted; http://corrosiveonline.co.uk/_projects/enricob.html

Enrico B
07-03-2010, 11:52 AM
Oh, ok. English is not my first language so it surely isn't your fault that I didn't get it... :D

Enrico B
07-03-2010, 11:56 AM
Thanks, that is pretty much what I'm looking for, just with a full fluid page instead of stopping it.
this is pretty much what I want:
http://www.astro-physics.com/
as you can see in the about us page, the content stretches all the way to the far right.

Ok, let's start from scratch here.

what is the best way to start a fluid page like the website above?
do I need a wrap div? do I need a footer? etc...

Corrosive
07-03-2010, 12:01 PM
I'm not a big fan of fluid sites but try this; http://corrosiveonline.co.uk/_projects/enricob.html

Corrosive
07-03-2010, 12:04 PM
Have just made a couple more changes having looked at the astro physics site and set the left sidebar to 'fixed' so the content scrolls but the sidebar doesn't.

Enrico B
07-03-2010, 12:07 PM
wow, you did this is a few minutes and i've been trying for days! lol
how can I copy the template and open it with dreamweaver?

Corrosive
07-03-2010, 12:09 PM
Trust me it gets easier the more you do and learn. That would have taken me days a few years ago!

Here is the code;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {margin: 0; padding: 0;}
#wrap {
background-color: #111;
width: 100%;
overflow: hidden;
height: 1%;
}
#sidebar {
background-color: #111;
width: 20%;
float: left;
color: #fff;
position: fixed;
}
#content {
background-color: #fff;
width: 70%;
float: right;
padding: 0 5%;
}
-->
</style>
</head>

<body>
<div id="wrap">
<div id="sidebar">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<!-- sidebar ends -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque orci elit, molestie quis sagittis at, pretium sit amet risus. Nam massa mauris, congue quis scelerisque et, viverra vehicula nisl. Aenean semper aliquet placerat. Aliquam at odio tellus, eget tincidunt nibh. Fusce erat orci, posuere at sollicitudin a, luctus a est. Vivamus diam metus, tincidunt molestie euismod sit amet, condimentum eu neque. Integer venenatis gravida malesuada. Nulla sit amet neque at arcu laoreet consectetur ut sed leo. Quisque vitae blandit sapien. Morbi sit amet mollis mauris.</p>
<p>Integer neque est, ultrices ut elementum pharetra, gravida eu dolor. Cras sit amet purus sapien, eu laoreet eros. Nulla facilisi. Vestibulum mattis ligula vitae neque lacinia dapibus. Praesent sodales elit eu lacus fermentum sit amet placerat ante feugiat. Ut non adipiscing diam. Ut ut bibendum urna. Donec sit amet urna vitae est porttitor facilisis. Phasellus eget tellus sapien, at blandit libero. Morbi pharetra elit faucibus eros luctus accumsan. Nunc nec ante et turpis lacinia pharetra. Mauris luctus pellentesque mauris, ut ornare velit mollis id. Sed lacinia egestas nisl, sit amet scelerisque erat imperdiet eget. Donec malesuada enim in purus venenatis dictum. Phasellus accumsan rhoncus volutpat. Aenean non fringilla nisi. Ut ullamcorper, lorem in scelerisque fermentum, quam nunc consectetur lectus, at blandit libero leo at nunc. Curabitur placerat feugiat elit, in vehicula odio tincidunt et.</p>
<p>Mauris eget mi est, non consequat tellus. Aenean egestas metus quis velit condimentum ac ultricies ante laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus odio, fermentum vitae venenatis eu, iaculis vitae dolor. Praesent scelerisque velit vitae quam cursus vel ultrices magna convallis. Proin quis tortor id nibh mattis feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lacus eu est tristique fringilla. Donec nulla libero, facilisis quis adipiscing quis, auctor eget metus. Nam a purus quam, non volutpat massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque orci elit, molestie quis sagittis at, pretium sit amet risus. Nam massa mauris, congue quis scelerisque et, viverra vehicula nisl. Aenean semper aliquet placerat. Aliquam at odio tellus, eget tincidunt nibh. Fusce erat orci, posuere at sollicitudin a, luctus a est. Vivamus diam metus, tincidunt molestie euismod sit amet, condimentum eu neque. Integer venenatis gravida malesuada. Nulla sit amet neque at arcu laoreet consectetur ut sed leo. Quisque vitae blandit sapien. Morbi sit amet mollis mauris.</p>
<p>Integer neque est, ultrices ut elementum pharetra, gravida eu dolor. Cras sit amet purus sapien, eu laoreet eros. Nulla facilisi. Vestibulum mattis ligula vitae neque lacinia dapibus. Praesent sodales elit eu lacus fermentum sit amet placerat ante feugiat. Ut non adipiscing diam. Ut ut bibendum urna. Donec sit amet urna vitae est porttitor facilisis. Phasellus eget tellus sapien, at blandit libero. Morbi pharetra elit faucibus eros luctus accumsan. Nunc nec ante et turpis lacinia pharetra. Mauris luctus pellentesque mauris, ut ornare velit mollis id. Sed lacinia egestas nisl, sit amet scelerisque erat imperdiet eget. Donec malesuada enim in purus venenatis dictum. Phasellus accumsan rhoncus volutpat. Aenean non fringilla nisi. Ut ullamcorper, lorem in scelerisque fermentum, quam nunc consectetur lectus, at blandit libero leo at nunc. Curabitur placerat feugiat elit, in vehicula odio tincidunt et.</p>
<p>Mauris eget mi est, non consequat tellus. Aenean egestas metus quis velit condimentum ac ultricies ante laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus odio, fermentum vitae venenatis eu, iaculis vitae dolor. Praesent scelerisque velit vitae quam cursus vel ultrices magna convallis. Proin quis tortor id nibh mattis feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lacus eu est tristique fringilla. Donec nulla libero, facilisis quis adipiscing quis, auctor eget metus. Nam a purus quam, non volutpat massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque orci elit, molestie quis sagittis at, pretium sit amet risus. Nam massa mauris, congue quis scelerisque et, viverra vehicula nisl. Aenean semper aliquet placerat. Aliquam at odio tellus, eget tincidunt nibh. Fusce erat orci, posuere at sollicitudin a, luctus a est. Vivamus diam metus, tincidunt molestie euismod sit amet, condimentum eu neque. Integer venenatis gravida malesuada. Nulla sit amet neque at arcu laoreet consectetur ut sed leo. Quisque vitae blandit sapien. Morbi sit amet mollis mauris.</p>
<p>Integer neque est, ultrices ut elementum pharetra, gravida eu dolor. Cras sit amet purus sapien, eu laoreet eros. Nulla facilisi. Vestibulum mattis ligula vitae neque lacinia dapibus. Praesent sodales elit eu lacus fermentum sit amet placerat ante feugiat. Ut non adipiscing diam. Ut ut bibendum urna. Donec sit amet urna vitae est porttitor facilisis. Phasellus eget tellus sapien, at blandit libero. Morbi pharetra elit faucibus eros luctus accumsan. Nunc nec ante et turpis lacinia pharetra. Mauris luctus pellentesque mauris, ut ornare velit mollis id. Sed lacinia egestas nisl, sit amet scelerisque erat imperdiet eget. Donec malesuada enim in purus venenatis dictum. Phasellus accumsan rhoncus volutpat. Aenean non fringilla nisi. Ut ullamcorper, lorem in scelerisque fermentum, quam nunc consectetur lectus, at blandit libero leo at nunc. Curabitur placerat feugiat elit, in vehicula odio tincidunt et.</p>
<p>Mauris eget mi est, non consequat tellus. Aenean egestas metus quis velit condimentum ac ultricies ante laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus odio, fermentum vitae venenatis eu, iaculis vitae dolor. Praesent scelerisque velit vitae quam cursus vel ultrices magna convallis. Proin quis tortor id nibh mattis feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lacus eu est tristique fringilla. Donec nulla libero, facilisis quis adipiscing quis, auctor eget metus. Nam a purus quam, non volutpat massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque orci elit, molestie quis sagittis at, pretium sit amet risus. Nam massa mauris, congue quis scelerisque et, viverra vehicula nisl. Aenean semper aliquet placerat. Aliquam at odio tellus, eget tincidunt nibh. Fusce erat orci, posuere at sollicitudin a, luctus a est. Vivamus diam metus, tincidunt molestie euismod sit amet, condimentum eu neque. Integer venenatis gravida malesuada. Nulla sit amet neque at arcu laoreet consectetur ut sed leo. Quisque vitae blandit sapien. Morbi sit amet mollis mauris.</p>
<p>Integer neque est, ultrices ut elementum pharetra, gravida eu dolor. Cras sit amet purus sapien, eu laoreet eros. Nulla facilisi. Vestibulum mattis ligula vitae neque lacinia dapibus. Praesent sodales elit eu lacus fermentum sit amet placerat ante feugiat. Ut non adipiscing diam. Ut ut bibendum urna. Donec sit amet urna vitae est porttitor facilisis. Phasellus eget tellus sapien, at blandit libero. Morbi pharetra elit faucibus eros luctus accumsan. Nunc nec ante et turpis lacinia pharetra. Mauris luctus pellentesque mauris, ut ornare velit mollis id. Sed lacinia egestas nisl, sit amet scelerisque erat imperdiet eget. Donec malesuada enim in purus venenatis dictum. Phasellus accumsan rhoncus volutpat. Aenean non fringilla nisi. Ut ullamcorper, lorem in scelerisque fermentum, quam nunc consectetur lectus, at blandit libero leo at nunc. Curabitur placerat feugiat elit, in vehicula odio tincidunt et.</p>
<p>Mauris eget mi est, non consequat tellus. Aenean egestas metus quis velit condimentum ac ultricies ante laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus odio, fermentum vitae venenatis eu, iaculis vitae dolor. Praesent scelerisque velit vitae quam cursus vel ultrices magna convallis. Proin quis tortor id nibh mattis feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lacus eu est tristique fringilla. Donec nulla libero, facilisis quis adipiscing quis, auctor eget metus. Nam a purus quam, non volutpat massa.</p>
</div>
<!-- content ends -->
</div>
<!-- wrap ends here -->
</body>
</html>


You'll need to move the styles to a separate stylesheet as I have put them in the head tags for demo purposes.

Hope that gets you started on your way :)

Enrico B
07-03-2010, 12:12 PM
Thanks!
One little problem though, the side bar expands and contracts too, can I set it to always stay 180px wide?

By the way, you have no idea how just reading your code right now helped me!
I honestly can't thank you enough!

Corrosive
07-03-2010, 12:18 PM
I'll leave you to experiment with that one for a bit I think. See what changing the size from fluid to fixed does to the overall layout. If you are still stuck later then post back ;)

Enrico B
07-03-2010, 12:21 PM
Ok! thank you so much!

Corrosive
07-03-2010, 12:27 PM
You are welcome. Have a good day and don't forget to get away from the computer for a bit and get some fresh air! Things always seem clearer to me after taking a break for a bit :)

Enrico B
07-03-2010, 01:24 PM
http://www.enricobandolin.com/
I think I managed to finally get the result I wanted there...does it have the same effect as the other website?

Enrico B
07-03-2010, 01:34 PM
A few questions:
1. Does the dreamweaver non-live view have to show the same appearence as the live view? my non-live view is a bit messed up...if you want I ca take a screenshot for you to see.

2. As you can see in the astro-physics website, when you make the browser's window smaller than the menu in their website, a scroll bar appears beside it. Is it possible to integrate that to mine?

3. Is it possible to set a minimum width? I want the website to expand all the way to the edge of the browser, but I don't want it to contract too much because I will insert images as well.

(Edit: I tested it on 5 browsers and all seems to be working. FireFox, IE, Chrome, Opera, Safari)

(Edit #2: I just tested it on Safari and another browser for the Iphone, and the "fixed" sidebar loses it's "fixed" property on both and scrolls down like the rest. Not a problem, so does astro-physics' website. One thing though is that the "100%" sidebar length takes from top to bottom of the page, but when you scroll down it ends there and the white behind it appears.

I fixed this by changing the height from "100%" to "10000px", this way anything that isn't higher than 10000px won't cause a problem. I can set it to more but I was wondering if there's a way of setting it to infinite?)

I still can't thank you enough!

Corrosive
07-04-2010, 10:17 AM
A few questions:
1. Does the dreamweaver non-live view have to show the same appearence as the live view? my non-live view is a bit messed up...if you want I ca take a screenshot for you to see.

Live and non-live views are just approximations of how a page will look. It is browsers you are building for so that is where you should check your layout. I don't think it matters what live/design view does.

2. As you can see in the astro-physics website, when you make the browser's window smaller than the menu in their website, a scroll bar appears beside it. Is it possible to integrate that to mine?

Not sure. You could try using the overflow CSS properties maybe but the reason the astro site behaves differently to yours is that one is built using frames. Technically the menu and the page are two different pages whereas your is one page.

3. Is it possible to set a minimum width? I want the website to expand all the way to the edge of the browser, but I don't want it to contract too much because I will insert images as well.

Yep, try this; http://www.w3schools.com/CSS/pr_dim_min-width.asp beware of lack of support for min styles in older IE versions.

(Edit: I tested it on 5 browsers and all seems to be working. FireFox, IE, Chrome, Opera, Safari)

(Edit #2: I just tested it on Safari and another browser for the Iphone, and the "fixed" sidebar loses it's "fixed" property on both and scrolls down like the rest. Not a problem, so does astro-physics' website. One thing though is that the "100%" sidebar length takes from top to bottom of the page, but when you scroll down it ends there and the white behind it appears.

I fixed this by changing the height from "100%" to "10000px", this way anything that isn't higher than 10000px won't cause a problem. I can set it to more but I was wondering if there's a way of setting it to infinite?)

I still can't thank you enough!

100% should be doing this right. Setting it to 10,000px seems a bit mad.

Enrico B
07-06-2010, 10:18 AM
Thank you!
one more thing, is there any tutorial around on how to create your own hits counter?

Corrosive
07-06-2010, 10:27 AM
Don't know to be honest. There are still loads you can download online though.

Enrico B
07-07-2010, 06:55 AM
Ok thanks, I found one online like you said.
Another thing about the sidebar, I applied overflow=scroll to it and a scroll bar appears beside it like the astro physics website, but it stays there even when not needed. Also a horizontal scroll bar appears which I don't want. Any ideas on how I can set it to only appear when needed?

Corrosive
07-07-2010, 06:57 AM
I think that overflow auto should do that. It should only appear when the content is too big for the div then; http://www.w3schools.com/Css/pr_pos_overflow.asp Remember that W3 Schools is a fantastic resource for quick and clear descriptions of properties in CSS and HTML tags.

edbr
07-07-2010, 07:46 AM
you can also set overflow using -x or -y to be speific which you want

Enrico B
07-07-2010, 08:24 AM
Thank you both!

Enrico B
07-07-2010, 09:09 AM
Ok, one more problem.
I want my content area to take all the space from the end of the sidebar to the end of the page, and expand but stay that way, so I set it to 100%.

One problem with that, what is happening is that the code uses this 100% rule to pick the size of the browser (for example if the browser is 1400px wide, the content will be that wide), so adding that to the 180px sidebar it becomes a 1580px wide page in a 1400px wide browser, and part of the content (180px of it) goes beyond the end of the browser and can't be seen.

My question is, how can I set my content area to be as wide as the browser minus 180px?
I tried 100% width and 180px left margin, but that causes the problem above, so I also set a 180px right margin to try to get the 180px wide part of the content back in the page, but nothing...

edbr
07-07-2010, 09:17 AM
use a wrapper div set at 100%

Enrico B
07-07-2010, 09:18 AM
Thanks, I tried that too (setting a 100% width to my wrapper) but the content still went overboard...

Ok, I actually fixed this by adding a 180px right margin on both the "contenttitle" and "content" divs inside the "maincontent" div (which is the one set with a 100% width)
might not be the best way to do it but is works on all main browsers.

Corrosive
07-07-2010, 09:56 AM
Ok, I actually fixed this by adding a 180px right margin on both the "contenttitle" and "content" divs inside the "maincontent" div (which is the one set with a 100% width)
might not be the best way to do it but is works on all main browsers.

Sounds like a good fix. Nice one :)

Enrico B
07-07-2010, 10:06 AM
Thanks!

Anybody here has both firefox and IE installed?
If yes can you chek out my website to see if the moon thing below the navigation is working in IE?
in my computer everything is working on all main browsers (IE, firefox, opera, Chrome, safari) but on IE the moon phase thing doesn't show.
I suspect it might be a javascript plugin that I don't have installed on IE, dunno...

www.enricobandolin.com (http://www.enricobandolin.com)

never mind, I think I mistakenly opened a version of IE with no add-ons called Internet Explorer (No Add-Ons)...didn't know that even existed...

Corrosive
07-07-2010, 10:10 AM
It is working for me on IE6 and IE8.

Enrico B
07-07-2010, 10:14 AM
Thanks for the confirmation!