mholmes Posted January 2, 2013 Share Posted January 2, 2013 Here is my current website:http://www.uoksoftware.com/news/ Im trying to recreate it using ASP and build it my self with out the aid of a web page builder. Here is the CSS Code: #DivMain { background-color:White; width:928px; height:580px; top:200px; margin-left:auto; margin-right:auto; }#DivText1 { width:600px; height:330px; top:290px; position:relative; left:10px; right:auto; z-index:0; margin-left:15px; margin-right:auto; }#ImgCoins { width:260px; height:260px; top:290px; position:relative; left:auto; right:0px; z-index:1; margin-left:auto; margin-right:0px; }#pTitle1 { font-family:Times New Roman; font-size:24px; font-weight:bold; }#pArticle1 { font-family:Times New Roman; font-size:14px; font-weight:normal; } This did not work for unknown reasons so I tried forcing it using this code: <!-- Page Size & Main Division --><div id="DivMain"><div id="bv_Text1" style="margin:0;padding:0;position:relative;left:25;top:27px;width:260px;height:320px;text-align:left;z-index:0;"><font style="font-size:14px" color="#000000" face="Times New Roman"></font>Hello</div><div id="bv_Image1" style="margin:0;padding:0;position:relative;left:auto;right:0px;top:5px;width:260px;height:260px;text-align:left;z-index:1;"><img src="images/coins.png" id="Image1" alt="" align="top" border="0" style="width:260px;height:260px;"></div></div> I'd really like this to work via CSS but its really wanting to fight me for some reason. thansk for help in advance. Link to comment Share on other sites More sharing options...
Labtec Posted January 2, 2013 Share Posted January 2, 2013 You can do it a number of ways. Conside these codes: First one using floating: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.8.3.js"></script><style type="text/css">#main{ background: #0000ff; width: 80%; margin: auto; padding: 1%; height: 400px;}#leftdiv{ width: 45%; background: #ff0000; height: 400px; float: left; }#rightdiv{ width: 45%; background: #00ff00; height: 400px; float: right; }</style><script></script></head><body><div id="main"> <div id="leftdiv">Left div</div> <div id="rightdiv">Right div</div></div></body></html> Second one using display:inline-block <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.8.3.js"></script><style type="text/css">#main{ background: #0000ff; width: 80%; margin: auto; padding: 1%;}#main > div{ width: 45%; background: #ff0000; height: 400px; display: inline-block; margin: 1%; }</style><script></script></head><body><div id="main"> <div>Left div</div> <div>Right div</div></div></body></html> Does this help at all. Of course you can see both concepts. You give <div>'s a style of display: inline-block to make them appear inline, but to also make them keep their appearance. The div is a block level element. Regards, Lab. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 3, 2013 Share Posted January 3, 2013 You should very rarely use position: relative; for a design layout, it is usually used along with position: absolute; child elements within it, for placing of these elements relative to the boundary of the parent element..Also using top:, left: properties etc and z-index:, won't do anything unless any of the position: relative;, position: absolute; etc is defined first. What you should use is float:, margins, and padding, and only use positioning as a last option (usually reserved for overlapping of images, and sometimes some container elements when required). font tag is deprecated, you should apply styling to <p> or any of the header tags <h#> (where # = 1 to 6). display: inline-block; has a nasty habit of adding space between each element, which is usually caused when your html is <div id="div1">div no1</div><div id="div2">div no2</div><div id="div3">div no3</div> instead of <div id="div1">div no1</div><div id="div2">div no2</div><div id="div3">div no3</div> It reads each newline as a space, which is the size of the current font-size defined to the parent element these are contained in. 1 Link to comment Share on other sites More sharing options...
mholmes Posted January 3, 2013 Author Share Posted January 3, 2013 Im very new to html so what is the best pratice? An sorry to ask but can someone explain why which is best. Sorry for questions. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 3, 2013 Share Posted January 3, 2013 That is like asking 'how long is a piece of string', this depends on what design you require, fixed, fliud, one, two, three columns or more, sticky footer, fixed header, horizontal or vertical navagation, will require different methods to achieve the design you require. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now