I get a weird text wrap inside a list-item (li).
Check it out: http://demo.hno-eghlimi.de/#footer
I placed a span with an icon (position: absolute -> This is the cause for the wrap) before the main content of the li. I have no idea why the text inside the li is wrapping down. Do you have a solution for my problem?
You need to change two things:
Apply line-height: 30px; to the <li> element. This is because your image is 30px in height.
Apply vertical-align: bottom; to your <span> with the image. This is to vertically align your image with the text.
Also, this will break your padding between the lines, so you may want to add some bottom padding/margin to <li> elements as well.
The resulting code:
Step 1:
.footer .footer-contact-list li {
position: relative;
line-height: 30px; /* add this */
/* here you may also add some bottom margin/padding */
}
Step 2:
.footer .footer-contact-list li span {
height: 30px;
width: 30px;
border-radius: 50%;
background: #a32020;
display: inline-block;
margin: 0 5px 0 0;
position: relative;
vertical-align: bottom; /* add this */
}
Just use the below CSS for span
.footer .footer-contact-list li span {
height: 30px;
width: 30px;
border-radius: 50%;
background: #a32020;
display: inline-block;
margin: 0 5px 0 0;
position: relative;
vertical-align: middle;
margin: 5px;
}
Related
Well, I want this text to be up the top roughly 20 PX from the top of the wrapper (background color) I did the margin up there but nothing happened if anyone can help it will be greatly appreciated.
CODE
.wrapper {
background-color: #01172c;
}
.footerid {
list-style: none;
}
.footerid li {
padding-left: 125px;
padding-top: 20px;
padding-bottom: 20px;
display: inline;
display: inline-block;
}
.footerid h3 {
padding-top: 20px;
margin-top: 20px;
}
<footer>
<div class="wrapper">
<ul class="footerid">
<li><img src="logo-f.png" style=" width:80px; height:105px;"></li>
<li><h3>lol</h3></li>
</ul>
</div>
</footer>
Run the code sample in full screen to see properly.
You have to indicate the li element about the vertical-align which I would set to top for this case
Please see https://jsfiddle.net/4zr9j3eg/
I have also disabled the padding property for your h3 element which will sumup the margin that make the text distance from the top to 40px
Also I changed the text-color to color: #fff; for debug easier
As a general tips, you can set the wrapper to position: relative;
By doing this you can easily "control" the elements (children) inside the parent (in this case, the wrapper) with position absolute.
Example:
#wrapper {
position:relative;
}
#wrapper .child {
position: absolute;
top: 20px;
}
Apply vertical-align: top to <li>:
.footerid li {
padding-left: 125px;
padding-top: 20px;
padding-bottom: 20px;
display: inline;
display: inline-block;
vertical-align: top;
}
and remove padding and margin from .footerid h3.
I'm running into an issue where if I add an image as a sibling to an element then that element will shift over to accommodate the inserted image. What I want is the element to stay horizontally centered even if the image is inserted. Here is a picture of the issue:
Each row is its own div with a p element and an optional image, which is the red explanation point. I want the p element with text "Corrupted" to stay horizontally aligned even with the inserted sibling.
Here is my CSS:
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
}
#friendsList div p{
display: inline;
}
The inserted image has css like this:
#friendsList div img {
margin-bottom: 5px,
float: right,
vertical-align:middle
}
Is there a way to have the p element stay horizontally aligned even when it has a sibling?
EDIT*** Here is a CSSdeck example: http://cssdeck.com/labs/2uel0ogm
The following possibilities come to my mind:
Add the image as background image and use background-position.
Apply position: relative to the div and something like position: absolute; right: 5px; top: 5px; to the image. This makes the image absolutely positioned within the div as container.
Place image left to the p tag and give float: right to the img.
see the example
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
background: orange;
border: 1px solid red;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
float: right;
height: 25px;
width: 25px;
margin-left: -25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Alternative solution(using position property)
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table;
width: 100%;
background: orange;
border: 1px solid red;
position: relative;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
position: absolute;
right: 0;
height: 25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
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.
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/
I'm trying to make an absolute element align in the middle without a fixed width, this is I've tried:
.rm-line {
background-color: #CCC;
height: 4px;
position: relative;
text-align: center;
}
.rm-line span {
position: absolute;
background-color: #FFF;
padding: 0 10px;
top: -4px;
}
Demo at jsFiddle. As you can see in the demo, the text is not centered, I need this to be centered at any text width, even if the text has more or less characters, it should align in the middle.
How can I achieve this?
Assuming that using relative/absolute positioning isn't a requirement..
You should use display: inline-block on your span instead of position: absolute. The span will be centered by text-align: center on the div.
See: http://jsfiddle.net/2WNPm/12/
.rm-line span {
background-color: #FFF;
padding: 0 10px;
top: -4px;
margin:auto;
display:block;
}
I don't know why, but in Firefox it seems to work as desired if you set the span-box position to relative:
.rm-line span {
position: relative;
background-color: #FFF;
padding: 0 10px;
top: -4px;
}