First of all, I´m not very firm with CSS. I try to show an icon (right side) on my sidebar link (nav-first-level) on mouseover. The Sidebar-Link currently uses 100% of the Sidebar. Do you have a tip for me?
<ul>
<li class="nav-first-level">
<a class="facetGroup" href="#">Cardiology<span class="fa arrow"></span></a>
<span class="markGroup "><i class="fa fa-pencil fa-2" ></i></span>
<ul class="nav nav-second-level collapse">
<li ng-repeat="facet in cardiologyItems">
<span>{{ facet.name }}</span>
</li>
</ul>
</li>
</ul>
this should get you there, take a look (show image icon on rollover with CSS).
• Swap .image class with your .facetGroup > remove <span> use a <div> and swap demo .play class with your .markGroup. Basically follow how it's done below and customize with your selectors!
<div class="itemsContainer">
<div class="image"> <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg" /> </div>
<div class="play"><img src="http://cdn1.iconfinder.com/data/icons/flavour/button_play_blue.png" /> </div>
</div>
CSS:
.itemsContainer {
background:red;
float:left;
position:relative
}
.itemsContainer:hover .play{display:block}
.play{
position : absolute;
display:none;
top:20%;
width:40px;
margin:0 auto; left:0px;
right:0px;
z-index:100
}
Use li:hover property.Try this:
<html>
<body>
<style>
ul li ul li:hover {
list-style-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png');
}
ul li ul li
{
list-style-type: none;
}
</style>
<ul>
<li>Cardiology
<ul>
<li>citem1</li>
<li>citem2</li>
<li>citem3</li>
</ul>
</li>
<li>Other
<ul>
<li>oitem1</li>
<li>oitem2</li>
<li>oitem3</li>
</ul>
</li>
</ul>
</body>
</html>
Working JSFiddle sample: https://jsfiddle.net/t41w9u2w/2/
Related
I cant seem to move the image inside a div. It can only be moved with absolute positioning, which I am not okay with. Can someone point out why the below given code isnt working. I want all 3 divs to be in one line . Image seems to be stuck in the top left corner. Applying padding doesnt change anything either.Please help
<div class="container" style="display:table">
<div style="display:table-cell">
<div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
<div class="logo" style="display:table-cell" Software Solutions</div>
</div>
<div class="header" style="">
<nav>
<ul style="display:flex;justify-content">
<li> Home</li>
<li>
<a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
<title>RCE-About</title>About Us</a>
</li>
<li>Products</li>
<li>Solutions</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
It's maybe something like this you need to do..
EDIT:edited snippet code, navbar is under logo but take 100% width
.container{
display:flex;
justify-content: flex-start;
flex-wrap:wrap;
background:gray;
padding:5px;
}
.navbar-container{
width:100%
}
.container > div{
display:block;
height: 50px;
background: red;
margin-right: 15px;
padding:15px;
text-align:center;
}
ul{
margin:0;
padding:0;
}
ul li{
display:inline-block;
}
<div class="container">
<div class="1">Some text</div>
<div class="logo">LOGO</div>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
I am trying to do menu similar to Chrome, inside drop down menu I want horizontal menu and vertical together.
my code:
<div id="mobileMenu" >
<ul class="nav">
<li><a href="" data-bypass>1</a></li>
<li><a href="" data-bypass>2</a></li>
<div class="oneLine">
<div class="row-fluid align-center">
<div class="span6">
<li><a href="" data-bypass>3</a></li></div>
<div class="span6">
<li><a href="" data-bypass>4</a></li><div></div>
</div>
</div>
</div>
<li><a href="" data-bypass>5</a></li>
<li><a href="" data-bypass>6</a></li>
<li><a href="" data-bypass>7</a></li>
</ul>
</div>
I thought maybe I can create additional class and divide this by different spans, to create one line with "3 and 4" horizontal, but it didn't work.
I tried without spans just with simple css:
.oneLine {
li {
display: inline;
a {
float: left;
clear:both;
width:50%;
border-right: 1px solid #969696;}
}
}
and it didn't work.
Maybe do you know how to do this?
Thanks a lot!
there are a lot possibilities of doing this.
Check this one http://jsfiddle.net/odd1y2nc/1/
<ul>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
<li class="horizontal">Horizontal</li>
<li class="horizontal">Horizontal</li>
<li class="horizontal">Horizontal</li>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
</ul>
ul {
list-style: none;
}
ul li {
float: left;
width: 100%;
}
.horizontal {
width: 33%;
}
For each list item, I want an image with text below the image.
I read on this technique, but it is not supported in IE. Instead, I'm floating the list items to the left. It does the trick except the content below the list wraps to the right. How do I prevent the content from wrapping this way?
Here is my code:
<style>
.horizlist{
list-style:none;
text-align:center;
}
#menulist ul{
width:360px;
}
#menulist li{
float:left;
padding-right:50px;
}
#menulist li img{
display:block;
}
</style>
<div id="container" style="">
<div id="top">
<img src="joblove.jpg" style="float:right;">
<div id="title" style="width:500px;text-align:center;">
<h1>"THE TOUGHEST JOB YOU'LL EVER LOVE:"</h1>
<p style="font-size: 1.6em;">A RESOURCE FOR THOSE THINKING ABOUT A CAREER IN DIRECT CARE</p>
</div>
</div>
<div id="menulist">
<ul class="horizlist" >
<li>
<img src="images/purplestyle_11_home.png"></img><span>Home</span>
</li>
<li>
<img src="images/purplestyle_01_heart.png"><span>Brochure</span>
</li>
<li>
<img src="images/purplestyle_05_cut.png"><span>Video</span>
</li>
<li>
<img src="images/purplestyle_15_buddies.png"><span>Personality</span>
</li>
<li>
<img src="images/purplestyle_03_folder.png"><span>Resources</span>
</li>
<li>
<img src="images/purplestyle_02_talk.png"><span>FAQ</span>
</li>
</ul>
</div>
<img src="phone.jpg">
<ul class="horizlist">
<li><button type="button">Click </li>
<li></li>
</ul>
</div>
Add an height to #menulist in css :
#menulist ul{
width:360px;
height:100px;
}
Use CSS backgrounds. They give you more control over image positioning and require less mark-up.
HTML:
<a class="home" href="home">Home</a>
CSS:
.horizlist a {
display:block;
background-repeat:no-repeat;
padding-top: 20px;
padding-left: 20px
background-position: 10px 10px;
a.home {
background-image:url(/images/purplestyle_11_home.png);
}
Can can adjust the padding and background-position values to suit. Repeat as needed.
I am fairly new to web development and I have been trying to create a site, so far I have managed to do a navigation menu and a logo. My issue is that after thoroughly trying many tutorials and posts I have been unable to resolve my issue.
I want to align my logo with my navbar so that the logo is on the left hand side and the navbar is in line with the logo but on the right hand side, with both of them next to each other.
next questions is how to create a drop down menu for some of navbar tabs?
thankyou
My html is as follows
<!DOCTYPE html>
<html>
<head>
<title>S3ntry Aust Transport</title>
<link href="navbarlog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="Layout1" style="overflow: auto; ">
<header>
<div id="menu">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571"
height="176" id="logo"></a>
</div>
</header>
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css part is as follows
ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li
{float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text-
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text-
transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}}
#header ul li {
list-style: none;
display:inline-block;
float:right
}
logo.JPG
{
vertical-align:middle;
float:left
}
If you were to restructure your HTML, moving your 'ul' into the header, it's very easy.
<header>
<div id="logo">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
</div>
<div id="menu">
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</header>
and the CSS needed
header { width: 700px; }
#logo { float: left; }
#menu { float: right; }
#menu ul { padding: 0; margin: 0; }
Here is a JSFiddle showing it working: http://jsfiddle.net/STu89/
I've also removed a which wasn't opened and stripped out various /div which weren't matched.
EDITED
I'm using Twitter Bootstrap and need to move navbar right(not float:right, but move right on some value). I can move it down, but it doesn't move right.
Css of my nav:
.nav
{
top:1px;
border-bottom: 3px solid #c893c7;
padding-top:20px;
padding-bottom:16px;
}
My html:
<div class="topbar">
<div class="navbar ">
<div class="container">
<img src="logo.png" alt="logo" width="258" height="130" />
<ul class="nav">
<li>Home</li>
<li class="divider-vertical"></li>
<li>Download</li>
<li class="divider-vertical"></li>
<li>F.A.Q.</li>
<li class="divider-vertical"></li>
<li>Support</li>
</ul>
</div>
</div>
</div>
Where is problem ?
Add float right in your nav class
.nav
{
top:1px;
border-bottom: 3px solid #c893c7;
padding-top:20px;
padding-bottom:16px;
float:right;
}
http://jsfiddle.net/rizwanabbasi/WmGpU/
I don't know if this solution is good, but I just put my nav in additional div and added padding in it.