Jump to content

Keeping Page Centered


stormcrow60

Recommended Posts

Hello All,

I could not find another topic concerning exactly this issue, so I apologize if this is a repeat question. I have been building my website at half screen, so I can view other windows while I work. I have used my CSS page to control my html pages and everything is centered perfectly when my webpage is at half screen. However, when I open the browser full screen, everything once again shifts to the left. I have just completed the first course in begininers web design, and I am assuming this will be taught in the more advanced courses. However, I would like to get my pages set up accordingly before I move on to the next design course. Any tips or help is appreciated.

 

Thanks!

Jon

Link to comment
Share on other sites

Hi Ben,

I appreciate your quick response. I think this is exactly what I need. However, after applying the code, it still does not center my website. I have double checked my syntax and linking and it appears correct. I will keep looking for somthing I have done wrong. Meanwhile, I do have two follow up questions regarding the link you had sent. What is the purpose of the id="content" ? I do not see anything related to centering issues other than that it is mentioned in the first window. Second, apparently you can nest tags just like any other coding language? Again, thanks for your help.

 

Jon

 

 

 

Link to comment
Share on other sites

What is the purpose of the id="content" ?

That's just a div that holds content. It doesn't have anything to do with centering. The centering is done by setting a width and "margin:0 auto;" on #wrapper.

 

Second, apparently you can nest tags just like any other coding language?

Yes.

 

Why don't you post the html/css code you are using, so we can glance at that? Oftentimes, if you use position:absolute; on your elements (which is likely if you are using Dreamweaver's design view to position elements, rather than coding it yourself) that will break the centering... but I can't really tell what is going on without seeing the code.

Link to comment
Share on other sites

Thanks Ben! It was the position: absolute that was doing it. I removed it from all of my id tags and now my pages center perfectly. I only had position: absolute in my code because it was in the course video. I was not sure what it all meant, but I figured it was needed for something. LOL. I'm slowly figuring out how all this comes together. Again, thanks for your quick and efficient help.

 

Jon

Link to comment
Share on other sites

Hi Ben,

You have helped me out in the recent past and you have been very quick and efficient. You had sent me the link for the CSS positioning. I followed the steps in creating a relative + absolute positioning in my web page. I was able to get the left and right columns lined up. But it moved the bottom portion of my website up into place where my relative + absolute division is. No matter what I have tried, I can not get it to move back down to the bottom of the page. I have attached a zip file with my index.html, root.css and an images folder with my logo in it. The files I have named "good", are how my website looked before the I put in the positioning code in my root.css file. The files named "bad" are after I put in the positioning code. Any help would be appreciated.

 

Thanks Ben,

Jon

 

 

 

 

 

 

 

 

 

This site has a pretty good overview of the different types of positioning and what they are used for: http://www.barelyfitz.com/screencast/html-training/css/positioning/

indexscript.zip

Link to comment
Share on other sites

I'll take a look at this later today. However, a quick guess: if you are using floats to move your columns into position, that means you have to clear your floats somehow. For example:

 

<div id="content">
   <div class="leftcol"></div>
   <div class="rightcol"></div>
</div>
<div id="footer"></div>

If .leftcol and .rightcol are floated, you'll need to add some extra code to ensure that the elements in the page display correctly. If you want #content to fully contain .leftcol and .rightcol, adding "overflow:hidden" to #content is one easy way to do that. That should also push #footer into the proper place.

 

Alternately, you can add "clear:both" to #footer, but that won't make #content fully contain the two columns (which may be important if #content uses a background, for example).

Link to comment
Share on other sites

Thanks Ben,

I'm at work at the moment. I'll give it a try when I get time or I may have to do this when I get home tonight. You're awesome!

 

Thanks Again,

Jon

 

 

 

I'll take a look at this later today. However, a quick guess: if you are using floats to move your columns into position, that means you have to clear your floats somehow. For example:

 

<div id="content">
   <div class="leftcol"></div>
   <div class="rightcol"></div>
</div>
<div id="footer"></div>

If .leftcol and .rightcol are floated, you'll need to add some extra code to ensure that the elements in the page display correctly. If you want #content to fully contain .leftcol and .rightcol, adding "overflow:hidden" to #content is one easy way to do that. That should also push #footer into the proper place.

 

Alternately, you can add "clear:both" to #footer, but that won't make #content fully contain the two columns (which may be important if #content uses a background, for example).

Link to comment
Share on other sites

Hi Ben,

I added the footer tag/id and adjusted it to the screen. Now its at the bottom of the page, just like I want it. I also made some other adjustments with the columns. It all seems to be coming together. I am learning that the "top" and "bottom" attributes do not always work the way I logically think it should be. But I made my adjustments by using a negative value for the footer? It worked, so I'm good on that. This is fun. By the way, I just finished the beginners web design course. I purchased the $99 course that includes CSS layouts and lists, among other courses. Can you advise me which set of courses I should start now? I do have Adobe CS5. I need to install it. Thanks for all your help Ben.

 

Jon

 

 

 

 

 

I'll take a look at this later today. However, a quick guess: if you are using floats to move your columns into position, that means you have to clear your floats somehow. For example:

 

<div id="content">
   <div class="leftcol"></div>
   <div class="rightcol"></div>
</div>
<div id="footer"></div>

If .leftcol and .rightcol are floated, you'll need to add some extra code to ensure that the elements in the page display correctly. If you want #content to fully contain .leftcol and .rightcol, adding "overflow:hidden" to #content is one easy way to do that. That should also push #footer into the proper place.

 

Alternately, you can add "clear:both" to #footer, but that won't make #content fully contain the two columns (which may be important if #content uses a background, for example).

Link to comment
Share on other sites

I am learning that the "top" and "bottom" attributes do not always work the way I logically think it should be. But I made my adjustments by using a negative value for the footer?

As far as I understand it, top and bottom are primarily used when using position:absolute. If you need to use a negative value for the footer (although it may work) I'm sure there is a better/easier way to handle that. Negative margins shouldn't be required unless you are doing something fancy. Perhaps you can post the latest HTML/CSS code?

 

I purchased the $99 course that includes CSS layouts and lists, among other courses. Can you advise me which set of courses I should start now?

I'm assuming you mean the $99 Complete Web Designer package? I would probably start next on CSS layouts. I think that will help clear up some current layout issues you are having. And perhaps after that one, any misc videos that you think might be helpful (like lists or the videos on forms) and then Dreamweaver after that? I usually suggest that beginners get a good foundation in hand coding their websites before they jump into a WYSIWYG tool like Dreamweaver.

Link to comment
Share on other sites

Hi Ben,

I will post the code when I get home either tonight or tomorrow. I don't have it with me at the moment. And yes, I purchased the Complete Web Designer package. I have already downloaded all the courses. I also agree learning the hand code is essential before Dreamweaver or other apps. I will install my CS5 sometime tomorrow. Also look for my code at that time.

 

Thanks,

Jon

 

 

 

As far as I understand it, top and bottom are primarily used when using position:absolute. If you need to use a negative value for the footer (although it may work) I'm sure there is a better/easier way to handle that. Negative margins shouldn't be required unless you are doing something fancy. Perhaps you can post the latest HTML/CSS code?

 

 

I'm assuming you mean the $99 Complete Web Designer package? I would probably start next on CSS layouts. I think that will help clear up some current layout issues you are having. And perhaps after that one, any misc videos that you think might be helpful (like lists or the videos on forms) and then Dreamweaver after that? I usually suggest that beginners get a good foundation in hand coding their websites before they jump into a WYSIWYG tool like Dreamweaver.

Link to comment
Share on other sites

Hi Ben,

Here is my latest html code. I just finished installing CS5 and Adober Acrobat9. I have already watched the first two CSS Layouts courses. I will attempt to stay within the framework of hand coding before moving on to the WYSIWYG apps. Thanks a bunch.

 

Jon

 

 

Hi Ben,

I will post the code when I get home either tonight or tomorrow. I don't have it with me at the moment. And yes, I purchased the Complete Web Designer package. I have already downloaded all the courses. I also agree learning the hand code is essential before Dreamweaver or other apps. I will install my CS5 sometime tomorrow. Also look for my code at that time.

 

Thanks,

Jon

html.zip

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...