crmamx Posted March 13, 2011 Share Posted March 13, 2011 I have the weirdest problems. I use this code 11 times in a program. <a href="#top" class="center">Back to top</a> The first 9 times are left justified. The 10th time is centered, which it should be. What do I look for? Quote Link to comment Share on other sites More sharing options...
donnan Posted March 14, 2011 Share Posted March 14, 2011 You should look for any CSS style class called "center". Are you trying to center the link? If so, remove the class="center" from the anchor tag and place a div tag to center your link as below. <div align="center"><a href="somesite.htm">Link Here</a></div> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 15, 2011 Share Posted March 15, 2011 Something to look for at first is the manual if a book didn't have this info. this is what it says: 16.2 Alignment: the 'text-align' property 'text-align' Value: left | right | center | justify | inherit Initial: a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl' Applies to: block containers Inherited: yes Percentages: N/A Media: visual Computed value: the initial value or as specified Now the question: is an A element a block element or not? and if not can we align it as if it were a block element? (answer, no an A element is not a block element, and yes we can use display block on them (but only use it if you know what that does!) So in a nut shell Yes we can: Run the stuff below and see the differences (note though in real life use an external style sheet) <!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" xml:lang="en" lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/reset.css" /> <title></title> </head> <body> <style type="text/css"> #container1{ width:300px; border:1px solid red; } #container2{ width:300px; border:1px solid blue; } #container3{ width:300px; border:1px solid green; } #container4{ width:300px; border:1px solid pink; } .center{ text-align: center; /* used for block elements */ } .block{ display:block; } .block2{ display: block; text-align: center; } </style> <div id="container1"> <a class="center" href="">this is a link</a> </div> <br /> <div id="container2"> <p class="center"><a href="">this is a link</a></p> </div> <br /> <div id="container3"> <p><a class="block center" href="">this is a link</a></p> </div> <br /> <div id="container4"> <p><a class="block2"href="">this is a link</a></p> </div> <br /> </body> </html> Now a nice thing to do for you is remove the width property of the container and see what happens than. Quote Link to comment Share on other sites More sharing options...
crmamx Posted March 15, 2011 Author Share Posted March 15, 2011 One thing you have drilled into my hard head is: No inline css And I am now working on getting rid of it one page at a time....tables too... Quote Link to comment Share on other sites More sharing options...
Maq Posted March 15, 2011 Share Posted March 15, 2011 One thing you have drilled into my hard head is: No inline css And I am now working on getting rid of it one page at a time....tables too... Some excellent reasons why: Inline styles: - don't separate content from design - cause more maintenance headaches - are not as accessible - make your pages bigger Taken from: http://webdesign.about.com/od/css/a/aa073106.htm Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 16, 2011 Share Posted March 16, 2011 One thing you have drilled into my hard head is: No inline css And I am now working on getting rid of it one page at a time....tables too... I did that on purpose, another reason, is that inline style is redundant. But I hope you do understand, that the answer I gave above does have the word inline in it, but I was talking about inline elements. And that is something different. there are 2 flavours: block elements en inline elements. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 16, 2011 Share Posted March 16, 2011 One thing you have drilled into my hard head is: No inline css And I am now working on getting rid of it one page at a time....tables too... I did that on purpose, another reason, is that inline style is redundant. But I hope you do understand, that the answer I gave above does have the word inline in it, but I was talking about inline elements. And that is something different. there are 2 flavours: block elements en inline elements. By the way you can use tables as long as you use them what they are meant for. Maybe have a look at my blog, pretty much all your questions I turned in to an article. (just so you know) Quote Link to comment Share on other sites More sharing options...
crmamx Posted March 16, 2011 Author Share Posted March 16, 2011 Maybe have a look at my blog, I check your blog daily. I am now looking for the Firebug tutorial. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 16, 2011 Share Posted March 16, 2011 oei i am still busy on that one I was thinking of doing a video on it since it's easier to show stuff. Quote Link to comment Share on other sites More sharing options...
crmamx Posted March 16, 2011 Author Share Posted March 16, 2011 Well, don't think too much because you are right. But let me say that there are several videos out there and the problem with them is they go so fast you can't follow them. Do yours in slo-motion... Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 16, 2011 Share Posted March 16, 2011 hehe i'll try problem is screencasts may only take 5 minutes (or i need to buy a screencapture program for 400 dollar :'(, but I'll, use the elements of repetition and simplicity. Trust me firebug is very very easy to use. I'll show all the things that are needed. Edit: it's online: http://cssfreakie.blogspot.com/2011/03/using-firebug-for-css.html 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.