For simplicity, I'm using inline styles so you can see what's going on. I've used a red border for list elements and a black border for the images? Why aren't the images aligned properly? This has been driving me nuts.
See screenshot:
See code:
<ul>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
</ul>
JS Fiddle
http://jsfiddle.net/jMzub/
You need to clear the floats
<ul>
<li style="border: 1px solid red">Result
<span style="display: block; float: right; border: 1px solid #000">
<img src="../../resources/images/delete.png" />
</span>
<div style="clear: both;"></div>
</li>
<!--Same for other li-->
</ul>
But this is a dirty way, I would've used background-image and background-position for <li> element instead(Unless and until you'll be using image as a link or for some click purpose)
You need to include height to li
li{height: 30px;}
Related
Span tags leak outside of its direct parent and all other wrapping parents too. Take a look at this fiddle.
I've tried display, overflow and other properties but I can't figure this out. It just keeps leaking out.
How to fix that?
.tag {
padding: 2px 5px 3px 5px;
margin-right: 5px;
border: 1px solid red;
white-space: nowrap; /* prevent splitting spans */
}
.tag-wrapper {
border: 1px solid blue;
max-width: 300px;
}
.parent {
border: 1px solid green;
}
<div class="parent">
<div class="tag-wrapper">
<span class="tag">tag 1</span>
<span class="tag">tag 2</span>
<span class="tag">tag 3</span>
<span class="tag">tag 4</span>
<span class="tag">tag 5</span>
<span class="tag">tag 6</span>
<span class="tag">tag 7</span>
</div>
</div>
I tried to find an answer but it seems that I don't know how to phrase this question. Im familiar with collapsing margins and it seems to be a different problem.
You're probably looking for display: inline-block;.
<span> elements by nature are an inline element, so their effective height is actually based on their content, rather than their bounding box. By making it behave as a block element, you should achieve your desired effect.
Here is an updated version of your fiddle, and here is the updated tag CSS:
.tag {
padding: 2px 5px 3px 5px;
margin-right: 5px;
border: 1px solid red;
white-space: nowrap; /* prevent splitting spans */
display: inline-block;
}
You should use display: inline-block in .tag. Checkout the updated Fiddle
Just like:
.tag {
display: inline-block;
}
Hope this helps!
i have a horizontal navigation bar.
i wish to add a search bar to the navigation bar, but when i insert it, my navigation bar is misaligned.
https://jsfiddle.net/r6ntxg2f/
as you can see my menu is hovering above the green line, and the right side menu is hovering even more. i wish to align the whole menu to the green line.
<li id="searchbar">
<form id="search" method="post" style="">
<input id="bb" type="text" style="" />
<input id="cc" type="submit" value="Search" style="" />
</form>
</li>
this is how it is without search. https://jsfiddle.net/q476f585/ (working)
Seems like your sizes and padding was causing the issue, see the jsfiddle for an updated solution. All I done was updated the padding and display style. For the bottom border you will have to ensure that the other padding on the first two buttons are correct.
You can fix the issue by adjusting padding. Here is the working code.
ul#menu_left {
position: relative;
left: 100px;
width: 75%;
font: 75% verdana;
list-style-type: none;
padding: 10px 10px 5px 10px;
border-bottom: 1px solid green;
}
ul#menu_right {
padding-right: 10px;
float: right;
padding-top: 2px
}
ul#menu_left li {
display: inline;
}
ul#menu_left li a {
padding: 6px 4px;
border-bottom: 1px solid green;
text-decoration: none;
color: white;
background-color: green;
}
ul#menu_left a:hover {
color: black;
background: yellow;
border-bottom: 1px solid yellow;
}
li#searchbar {
background-color: green;
padding: 6px 4px;
border-bottom: 1px solid green;
}
li#searchbar form {
display: inline;
}
li#searchbar input {
width: 50px;
}
<ul id="menu_left">
<li><a id="tab1" href="#">The We</a>
</li>
<li><a id="tab2" href="#">Book</a>
</li>
<li><a id="tab3" href="#">Tab</a>
</li>
<li id="searchbar">
<form id="search" method="post">
<input id="bb" type="text" />
<input id="cc" type="submit" value="Search" />
</form>
</li>
<ul id="menu_right">
<li><a id="tab5" style="" href="#">Up</a>
</li>
<li><a id="tab6" href="#">Contact</a>
</li>
</ul>
</ul>
I would like to apply style to hovered links in a list, but only if there is not image inside <a> element.
The markup is like this:
<div id="leftcolumn">
<ul>
<li>google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
and my css:
div#leftcolumn ul a:hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
I have tried this css, but to no avail:
div#leftcolumn ul a:hover < img{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
Here is the jsfiddle
You cannot style an element based on it's children in CSS, what you can do is assign a special class for <a> tags that hold the image and prevent styling it:
<div id="leftcolumn">
<ul>
<li>google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
div#leftcolumn ul a:not(.withImage):hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
border-top: 1px solid black;
}
I doubt this is possible in pure CSS.
However, you could wrap text in a <span> and only apply rules there, i.e. something like:
<div id="leftcolumn">
<ul>
<li><span>google</span></li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
CSS:
div#leftcolumn ul a:hover > span {
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
Updated JSFiddle
add .non-img to li which is without img
n do css with using .non-img
div#leftcolumn ul li.non-img a:hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
border-top: 1px solid black;
}
<div id="leftcolumn">
<ul>
<li class="non-img">google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
I added a border-bottom to the button and when button is clicked border-bottom is removed and button is moved 3px down to create press effect. But when button is clicked the div below the active div also moves down and up.
This screenshot can make things clear.
HTML
<div id="contactus">
<a class="dropcontact" href="javascript:void(0)">Contact Us</a>
<div id="contact-container" class="body">
<ul>
<li><input type="text" placeholder="Name" /></li>
<li><input type="text" placeholder="Email" /></li>
<li><textarea placeholder="Message"></textarea></li>
<li><input type="submit" value="send"></li>
</ul>
</div>
</div>
<footer>
<div id="footer-container" class="body">
<span>© All Rights Reserved 2014. Design By Mohit Chawla.</span>
<div class="social">
<img src="images/social/facebook-3-128.png" alt="">
<img src="images/social/pinterest-4-128.png" alt="">
<img src="images/social/twitter-4-128.png" alt="">
</div>
</div>
</footer>
CSS of the button
#contact-container input[type="submit"]{
border: none;
background-color: #f4f4f4;
color: #ffb851;
padding: 10px;
font-size: 16px;font-size: 1.6rem;
border-radius: 5px;
border-bottom: 3px solid #e5e5e5;
cursor: pointer;
}
#contact-container input[type="submit"]:active{
position: relative;
top: 3px;
border-bottom: 0px;
}
Don't change the border width, change the border colour:
#contact-container input[type="submit"]:active{
position: relative;
top: 3px;
border-bottom: 3px solid transparent;
}
This way the sizes remain constant, and don't affect the layout/sizing.
I've run into a problem.
My code now:
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>
And it seems like this now:
When the word in the second div is as short as can be placed after the first div, it's in one row, like this:
My goal is to get this design, when the decond div is longer. I'm not allowed to use WIDTH and FLOAT: RIGHT because the inner divs have to de dynamic!
Like this (PhotoShop):
Thanks for the help in advance!
Is this what you looking for
I removed the float:left from the second inner div and increased the margin.
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style=" margin-left: 60px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div></div>
Hope this helps
No width allowed ? OK here is a try:
AFAIK you can't do that with float without having a few width properties. Same with relative positioning of a "column": you still need a width and margin-left on the second column.
A solution is using CSS display: table; and table-cell (nope, not HTML table ;) ). It's as flexible as you want.
http://dabblet.com/gist/1717860 will show you an example (HTML is separated from CSS, an id was added for clarity but isn't really needed and deprecated element u was removed and b replaced by strong. But CSS font-weight: bold; would be better, without context)
#main {
display: table;
width: 500px;
margin: auto;
border: 1px solid blue;
}
#main > div {
display: table-cell;
border: 1px dashed black;
padding: 1em;
}
#main > div + div {
padding-left: 20px;
}
EDIT: compatibility IE8+
display: inline-block; is a good fallback for IE6/7. Well display: inline; zoom: 1; in fact, as IE6/7 doesn't understand the inline-block value but can achieve the same with inline+hasLayout)
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;width:50px;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;width:420px;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>
This is close to what you wanted. I just set the width for the inner div's. Also, you forgot to close the first div tag.
Float the first box left and give it an fix width. Then give the right div a margin-left bigger than the left div's width! ... and do not float the second div
Try:
<div style="overflow: hidden; width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; margin-right: 20px; border: 1px solid black;">
<b><u>TEST</u></b>
</div>
<div style="overflow: hidden;">
<div style="float: left; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
</div>
</div>
http://jsfiddle.net/ZmRY2/5/
Is like a table cell, try this
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left;">
<div style="border: 1px solid black;"><b><u>TEST</u></b></div>
</div>
<div style="display:table-cell;">
<div style="margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
</div>
<br style="clear: both;">
</div>