...Screenshot of my abomination
jsFiddle: http://jsfiddle.net/ELZD8/
It was looking fine, until I needed to change the fieldset size: and since I was using position:relative for literally every element on the page, changing the fieldset screwed everything up, bad. Forgive me but I'm pretty new to CSS and I know I'm using wayyy too much code.
So, as you can see in the imgur, it looks like hell now. What's the quickest way to fix this? I know it probably has to do with floats and margin:left and margin: right, but could someone provide some insight before I go bananas?
Any input is appreciated, cheers.
Easy fix:
You need to use proper div sectioning, that is, make each section a div and then place elements inside each div, otherwise it becomes a clusterfuck. You also need to list your elements in your css file by order of appearance in the html, otherwise it's painful to look for things...
Don't use massive amounts of <br>, use padding and margin css rules instead
Yes, you may use position:relative, but since you asked for advice, I am strongly against it, it takes longer to build, longer to update, longer to fix, etc. Use sections, floats and keep it simple, Simple is your friend.
I also suggest strongly against using fieldset, use <form> instead, its a major html/css breaker imo.
Here's a chopped up example after cleaning/tweaking the code considerably. There's still a thousand ways left to clean and refine it but at least now it looks more like what I suppose you wanted:
http://sotkra.com/stackoverflow/positionrelative/index.html
Take for example this code.
So, instead of the <a> tag I want to use an empty div because using text-indent:-9999px is not good for SEO.
To be more clear, I want to achieve something similar with this effect but only with css.
Take a look again on my code to see exactly my approach to achieve this effect.
Also is it possible to add a smooth fade in effect on hover only with CSS?
I don't think that using text-indent has a negative impact on SEO, unless you are wearing a black hat anyway. http://www.google.com/support/webmasters/bin/answer.py?answer=66353
To answer your second question (don't understand the first one), I think for browser compatibility, it's much better to use js (maybe flash) to have a fade in effect. I personally use jQuery, which makes life really easy.
Otherwise, there's the CSS3 property transition-property that one can use http://www.w3.org/TR/css3-transitions/.
EDIT
If I understand the first question correctly, to achieve the effect with the example you gave purely in CSS is hard, at least for now. You're better off using a js library like jQuery for effects like bounce and fade-ins.
Instead of text-indent, you can also use padding.
Basically, set either the height or width (but only one!) of the element to zero and use a padding-top or padding-left to achieve the desired dimensions. Note that overflow: hidden is needed to push out all the content from view and create the "invisible" effect.
Example: http://jsfiddle.net/N8qah/16/
Fancier example with transitions: http://jsfiddle.net/N8qah/18/
Another alternative is to set a line-height on the hidden text that is at least twice the height of the element. But if you have a nested element with text as you do here, you will need to reset the line-height in that nested element. Example of this: http://jsfiddle.net/N8qah/19/
Here you can see what I'm trying to do: http://jsfiddle.net/smogg/QFa4J/2/embedded/result/
I was trying to achieve this look so hard, and right now this code may be really confusing. If you have some tips which may clarify that, please tell me. It is all made by trial and error.
Anyway, this looks good. The only problem is my text inside .article is not selectable. Borders inside .article:before cause this problem. How can I solve this? Or maybe I should take some different steps to achieve this look (right now, with my solution I have to define height of articles which is problematic).
#edit:
I forgot about this. I can't use z-index cause my #mainhas shadow on it (which is not included in jsFiddle to clarify code) and then shadow shows on top of border. If I use borders without :before then my #main gets wider, which is not what I want.
There are cleaner and easier ways to do this. Enjoy!
http://www.css3d.net/ribbon-generator/
http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/
http://www.webresourcesdepot.com/creating-nice-3d-ribbons-with-pure-css3/
I have been looking around and seem to find lots about aligning a div vertically however not with a dynamic height div surrounding it.. i have a moch up of what i require, built from all sorts of different templates i have found.. i just cant get it to do what I want maybey i am totally wrong?.. i thought it would be simple however has turned south.. i am hoping somone on here can understand what i mean and fix it easily as I am lost... tried so many different things however just end up back to square one..
I have checked out "vertically-center-content-with-css" at vdotmedia and this is exactly what i need the div to do however i can't get it working in the template i have come up with.. i do want it to be cross browser and ie6 would be nice but at least ie7..
Thanks in advanced!
The code was a bit long for here so see the link for what i am after..
http://www.mmageardirect.com.au/tmp/index.htm
Not so easy but check this out: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Try using vertical-align: middle and a set of divs with display:table, table-row, table-cell.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I don't edit CSS very often, and almost every time I need to go and google the CSS box model to check whether padding is inside the border and margin outside, or vice versa. (Just checked again and padding is inside).
Does anyone have a good way of remembering this? A little mnemonic, a good explanation as to why the names are that way round ...
When working with CSS finally drives you mad the padded cell that they will put you in has the padding on the inside of the walls.
pin - P is in
You are using a box. If you were putting something in a box you would put some padding inside to make sure it didn't smack against the sides. Margin would then be the other thing.
Print the diagram from the Box Dimensions section of the specification, and put it on the wall.
To me, "padding" just sounds more inner than "margin". Perhaps thinking about the printed page would help? Margins are areas on the far outside - generally, you cannot even print to the edge - they are unmarkable. Within those margins, the content could be padded to provide an extra barrier between the content and the margin?
Once you work in CSS enough, it'll become second nature to remember this.
I've just learnt it over time - the box model is fairly simple but the main reason people find it hard is because body doesn't visibly break the model.
Really, if you give body a margin and a background you should see it surrounded by a white strip. However this isn't the case - body's padding is the same as margin. This establishes a few incorrect things about the box model.
I usually think about it like this:
margin = spacing around the box;
border = the edge of the box;
padding = space inside the box.
Padding is usually used inside. Either on the interior of a wall or a delivery box, that's simple. And if padding is inside, then margin is outside. Shouldn't be too hard.
use firebug to help you see.
Tim Saunders gave some excellent advice - when I first got started with CSS, I made a point of building a good, fully commented base stylesheet. That stylesheet has changed many times and remains a terrific resource.
However, when I ran into my own box model problems, I started using 'Mo Pi'. As in, "I'm not fat enough, I need to eat mo pi." Strange, but it worked for me. Of course, I put on twenty pounds while learning CSS...;-)
Create yourself a commented base stylesheet which you can use as a template whenever you need to create a new site or edit an existing site.
You can add to it as you grow in knowledge and apply it to various different browsers to see how various things behave.
You'll also be able to add in comments or examples about other hard to remember stuff or stuff that is counter intuitive.
Add border, even just temporarily. As you play with the numbers, you'll see the difference.
In fact, temporary borders around elements is a helpful way to work, such that you can see why floats are dropping, etc.
I know this is an answer to your question, but more of a tip. Whenever I am dealing with margin and padding, I will add a border around the part you are working with, then from there, it shows me the room I have to work with. When I am all set, I remove the border.
PAdding is a PArt of an element's PAinting: it extends the element's background. It makes sense to think of a pair element+padding as sharing a common background. Padding is analogous to the painting's canvas: the bigger the padding, the bigger the canvas and therefore background. Border (the painting's frame) would go around that pair. And margin will separate paintings on the gallery wall. Thinking about the concept of object background helps glue the pair object+padding together. The usual explanations of what is inside vs outside do not stick to memory: after a while everybody gets back to the original confusion. Remember also that margins are vertically collapsible and padding is not.
Instead of ask again and again to google you just use inspector window. In that style tab and scroll down to bottom you can see like this.
Margin:When you want move the block.
Padding: When you want move the items within a block.