Minimeallolla Posted February 17, 2011 Share Posted February 17, 2011 Why does this not work? If you copy those 2 slabs of code into 2 seperate files, one html and the other css, im sure you can see that one part of the css box is staying left and the other is meant to be aligned to the right or center not underneath and then right. How can I get it to look like its on one row not look like there is a hidden <br /> somewhere \= html <!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>Local_Host</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="center"> <div class="box_text"> <a href="">Register</a> <a href="">Log in</a> <a href="">Log out</a> </div> </div> <p></p> <div class="left"> left of the page. </div> <div class="middle"> This is the middle content where all the information goes. to test some of this stuff im just gonna type lots of stuff here. </div> </body> </html> css @charset "utf-8"; /* CSS Document */ body { background:#F1EDC2; } A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal } A:visited { COLOR: black; TEXT-DECORATION: none; font-weight: normal } A:active { COLOR: green; TEXT-DECORATION: none } A:hover { COLOR: blue; TEXT-DECORATION: none; font-weight: none } a > img { border: 0; } .center { text-decoration:none; text-align:center; } .box_text { border:0.5px; border-style:solid; border-color:#DAA520; margin-left:auto; margin-right:auto; width:90%; height:18px; background-image:url(papersuarething.jpg); text-align:center; padding:2px; } .middle { width:75%; height:750px; padding:2px; border:0.5px; border-style:solid; margin:5px; margin-left:15%; margin-right:auto; background-image:url(papersuarething.jpg); } .left { width:10%; height:250px; padding:2px; border:0.5px; border-style:solid; margin:5px; margin-left:2%; margin-right:auto; background-image:url(papersuarething.jpg); } Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 17, 2011 Share Posted February 17, 2011 `you are using div's which is okay, but they are block elements and in simple words they push the next element underneath it. Try to apply float to the divs and you will see they will end up on the same line. Let me know if it helped. Quote Link to comment Share on other sites More sharing options...
Minimeallolla Posted February 17, 2011 Author Share Posted February 17, 2011 O: it worked (: thanks heaps XD. I'm only just recently starting out with css. A while ago I started coding moderte php and html but I never quite got around to learning javascript and css so I'm learning everything this time lol Quote Link to comment Share on other sites More sharing options...
haku Posted February 17, 2011 Share Posted February 17, 2011 As a tip, you should stop using capitals in your CSS. It can and will cause you problems in some browsers with an XHTML doctype - 'A' is not the same as 'a' in their books. This is part of the difference between strict and transitional incidentally. Quote Link to comment Share on other sites More sharing options...
Minimeallolla Posted February 17, 2011 Author Share Posted February 17, 2011 Ok thanks heaps, I've taken notes and am open to any or all advice offered (: One more thing, if you know, instead of using the hover property, how would I go about using the onclick instead? I've tried "a.image:onclick img" and "a.image:on click img" but obivously no use. a.image:hover img { position: center; width: auto; height:auto; z-index: 10000; } Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 17, 2011 Share Posted February 17, 2011 what you can do is is make a special hover-like class. when the onclick (javascript) is true set the class to the one you made. and that's it. .blue-hover{ background:blue; } and than onclick set class to .blue-hover Oh and since you wanted tips, I can recommend to have a look at meyers reset.css and use netbeans as an editor, it will give hints and tips while you code. and after you are done use the w3c validator. Quote Link to comment Share on other sites More sharing options...
Minimeallolla Posted February 18, 2011 Author Share Posted February 18, 2011 Ok thanks. I'm currently using Dreamweaver, but I'll take a look. [= Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted February 18, 2011 Share Posted February 18, 2011 I works great with wamp, good luck! 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.