snowbrdlover Posted August 16, 2010 Report Share Posted August 16, 2010 Hello again guys and girls, Finnaly with ur advice i managed the content of my page to be wrapped as i increase or decrease the browser window. But now i have another problem. I want my website to be also centered in browser window, i tried to do it by here: http://www.csstutorial.net/2010/02/how-to-create-a-center-aligned-page-with-css/ but with no sucess can u pls give me a clue? Here is Html and css: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Emmanouil main</title> <link href="emmanouil.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <h1>mmanouil</h1> <table width="469" height="43" border="0"> <tr> <td width="80"> Home</td> <td width="109">Products</td> <td width="72">News</td> <td width="105">About us</td> <td width="81">Contact</td> </tr> </table> <img src="thimbleletterArial.png" alt="Logo Thimble" name="img1" width="63" height="73" id="img1" /> </div> </body> </html> @charset "UTF-8"; /*Sets the background image and color*/ body{ background-image:url(bgfinal2.jpg); background-repeat:no-repeat; } /*Resizing the website in each screen resolution*/ #wrapper { width: 550px; margin:0 auto; position:relative; } /*Main logo*/ h1{ position:absolute; top:35px; left:56px; font:Arial; font-size:35px; color:#FFF; } /*TABLE*/ table { -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 3em 1em 3em; color:#FFF; position:absolute; top:100px; -moz-border-radius: 5em 5em 2em 2em; border-radius: 5em 5em 2em 2em; background-color:#222; height: 33px; } /*Thimble*/ #img1{position:absolute; top:28px; left:78;} Quote Link to comment Share on other sites More sharing options...
Andrea Posted August 16, 2010 Report Share Posted August 16, 2010 /*Resizing the website in each screen resolution*/ #wrapper { width: 550px; margin:0 auto; position:relative;} } 550px is pretty narrow. Most people view with over 1000 px width now. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Thank u for ur fast reply Andrea! I tried it but it doesnt work i can still see the white gap on the right of my browser.... should i put in css some info for the div "content"? Quote Link to comment Share on other sites More sharing options...
newseed Posted August 16, 2010 Report Share Posted August 16, 2010 If this all the css styles you have then you might be experiencing the body default margins. Set the body to have margin: 0; Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Thanx for help, I did that but it didnt worked... Quote Link to comment Share on other sites More sharing options...
newseed Posted August 16, 2010 Report Share Posted August 16, 2010 /*Sets the background image and color*/body{ background-image:url(bgfinal2.jpg); background-repeat:no-repeat; } How big is that background image? You either need to make it repeat or apply a background color that is not white. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 I add a background image and still nothing... Here is the code as it is now: HTML & CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Emmanouil main</title> <link href="emmanouil.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id ="content"> <h1>mmanouil</h1> <table width="469" height="43" border="0"> <tr> <td width="80"> Home</td> <td width="109">Products</td> <td width="72">News</td> <td width="105">About us</td> <td width="81">Contact</td> </tr> </table> <img src="thimbleletterArial.png" alt="Logo Thimble" name="img1" width="63" height="73" id="img1" /> </div> </div> </body> </html> @charset "UTF-8"; /*Sets the background image and color*/ body{ background-image:url(bgfinal2.jpg); background-repeat:no-repeat; background-color:#000; } /*Resizing the website in each screen resolution*/ #wrapper { width: 800px; margin:0 auto; position:relative; } /*Main logo*/ h1{ position:absolute; top:35px; left:56px; font:Arial; font-size:35px; color:#FFF; } /*TABLE*/ table { -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 3em 1em 3em; color:#FFF; position:absolute; top:100px; -moz-border-radius: 5em 5em 2em 2em; border-radius: 5em 5em 2em 2em; background-color:#222; height: 33px; } /*Thimble*/ #img1{position:absolute; top:28px; left:78;} Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 And i forgot to say that the BG image size is 1024x680 Thanx Quote Link to comment Share on other sites More sharing options...
newseed Posted August 16, 2010 Report Share Posted August 16, 2010 Base on your code I am not seeing any issues. Can you upload this somewhere and give us a url so we can check it live? Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Sorry i cant atm cause i am away from my Server and my ftp is not connected to main HDD... Do think that i must add in css info about the "content" division? Quote Link to comment Share on other sites More sharing options...
newseed Posted August 16, 2010 Report Share Posted August 16, 2010 You can if you want but that div is contained by the wrapper div and so I don't see that would be the cause. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Nope it didnt worked... omg whats wrong ;P Quote Link to comment Share on other sites More sharing options...
newseed Posted August 16, 2010 Report Share Posted August 16, 2010 Get the files uploaded the first chance you get and then give us the url. Otherwise we would only be guessing. If you prefer, zip your html and css files along with any related images and upload it here. Also, supply a screen capture of your issue. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Thank you very much m8! How can i upload the zip? cause i cant find it... Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 16, 2010 Report Share Posted August 16, 2010 If you click the "add reply" button in the top/bottom right of this topic, there is a section just under the textarea that you enter your comments in called "Attachments" that should let you upload the zip file. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Hello, There is not such area.. do i have to enable it from my profile settings? Thank you, Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 16, 2010 Report Share Posted August 16, 2010 This is what the page should look like... Note the "Attachments" section below the post textarea. This should be available to you... I know other new members have been able to upload things successfully. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Hehe i dont have this area for attachments under my text box Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 16, 2010 Report Share Posted August 16, 2010 I've adjusted the permissions -- can you try again? It looks like new members weren't allowed to upload files to the Beginner's Web Design section, but that's been fixed. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Thank you very much!! Here is the zip file with my website to check whats the problem. Best regards, Steve TEST.zip Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 16, 2010 Report Share Posted August 16, 2010 There isn't anything wrong with the centering of the website. That is working fine. However, one thing to note -- the website's wrapper is 700px wide, whereas the table you are using for your navigation is only 496px wide. This makes it appear like the content isn't actually in the center of the page, but slightly to the left. If you add "border:1px solid red" to #wrapper in your CSS, you'll see what I mean. Either you need to make the table wider to fill the 700px, or you'll need to make the #wrapper less than 700px. One other thing... To use a black background, you need to change "background-color:#00000;"(5 "0"s) in your CSS to "background-color:#000000;" (6 "0"s). HEX codes that are used to specify colors usually use 6 characters, not five. Also, keep in mind that your background image isn't very big -- if you intend to use a background image, you probably should use a larger image. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 Thank you very much for ur help and ur fast reply! I will make the appropriate changes u told me and i'll come back with the results! Regards, Steve Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 I am back again ;P I totally understand what u've told me with the wrapper! And also the red color helps me adjust my web page But the background image is not centered like the rest of the site....Is always on the left.. Also i made the BG image 1024x768 Quote Link to comment Share on other sites More sharing options...
newseed Posted August 16, 2010 Report Share Posted August 16, 2010 You can center the background using background-position: center; Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 16, 2010 Report Share Posted August 16, 2010 then change the CSS code that you are using to add the background image. You have this at the moment: body{ background-image:url(bgfinal2.jpg); background-repeat:no-repeat; background-color:#000; } You could shorten it to this: body { background: #000000 url(bgfinal2.jpg) top center no-repeat; } the "background" property combines the background-image, background-repeat, background-color and background-position properties into one shorter property. The "top center" section indicates where you want it to be placed. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 16, 2010 Author Report Share Posted August 16, 2010 I really appreciate all ur help u gave me!!! And sorry for asking so many questions ;P This is a great site that a begginer and not only that can take help I will suggest ur site to all of my friends that are interested with web design!! Best regards, Steve Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.