I have some code that has the property display-inline. Due to this it displays the list horizontally. Now, I placed an image in my code and it appeared after the list. I wanted the image to be displayed below the list so I placed the list into a div but still its getting displayed next to the list. Here is the code,
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<img src="Book_Cover-465x540.png" />
CSS of list-nav:
ul#list-nav {
margin:40px;
padding:0;
list-style:none;
width:525px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:15px solid #fff;
}
Please help out. Thanks
Remove the float from a.
Also: what the heck is border-left:15px solid #fff;, didn't you mean left margin?
try this:
<div>
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<div style="clear:both"></div>
<img src="Book_Cover-465x540.png" />
Related
I've been trying to create a navbar, but when I load my website in localhost, I can't seem to see my logo on the navbar. So I went searching on the web to get an example to see if my logo was the problem. In this first example ( took from the web I can see their logo loading)
*{transition:all 0.3s ease-in-out;}
.container{
clear:both;
overflow:auto;
}
nav{float:right;}
.logo img{float:left;}
ul li{
display: inline-block; padding:10px;
font-size:20px; font-family:raleway;
}
ul li:hover{
color:orange;
}
<div class="container">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="" width="130"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li>Clients</li>
</ul>
</nav>
</div>
<hr />
Then all I did is put the direct link of my imgur image to replace their logo by mine and when I load it, it doesn't show up. How come?
*{transition:all 0.3s ease-in-out;}
.container{
clear:both;
overflow:auto;
}
nav{float:right;}
.logo img{float:left;}
ul li{
display: inline-block; padding:10px;
font-size:20px; font-family:raleway;
}
ul li:hover{
color:orange;
}
<div class="container">
<div class="logo">
<img src="https://i.imgur.com/jSo9sj9.png" alt="logo" width="130"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li>Clients</li>
</ul>
</nav>
</div>
<hr />
Thank you for your help.
I put it in the body element and got rid of the </hr> and it’s working for me.
It also works on jsfiddle.net.
I am styling the navbar my simple side with the following code:
Html:
<div>
<ul class="navbar-brand">
<a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/><br /><a target='_blank' href='https://postimage.org/'> </a><br /><br />
</ul>
<ul class="navbar-right">
<li>home</li>
<li>about</li>
<li>delivery</li>
<li>services</li>
</ul>
</div>
CSS:
ul{
list-style:none;
display:inline;
}
li{
list-style: none;
display: inline;
width:100%;
padding: 10px;
}
ul.navbar-brand{
float:left;
}
ul.navbar-right{
float:right;
}
As my snippet shows( https://jsfiddle.net/Wosley_Alarico/t3uhg5n1/1/ ). The logo is floated to the left and the menu to the right as I want. But the problem is that the menu went the top and would actually like it to be positioned to the bottom.
How can I actually make the menu go to the bottom instead and keep it floated to the right?
I can see few issues:
For 1st a tag there is no closing of it
You can remove 2nd a if you are not using
ul can't be used with li so, changed it to div or span
Remove float:right from navbar-right class it will come in the bottom of logo.
add a ul class with magin, padding 0
ul{
list-style:none;
display:inline;
margin:0;
padding:0;
}
li{
list-style: none;
display: inline;
width:100%;
padding:10px 10px 10px 0;
}
ul.navbar-brand{
float:left;
}
ul.navbar-right{
}
<div>
<div class="navbar-brand">
<a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/></a>
</div>
<ul class="navbar-right">
<li>home</li>
<li>about</li>
<li>delivery</li>
<li>services</li>
</ul>
</div>
ul.navbar-right{
float:right;
position:relative;
bottom:0;
}
I am using five div in my footer content with equal dividing space. But it is going to the next line instead of showing in one line. Check my fiddle here http://jsfiddle.net/7ZAA6/.
HTML
<div class="mainFooterLinks">
<div class="divideFooter">
<div class="fl_title">Test</div>
<div class="fl_links">
<ul>
<li>Solutions</li>
<li>Services</li>
<li>DotNetNuke</li>
<li>Web Design & Development</li>
<li>EDC</li>
</ul>
</div>
</div>
<div class="divideFooter">
<div class="fl_title">Test Sharepoint</div>
<div class="fl_links">
<ul>
<li>Services</li>
<li>Web Parts</li>
<li>Solutions</li>
<li>SharePoint Support</li>
</ul>
</div>
</div>
<div class="divideFooter">
<div class="fl_title">Test CRM</div>
<div class="fl_links">
<ul>
<li>Products</li>
<li>Test Support</li>
<li>Services</li>
<li>Test CRM</li>
</ul>
</div>
</div>
<div class="divideFooter">
<div class="fl_title">Test DNN</div>
<div class="fl_links">
<ul>
<li>Website Development</li>
<li>Skins</li>
<li>Modules</li>
<li>Support & Maintenance</li>
<li>EDC</li>
</ul>
</div>
</div>
<div class="divideFooter">
<div class="fl_title">Test K12 DRM</div>
<div class="fl_links">
<ul>
<li>What is K12DRM?</li>
<li>K12DRM Features</li>
</ul>
</div>
</div>
CSS
.mainFooterLinks
{
max-width:1200px;
background-color:#333;
padding:20px 0px 20px 0px;
margin:0px auto;
box-sizing:border-box;
}
.divideFooter
{
display:inline-block;
width:20%;
vertical-align:top;
padding:0;
margin:0;
}
.fl_title
{
font-family:Arial;
color:#cdcdcd;
font-size:15px;
font-weight:700;
padding-left:15px;
}
.fl_links a, .fl_links a:link, .fl_links a:active, .fl_links a:visited
{
font-family:Arial;
color:#636363;
font-size:12px;
font-weight:400;
text-decoration:none;
}
.fl_links a:hover
{
text-decoration:underline;
}
.fl_links ul
{
list-style-type:none;
list-style-image:url('fbull.jpg');
padding:7px 10px 5px 30px;
margin:0;
}
My Solution: If I add float:left property on divideFooter class and the bottom of the last div, adding one more div with clear:both property is working fine here.
But why the inline-block not working properly? Recent time many people are told like do not use float property, use inline-block property. So that i want to know the reason what is wrong my code?
Add font-size: 0 to your .mainFooterLinks class. With inline-blocks element, whitespace is added between them
It is because using inline-block considers line breaks as whitespace characters. You can overcome this issue by applying font-size=0 in the parent container, like this:
.mainFooterLinks
{
max-width:1200px;
background-color:#333;
padding:20px 0px 20px 0px;
margin:0px auto;
box-sizing:border-box;
font-size: 0;
}
and then reset the font size in inner container (.divideFooter in this case).
The reason it's happening is stated in the answers above..
A good solution you can use is this:
.mainFooterLinks {
white-space:nowrap;
}
.divideFooter {
white-space:normal;
}
This will get everything on the same line.. after that tweak your padding's to make everything fit ;]
EXAMPLE
I have this HTML code and CSS for a horizontal menu. It displays the links (boxes) from left to right floated to the left of the page.
What is the best way to make one of the links (boxes) display to float to the right of the page?
I have tried using float right with the below CSS copied as navigation-right and changed the HTML as needed but that did not work.
HTML
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
<li>Acudetox</li>
</ul>
</div>
CSS
.navigation-left {
height:auto;
list-style:none;
margin-right:40px;
display:inline;
}
.navigation-left li{
width:200px;
height:25px;
margin:5px;
padding:5px;
background-color:#666666;
border:none;
text-align:center;
display:inline-block;
}
.navigation-left li:hover{
background-color:#f36f25;
color:#FFFFFF;
}
.navigation-left li a{
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.navigation-left li.current {
background-color:#F36F25;
}
.navigation-left li.current a {
color:#FFFFFF;
}
http://jsfiddle.net/W2x5y/
Is this Fiddle what you wanted?
<div class="navigation-left" style="float:left">
<ul>
<li>Home</li>
<li>SAF</li>
</ul>
</div>
<div class="navigation-left">
<ul style="float:right; ">
<li>Acudetox</li>
</ul>
</div>
As you might expect, a simple float: right; does the trick.
<div class="navigation-left">
<ul>
<li>Home</li>
<li style="float: right">SAF</li>
<li>Acudetox</li>
</ul>
</div>
http://jsfiddle.net/W2x5y/1/
I think that you'd have to target some of the li tags with a class if you wanted to do that. Plus you need to max the width of the containing ul in order to give it room to float on the right.
http://jsfiddle.net/W2x5y/2/
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
<li class="right">Acudetox</li>
</ul>
</div>
ul {
width: 100%;
}
.right {
float: right;
}
Interesting questions. I'm hoping this helps.
You should anchor the navigation-left and navigation-right to a navigation box itself.
html:
<div class="nav-box">
<div class="nav-left">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="nav-right">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
CSS
body .nav-box {
top:0;
width:100%;
height:auto;
background:#eee;
overflow:hidden;
}
.nav-box .nav-left {
display:inline;
left:0;
float:left;
width:auto;
}
.nav-box .nav-right {
display:inline;
right:0;
top:0;
float:right;
width:auto;
}
Working example: http://jsfiddle.net/VA7ya/1/
It seems like the two navs are sufficient different to split them into two elements. Create two elements. Here's a Fiddle: http://jsfiddle.net/q7e3M/1/
<div class="container">
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
</ul>
</div>
<div class="navigation-right">
<ul>
<li>Acudetox</li>
</ul>
</div>
</div>
If you want to keep the same element: http://jsfiddle.net/Afxkt/1/
<ul class="navigation">
<li>Home</li>
<li>SAF</li>
<li class="navigation-right">Acudetox</li>
</ul>
CSS:
.navigation {
display: inline;
list-style: none;
}
.navigation li {
float: left;
}
.navigation-right {
float: right;
}
All at right side
.right_side{ float:right}
<div class="navigation-left right_side">
<ul>
<li>Home</li>
<li>SAF</li>
<li>Acudetox</li>
</ul>
</div>
Last <li> to the right
.navigation-left li:last-child{ float:right}
first <li> to the right
.navigation-left li:first-child{ float:right}
second <li> to the right
.navigation-left li:nth-last-child(2){ float:right}
I trying to set up my nav so I have my list items and i have a list inside a list item (sub-menu) like so...
<style>
.headerNav{
color:#FFF;
margin:0 auto;
width: 1280px;
padding-top: 148px;
}
.headerNav ul{
list-style-type:none;
margin:0;
padding:0 0 0 8px;
}
.headerNav li{
float:left;
}
.headerNav ul a{
font-size:24px;
color:#FFF;
display:block;
padding:0 55px 0 0;
text-decoration:none;
text-transform:capitalize;
}
.headerNav ul a:hover{
color:#a40404;
text-decoration:none;
}
</style>
<div class="headerNav">
<ul>
<li>Home</li>
<li><a href="#" class='galleryNavToggle'>Gallery</a>
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</li>
<li><a href="#" class='galleryNavInfoToggle'>Info</a>
<ul>
<li>F.A.Q.</li>
<li>CV</li>
<li>Artist Bio</li>
<li>Video</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div><!-- headerNav -->
The problem is that the list items with a list inside have a massive width and I cant see my sub nav at all, any help would be greatly appreciated.
I've created a fiddle with your html and css and added a bit of css of my own to outline the sublist a bit better: http://jsfiddle.net/bymLV/
I removed float: left from the sublist, because this is what makes your list so extremely wide. That and the actual width of 1280px you are giving .headerNav.