sikiro Posted April 17, 2013 Group: Members Topic Count: 16 Topics Per Day: 0.00 Content Count: 171 Reputation: 15 Joined: 01/26/12 Last Seen: January 1 Share Posted April 17, 2013 (edited) hey guys just starting off with learning how to use html and css3 what do you guys think of this so far and wat tips can you offer. i know the images provided are not my own they are placeholders. http://shiftro.com please rate it and also if you have good html knowlage please share your wisdom with me i want to learn how to position everything corectly since it seems to be my biggest issue. add me on skype or shoot me a pm if you would like to offer your help. pm me for info. thank you. Edited April 17, 2013 by sikiro 1 Quote Link to comment Share on other sites More sharing options...
Patskie Posted April 17, 2013 Group: Members Topic Count: 50 Topics Per Day: 0.01 Content Count: 1702 Reputation: 238 Joined: 09/05/12 Last Seen: April 21 Share Posted April 17, 2013 I've been in a web industry and yet still a student. Good to know you want to learn HTML and CSS. 1. As a web developer the first thing you must do is to create a wrapper that will center the whole website so that even the user zoom-in or zoom-out the webpage it will not mess up. In your case try to zoom out your webpage and the background will divided into chunks although your web contents are centered. 2. I saw your cascading style sheets here http://shiftro.com/styles.css on the html style why don't you use no-repeat for the background so that it will not be divided in to chunks when zoomed out. On the body part, why you use margin: 0 0; where you can actually put margin: 0; and the rest are good. But i will credit your css because you consider cross-browser compatibility codes. Anyway since you are just starting off with web development. I will assume this is a good start. Keep up the good work. 2 Quote Link to comment Share on other sites More sharing options...
sikiro Posted April 17, 2013 Group: Members Topic Count: 16 Topics Per Day: 0.00 Content Count: 171 Reputation: 15 Joined: 01/26/12 Last Seen: January 1 Author Share Posted April 17, 2013 (edited) thank you for the feedback my biguest issue right now is moving things arround the main content box you see there slightly down and also add more content boxes but the issue i run into everytime is that as soon as i position it when something gets added to one all of them shift or move. EDIT: i managed to fix some of my issues with adding content boxes but i still cant figure out how to prevent it from shifting when zooming in or out. Edited April 18, 2013 by sikiro Quote Link to comment Share on other sites More sharing options...
Patskie Posted April 18, 2013 Group: Members Topic Count: 50 Topics Per Day: 0.01 Content Count: 1702 Reputation: 238 Joined: 09/05/12 Last Seen: April 21 Share Posted April 18, 2013 thank you for the feedback my biguest issue right now is moving things arround the main content box you see there slightly down and also add more content boxes but the issue i run into everytime is that as soon as i position it when something gets added to one all of them shift or move. EDIT: i managed to fix some of my issues with adding content boxes but i still cant figure out how to prevent it from shifting when zooming in or out. Why don't you use no-repeat on your background so that it will not divide into chunks. Regarding the shifting it's fixed already i guess. lol. try to use no-repeat and i will check again Quote Link to comment Share on other sites More sharing options...
Hyvraine Posted April 18, 2013 Group: Members Topic Count: 17 Topics Per Day: 0.00 Content Count: 133 Reputation: 14 Joined: 12/23/11 Last Seen: December 20, 2023 Share Posted April 18, 2013 I think you should put background-size: 100% 100% to the body. And then as for containers, this is what I usually do: <div id="container" style="width: 1000px; margin: 0 auto;"> <div id="left" style="width: 200px; float: left;">lkasdjalksdjaklsd</div> <div id="right" style="width: 200px; float: right;">lkasjdlkasjdqwidc</div> <div id="center_contentbox" style="width: 580px; margin: 0 auto;"> alksdaklsjdlk </div> </div> That's my suggestion for a 3-column design Quote Link to comment Share on other sites More sharing options...
sikiro Posted April 18, 2013 Group: Members Topic Count: 16 Topics Per Day: 0.00 Content Count: 171 Reputation: 15 Joined: 01/26/12 Last Seen: January 1 Author Share Posted April 18, 2013 I will look into that for background its a small image that needs to repeat in order to fill the page also the zoom issue I fixed nut its back :/ Quote Link to comment Share on other sites More sharing options...
Patskie Posted April 20, 2013 Group: Members Topic Count: 50 Topics Per Day: 0.01 Content Count: 1702 Reputation: 238 Joined: 09/05/12 Last Seen: April 21 Share Posted April 20, 2013 I will look into that for background its a small image that needs to repeat in order to fill the page also the zoom issue I fixed nut its back :/ Re-size the image I checked it again and the center content alignment is doomed. Why not use a wrapper class then put all your contents inside it? So the CSS would be probably like this : body { margin: 0; padding: 0; } .wrapper { width: 1000px; margin: 0 auto; } So that when the webpage is zoomed out the whole webpage will stretch Quote Link to comment Share on other sites More sharing options...
sikiro Posted April 20, 2013 Group: Members Topic Count: 16 Topics Per Day: 0.00 Content Count: 171 Reputation: 15 Joined: 01/26/12 Last Seen: January 1 Author Share Posted April 20, 2013 yep that fixed the zoom error i had now after aplying that right box shifted down Quote Link to comment Share on other sites More sharing options...
Patskie Posted April 20, 2013 Group: Members Topic Count: 50 Topics Per Day: 0.01 Content Count: 1702 Reputation: 238 Joined: 09/05/12 Last Seen: April 21 Share Posted April 20, 2013 yep that fixed the zoom error i had now after aplying that right box shifted down Great job! You did it well Quote Link to comment Share on other sites More sharing options...
sikiro Posted April 20, 2013 Group: Members Topic Count: 16 Topics Per Day: 0.00 Content Count: 171 Reputation: 15 Joined: 01/26/12 Last Seen: January 1 Author Share Posted April 20, 2013 thanks but if you look closely one of the content boxes the one on the right has shifted down. Quote Link to comment Share on other sites More sharing options...
Patskie Posted April 21, 2013 Group: Members Topic Count: 50 Topics Per Day: 0.01 Content Count: 1702 Reputation: 238 Joined: 09/05/12 Last Seen: April 21 Share Posted April 21, 2013 thanks but if you look closely one of the content boxes the one on the right has shifted down. You did it well 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.