May 25, 200818 yr What's the best way to create spaces in xhtml. Lets say I want to start text 40px from the top of the screen?
May 25, 200818 yr you wouldn't create it within xhtml, you would use css. this would come under margin or padding, it really depends for what purpose you need it for as to which one you would use. Also a good way to create a feeling of space with text is to use line-height within the css as well. A good site to learn how to use css most effectively to achieve such things would be this site: http://htmldog.com/
May 25, 200818 yr If it's a space you'd want to use frequently - like to separate sections or something - you could use a CSS id of "spacer" or something and set it to 40px and then use it in a <div> If it's individual to the bit you are styling you'd include it in the CSS for that bit like a particular piece of text. You might set that property in the CSS for the page <div> also.
May 25, 200818 yr If it's a space you'd want to use frequently - like to separate sections or something - you could use a CSS id of "spacer" or something and set it to 40px and then use it in a <div> If it's individual to the bit you are styling you'd include it in the CSS for that bit like a particular piece of text. You might set that property in the CSS for the page <div> also. If you use css correctly you can just add the spacing to an element rather than creating something just for space. Example you want 50px space under your header before your main content starts, you would put margin-bottom:50px into the header section of your css or if you wanted there to be a 50x space at the top add a 50px margin to the top of the header. This way you keep cleaner and better code. You have to remember that css is only a good replacement for badly coded tables if you use it correctly, otherwise you are still coding bad sites. It is there so that coding is cleaner and uses a lot less elements, so when coding in css learn to use each part effectively to get the desired look without making replacing table cells with over use of divs
May 25, 200818 yr I think it really depends on what you are trying to do - css margins like that work well with images but if it's text which appears at the top of a page or under an image it might work but if it's text in paragraphs it might not work so well. There are so many ways of specifying styles that how you do it depends on what you want the end result to be. You want to try and keep everything as minimal as possible in the instructions because it saves space and loadtime so maybe when you've got it to work one way you can look back and see if you can do it more efficiently. I think that's where this code thing gets magicky.
May 25, 200818 yr Author Well what I really want to do is this: I created a button for my home page but before that I created a banner in Corel and set it as a background to the top center position. My button is at the top-left corner and I want to move it down below my banner. It also seems to offset to the left when I look at the page in full screen mode. Forgot to add, my button is an image (if that makes any difference)
May 25, 200818 yr Well if its directly at the top you can set your body to have a top margin so that it has the space needed at the top, you could also set a class for things like that so your first <p> would be <p class="space">. Things such as <div id="spacer></div> can be avoided in so many quick and easy ways. So you are right there are many ways to do it, but as I said before it is best to avoid using divs just to create spaces, as that is not really what they are made for.
May 25, 200818 yr Well what I really want to do is this: I created a button for my home page but before that I created a banner in Corel and set it as a background to the top center position. My button is at the top-left corner and I want to move it down below my banner. It also seems to offset to the left when I look at the page in full screen mode. Can you post the site or just the code so we can see how you are coding it, I think that would help us out
May 25, 200818 yr Author <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> Suknie Slubne - Avalon </title> <link rel="stylesheet" type="text/css" href="Body.css" /> <link rel="stylesheet" type="text/css" href="Images.css" /> </head> <body> <a href="StronaG.htm"> <img src="Strona Glowna.jpg" id="StronaGlowna" class="button" alt="Strona Glowna" /> </a> </body> </html> body { background-image:url("AVALON WEB2.jpg"); background-repeat:no-repeat; background-position: top center; }
May 25, 200818 yr If the image in your body is your banner it might be best to place the banner into a div so that it can have set specifications and your html will know that it is there: #header { position:relative; background-image:url("AVALON WEB2.jpg"); background-repeat:no-repeat; width: 800px;/* replace this with width of your image */ height: 200px;/* replace this with width of your image */ margin: 0 auto; } #navigation { position:relative; width: 800px;/* replace this with width you want */ margin:0 auto; } What I have done is given you banner some properties by making it the header background rather than just being placed as the body background (it doesn't have to be called header you can call it banner if you want) . So now that it knows how big it is the navigation in this case your button knows to be under it. The html from after <body> to before</body> would then look like this <div id="header"></div> <div id="navigation"><a href="StronaG.htm"> <img src="Strona Glowna.jpg" id="StronaGlowna" class="button" alt="Strona Glowna" /> </a></div> Also a word of warning, it is best not to have spaces in any file name when doing a website, so your images such as , AVALON WEB2.jpg, should be changed to contain no spaces in them. If you want to separate word then use a hyphen ( - ) or an underscore ( _ )
May 25, 200818 yr Author What does {margin: 0 auto} do???? and what's the purpose of relative position? #navigation { position:relative; width: 800px;/* replace this with width you want */ margin: 0 auto; [b]margin-top: 50px;[/b] } I added this line to move it slightly to the bottom. Is that the best choice. What I need to do next is add more buttons following the first one towards the bottom. Would increasing margin-top property for each additional button be the best choice?
May 25, 200818 yr What does {margin: 0 auto} do???? and what's the purpose of relative position? #navigation { position:relative; width: 800px;/* replace this with width you want */ margin: 0 auto; [b]margin-top: 50px;[/b] } I added this line to move it slightly to the bottom. Is that the best choice. What I need to do next is add more buttons following the first one towards the bottom. Would increasing margin-top property for each additional button be the best choice? position: relative; positions that container in relation to its parent container. In all honesty there aren't that many occasions when you actually need to use it - often it's put into a CSS style by default if you're using Dreamweaver's WYSIWYG editor and has been known to cause umpteen layout issues. The margin property... When you see the margin shorthand propery as margin: 0 auto 0 auto; it's saying margin: top right bottom left. In your eaxmple you don't really need to declare it twice, margin: 50px auto 0 auto; will do the same thing.
May 25, 200818 yr sorry relative positioning is a habit of mine as I normally have things in a container rather than free floating, as for causing problems, I haven't had any problems with it at all, and never seen dreamwaever add this...then again I hand code in dreamweaver and never use any of the design mode features:p Margin: 0 auto is there because you wanted to have the site centered so the auto, part of that tells the site to automatically work out the left and right positions. I really think you should have a look through http://htmldog.com/ as it will help you out a lot and it will explain many things about web design and creating a site
Create an account or sign in to comment