I'll let this jsfiddle describe most of the problem for me.
http://jsfiddle.net/zAPVQ/4/
I've got a layout similar to this. There's an image to the left and block links to the right. The way I've set the positioning, the text inside the <a> is pushed down underneath the blocks.
I've created a makeshift solution, using <span> tags and more positioning, but I'd rather that not be my end result. If I have to create/change/remove buttons, I'd have to mess with the positioning of the text.
Does anyone know a better way of keeping the text inside the link block?
Updated your Fiddle.
I've added
overflow: hidden;
to your big link CSS.
Saw this today from another answer to this question Element with Overflow:auto affected by Floating Element
Theres also a couple of good links to a description of why it works in there too.
Try using a negative margin. Like margin-top: -75px;
Related
I have a previous button on the left and a next button on the right to a h2 tag. I want the h2 tag to be width: 20%; and have margin: auto; to center it. The problem is that it pushes away the buttons to the left and the right, but I want them to be right next to the text. So theoretical I want the buttons to be inside of the margin of the h2 tag without being in the same div. Do you have any ideas to solve this?
My solution:
If the neighbour elements arent something to interact with you can give them the style margin: -x%; and just replace x with a number that fits the best for you. In my case it would have been 40% to get the buttons directly next to the text.
The problem was that you couldnt click the left button anymore, because he was inside of the margin of the text and so I finally moved the buttons inside one div together with the text what wasnt exactly what I wanted, but it works and thats better than nothing for now.
Though there is no code or Image of what you're trying to achieve so I have to just assume what it could look like. Something that I understand by now is you want a button an h2 tag and a button so assuming that this is what you want I guess you can try tapping into the position property you can read about it here at GeeksforGeeks or W3school or MDN docs or can try display: flex you can read about it here GeeksforGeeks or W3school or here at MDN docs or can try floating it and can read about it here at GeeksforGeeks or W3school or MDN docs.
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
I am new(ish) to HTML and CSS. I am building a site but it feels I am not getting as much control over it as is possible. Control over positioning and placement of items/elements/objects that is.
Example Image
Question: How can I adjust the position of specific elements/items/content on a page with CSS. In this case the 'Horizontal Rule'. How can I move/push the 'Horizontal Rule' up closer to the text above it. The 5 stars and text. And if I wanted to how can I put more space between the title and the image?
For example. In HTML I have a 'Horizontal Rule' separating an image and text above from text below. See this image here.
The 'Horizontal Rule' in this picture is in a div. The 5 star rating system and it's text is in a div. The picture is in a div and the title (everything above the image) is in a div. Lastly, those 4 divs are in a container div. How can I push the 'Horizontal Rule' up closer to the 5 stars and text with out effecting anything else on the page?
For my code please see my link in the comment below. I am unable to post more than 2 links due to reputation. Thanks.
Your answer will be appreciated. Thanks in advance!
You could try something such as:
hr { width: 100%; height: 1px; color: #CCC; margin-top: -2px; }
Not sure if there is any risk is using negative margins... I'm certainly not a CSS expert.
An easy way to figure out what you need to change in your CSS to get things closer together or further apart, is to use a developer tool such as FireBug. It allows you to inspect your page elements and not only see what their layout values are, but to edit them as well.
To ensure your <hr> tags take up the minimum space, so they are as close to other elements as possible, you can set their margin and padding to 0.
hr{padding:0;margin:0;}
The next step would be to set the margin and padding of elements above and below your <hr> tags.
Here is an example that shows the difference by changing the padding/margin of the <hr> tags.
It is only the margin that needs to be set, as the padding by default, is already set to zero. Check here to see the default values for the <hr> tag.
Hope this helps
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.
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/