In the following code:
<a href="*">
<h3>My really really long header</h3>
<img src="thumbnail.png" width="150" height="100" />
</a>
The h3 overflows its size. If I set the overflow to hidden, an extra margin is added to the bottom of the h3. If I change the header to short one, the extra bottom margin does not appear.
After searching SO I found something about collapsing margins. But the point is there is no margin applied to img nor to h3.
Here is the CSS:
h3 {
width: 300px;
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
margin: 0;
display: inline-block;
width: 150px;
background-color: #0f0;
}
a {
position: relative;
display: block;
margin-bottom: 20px;
padding: 4px;
border: 1px solid #000;
width: 160px;
height: auto;
}
img {
background-color: #00f;
}
Fiddle
If I set the font-size of tag a to zero, the extra margin doesn't show up.
Question: Is there a proper way (not setting font-size: 0) to solve this issue?
You have your h3 set to inline-block. By default, inline-block respects line-height and font-size. Change your h3 to display block.
css:
h3 {
width: 300px;
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
margin: 0;
display: block;
width: 150px;
background-color: #0f0;
overflow:hidden;
}
Remove display: inline-block from the h3, or add vertical-align:bottom.
That you are making the h3 an inline-block element is causing this, because as such it gets laid out in the line box in a way that leaves space for the descenders of characters of (potential) text content on that same line.
Related
The content in the p elements can be put in the div container with the following css codes.
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}
<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<p>music mane: xxxxxxxx</p>
<p>author: yyyyyyyy</p>
<p>publication：20081001</p>
<p>language：english</p>
</div>
</div>
Now i replace the p elements with span elements.
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}
<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<span>music mane: xxxxxxxx</span>
<span>author: yyyyyyyy</span>
<span>publication：20081001</span>
<span>language：english</span>
</div>
</div>
The displayed effect is as following.
All the contents in the span were out of the div container,not the same effect in the p elements,how to make all the contents in the span elements within the div container?
the reason your SPAN elements are being floated outside the div is because SPANs, by default, are displayed as inline elements. if you want to use the SPAN tags, rather than the P tags, and have them remain inside the DIV, simply use the following rule:
div.description span { display:block; }
This should fix the problem, though it might look a little needless to use this rule, rather than using a P tag. But, it's your website and your choice.
The reason it works in the first case and not the second is because <p> tags are display: block by default and <span> tags are display: inline by default. The block paragraph elements display one per line within their parent, and since their parent is floated, they only take up as much width as necessary.
But, with the inline span tags, they display side by side, taking up as much width as they can, causing their parent (the description div) to be wider than the space to the right of the image. So, the description div displays below the image.
To fix this, you can set display: block on the span elements. Like:
div.description span
{
display: block;
}
Here's a working demo: https://jsfiddle.net/uy8x9z4v/. However, since the <p> tags already have the block display feature you need, I would recommend using them instead of spans, unless you have a very good reason not to.
Some HTML tags have default CSS values. <span>has none, while <p> has the following:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
So your problem is that <span> does not have display: block;
There are two issues that I'm trying to fix, but can't find a solution
The first one is that the space between the li fields is way wider than the 2px than it should be. How do I remove it?
And other is that the a fields are only as high as the text, although the field height is defined to be 50px.
I also have the normalize.css file enabled from GitHub.
Any suggestions?
HTML
<nav class="nav-box">
<div class="row">
<ul class="main-nav">
<li>YES</li>
<li>NO</li>
</ul>
</div>
</nav>
CSS
.row {
max-width: 1140px;
margin: 0 auto;
}
.nav-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 2px 2px #f2f2f2;
min-height: 65px;
}
.main-nav {
float: right;
margin-top: 7px;
}
.main-nav li {
list-style: none;
display: inline-block;
font-size: 100%;
}
.main-nav li a {
height: 50px;
background-color: #ee4723;
padding: 0 18px 0 18px;
font-size: 1.4rem;
color: #fff;
font-family:'Oswald', sans-serif;
border:solid #fff;
border-width: 0 1px 1px 0;
line-height: 54px;
}
Here's a fiddle.
For the spacing issue
This is an issue with inline-block elements (extra spacing appears between two such elements). One way to solve this is to give the parent element (in this case <ul>) font-size of 0 and then setting the font-size of the <li> element explicitly. There are other ways like negative margin but I find font-size: 0 method to be the most convenient.
You can read about other methods here https://css-tricks.com/fighting-the-space-between-inline-block-elements/
For the height issue
While you have given the inline-block property to the <li> elements, the child <a> elements are still inline. Attributes such as height and width would have no effect on inline elements. Add display: inline-block to the <a> element as well for the desired effect
You can use negative margins:
.main-nav li {
margin: 0 -2px;
}
.main-nav li a {
display: inline-block;
}
I have a problem where the number of line rows affects a box position. The more rows I have, the worse is it displaying.
The HTML I'm working with
<div class="block">
<img alt="*" src="http://placekitten.com/200/300" alt="*" />
<h2>Nameasdasd asd asdf wsd fgW</h2>
</div>
And the CSS
.block
{
width: 120px;
height: 150px;
display: inline-block;
border-radius: 10px;
margin: 13px 13px 0 0;
text-align: center;
padding: 5px;
position: relative;
behavior: url(/Media/PIE.htc);
cursor: pointer;
background: #f00;
}
.block img { height: 70px; width: 70px; display: block; margin: 0 auto 10px auto; }
.block h2 { font-size: 12px; padding: 0; margin: 0; font-family: 'Arial'; }
Fiddle: http://jsfiddle.net/3GVTK/2/
I've never encountered this problem before.
Edit: Thanks for all the response and solutions! All of them are valid and works (as of now).
I'm going to stick with Blazemongers solution as it doesn't have any side-effects for the current layout.
Add vertical-align: top; to the css for your .block element.
http://jsfiddle.net/mblase75/tsRKG/
If you look at your fiddle's blocks in a wide screen, you may notice that they're aligned to the last line of text. This is what baseline means, which is the default vertical alignment.
Simply add following property to .block css class
float: left;
Check here http://jsfiddle.net/3GVTK/4/
remove display:inline-block; and add float:left;
fiddle
just add display:inline-table to block h2 in your css
like
.block h2 { font-size: 12px; padding: 0; margin: 0; font-family: 'Arial'; display:inline-table }
you'll need to make sure, that the kitten's name is not overly long
I have been stuck with this div in the header wrapping to the next line when the window is resized. You can view it at http://www.commexfx.com . The right div in the header which includes the search box etc is wrapped to the next line when resizing the window. I tried everything: changing position, display, white-space, etc, but nothing. the structure is like this:
<div id="header">
<div id="logo"> </div>
<div class="top-widget"></div>
</div>
And the CSS code for the time being is:
#header {
margin: 0 auto;
/* max-width: 960px; */
width: 960px !important;
height: 100px !important;
border: 1px solid blue;
background-color: #ffffff;
white-space: nowrap !important;
}
#logo {
float: left;
z-index: 9999999;
margin-bottom: 20px;
width: 360px;
display: inline;
border:1px solid green;
padding: 0 !important;
margin: 0 !important;
}
.top-widget {
background: none;
border: none;
/*clear: right;*/
float: right;
height: 95px;
text-align: right;
display: inline;
width: 590px !important;
border: 1px solid yellow;
padding: 0 !important;
margin: 0 !important;
}
Would appreciate any help. Also searched the forums here and tried every possible solution I could find but nothing.
Thanks
Add min-width:960px to your css #header declaration.
Replace your css with these new ones. Floating two elements, one right and one left will make them wrap so I would use inline-block.
You don't need position:relative unless you are positioning elements within that div as absolute so you can remove those as well. Same with z-index.
Also, you don't need !important unless you have other styles overriding this. I try and use it sparingly.
#header {
margin:0 auto;
width:960px;
}
#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}
#logo img {
vertical-align: inherit;
}
.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}
After I did some changes, my feedback div no longer centers on screen and I can't figure out why.
To center a element one only have to set the width and then just do margin: 0 auto; That should normally be enough.
The goal is to have the div shown at the top of the screen, centered. You can see my fiddel here:
http://jsfiddle.net/3u3fd/
Code:
#feedback {
position: fixed;
top: 0px;
min-height: 50px;
width: 300px;
margin: 10px auto;
z-index: 9000;
font-weight: bold;
line-height: 24px;
border: solid 1px #d1d2d1;
padding: 10px;
background-color: #f7f2e7;
display: none;
border-radius: 5px;
-moz-border-radius: 5px; /* FF < 4.0 */
-webkit-border-radius: 5px; /* Rounded corners for Safari */
}
#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }
<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>
Any help appreciated!
auto margins do not work on elements with position: fixed.
Instead, you need to do this:
left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;
Where X = Y/2.
(The box-sizing: border-box ensures that even if you have padding or borders, it will still be centred. If that interferes with the desired width, then remove it and subtract the value of padding-left + border-left-width from the margin-left.)
You have a fixed position set. Get rid of it and it will center just fine.
In order for margin: 0 auto; to work, the parent element must have a specified width. It can be percentage or units, but it must have it.
For this solution to work in this case, you need to remove the position: fixed; and top declaraions and add a wrapping element.
http://jsfiddle.net/3u3fd/16/