fiddle should explain the issue, but cannot see what I’m doing wrong here
here is the code:
body {
background-color: #ededed;
}
#social{
position: fixed;
top: 50px;
left: 50px;
border: thin solid #ff6600;
}
#social .facebook a {
width: 60px;
height: 60px !important;
background-color: #000000;
border: thin solid #00ff00;
}
#social .facebook a:hover {
width: 60px;
height: 60px !important;
background-color: #3B5998;
}
<style>
</head>
<body>
<div id="social">
<div class="facebook">
<a href="#">
<img src="http://poststudio.co.uk/louisbrennan/facebook.png"
width="60" height="60"/>
</a>
</div>
</div>
</body>
http://jsfiddle.net/misemefein/McmAQ/
any thoughts appreciated
Add display: block; to #social .facebook a so that it occupies the full height of its container
Example: http://jsfiddle.net/Adrift/McmAQ/4/
Related
Please check this image link :
http://postimg.org/image/4iooctxxt/
As you can see, I pointed out the 3 navigation breadcrumb.
How I am able to obtain this with CSS/CSS3 and HTML. How can this be done? If it's possible, how can it be done with a background image.
Try this HTML and CSS:
<html>
<head>
<style>
body
{
margin: auto;
}
#one, #two, #three
{
position: relative;
width: 200px;
height: 40px;
float: left;
background-color: #E6E6E6;
cursor: pointer;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#one
{
border-left: 1px solid gray;
}
#one:after, #two:after, #three:after
{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #E6E6E6;
left: 100%;
top: 0px;
content: "";
z-index: 1;
}
#one:hover, #two:hover, #three:hover
{
background-color: #4DB84D;
}
#one:hover:after, #two:hover:after, #three:hover:after
{
border-left: 10px solid #4DB84D;
}
#circle, #text
{
float: left;
}
#circle
{
position: relative;
background-color: white;
color: black;
border-radius: 50%;
width: 21px;
height: 21px;
left: 15px;
top: 50%;
margin-top: -12px;
text-align: center;
border: 1px solid gray;
}
#text
{
position: relative;
left: 20px;
top: 50%;
color: black;
margin-top: -11px;
}
#one:hover #circle, #two:hover #circle, #three:hover #circle
{
background-color: #009900;
color: white;
}
#one:hover #text, #two:hover #text, #three:hover #text
{
color: black;
}
#navigation
{
padding: 40px;
position: absolute;
text-align: center;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 10px black;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="navigation">
<div id="one">
<div id="circle">
<b>1</b>
</div>
<div id="text">
Connect with Facebook
</div>
</div>
<div id="two">
<div id="circle">
<b>2</b>
</div>
<div id="text">
Invite friends
</div>
</div>
<div id="three">
<div id="circle">
<b>3</b>
</div>
<div id="text">
Complete Profile
</div>
</div>
</div>
</body>
</html>
You can copy and paste this to see what happens in a new html document.
You can, of course, modify it to your needs.
EDIT: This is now a full template. To see, create a new html document, copy and paste the code, and open it.
include bootstrap file to your code. example:
<ol class="breadcrumb">
<li>Home</li>
<li>Library</li>
<li class="active">Data</li>
</ol>
it will create breadcrumb
I have a problem concerning three divs in the header of my website: http://www.pianoson.nl.
What I want:
The middlemenu needs to fill up the space between the left and the right menu. When you make the browser smaller, only the middle-menu should get smaller too.
The middle menu needs to have a minimum width, so the text in it does not get messed up.
At the moment the rightmenu drops down below the leftmenu at some point, but the three menu's should always stay together in the top.
I hope this is possible with css/html.
Thanks in advance!
The html-page:
<body>
<div id="menu">
<div id="leftmenu">
<a href="http://www.pianoson.nl">
<div class="key white"ID="home">
<img src="http://www.pianoson.nl/images/home_32.png"></img>
</div></a>
<div class="key black"ID="Csharp"></div>
<a href="http://www.pianoson.nl/genres.htm">
<div class="key white"ID="repertoire">
<img src="http://www.pianoson.nl/images/music2_32.png"></img>
</div></a>
<div class="key black"ID="Dsharp"></div>
<a href="http://www.pianoson.nl/samples.htm">
<div class="key white "ID="samples">
<img src="http://www.pianoson.nl/images/music_32.png"></img>
</div></a></div>
<div ID="middlemenu"></div>
<div id="rightmenu">
<a href="https://www.linkedin.com/e/fpf/184174635">
<div class="key white "ID="linkedin">
<img src="http://www.pianoson.nl/images/linkedin_32.png"></img>
</div></a>
<div class="key black"ID="Csharp"></div>
<a href="https://www.facebook.comthijs.waleson">
<div class="key white"ID="facebook">
<img src="http://www.pianoson.nl/images/facebook_32.png"></img>
</div></a>
<div class="key black"ID="Dsharp"></div>
<a href="https://plus.google.com/u/0/112443072032497378793/">
<div class="key white "ID="googleplus">
<img src="http://www.pianoson.nl/images/google_32.png"></img>
</div></a></div>
</div>
And the css page:
body {
background-color: #F2F2F2;
width: auto;
overflow: hidden;}
div {
display: inline-block;}
#middlemenu {
height: 230px;
float: none;
width: 100%;
border: 1px solid #000000;
position: relative;
border-radius: 5px;
z-index: 1;}
.key {
float: left;
border-radius: 5px;
border: 1px solid #000000;
position: relative;
text-align:center;}
.white {
background-color: #FFFFFF;
height: 230px;
width: 40px;
z-index: 2;}
.black {
background-color: #000000;
height:150px;
width: 24px;
z-index: 3;
margin-left:-15px;
margin-right: -15px;}
.white:hover {
background-color: #FFFFFF;
height: 345px;
width: 60px;
z-index: 1;}
.key:hover img {
position: static;
vertical-align: -335px;
bottom: 5px;
padding: 14px;}
#menu{
width: 100%;
display: inline;
position: relative;}
#leftmenu{
float: left;}
#rightmenu{
float: right;}
div a div img{
vertical-align: -210px;
position: static;
bottom:5px;
color: #000000;}
Is this you are looking for..
modify the css to this
body {
background-color: #F2F2F2;
width: auto;
overflow: hidden;
}
div {
}
#middlemenu {
height: 230px;
margin-left: 130px;
margin-right: 130px;
min-width:300px;
border: 1px solid #000000;
position: relative;
border-radius: 5px;
z-index: 1;
}
#menu {
width: 100%;
position: relative;
}
#leftmenu {
float: left;
}
#rightmenu {
float: right;
position:absolute;
top:0;
right:0;
}
div a div img {
vertical-align: -210px;
position: static;
bottom:5px;
color: #000000;
}
.key {
float: left;
border-radius: 5px;
border: 1px solid #000000;
position: relative;
text-align:center;
}
.white {
background-color: #FFFFFF;
height: 230px;
width: 40px;
z-index: 2;
}
.black {
background-color: #000000;
height:150px;
width: 24px;
z-index: 3;
margin-left:-15px;
margin-right: -15px;
}
.white:hover {
background-color: #FFFFFF;
height: 345px;
width: 60px;
z-index: 1;
}
.key:hover img {
position: static;
vertical-align: -335px;
bottom: 5px;
padding: 14px;
}
I have a container div and 2 div's that should be the same height. #Sidebar div goes on the left where as #Content div should be to the right
whenever I add something to Sidebar it pushes down the content Div and am kind of stumped
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/2009_07.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>View Applicants</title>
<style type ="text/css">
li
{
display:inline;
background-color: #c5e8cf;
}
a.menu:link {color: #2b2f2c;}
a.menu:visited {color: #2b2f2c;}
a.menu:hover {background-color: #dde504;}
a.side { border-bottom: 2px solid black;
background-color: #e3e7ec;
}
a.side:link {color: #2b2f2c;}
a.side:visited {color: #2b2f2c;}
a.side:hover {background-color: #dde504;}
label.side {width: 131px;
display:inline-block;
font-size: 20px;
background-color: #e3e7ec;
border-bottom: 2px solid black;
padding-bottom: 20px;
}
label.side:hover { background-color: #dde504;}
div#header {
position: float;
background-image: url("../images/header.jpg");
background-repeat: no-repeat;
border-bottom: solid 1px #999999;
height: 97px;
Width: 1000px;
margin-left: 114px;
margin-top: 10px;
background-size: 100%;
}
div#menu {
position: float;
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-left: 115px;
padding-top:5px;
background-color: #e3f6ea;
}
#menu-content {
margin: auto;
width:100%;
background-color: #c5e8cf;
}
div#container{
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-top:3px;
margin-left:115px;
height: auto;
overflow: hidden;
}
div#sidebar {
position: relative;
border:2px solid #999999;
Width: 131px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: #c5cfd9;
overflow: hidden;
}
div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
}
div#footer { position: relative;
border: solid 2px #999999;
width: 996px;
height: 50px;
background-color: #FFFFFF;
margin-left: 115px;
}
#body { background-color: #6b86a3;}
</style>
</head>
<body id = "body" >
<div id="header"> </div>
<div id = "menu">
<div id="menu-content">
<ul>
<li style="margin-left:275px;" class="link"><a class="menu" href="/index.php" >Home</a></li>
<li ><a class="menu" href="/images/header/jpeg" >View Applicant</a>
</li>
<li><a class="menu" href="../images/header.jpg">View Applicants</a></li>
</ul>
</div>
</div>
<div id="container" >
<div id="sidebar">
<a class="side" href="#"><label class = "side"> Testing sidebar </label></a>
<a class="side" href="#"><label class = "side"> Testing sidebar </label></a>
</div>
<div id="content">
</div>
</div>
<div id ="footer"> </div>
</body>
</html>
slightly new to css. Thank you
This would be more common of what you want to achieve:
CSS
#container {
border: solid 1px #999999;
border-top: none;
width: 998px;
margin-top: 3px;
margin-left: 115px;
}
#sidebar {
float: left;
width: 131px;
border: 2px solid #999999;
}
#content {
float: left;
width: 131px;
border-left: 1px solid #999999;
}
.floatClear {
clear: both;
}
HTML
<html>
<head>
<title>Page</title>
</head>
<body>
<div id="container">
<div id="sidebar">
Text
</div>
<div id="content">
Text
</div>
<div class="floatClear"></div>
</div>
</body>
</html>
What practically happens here is you line up two left floating <div>'s and use a float: clear; to rule out that block-type <div>'s wrap to a newline. They will only wrap upon each other if both their widths (including padding/margin/border(left/right)) will be a bigger sum than the #container it's width.
By adding more margin-left to the #content CSS you can put it anywhere you want, as long as there is space to contain it together with the #sidebar div.
Little Extra
To avoid the classical styling where padding/border make the width of your <div> even wider, you can use the newer box-sizing feature, where all padding and border width will be pushed to the inside, instead of making the box bigger than you specified in your CSS stylesheet:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
Demo Fiddle
float: top; is wrong;
float can be only left or right;
add float:right; to your sidebar and float:left; to your container
div#sidebar {
position: relative;
border:2px solid #999999;
Width: 131px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: #c5cfd9;
overflow: hidden;
float:right;
}
div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
float:left;
}
Learn Css
The max-height CSS Property should do the job.
set the max-height for both #Sidebar and #Content with equal value.
and you can add the overflow:scroll if you are expecting any of them to grow height than the max-height.
I have created a grid with div boxes on http://jsfiddle.net/TsRJy/.
The problem
I don't know how to make the a:hover work.
Info
Rewrite the HTML code as a table is not an option for me.
http://www.normann-copenhagen.com/Products succeded with this issue.
I prefer CSS before Javascript.
HTML (in case jsfiddle don't work)
<div class="container">
<div class="grid">
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
</div>
</div>
CSS
.container {
margin: 0 auto;
width: 500px;
}
.item {
border: 1px solid #ccc;
float: left;
margin: 0 -1px -1px 0;
}
.item a {
display: block;
height: 100px;
width: 100px;
background: #f5f5f5;
}
.item a:hover {
border: 1px solid black;
}
You can use box-sizing property for this. Write like this:
.item a:hover {
border: 1px solid black;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/TsRJy/1/
try this one,just minor change in css
.container {
margin: 0 auto;
width: 500px;
}
.item { float: left; }
.item a {
display: block;
height: 99px;
width: 99px;
background: #f5f5f5;
border: solid 1px #d6d6d6;
border-width: 0 1px 1px 0;
}
.item a:hover {
border: solid 1px #f00;
margin: -1px 0 0 -1px;
}
http://jsfiddle.net/GtR3P/
for more accurate result try this one also hope this one solve your issue
.container {
margin: 0 auto;
width: 506px;
}
.item { float: left; }
.item a {
display: block;
height: 100px;
width: 100px;
background: #f5f5f5;
border: solid 1px #d6d6d6;
border-width: 0 1px 1px 0;
}
.item a:hover {
border: solid 1px #f00;
margin: -1px 0 0 -1px;
}
.grid .item:nth-child(5n+1) a { border-left-width:1px; }
.grid .item:nth-child(5n+1) a:hover { margin:-1px 0 0 0; }
Since you have put border, the hover effect is not working properly.
.item a:hover {
box-shadow: 2px 2px 2px #333;
background-color:Teal
}
Look at this fiddle
Also here is a useful link
Also another way to go, it's to set border-color the same color as the box's background-color and change it to black on hover:
.item a {
display: block;
height: 100px;
width: 100px;
background: #f5f5f5;
border: 1px solid #f5f5f5;
}
.item a:hover {
border-color: black;
}
Demo: http://jsfiddle.net/TrXT9/1/
I see your wrapper has a width of 500px. If you make a div with a width of 100px, a border of 1px and a margin-right of -1px, the div is still 101px.
box-sizing:border-box is a beautiful way to solve this problem, but it is not supported in IE7
If you want IE7-support, you need to adjust your width and height like this:
http://jsfiddle.net/TsRJy/5/
Can anyone see why this isnt working? For this example the box should turn white when hovered over.
<style type="text/css" media="screen">
.center {
margin: 0 auto;
}
.box {
width: 250px;
height: 250px;
display: block;
background: #000;
border: 1px solid white;
float: left
}
.inner {
width: 175px;
height: 175px;
display: block;
margin-top: 15%;
margin-left: 15%;
background: #fff;
position: relative
}
.boxLink {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
width: 100%;
text-align: center;
line-height: 175px;
font-size: 30px
}
a:link.boxLink {
color:#000;
background: yellow
}
a:visited.boxLink {
color:#000;
background: yellow
}
a:hover.boxlink {
color:#fff;
background: white
}
a:active.boxLink {
color:#000;
background: green
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="inner">
<a class="boxLink" href="#">about</a>
</div>
</div>
</div>
You need to put the class name before :hover:
a.boxLink:link{color:#000; background: yellow}
a.boxLink:visited{color:#000; background: yellow}
a.boxLink:hover {color:#fff; background: white}
a.boxLink:active {color:#000; background: green}
While my suggestion is good practice, you actually made a spelling error on that hover line:
a.boxlink:hover {color:#fff; background: white}
CSS is case-sensitive, you need to make that l uppercase.