I have that simple button in my application. I want to add little dropdown when hover on it and also to see icons then name on the option list coming up and all thin in pure css so I can link to php pages when clicking on the menu.
http://jsfiddle.net/seby20/JB59c/
CSS
.ann_search_submit {
background:transparent url("images/fancybutton.png") no-repeat top left;
max-width : 131px;
}
.newhead{
padding-left:4px;
padding-right:4px;
margin-right:2px;
padding-top:4px;
padding-bottom:1px;
cursor:pointer;
line-height:16px;
margin-top:2px;
text-decoration: none;
font-size: 12px;
}
.ann_submit {
color : #09509B;
padding: 4px;
margin:0px 0px 5px 3px;
border : none;
background:transparent url("images/fancybutton.png") no-repeat top right;
}
.ann_submit:hover {
color:#0271E6;
}
HTML
<div class="newhead" >
<div class="ann_search_submit">
<div class="ann_submit"><img src="images/plus-icon 2.png" title="Add Call" align="absmiddle" >
<?=HEAD_BUTTON_ADD_CALL?>
</div>
</div>
</div>
Use this code
HTML
<div class="ann_search_submit">
<div class="ann_submit">
<img src="http://www.mkstats.ca/plus-icon 2.png" title="Add Call" align="absmiddle" >
Add New Phone Call</div>
<div class="dropdown">
Option1 <br/>
Option2 <br/>
Option3 <br>
</div>
</div>
CSS
.ann_search_submit {
background:transparent url("images/fancybutton.png") no-repeat top left;
max-width : 131px;
}
.newhead {
padding-left:4px;
padding-right:4px;
margin-right:2px;
padding-top:4px;
padding-bottom:1px;
cursor:pointer;
line-height:16px;
margin-top:2px;
text-decoration: none;
font-size: 12px;
}
.ann_submit {
color : #09509B;
padding: 4px;
margin:0px 0px 5px 3px;
border : none;
background:transparent url("http://www.mkstats.ca/fancybutton.png") no-repeat top right;
}
.ann_submit:hover {
color:#0271E6;
}
.dropdown {
display: none;
height:100px;
width:200px;
}
.ann_search_submit:hover>.dropdown {
display: block;
}
Related
I develop under Laravel 5.4. There is a top menu show as in the picture 1. top menu
However, I want to the menu show like picture 2 ideal top menu show,show in any size screen only in one row. Is there any good solution to make it? Like by change the menu font auto?
.venus-menu {
width: 100%;
margin: 0;
padding: 0;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
list-style: none;
background: #fff;
box-shadow: 0 1px 3px #dedede;
}
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="display: block;"><i class="fa fa-bars"></i> </a>
<div class="content">
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
</div>
Check working fiddle to get the same, but you have to change css part
NOTE - As you mansion that "top menu display only in one row"
Working fiddle
fiddle code
.navbar-minimalize {
margin:5px 50px 5px 15px;
display: inline-block;
}
.content {
width:100%;
display:flex;
width: 100%;
margin: 0;
padding: 0;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
list-style: none;
background: #fff;
box-shadow: 0 1px 3px #dedede;
}
.content ul.venus-menu {
width:100%;
margin:0px;
padding:0px;
list-style:none;
border-left: 1px solid #ddd;
display:flex;
flex-flow:row nowrap;
justify-content:space-around;
}
.content ul.venus-menu li {
display:flex;
justify-content:space-around;
align-items:center;
flex-flow:row wrap;
}
.content ul.venus-menu li a {
display:block;
padding:10px 15px;
font-size:15px;
text-decoration:none;
color:#505050;
}
.content ul.venus-menu li a:hover {
background:#eee;
}
<div class="content">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
In my case I am having a nav bar(two tabs) with green border. Below this there is a container with green border. For active tab border-bottom should be white and another tab should be green. So I changed border-bottom:1px solid #fff for active tab alone. This case is working fine is large and medium device. But in small device green line is still displaying under active tab which is the border of the container present under the nav.
HTML Code:
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:3px;
float:left;
list-style:none;
}
.tab-links a {
background:none repeat scroll 0 0 #dfdfdf;
border:1px solid #c3c3c3;
color:#484e2a;
display:inline-block;
font-family:open_sansbold;
font-size:11px;
min-width:166px;
padding:8px 4px;
text-decoration:none;
transition:all .15s linear 0s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background: #fff;
border:1px solid #dddfb0;
border-bottom:1px solid #fff;
color:#484e2a;
}
.tab-content {
padding:15px;
background:#fff;
border:1px solid #dddfb0;
margin-top:-20px;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab #1</li>
<li>Tab #2</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Test Content 1</p>
</div>
<div id="tab2" class="tab">
<p>Test Content 2</p>
</div>
</div>
JS Fiddler link:
https://jsfiddle.net/ktncf454/
#padamapriya :
I did few modifications for you..:
.tab-links li {
margin: 3px;
float: left;
list-style: none;
position: relative;
z-index: 1;
margin-bottom: 2px;
}
.tab-content {
padding: 15px;
background: #fff;
border: 1px solid #dddfb0;
margin-top: -20px;
position: relative;
z-index: 0;
}
Hope this helps!!!!
You will have to write the media query for the this scenario.Generally what happens on different devices the navbar adjust himself automatically.so writing the media query you can change the border for the container and for the tab.
It will good if you share your source code or create a jsfiddle so that we can test and give you the proper solution.
I know its the noobest question you had every seen but but really guys I am not able to find whats wrong in my css. I am trying to float two divs inside a footer div. But the problem is that the first div (#copyrights) is just stuck in the middle. It looks like there's something wrong with the main container (#footer). Because when I place the last container outside it then everything works great
Have a look at my code on jsfiddle.
Heres my HTML (The footer div is at the bottom):
<div id="footer">
<!-- Upper footer -->
<div id="upper-footer">
<!--Footer Navigation Links -->
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
The Mall
</li>
<li>
Media Center
</li>
<li>
Contact Us
</li>
</ul>
<!-- End od Footer nav links -->
<!--Start of newsletter div -->
<div id="newsletter">
<span>SignUp To Get The Latest News & Updates</span>
<form>
<input class="rounded" type="text" value="Your Email Here..." >
<input class="rounded-button" value="SUBSCRIBE" type="button" >
</form>
</div>
<!--End of Newsletter div-->
</div>
<!-- End of upper footer -->
<!-- Start of lower footer -->
<div id="lower-footer">
<div id="copyrights">
2013 Boulevar Mall. All rights reserved.
</div>
<div id="social">Follow us </div>
</div>
<!--End of lower footer -->
And here's my css:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#footer
{
height:100px;
font-family: 'Droid Sans', sans-serif;
text-transform:capitalize;
font-size:14px;
}
/*css for upper footer */
#upper-footer
{
height:70%;
background-color:#efe7e1;
}
#upper-footer #newsletter
{
float:right;
height: 100%;
display: table;
}
#upper-footer ul
{
list-style:none;
margin-top: 0px;
float:left;
width:480px;
}
#upper-footer ul li
{
display:inline-block;
height: 100%;
border-left: 1px solid d7cfca;
}
#upper-footer ul li:nth-child(1)
{
border-left:none;
}
#upper-footer ul li a
{
line-height:200%;
text-decoration:none;
color:#9b907c;
display:block;
line-height:70px;
padding-left:15px;
padding-right:15px;
width: 100%;
}
#upper-footer #newsletter span
{
color:#726753;
width:150px;
display: table-cell;
vertical-align: middle;
}
#upper-footer #newsletter form
{
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
/*for rounded text box */
input.rounded
{
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:26px;
width:163px;
text-align:center;
}
/*for rounded button */
input.rounded-button
{
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:29px;
width:80px;
background-color:#726753;
color: white;
font-weight: bold;
}
input.rounded-button:hover
{
background-color:white;
border:#726753 solid 1px;
color:#726753
}
/*css for lower footer */
#lower-footer
{
background-color:#726753;
height:30%;
color:white;
}
#lower-footer #copyrights
{
float:left;
}
#lower-footer #social
{
float:right;
}
Your're free to point out my mistakes as I am very new to this stuff :)
Thanks in advance!
It is the margin on #upper-footer ul that's not letting your #copyrights float to the extreme left. Try replacing #upper-footer ul rule with following
#upper-footer ul
{
list-style:none;
margin: 0;
float:left;
width:480px;
}
it sets all margins for #upper-footer ul to zero instead of only margin-top.
Update
As the margin of the #upper-footer ul element is overflowing out of its parent, #upper-footer, setting overflow: hidden for #upper-footer will also do the trick.
ALL COMPONENTS ARE DISPLAYED OK. BUT WHEN I PRESS F12 AND HOVER OVER NAVBAR-LEFT, it's height is that of 0px. I think I need to solve this by placing a small div with class clear somewhere, but I don't know where exactly!
<div class="core-container">
<div class="core-content">
<div class="navbar">
<div class="navbar-left">
<div class="navbar-logo">
LOGO
</div>
<div class="navbar-suggestions">
SUGGESTIONS
</div>
<div class="navbar-notifications">
NOTIFICATIONS
</div>
<div class="clear">
</div>
</div>
<div class="navbar-right">
<ul>
<li>Profiles & Schedules</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
css code:
/MASTER PAGE/
.core-container
{
margin-top: 100px;
border: 1px solid black;
}
.core-content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px 10px 20px;
}
.navbar
{
border: 1px solid red;
padding: 10px 5px 10px 5px;
}
.navbar-right div
{
float: right;
}
.navbar-left div
{
border-right: 1px solid red;
float: left;
padding-right: 10px;
margin-right: 10px;
}
.navbar-right ul li
{
list-style-type: none;
float: right;
padding-left: 10px;
margin-left: 10px;
border-left: 1px solid red;
}
.clear
{
clear: both;
}
Yes, everything in your navbar-left is floating, so its height remains 0. But is that a problem? It looks good on the screen!
Anyway, the quick answer is to append float:none to the style for the clear class. Make sure you make it specific enough to override the styles for .navbar-left div and navbar-right div though, like this:
.navbar-left .clear, .navbar-right .clear
{
clear: both;
float:none;
}
Reason is that your clear DIV also have float on it because you define class like this:
.navbar-right div
{
float: right;
}
write like this:
.navbar-right .clear
{
float: none;
}
I have searched google, but I didn't find anything. I searched this site and found this topic Unwanted space between divs which seems similar, and i have tried to apply
margin:0px;
several places, but there i still, space between the two divs.
Heres my html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title/title>
<link rel="stylesheet" type="text/css" href="e.css">
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<div id="usr">
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
And my Css
html {
height: 98%;
}
body {
height:99%;
}
#page {
height:99%;
}
#content {
/*border:2px solid blue;*/
}
#bottom {
border:2px solid green;
height:15%;
vertical-align: bottom;
}
#up {
/*border:dotted green 2px;*/
width:59%;
}
.usrcom {
border-bottom: 2px dotted blue;
margin-left:15px;
margin-right:15px;
}
#usrp {
width:100%;
clear:both;
border-right: 2px solid blue;
border-left: 2px solid blue;
border-bottom:2px solid blue;
border:dotted yellow 2px;
}
/***Tabs menu*****/
#tabmenu {
float:left;
width:685px;
/*background:#BBD9EE;*/
/*background:#FF6633;*/
font-size:93%;
line-height:normal;
margin-top: 0px;
margin-left: 0px;
/*border:dotted red 2px;*/
border-bottom:2px solid blue;
/*border:dotted red 2px;*/
}
#tabmenu ul {
/*background:#BBD9EE;*/
padding:0px 0px 0 0px;
margin:0px;
list-style:none;
border:dotted green 2px;
}
#tabmenu li {
display:inline;
padding:0;
margin:0px;
}
#tabmenu a {
float:left;
/*background:url("img/tableft2.png") no-repeat left top;*/
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabmenu a:hover span {
background-color:#3399FF;
margin:0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#tabmenu a span {
float:left;
display:block;
/*background:url("img/tabright2.png") no-repeat right top;*/
padding:5px 15px 4px 5.5px;
margin:0px;
color:#FFFFFF;
background-color:#0000FF;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
I can find out why the space happens, how can I solve this unwanted space.
Edit:
Ups, yearh, forgot to tell which divs,
It is between 'Tabmenu' and 'usrp'
Edit:
Tried to apply in my css
#tab {
margin: 0px;
padding:0px;
}
For it is in really between 'tab' and 'usrp' but that does no help.
In CSS:
#tabmenu {
margin:0;
}
should do the trick
Learn how to use an inspector and "inspect this element". Then you can hover over all the elements on your page and literally see their margins/paddings, and what CSS is causing them. You can even edit CSS on-the-fly to test out a fix before applying it. My preference is the Firebug add-on for Firefox, but Chrome, Safari, and even Internet Explorer all have them built in now.