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.
Related
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'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;
I have a <a> element as inline block with a fixed width. I would like to show the <a> boxes next to each other, two boxes per row (exactly like in the first example). BUT if each box element is in a new line in the source code (second example), the boxes gain an invisible margin, which you can see if you have a look at the example with e.g. the Chrome dev tools. The width and padding of the parent wrapper, and the margin of each box is exactly calculated, so that the added invisible margin pushes the second box down into the next row.
I could just use the code of the first example (all the elements without line breaks directly behind each other), but I would like to know how can I remove this invisible margin so that the two boxes again fit next to each other in the wrapper div (like in the first example), even if each <a> element is in a new line in the source code.
Examples:
1.) Without line break in code (the layout I want to have): http://jsfiddle.net/mLa93/2/
2.) With line break in code (added line breaks after <a> element changes layout): http://jsfiddle.net/mLa93/3/
As fcalderan suggested white-space:nowrap on the parent should work. See http://jsfiddle.net/kkpKg/ for an example. If it doesn't, then you must be doing something different or wrong.
Ok, now I get it :-)
The best solution is to leave out the line breaks, however if you don't want that, the next best would be to comment them out:
<div id="wrap">
box 1<!--
-->box 2<!--
-->box 3
</div>
If that isn't a possibility the only thing that I can think of (and is supported by current browsers) is to set the line-height font-size in #wrap to zero and back to original size in the links:
#wrap {
font-size: 0;
}
#wrap a {
font-size: 14px;
}
Chris Coyier posted a good article about this problem:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I didn't realize this question was from a year ago!
Since you've spent so long trying to figure this out, I did some researching and found a similar question. I've adjusted your code here
solution
and it should work now.I placed 5 blocks because of the float case you mentioned before
EDIT: the problem was your margins. You have a 10px padding and 10px margins. If you had made your div 230px (3x10px + 2x100px) you would have gotten the same effect as the first fiddle.
try to use white-space:nowrap on parent element (the container of your links) and probably white-space: normal on links
I have a dynamically appearing div on a page. I would like to be able to hide the div with a button at the top right corner of the div. One way I have found to do this is to use a p tag, like so:
<p dir="RTL">button</p>
If this is the first line of HTML within the div, it will put the button in the upper right hand corner of the div. However, it gives me a new line above and a new line below, so, the button isn't really where I want it to be. The "dir" attribute doesn't seem to work with a span tag, and if I display the p tag inline using css
p {
display:inline;
}
the button is no longer right aligned. Instead it stays in the left hand corner. Is there a way to get this button in the upper right hand corner without two unnecessary new lines and without a bunch of ?
You have two options here:
Get rid of the margin on the p tag: p { margin: 0; }
Use a div instead of a p
Most browsers render paragraph tags with a 1em top and bottom margin.
As for your problems with the rtl property, what browser are you using? As far as I'm aware it should work fine with as long as the element is inline and you're using the correct unicode characters.
HTML dir="rtl" and CSS direction:rtl meant for languages that require it, and it's better not to use it in case you are not planning to add Hebrew and Arabic support to your website. As for your question, I guess you want to align text to the right, which can be made easily using text-align:right.