I want to display search icon image on the right side through css, but unable to do so. Here's the code:
CSS:
.search {
background: url(../images/icons/search.png) no-repeat;
display:inline;
vertical-align:-0px;
}
HTML:
<ul class="sidebar-nav" id="MainMenu">
<li style="border-bottom:none">
<a href="#">
<img src="images/logo.png">
</a>
</li>
<li class="left">
<a href="#">
<input type="text" class="search" style="border: 0">
</a>
</li>
</ul>
Demo
css
.search {
position:relative;
top:2px;
/* readujst in jsfiddle */
padding:8px 5px 8px 30px;
background:white url(http://i.imgur.com/lFkqn.png) right center no-repeat;
}
and your corrected html
<ul class="sidebar-nav" id="MainMenu">
<li style="border-bottom:none">
<a href="#">
<img src="images/logo.png"/>
</a>
</li>
<li class="left">
<a href="#">
<input type="text" class="search" style="border: 0" />
</a>
</li>
</ul>
Use the position top right and try like this.
.search {
background: url(../images/icons/search.png) no-repeat top right;
display:inline;
vertical-align:0px;
}
As you are using a background image then you can move your bg image to right and left. In addition you no need to add display:inline;.
Also I found your HTML markup is not valid; Closing </li> is missing. In addition you are wrapping input element inside a tag.
.search {background: url("http://lorempixel.com/16/16/") no-repeat top right; }
.search {
background: url(../images/icons/search.png) no-repeat top right;
display:inline;
vertical-align:-0px;
}
Related
I have a "ul" element inside inside a "div" element for which the HTML is as follows:
<ul id = "list" class='nav nav-pills'>
<li class='active'>
<a style="width:330px; height:50px; text-align: center;" data-filter=".portfolio-filter-photography" href="#">
<strong>
First
</strong>
</a>
</li>
<li >
<a style="width:330px; height:50px;" data-filter=".portfolio-filter-identity" href="#">
<strong>
Second
</strong>
</a>
</li>
<li >
<a style="width:100px; height:50px; text-align: center; vertical-align: middle;" data-filter=".portfolio-filter-faqs" href="#">
<strong style="vertical-align: -webkit-baseline-middle;">
Third
</strong>
</a>
</li>
</ul>
The desktop view with this HTML is as shown in image1
while the mobile view is in image2
The alignments I have are correct for Desktop view while I want these elements to be aligned vertically at the center of the screen in a mobile screen. How do I do that? I am new to CSS and don't exactly understand what should be done. I tried putting "vertical-align: center", but doesn't work.
Kindly help!
You can do it with Flexbox and #media queries:
* {margin: 0; padding: 0; box-sizing: border-box}
#list {display: flex} /* displays flex-items (children) inline */
#list > li {
flex: 1; /* each takes 33.33% of the parent's width; adjust to your needs */
display: flex;
justify-content: center; /* centers them horizontally (instead of text-align: center) */
align-items: center; /* and vertically */
height: 50px;
}
#media (max-width: 568px) {
#list {flex-direction: column} /* stacks them vertically */
}
<div class="row">
<div class="col-md-12 col-sm-12">
<ul id="list" class='nav nav-pills'>
<li class='active'>
<a data-filter=".portfolio-filter-photography" href="#">
<strong>First</strong>
</a>
</li>
<li>
<a data-filter=".portfolio-filter-identity" href="#">
<strong>Second</strong>
</a>
</li>
<li>
<a data-filter=".portfolio-filter-faqs" href="#">
<strong>Third</strong>
</a>
</li>
</ul>
</div>
</div>
The text representing each image is currently located to the right of the image. I want the text to be centered underneath its corresponding image, how do I achieve this?
Please note that I applied display: inline-bock on the list items, so they are in a row.
#footer1 {
float: left;
width: 100%;
border: 10px solid #e3e3e3;
}
#footer1>ul>li {
padding: 0 8px;
display: inline-block;
}
#footer1 a:hover img {
border: 1px solid #5cadff;
text-decoration: none;
box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
border: 1px solid transparent;
margin-left: 110px;
}
<div id="footer1">
<h2> SOURCES </h2>
<ul>
<li>
<a href="https://www.wikipedea.com" title="wikipedia">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
w
</li>
<li>
<a href="https://www.google.com" title="google">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Google
</li>
<li>
<a href="https://www.youtube.com" title="youtube">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Youtube
</li>
<li>
<a href="https://www.nlm.nih.gov/" title="Nih.gov">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Nih
</li>
<li>
<a href="https://www.medindia.net" title="MedIndia.net">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
MedIndia
</li>
</ul>
</div>
I was able to do this without any changes to your existing HTML by doing this:
li{
display:inline-block;
text-align:center;
width:70px;
}
li img{
margin:0 10px;
}
The text-align centers all text and child elements inside the li. The width needs to be large enough that no caption will be too large to fit in that width. (If a caption won't fit in the allotted width, then the centering is wrecked.)
I added the left and right margin to the image for a little bit of future-proofing in case you later want to include a very short caption in your list. With that margin, even a very short caption will be forced to the next line (instead of next to the image) since 50 px image width + 10 margin on each side leaves no room for text.
Edited for float, keeps these inline and overflows if doesn't fit on page.
<style>
.container {
clear: both;
}
ul li {
width: 50px;
float: left;
text-align: center
}
ul li a {
text-decoration: none;
}
</style>
<div class="container">
<ul>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
</ul>
</div>
Please try this
HTML:
<div id="footer1">
<h2> SOURCES </h2>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
</div>
CSS:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
DEMO
I moved my wordpress site to a new domain and now for some strange reason the layout is slightly altered.
Within header element there are divs logo and main-navigation. Logo used to be aligned with the bottom of main navigation but now it floats at the top.
Tried fiddling with margins, align and display but cannot get it.
Here is the gist of html:
<div id="logo">
<a href="http://www.example.com/">
<img src="http://www.example.com/wp-content/uploads/2014/10/cropped-75021.png" width="736" height="118" alt="Patchwood logo">
</a>
</div>
<!-- end of #logo -->
<div id="main-navigation">
<div class="social-icons">
<ul>
<li>
<a href="https://twitter.com/trashswag">
<img src="http://www.example.com/wp-content/themes/orbit/images/twitter-icon.png" width="24" height="24" alt="Twitter url ">
</a>
</li>
<li>
<a href="https://www.facebook.com/patchwood.reclaimed.wood">
<img src="http://www.example.com/wp-content/themes/orbit/images/facebook-icon.png" width="24" height="24" alt="Facebook url ">
</a>
</li>
</ul>
</div>
<nav>
<div class="dropdown dropdown-horizontal">
<ul id="menu-main" class="main-nav l_tinynav1">
<li id="menu-item-132" class="first-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-132">
<a href="http://example.com/">
Home
</a>
</li>
<li id="menu-item-154" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-154">
<a href="http://www.example.com/patchwork/">
Patchwork
</a>
</li>
<li id="menu-item-150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150">
<a href="http://www.example.com/clear-outs-offers/">
Clear Outs & Offers
</a>
</li>
Possibly relevant CSS:
#logo {
display: inline;
float: left;
width: 40%;
margin: 0 1.0416666666666665%;
margin-bottom: 2.25%;
#main-navigation {
display: inline;
float: left;
width: 55%;
margin: 0 1.0416666666666665%;
(leaving out line item and anchor css probably not relevant? Too granular and maybe the issue is at sibling elements #logo and #main-navigation?)
You can see it here: http://tinyurl.com/7ywoqpf
I just want the logo to align at the bottom of it's parent element so appears. Here's a pic, I've added * {outline: 1px solid} to see better - I just want the logo aligned at the bottom.
You need to modify your CSS a little bit for your logo div and the navigation div like this:
#logo {
display: inline-block;
float: none;
width: 40%;
vertical-align: bottom;
}
#main-navigation {
display: inline-block;
float: none;
width: 55%;
vertical-align: top;
}
You can also vertically align the logo and the navigation menu in the middle by using vertical-align: middle instead.
I have (jsfiddle):
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
</ul>
</div>
</body>
And I have:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
width:100%;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
text-align:center;
}
ul.nav {
margin:0;
padding:0;
list-style-type:none;
}
li.nav_left, li.nav_right, li.nav {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {}
I would like to be able to align li.nav to the center without using text-align or margin as I have both float:left and float:right in use, so the float:right would be pushed out of line if they are used.
Hope you can help, thanks.
Use absolute positioning:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
position:relative;
width:100%;
height:50px;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
}
ul.nav {padding:0;list-style-type:none;}
li.nav_left, li.nav_right {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {
background-color:green;
width:200px;
height:30px;
position:absolute;
margin:-15px 0 0 -100px;
top:50%;
left:50%;
text-align:center;
}
You need to rearrange your html code:
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
</ul>
</div>
</body>
The above code is positioning the LEFT side of li.nav in the middle of #navbar. By using half of the width of li.nav as negative margin, the entire element is positioned in the exact center.
Just a quick example how it could work. You could also make container elements around nav_left and and nav_right and use position:absolute there as well. Inside the container element you can use float for the nav_left and nav_right elements.
http://jsfiddle.net/jCCL7/5/
In your CSS, it is a best to practice to use a "wrapper/container div".
Place all your div inside this wrapper div
.wrapper {
width: 500px;
margin: 0 auto;
}
So your HTML structure should look (not necessary exact) like this.
<body>
<div class="wrapper">
<div class="header">
<div class="content">
<p>"HelloWorld"</p>
</div>
</div>
</div>
</body>
The code above will display all your HTML content on the center of your page.
I have this layout:
I am trying to make the div with a slideshow, this above the red thing, be above the section of header.
I tried z-index, and a lot of other ways, but cannot get the layout to work.
This is my code:`
<div id="box">
<div class="clear"></div>
<div id="slideshow">
<ul>
<li>
<img src="imagens/1.png" alt="Curso 1" class="banner" />
</li>
<li>
<img src="imagens/2.png" alt="Curso 2" class="banner" />
</li>
<li>
<img src="imagens/3.png" alt="Curso 3" class="banner" />
</li>
<li>
<img src="imagens/4.png" alt="Curso 4" class="banner" />
</li>
</ul>
</div>
<div class="clear"></div>
<div id="header">
<div id="logo">
<img src="imagens/logo.png" id="" />
</div><!--logo-->
<div id="menu">
<ul>
<a class=""><li>HOME</li></a>
<a class=""><li>PROGRAMAÇÃO</li></a>
<a class=""><li>PALESTRANTES</li></a>
</ul>
</div>
</div><!--header-->
</div>
And this CSS:
.clear {
clear: both;
}
#box {
width:980px;
margin: 0 auto;
background-color:red;
}
#header {
z-index: 3;
}
#slideshow {
height:286px;
width:980px;
z-index: 0;
float: right;
}
#slideshow ul {
list-style: none;
}
#slideshow img {
overflow: hidden;
height:286px;
width:980px;
}
What can I do to solve this?
I'm trying to do something like this:
I think by "merge" you mean overlap.
To make the logo and navigation (#header) overlap the slideshow (#slideshow) above it, you will need to put a negative top margin on #header. You also need to add position to an element in order for z-index to work.
#header {
position:relative;
z-index: 3;
margin-top:-200px;
}
Once you do this, you may need to increase the z-index property of #header in order for it to get to overlap your slideshow.