September 2, 201114 yr Hi I am trying to create my css. But for some reason it aint stacking up correctly. my css is #wrap { width: 970px; margin: 0 auto; border: 1.5px solid #000000; background: #eee; } #header { width: 970px; height: 150px; background: #3333ff; border-bottom: 1.5px solid #000000; } #content { width: 970px; background: #33ff99; } #box1 { width: 400px; height: 300px; padding-left: 100px; border: 1px solid #000000; float: left; margin-top: 50px; } #box2 { width: 210px; height: 300px; padding-right: 60px; border: 1px solid #000000; float: left; display:block; margin-top: 50px; } #footer { width: 970px; margin-top: 60px; } basic html is <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="wrap"> <div id="header"><p>header</p></div> <div id="content"> <div id="box1"><p>media1</p></div> <div id="box2"><p>media2</p></div> </div> <div id="footer"><p>footer</p></div> </div> </body> </html> i am trying to get it like the img any help would be great
September 2, 201114 yr Author ok that has worked but the footer is above the boxes. and also there should be a space left of the box 1 and box 2 on the right
September 2, 201114 yr Try #box1 { width: 400px; height: 300px; margin-left: 100px; border: 1px solid #000000; float: left; margin-top: 50px; } #box2 { width: 210px; height: 300px; margin-right: 60px; border: 1px solid #000000; float: right; display:block; margin-top: 50px; } #footer { clear: both; width: 970px; margin-top: 60px; } ~evu. Edited September 2, 201114 yr by evu
September 3, 201114 yr Author can someone have a look at this Link Ignore the colours as just basic at the mo, but can anyone tell me why there is a line above th header and below the footer thanks
September 3, 201114 yr have a look at adding a reset css http://meyerweb.com/eric/tools/css/reset/ or at least the margin/padding bit.
September 5, 201114 yr Author one final question i am trying to put links in the boxes, how would i get them to not show bullet points thanks
September 5, 201114 yr as a list <ul><li> etc and put the link within the <li></li> http://www.w3schools.com/html/html_lists.asp http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered
September 5, 201114 yr Author yeh i kknw how to do lists, i have done that but they have come up with black dots and i dont want dots is it possible to have just the links without dots. thanks
September 5, 201114 yr Author nvm sorted it, used the defination lists at the bottom of the links which works just changed <li> to <dl> and removed dots thanks zed
September 5, 201114 yr nvm sorted it, used the defination lists at the bottom of the links which works just changed <li> to <dl> and removed dots thanks zed Thats not semantic code. Use CSS to get rid of the bullets. ul { list-style: none; }
September 6, 201114 yr Hi David, Use this code in your CSS file ul{ list-style:none; } Thanking You, Futureistic Team. Edited September 6, 201114 yr by futureistic
Create an account or sign in to comment