|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
June 6th, 2004, 09:15 AM
|
|||
|
|||
Centring a Webpage
hello guys,
I am creating a webpage using CSS for my layout. when I look at the page, it seems ok but all my "DIV" are positoned relative to the left side of the screen. so if you maximize the screen, you get a huge space on the far right side of the screen. I was wondering if there is anyway I can centre the page in the window no matter the size of the screen. I have provided a link to a version of the page and the CSS file is included here. each id represents a DIV in the design. http://www.radien.plus.com/test.html thanks guys Code:
#Logo
{
Margin : 0;
Padding : 0;
Width : 125px;
Height : 125px;
Border-color : aqua;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Border-top : 1px solid#00;
Border-bottom : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-right : 1px solid#00;
}
#news
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 250px;
position : absolute;
top : 140px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#Products
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 200px;
position : absolute;
top : 397px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#unknown
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height :150px;
position : absolute;
top : 605px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#banner
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 604px;
Height : 125px;
position : absolute;
left : 140px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#shopping
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 125px;
Height : 125px;
position : absolute;
top : 7px;
left : 750px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#search
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 90px;
position : absolute;
top : 140px;
left : 725px;
Padding : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#poll
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 210px;
position : absolute;
top : 238px;
left : 725px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#footer
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 210px;
position : absolute;
top : 238px;
left : 725px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
|
|
#2
June 6th, 2004, 12:45 PM
|
||||
|
||||
|
First off, I went to link in IE and Netscape, there's stuff all over the page. You should try holding off on the CSS until you've set up your layout with HTML or Dreamweaver or GoLive or whatever you use.
I also noticed that in your external sheet you posted here, some of the CSS properties are set more than once, You've got some places where you set: Border-top : 1px solid#00; Border-right : 1px solid#00; Border : 1px solid#00; Border-left : 1px solid#00; Border This might cause conflicts but it reads really hard, just set the border property once if you are setting all of them anyway: border-style: solid; border-width: 1px; border-color: #000000; It'll help out later too . Also When I viewed the source I noticed that you've got internal styles too, you might want to pick one way to declare them, easier on you, I know that I forget things and have to look them up constantly, so I prefer external stylesheets. Next I would try setting everything up in tables and using percentages for width to center things. It'll load slower than just DIVs but you have a little more control. OR you have the <div align="center"> option. TRy also looking at CSS positioning but remember that old browsers don't fully support it. Setting your DIV with a margin-left:Xpx; (where x is a var) can get you a left position that is supportted. try going here, they help me out: http://www.w3schools.com/css/default.asp
__________________
 It's not that I don't know how to do it, I just haven't learned it yet.
|
|
#3
June 8th, 2004, 12:57 AM
|
||||
|
||||
|
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#4
June 8th, 2004, 02:07 AM
|
|||
|
|||
|
Thanks a lot for the response guys, I am still a web design novice (as you can probably see.
). jackass rpeating those properties for each DIV, I know is a bit redundant but I didn't know how to apply them to all DIVs. should I just make it a class in the html document and make them all members of that class or what? as well as there ID entry in my CSS file. Also kk5st, how did you do that, looking at your code, it appear all you did was make the margin auto. Is that all that is required? and how can I implement it with a page with lots od DIVs. last Question. Is it worth using tables to lay out the page and use CSS to format it instead? thanks again guys
|
|
#5
June 8th, 2004, 02:51 PM
|
|||||
|
|||||
|
Quote:
"Cascading" Style Sheet means that the rules are inherited unless overridden. It is not an easy concept to put into practice. It's not brain surgeryy either. Study this Big John article for a pretty good explanation of the cascade. Quote:
The centered div is a wrapper div. Put all your page code within it. Note, too, the IE hack. IE6 in compliance mode doesn't need the hack. Quirks mode does. Don't get carried away with divs. The div is a block element that groups other elements. It really has no meaning itself. Quote:
No. There may be some layout that requires a table layout and can't be better done with css, but I haven't seen it. When it comes to maintaining a page, there is no comparison. cheers, gary
|
|
#7
June 9th, 2004, 11:54 PM
|
||||
|
||||
|
The link works for me. Here it is again, anyway.
http://garyblue.port5.com/webdev/hcenter.html cheers, gary
|
|
#8
June 10th, 2004, 06:57 PM
|
|||
|
|||
Hell guys, I have yet another question. I have implemented my site as you suggested but I am having problems with DIVs that are placed in between two DIVs that have been aligned to the right and left of the page. When I minimize the page, I loss the nice format. I get a page were all the DIVs are overlapping. I have include the css file and a link to the new page so you can better understand what I am saying (just minimize the main window). . you will need IE 5 for view the page as I am still not sure why it don't work on Opera7 (any ideas)
Please help. Charles Code:
html,body {
color: black;
background-color: rgb(255,255,225);
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
margin: 0;
padding: 0;
text-align: center; /*for IE stupidity*/
}
#container {
position: relative; /*The container must be positioned
/*in order to contain positioned
/*elements*/
margin: 0 auto; /*This is the proper way to center an element*/
width: 90%;
height: 95%;
border: 1px solid blue;
text-align: left; /*corrects for IE hack*/
padding: 1px;
}
#Logo
{
Margin : 0;
Padding : 0;
Width : 125px;
Height : 125px;
position : absolute;
top : 5px;
left : 5px;
Border-top : 1px solid #00;
Border-bottom : 1px solid #00;
Border : 1px solid #00;
Border-left : 1px solid #00;
Border-right : 1px solid #00;
}
#shopping
{
Margin : 0;
Padding : 0;
Width : 125px;
Height : 125px;
position : absolute;
top : 5px;
right : 5px;
Text-indent : 3px;
Border-top : 1px solid #00;
Border-right : 1px solid #00;
Border : 1px solid #00;
Border-left : 1px solid #00;
Border-bottom : 1px solid #00;
}
#banner
{
Margin : 0;
Padding : 0;
Width : 850px;
Height : 125px;
position : absolute;
top : 5px;
left : 140px;
Margin-top : 0 auto;
Text-indent : 3px;
Border-top : 1px solid #00;
Border-right : 1px solid #00;
Border : 1px solid#00;
Border-left : 1px solid #00;
Border-bottom : 1px solid #00;
}
#news
{
Margin : 0;
Padding : 0;
Width : 150px;
Height : 250px;
position : absolute;
top : 140px;
left : 5px;
Text-indent : 3px;
Border-top : 1px solid #00;
Border-right : 1px solid #00;
Border : 1px solid #00;
Border-left : 1px solid #00;
Border-bottom : 1px solid #00;
}
#Products
{
Margin : 0;
Padding : 0;
Width : 150px;
Height : 200px;
position : absolute;
top : 397px;
left : 5px;
Text-indent : 3px;
Border-top : 1px solid #00;
Border-right : 1px solid #00;
Border : 1px solid #00;
Border-left : 1px solid #00;
Border-bottom : 1px solid #00;
}
#poll
{
Margin : 0;
Padding : 0;
Width : 150px;
Height : 210px;
position : absolute;
top : 238px;
right : 5px;
Text-indent : 3px;
Border-top : 1px solid #00;
Border-right : 1px solid #00;
Border : 1px solid #00;
Border-left : 1px solid #00;
Border-bottom : 1px solid #00;
}
#unknown
{
Margin : 0;
Padding : 0;
Width : 150px;
Height :150px;
position : absolute;
bottom : 15px;
left : 5px;
Text-indent : 3px;
Border-top : 1px solid #00;
Border-right : 1px solid #00;
Border : 1px solid #00;
Border-left : 1px solid #00;
Border-bottom : 1px solid #00;
}
#search
{
Margin : 0;
Padding : 0;
Width : 150px;
Height : 90px;
position : absolute;
top : 140px;
right : 5px;
Text-indent : 3px;
Border-top : 1px solid #00;
Border-right : 1px solid #00;
Border : 1px solid #00;
Border-left : 1px solid #00;
Border-bottom : 1px solid #00;
}
#search form
{
Padding : 0;
Margin : 0;
}
#search p
{
Padding : 1px;
Margin-top : 2px;
Margin-left: 1px;
}
#footer
{
position: absolute;
bottom: 0;
color: white;
background-color: rgb(34,70,79);
width: 100%;
font-size: 85%;
clear: left;
}
p
{
Margin : 1px;
Margin-top :0;
Margin-bottom : 0;
Padding : 0;
}
.sectionheader
{
Background-color : #366090;
Font-size : 110%; Color : white;
Margin : 0; Padding : 0;
Text-decoration : none;
Line-height : 25px;
}
.normal
{
font-family: Arial,sans-serif;
font-size: 10pt; Margin : 0;
Margin-bottom : 0;
Padding : 0;
}
.productlink
{
text-decorate : none;
font-weight : bold;
color : #000;
padding : 2px;
width : 144px;
display:block;
}
.productlink:hover
{
background-color : #ff3300;
color : #fff;
}
.productlink:active
{
background-color : #fff;
color : #ff3300;
}
.itemlist
{
margin : 0;
|
|
#9
June 11th, 2004, 12:44 AM
|
||||
|
||||
Welcome to the nightmare that is web design. I have to look at everything in IE on Mac and windows at two different screeen resolutions and netscape at 2 different screen resolutions and then in Safari, Opera and then I get drunk.
Things are always messed up somewhere. I know this sounds bad, but pick your four browsers and go with that. CSS is still relatively new so it isn't all supported and stuff just flat out won't work. The newer versions of browsers will support CSS 1 so that's nice but I just did some work at a client's place and they had ie 4.0 and netscape 4.0. I think that there are still a lot of folks out there with old browsers, now, before last month when I hadn't done that worki thought otherwise. People don't care or know or whatever about updating web browsers. I like(personally) to make ALL of my CSS external. It makes for ease of editing later on big sites, and well, little ones too. Inline will override internal and that will override external so don't mix 'em unless you plan it that way. Something that no one told me was that each lilne should be ended with a ";" Netscape will not functin properly w/out them. Go with that. Try to keep order in your code, good coding practices help you in the long run. Speeds things up and saves headaches. If you declare styles for the same thing more than once there will be a fight and you may not get your desired results. check out www.w3schools.com they helped me learn the basics and they right the standards. Although they don't give you everything you need to know. that's what Devshed and Google are for. Also, I like to make generic classes like: .body { font-family: arial; font-weight: 200; font-size: 12px; color: #999999; } and then I'll name a <p> or whatever that class. Works great for things that need the same formatting like: .left { margin-left: 80px; } Then I can put the class into <td>, <table>, or <p> or whatever. Hope this helps.
|
|
#10
June 11th, 2004, 12:55 AM
|
||||
|
||||
|
Quote:
Try putting things into tables and then nest the tables in DIVs. Divs are a godsend but it's sometimes hard to layout a whole page with just divs. Do you have access to GoLive or Dreamweaver. I use GoLive as a layout program then I cuss a bit and adjust it with code.
|
|
#11
June 11th, 2004, 04:24 AM
|
||||
|
||||
|
First, let me say that you should look at the page in Moz. IE, especially in the quirks mode you're calling, is rendering the page wrong. You need to realize that an absolute positioned (AP) element does not exist in the flow. Effectively, you have zero content in the container. Using all AP elements is definitely not good coding, and leads to behavior that you're not expecting, though you should  . Follow Jackass's suggestion and study the tutorials offered on many sites. Google will lead you to a pot-load. Don't fall in love with the gee-whiz aspect of AP. When you get down to it, it's the near least used positioning device. Ahead of it are static (the default liquid flow), relative (positioned, but in the flow), and float (complex, not in the flow). Fixed is used less than AP because it is less versatile and because IE doesn't know what it is. Study the articles at Position Is Everything to really learn about positioning. Again agreeing with Jackass, pick four browsers to test on. Use |
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
