I am redoing my website and have run into an issue. When I use the tabs as <div> elements, I am getting white space in between them. You can use this Fiddle. I have found some of this question on the site, but they all require a width change.
Some of my tabs will be very long, so I would love to not use a set width. Is there any way to do this using only HTML and CSS?
To prevent the white-space issue, you should not use the display:inline property. You should use floats like this:
float:left
EDIT
Other solution with less html and css manipulation : you could use the solution described on this article
<center>
<div id="topnav">
<span class="tabb">Home</span><!--
--><span class="tabr">Arcade</span><!--
--><span class="tabg">Support</span>
</div>
</center>
FIDDLE
Your question is similar to this question, even though that one is using display: inline-block.
If you set #topnav to font-size: 0, the whitespace will go away and nothing else will change because you have a font-size set on the child elements.
Related
In HTML, how do I prevent this "linebreak" when using the <div> tag?
Example:
<div class="menu"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
Visual example:
How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu
NOTE: Pretend that 'apple' is inside its own invincible maroon box.
When using <span> instead of <div>, you need to get rid of the line breaks (<br>).
If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:
<div class="menu" style="float:left;"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
It sounds like you have two block elements that you would like to display side by side?
Have you tried using the "display: inline-block;" property in your css yet?
You can change your CSS to include the following;
div.menu, div.apple {
float:left;
display:inline-block;
}
You might also need to set the width of each to less than 50%.
<div class="menu"><br><br>menu<span class="youtube"><br><br>youtube</div>
i have the following markup
<a class="block"><span class="inline">hello</span>world</a>
the <a> has a display:block ... if i give the span.inline a margin-top:3px it also pushes down the text after it. here is a jsfiddle to see this behaviour
http://jsfiddle.net/YLMeh/
could anybody give me a hint why this is happening?
All inline elements on a row share the same line-height. If you think about it it makes sense. What would happen when you have multiple lines of text otherwise? It would be completely unreadable.
In these situation the vertical-align attribute is what you have to work with. Read up on that and you should be fine.
margin-top: 3px; applied to your <span class="inline"> pushes the baseline down for the whole text.
understanding the vertical-align css property may help: https://developer.mozilla.org/en-US/docs/CSS/vertical-align
I have a superscript that is messing up the line spacing. How do i make it even?
I tried
sup{vertical-align:0; position: relative;}
but that doesn't help.
Any suggestions?
We can achieve it by ignoring the <sup></sup> tags and directly using something like
<span style="position:relative; top:0.3em;">
You may need to try altering the line height of the sup element to be smaller than the parent text.
sup{vertical-align:super; line-height:0.5em;}
http://en.wikipedia.org/wiki/Superscript has lots of examples that you can inspect. Some of them increase the line height of the parent, some do not.
If that isn't working for you, you can also try
sup{vertical-align:top;}
sup{vertical-align:top; line-height:0.5em;}
This works for me, even though I have sup defined in my stylesheet. I have a link, which also has styling applied, between the <sup> and </sup> tags, but this seems to force the intended effect of keeping the line spacing consistent.
My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)
This can screw up layouts where child elements are sized to exactly fit their parents.
I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:
<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->
This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?
That isn't "a little bit of space", but literally a space character. You are using display: inline-block to align your elements horizonally, and that's how "inline" works.
If you want to use inline-block you need to remove the white space between the elements as you are doing it.
Otherwise you can use one of the other methods to horizontally align, for example floating or display: table-cell.
A solution would be to use some HTML compressor before publishing your pages to remove unneeded space from your markup, like in this example.
From what I've seen though, they tend to leave always one space at least, because they don't know if you really wanted that space or not, and since browsers considers only the first space if there are more than one, compressors leave one space there.
You should try font-size:0px; line-height:0px for outer div.
Something like this:
<div class="outer">
<div class="inner">123</div>
<div class="inner">34556</div>
</div>
<style>
.outer {
font-size:0px;
line-height:0px;
}
.inner {
font-size:14px;
line-height:16px;
display:inline-block;
}
</style>
This is because you use display: inline-block; for the div elements.
Block elements strip white space around them, inline elements don't.
Try float: left; instead.
In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of the floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?
You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).
Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/
[EDIT]
Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
OK, here's another one... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
Now what about this
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
http://jsfiddle.net/J4b6Y/48/
UPDATE
Try this if it works for you
http://jsfiddle.net/J4b6Y/33/
I would suggest that you remove the hr tag and the floating image properties.
If you cannot set the image with css background, you can do the following:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Also, if you can remove the p tag, you will save few bites.
From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.
I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.