I have a dropdown list menu with small triangle pointer, when I hover the first item I want the small triangle also change to black color.
This is my JS Fiddle, Thanks.
CSS
.username .messages {
position:absolute;
margin:22px 0px 0px -70px;
width:200px;
max-height:auto;
color:black;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.username .messages:before {
content:'.';
display:block;
position:absolute;
margin-left:-10px;
left:50%;
top:-18px;
width:0;
height:0;
border:10px solid black;
color:black;
border-color:transparent transparent #fff;
}
Place the arrow as the before pseudoelement of the first link
Example fiddle: http://jsfiddle.net/ebcho06a/5/
.messages a:first-child:before {
content:'';
display:block;
position:absolute;
margin-left:-10px;
left:50%;
top:-20px;
width:0;
height:0;
border:10px solid black;
color:black;
border-color:transparent transparent #fff;
}
.messages a:first-child:hover:before {
border-color:transparent transparent #000;
}
Effect on mouseover
I have my nav inside the header. I have an image in the corner and want the navigation links, which I made as buttons, on the right, but higher up within the white box. I had a problem with the header not resizing when i shrunk the page but I fixed that, but now the buttons are off the header. They also do not resize when I shrink the page. Help is greatly appreciated. Thanks. The url is http://tolitakeover.com
Here is html:
<header>
<nav>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>TBD</li>
<li>Affiliates</li>
<li>Events</li>
</ul>
</nav>
</header>
Here is css:
nav{
background:url('http://tolitakeover.com/images/toliheader.fw.png');
background-size: 40% 100%;
margin-left: 5%;
width: 90%;
height: 100%;
background-repeat: no-repeat;
background-color:white;
}
nav ul{
padding-top:20%;
padding-right:3%;
height:60%;
}
nav li{
display:inline;
float:right;
padding-right:1%;
padding-top:-50px;
}
nav ul li a,
nav ul li a:visited{
background-color: white;
color: black;
display:block;
}
nav ul li a:hover{
text-decoration:none;
background-color:white;
color:black;
}
.button {
display: inline-block;
text-decoration: none;
color: black;
font-weight: bold;
background-color: lightgray;
padding: 5px 20px;
margin-left:3%;
margin-right:3%;
font-size: 1.15em;
border: 1px solid red;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0px -1px 0px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
-moz-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);}
You have a lot going on.
Question, where did you get this stylesheet from? It is bad news for what you're trying to do. I wouldn't even know where to begin to explain this...
I recommend you start from scratch w/ a nice clean responsive template such as this:
http://www.initializr.com/
When you say 're-size' page do you mean when it degrades to mobile or tablet? You have no rules for this in your CSS.
Also, looking at your CSS I recommend you give this a read: http://css-tricks.com/the-difference-between-id-and-class/
If you're going to go that route, you would use "clearfix" instead, clearing the nav class from the header?
He should ideally have three classes up there, something like: #menu #container clearfix #navigation This would allow him to also control his logo too, as right now it's in the #nav.
On this image I labeled in red #container1 and its child #container2. #container2 has three column divs labeled in blue.
I took this snapshot in the moment both containers were not expanded because of delayed load of external apps (addThis, Facebook, Adsense). After that both containers expand as expected. Anyway, I always see pictures (col2) and col1 displaying before #container2 is expanded. (fraction of a second delay but it exists)
#container1{
text-align:center;
width:926px;
padding:15px; margin-left:12px;
margin-bottom:10px;
border:thin solid #999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
box-shadow: inset 0 0 15px #CCC;
-moz-box-shadow: inset 0 0 15px #CCC;
-webkit-box-shadow: inset 0 0 15px #CCC;
min-heigt:950px
}
#container2 {
width: 980px;
text-align:left; /* reset text alignment */
margin:0 auto;
position:relative;
background-color:white;
border: thin solid #999;/*#69c7e8;*/
border-top:none;
box-shadow: 0px 5px 8px #CCC, -5px 5px 8px #CCC, 5px 5px 8px #CCC;
-moz-box-shadow: 0px 5px 8px #CCC, -5px 5px 8px #CCC, 5px 5px 8px #CCC;
-webkit-box-shadow: 0px 5px 8px #CCC, -5px 5px 8px #CCC, 5px 5px 8px #CCC;
min-height:1000px;
}
#col_1{
float:left;
width:200px;
margin-left:0;
text-align:left;
}
#col_2{
float:left;
width:566px;
text-align:left;
}
#col_3{
float:right;
width:160px;
margin-right:0;
text-align:left; }
As you can see in the picture #container1 expands immediately to its min-height value while #container2 does not.
Anyway I don't like this patch using min-height.
Is it possible to expand both containers at the same time contents are displayed?
I have a drop down menu showed here http://jsfiddle.net/aRzUM/3/
The issue is the background of the supp menu register which is grey, doesn't work correctly. Could you please tell me what I'm doing wrong here ?
Thanks in advance.
You need to reset the height of your li for the sub menu. It is inheriting the following set of rules.
#header .auth-row ul li {
display: block;
float: left;
height: 39px;
list-style: none outside none;
}
Add this rule to reset the height:
#header .auth-row ul li li {
height:auto;
}
Remove the background, border, and shadow rules from the ul and apply it instead to the form itself.
#btn-login form {
background: #ddd url(img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
DEMO
Is there a way to make the border bigger than the div that it's attached to? For example, if the div dimensions were 10x10, could I make the border 20x10?
Yes you can:- check this link - http://jsfiddle.net/QnTqh/2/
div{
width:100px;
height:100px;
border:1px solid red;
border-width:200px 200px 10px 10px;
}
You can use the following to control each side independently:
border-top: 10px solid #000;
border-right: 20px solid #000;
border-bottom: 10px solid #000;
border-left: 20px solid #000;
Or make them all the same:
border: 20px solid #000;