I want to be able to hover a link and not have the top border from the link below show up.
If you check out the fiddle you will see what I mean. Any help on this would be greatly appreciated. Thank you =)
http://jsfiddle.net/p0wt9q6w/
Here is my CSS code:
#homeMenu {background:#d7d7d7;; position:relative; height:400px; top:20px;}
#homeMenu a {
display:block;
color:#5d5d5d;
font:14px Arial, Helvetica, sans-serif;
padding: 20px 0;
border-top: 1px solid #fff;
border-bottom:1px solid #d7d7d7;
text-indent:15px;
text-decoration:none;
box-sizing:border-box;
}
#homeMenu a:hover {background: #fff; color:#00694f; border-top:1px solid #00694f; border-bottom: 1px solid #00694f;}
#homeMenu a:first-child {border-top:1px solid #d7d7d7;}
#homeMenu a:first-child:hover {border-top:1px solid #00694f;}
#homeMenu a.active {background: #fff; color:#00694f; border-top:1px solid #00694f; border-bottom: 1px solid #00694f;}
#homeMenu span {position:absolute; right:15px;}
Here is my HTML:
<div id="homeMenu">
What is a credit union <span>></span>
Open an Account <span>></span>
Calculators <span>></span>
News and Events <span>></span>
Online Payments <span>></span>
Online Appointments <span>></span>
</div><!--homeMenu close-->
Related
<html>
<head>
<style type="text/css">
#wholeborder{
background-color : #f2f2f2;
border-radius:5px;
border:1px solid #222;
resize:both;
width:700px;
height:320px;
overflow:auto;
}
#navigatorForLinkedIN{
height:70px;
}
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px;
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
ul#breadcrumbs li{
float:left;
background:;
height:30px;
padding:0 23px 0 10px;
text-align:center;
text-decoration:none;
text-color:#7a7a7a;
line-height:32px;
}
ul#breadcrumbs li.active{
background:url(../images/greenNav.png)no-repeat right;
color:#fff;
}
ul#breadcrumbs li a{
display:block;
text-decoration:none;
color:#2d2d2d;
line-height:32px;
text-shadow:0 0 1px #222;
}
ul#breadcrumbs li a:hover{
color:#000000;
background: url(../images/greenNav.png);
}
</style>
</head>
<body>
<div class="wholeborder" id="wholeborder">
<div class="navigatorForLinkedIN" id="navigatorForLinkedIN">
<ul id="breadcrumbs">
<li class="active">Connect with LinkedIn</li>
<li>Invite Friends</li>
<li>Complete Profile</li><a href="">
</a></ul><a href="">
</a></div><a href="">
</a><div class="linkedInLoginBox"><a href="">
<div class="head">
Discover contacts that can help you land your next job
</div>
</a><div class="body"><a href="">
</a><a class="sn-in" href="" title="Sign into LinkedIn" id="sn-lk-sign" rel="nofollow"><span class="sn-in-sign-span">Sign into LinkedIn</span></a>
<div class="disclaimer">
All information and activity will be kept private. Learn More
</div>
</div>
</div>
</div>
</body>
</html>
This is my html page
the margin is 100px, thats whats pushing it down
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px;
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
change the margin in this, 100 is pushing it down, you can use stuff like.
margin-top:;
margin-left:;
margin-right:;
margin-bottom:;
You have a style on ul#breadcrumbs: margin:100px; You can change it to margin:0 100px 100px.
Still, you may also want to set the body and html containers' margin and padding:
html, body{
margin:0;
padding:0;
}
I updated your fiddle you can check from link.
Updated Code:
/* optional */
margin:10px 100px;
Original one was margin:100px it means 100px from all sides. But 10px 100px means, top/bottom:10px | left/right:100px;
Your Updated Fiddle: http://jsfiddle.net/sLV5h/2/
Check the Js fiddle
http://jsfiddle.net/Ydbre/
Removed margin:100px in ul#breadcrumbs
Like say in the fiddle http://jsfiddle.net/sLV5h/1/ :
The answer was to change
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px; <-------This Line
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
ul#breadcrumbs{
list-style:none;
/* optional */
margin:0px 100px 100px 100px; <----- by this (or something else)
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
( salutation to The Dark Knight )
since they have same rendering engine, this problem shows in both. it works great in IE7/8/9, FF. I'm using chrome 17 and safari 5. here is my whole code. see you can't click both the buttons and the link.(you have to click on the img to show the elements)
<script type="text/javascript">
function showDrop(){
document.getElementById('droplist').style.display="block";
}
function hideDrop(){
document.getElementById('droplist').style.display="none";
}
</script>
<style>
body{
direction:rtl;
}
#droplistImg{
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
padding:3px;
background:#c0c0c0;
float:right;
}
#droplistinfo{
border:1px solid #000000;
position:absolute;
z-index:-1;
left: 0;
top:20px;
background:#c0c0c0;
}
#droplist{
width: 101px;
position: relative;
}
</style>
<div id="droplist" style="position:absolute;display:none;">
<div id="droplistImg" ><img src="images/stats.png"/></div>
<div id="droplistinfo">
<input type="button" value="phone num"/>
<input type="button" value="fax num"/>
<a style="float:left;" href="javascript:hideDrop()">close</a>
</div>
</div>
<img src="images/stats.png" onclick="showDrop()"/>
I knew what's the issue. it's the z-index when I remove it, it works fine. I changed some things and it works great now.
body{
direction:rtl;
}
#droplistImg{
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
padding:3px;
background:#c0c0c0;
float:right;
position:absolute;
z-index:2;
}
#droplistinfo{
border:1px solid #000000;
position:absolute;
left: 0;
top:20px;
background:#c0c0c0;
}
#droplist{
width: 101px;
position: relative;
}
I have implemented a facebook style search suggestion feature for my application . But , I am facing some issues here .
i) Below is the search box and the result div code :
<div align="right" style=" width:300px; float:right; margin-right:30px">
<input type="text" id="searchbox" class="searchbox" maxlength="100" style="color: rgb(170, 170, 170);"> <img src="../../../asset/images/search.png" style="margin:0 0 -5px 2px"><br><br>
<input type="hidden" value="http://www.plus-one-me.com/search/google/interests" id="formurl" name="formUrl">
<div id="display">
</div>
</div>
The search results get displayed within the #display div as below:
<div id="display" style="display: block;">
<div class="display_box" align="left"> Cakephp </div>
<div class="display_box" align="left"> Myspace </div>
<div class="display_box" align="left"> Php </div>
</div>
This is how the page looks before we enter anything in the search area :
Below is what the search results div is doing :
Basically , it brings down the menu in my main content area . So how can I fix this using CSS ?
Below are the styles :
of the menu div in the background (containing the options Home,History and Settings
.menuBar .submenu {
padding:4px 12px 5px 12px;
margin-right:8px;
border:2px solid #EEE;
text-decoration:none;
display:inline-block;
float:left;
font-size:13px;
-moz-border-radius:40px;
border-radius:40px;
-webkit-border-radius:40px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
color:#333;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#765), to(#FFF));
background: -webkit-linear-gradient(#000, #FFF 70%);
background: -moz-linear-gradient(#BBB, #FFF 100%);
background: -ms-linear-gradient(#765, #FFF 70%);
background: -o-linear-gradient(#765, #FFF 1000%);
background: linear-gradient(#765, #FFF 70%);
-pie-background: linear-gradient(#765, #FFF 70%);
}
of my searchbox :
#searchbox {
border: 1px solid #000000;
padding: 3px;
width: 250px;
}
and the display_box for individual results :
.display_box {
border-top: 1px solid #DEDEDE;
font-size: 12px;
height: 30px;
padding: 4px;
}
the drop down menu has to have position:absolute applied to it. This takes it out of the flow of the page so it doesn't affect other elements.
As #Galen suggested, try css:
#display {
position: absolute;
}
You might want to instead have the html thats outputed be something more like
<ul id="display">
<li>result</li>
<li>result</li>
<li>result</li>
</ul>
Which if you did, you would have css along the lines of
#display {
position: absolute;
list-style-type: none; list-style: none;
margin: 0; padding: 0;
}
#display li {
display: block;
border-top: 1px solid #DEDEDE;
font-size: 12px;
height: 30px;
padding: 4px;
}
Need a quick bit of help please, I have knocked up a quick fiddle.
Link Here: http://jsfiddle.net/ozzy/qaN84/
css:
.outer {
width:210px;
height:180px;
padding:10px;
border:1px solid #aaaaaa;
border-radius:3px;
}
.month {
width:40px;
height:40px;
float:left;
margin:5px 5px;
border:1px solid #aaaaaa;
display:inline;
background-color:#efefef;
}
.month h3 {
font-size:16px;
font-weight:bold;
color:#444444;
text-align:center;
vertical-align:middle;
line-height:18px;
margin-top:10px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
text-transform:uppercase;
}
#current {
background-color:#dedede;
border:1px solid #ec008c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(255, 255, 255, 0.5) inset;
}
.month h3:hover {
color:#ec008c;
cursor:pointer;
}
.gallLink {
float:right;
margin-right:10px;
}
.gallLink a{
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
font-weight:normal;
text-decoration:none;
text-transform:uppercase;
font-size:12px;
color:#3399ff;
}
.gallLink a:hover{
color:#ec008c;
border-bottom:1px dotted #ec008c;
}
html:
<div class="outer">
<div class="month"><h3>jan</h3></div>
<div class="month"><h3>feb</h3></div>
<div class="month"><h3>mar</h3></div>
<div class="month"><h3>apr</h3></div>
<div class="month"><h3>may</h3></div>
<div class="month"><h3>jun</h3></div>
<div class="month" id="current"><h3>jul</h3></div>
<div class="month"><h3>aug</h3></div>
<div class="month"><h3>sep</h3></div>
<div class="month"><h3>oct</h3></div>
<div class="month"><h3>nov</h3></div>
<div class="month"><h3>dec</h3></div>
<div class="gallLink">View Gallery</div>
What I want is whan user hovers onto one of the month squares, the hover effect kicks in. At the moment it only has effect when I hover over the text.
Also am I coding this the most efficient way possible? with regard to Highlighting current month ?
Or is there a better way.
Any help appreciated
Is this what you are looking for?
http://jsfiddle.net/qaN84/2/
.month:hover h3 {
color:#ec008c;
cursor:pointer;
}
You may also want to add:
.month:hover{
cursor:pointer;
}
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.