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.
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>
For my school project I am allowed to choose a topic that is based on work we've been doing for the past two years. I chose web development. I'm creating site that simply collates various resources relevant to the subject matter, and that's easy.
The only issue I'm running into is centering elements when there is a navbar on the side.
For example, I'm trying to include this image of 'Brackets' on the homepage, but when I want to center it, it centers relative to screen and not relative to the container.
(The arrows point to where I'm trying to center things from)
Link to jsfiddle
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none;
/* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
.sidebarheader {
height: 35px;
border-radius: 1px;
border-bottom: 2px solid #9d9d9d;
}
.sidebaritem {
height: 35px;
}
body {
background-color: #fcfcfc;
}
.jumbotron {
margin-top: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="index"><i class="fa fa-code" aria-hidden="true"></i></a>
<ul class="nav navbar-nav">
<!-- HTML Section-->
<li class="sidebarheader">HTML
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Bootstrap
</li>
<li>Icons
</li>
<!-- CSS Section-->
<li class="sidebarheader">CSS
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Specificity
</li>
<li class="sidebaritem">Selectors
</li>
<li class="sidebaritem">Fonts
</li>
<!-- Javascript Section-->
<li class="sidebarheader">Javascript
</li>
<li class="sidebaritem">Basic Reference
</li>
<li class="sidebaritem">Plugins
</li>
</ul>
</div>
<div class="container">
<div class="page-header">
<h1>Web Developer Reference</h1>
<p>A website containing information for web development.</p>
</div>
</div>
<img class="center-block" src="http://brackets.io/img/hero.png">
Otherwise you made a simple mistake, you did not include img tag to container. It is outside container element.
Here is the corrected code. I've noticed you have included margin in image itself. You don't need that margin.
<div class="container">
<div class="page-header">
<h1>Web Developer Reference</h1>
<p>A website containing information for web development.</p>
</div>
<div class="page-content">
<img class="responsive" src="http://brackets.io/img/hero.png">
</div>
</div>
EDIT: I've made some other adjustments to your code. I am not sure if you want that, but it works better. I've also added responsive image, that fits container every time.
img.responsive {
width:100%;
height:auto;
}
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'm creating a web page that shows pictures of cute dogs. For every dog, I want to show the name of the dog and then a picture below it.
I would like the images to be shown side by side, but they are shown stacked vertically.
Here is my fiddle
http://jsfiddle.net/53bnhscm/2/
Here is my HTML
<h1>Listing dogs</h1>
<ul>
<li> Dog 1 </li></br>
<li>
<a href="/dogs/2">
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
</ul>
<ul>
<li> Dog 2 </li></br>
<li>
<a href="/dogs/3">
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
Here is my CSS
li {
list-style: none;
display: inline;
}
I thought a break statement after every list item and a display:inline property would do the trick, but I guess not.
Another solution is to use display: table-cell to ul elements:
ul {
display: table-cell;
}
li {
list-style-type: none;
}
<h1>Listing dogs</h1>
<ul>
<li>Dog 1</li>
</br>
<li>
<a href="/dogs/2">
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
</ul>
<ul>
<li>Dog 2</li>
</br>
<li>
<a href="/dogs/3">
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
Your lis are contained within their own ul so you need to inline that instead.
ul {
list-style: none;
display: inline-block; //use instead of inline
}
FIDDLE
Also li tags are more for list items so this isn't a real efficient way of doing this. Plus its a lot of extra code. You could simply wrap your sections in a container and inline that:
HTML
<h1>Listing dogs</h1>
<div class="wrapper">
Dog 1
<a href="/dogs/2">
<img alt="Dog 1" src="..." />
</a>
</div>
<div class="wrapper">
Dog 2
<a href="/dogs/3">
<img alt="Dog 2" src="..." />
</a>
</div>
CSS
.wrapper{
display: inline-block;
}
.wrapper a{
display: block;
}
EXAMPLE
Here a fiddle. Your markup is messy by the way, I recommend to use HTML5 markup <figure> so you can easily add a <figcaption>: http://jsfiddle.net/53bnhscm/7/
<h1>Listing dogs</h1>
<figure>
<figcaption>Dog 1</figcaption>
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</figure>
<figure>
<figcaption>Dog2</figcaption>
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</figure>
CSS
figure {
float:left;
display:inline-block;
}
ul > li {
list-style: none;
display: inline;
float: left;
margin: 0 5px;
}
And I think may be you are looking something like this. In that case you have to edit your html code
http://jsfiddle.net/ahmadsharif/p0cbmy2h/
The following answer is correct for your markup.
ul {
list-style: none;
display: inline-block; //use instead of inline
}
But if you mean exactly what is written in your question then one thing that I need to mention and it is “You should take care of your HTML markup.”
<ul>
<li>
<a href="/dogs/2">
<b>Dog 1</b>
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
<li>
<a href="/dogs/3">
<b>Dog 2</b>
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
and then your CSS will be:
ul li{
display: inline-block;
}
ul li a b{
display: block;
text-align: center;
margin-bottom: 5px
}
Just use UIKIT and its grid system. This way they will stack automatically on phones.
http://getuikit.com/docs/grid.html
<div class="uk-grid">
<div class="uk-width-1-2">Your Image HERE</div>
<div class="uk-width-1-2">Another Image Here</div>
</div>
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;
}