I'm pretty well versed with HTML and CSS, but I'd like your opinion on this one!
I need to center the text in the arrow, but place a check box next to the centered text. Because of this, I can't user text-align on all of the contents of the arrow, like I normally would. If I include the check in the centering, the anchor point shifts off of the text to include the check, and the text isn't truly centered.
Thanks!
Make the check an absolutely positioned span, set as display:block, positioned relative to the text. Check out this jsFiddle for a basic idea. Your HTML may be set up differently:
http://jsfiddle.net/cGG3W/1/
Without seeing the code, you could
use text-align:center; on the text in the div.
place the checkmark in another div and position it where necessary. You may need to adjust the stack.
Related
Any css tricks for getting text of any size to appear on the baseline for children inside one element that has float:left and another that has float:right?
Check out the jsfiddle link below to see what I'm talking about. Notice how the word "One" has a larger font so it bumps all of it's siblings in the float:left down, but it does not influence the spans in the float:right div.
http://jsfiddle.net/QeRhU/
I'd like for them all to appear on the same baseline. I'm hoping for a solution that still uses float:left; float:right; because I still want the liquid behavior that it gives when a user scales the page.
Try this, it's not the clean solution, but rather a workaround that could get the job done if you don't find a cleaner css solution.
I'm currently working on a site with this design and layout for my main-content area:
http://img528.imageshack.us/img528/9483/screenshot20120429at124.png
However, I'm finding it a little difficult to write up the HTML and CSS using proper semantics.
Firstly, should I be using divs to split the left and right columns, or, HTML5 section tags with an aside tag for the picture?
Secondly, what is the best way to position each section or area?
And finally, with that being said, at the bottom of each content area there are 2 buttons that should be horizontally inline. What is the best way to go about achieving this considering the fact the the user of the site will later on be placing in their own text and both buttons should push or position themselves further down as more text is placed inside.
This jsfiddle is currently what's making it work...but, seems wrong?
http://jsfiddle.net/LGEKW/
Should those 2 buttons be in that current div, do I use position absolute, relative or floats … I have no idea. Any help on how you would go about doing this would be greatly appreciated.
If you are using <!doctype html> it's definitely better to use
semantic tags, because divs have NO semantic meaning at all.
To my mind the best way to position the elements is to use float
property
The buttons should be floated as well. Not absolutely positioned.
Thus they will be pushed down when the user adds more content. Try placing them after the content in the same wrapper
Drop your br tags after each paragraph. p elements are
block-level - so you can use margin-bottom property to push the
next p down a bit
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
I have a slight problem with a background image on a block element that is preceded by a floating element.
I float an image to the left, followed by a H1. As expected, the H1 (which is a blocl-level element) flows behind the image, but it's contents (the actual title) appear to the right of the image.
Unfortunately, the background-image I'm using on the H1 has to be aligned to the left, and thus appears behind the actual img, because unlike the contents this is not pushed by the floating behaviour.
Example:
http://jsfiddle.net/WwuqG/
(I set the second title to clear: left to show what it should look like).
One solution is to set the left-margin of the title to a little more than the floating image's width, but that would require me to know it's width beforehand.
Another option is adding the title's icon in an element inside the h1, but that's not semantically correct.
Is there a better css-only solution that doesn't require additional elements?
add overflow:hidden to the h1
new fiddle
I'm slightly confused.
If I do what you suggested:
set the left-margin of the title to a
little more than the floating image's
width
It looks like this: http://jsfiddle.net/WwuqG/1/
My confusion comes from the fact that your problem seems to be.. really simple to fix.
Also add float: left to the <h1>: http://jsfiddle.net/WwuqG/2/
This works with whatever width image: http://jsfiddle.net/WwuqG/3/
Is that it, or have I misunderstood?
If you look at my Jsfiddle Example, the float seems to disregard the title text that is to the left of the floated element. My goal is to make the floated element not overlap the title text and to stop once it reaches the end of the div which is the title text
My questions, is this possible?
I just do not want it to overlap the element which is to the left of the floated element.
Thanks in advance for the advice, suggestions, etc.
Jsfiddle.net
Remove Position: Relative from your #advertisement_1 div, and in the HTML put it above the title div.
Below is an updated JSFiddle with it working, you may need to adjust the "top" value in your CSS for the advert box if it needs to be different to what is in the fiddle.
http://jsfiddle.net/f5j2z/