Im trying to make a couple of hexagons in css /html to resemble something like this:
http://www.asta-uk.com/sites/all/themes/asta/logo.png
now i have made one hexagon, and tried to copy it two other times but the top part doesn't seem to show on the second two.
any ideas why?
PS use IE, reason being it will only ever be used in an IE environment.
<html>
<HEAD>
<STYLE>
.top
{
height:0;
width:50;
display: block;
border:15px solid red;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:red;
border-left-color:transparent;
}
.middle
{
height: 20px;
background: red;
width: 50px;
display: block;
}
.bottom
{
height:0;
width:50;
display: block;
border:15px solid red;
border-top-color:red;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<!-- Second Hex-->
.top2
{
height:0;
width:50;
display: block;
border: 15px solid black;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:black;
border-left-color:transparent;
}
.middle2
{
height: 20px;
background: black;
width: 50px;
display: block;
}
.bottom2
{
height:0;
width:50;
display: block;
border:15px solid black;
border-top-color:black;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<!--hex 3-->
.top3
{
height:0;
width:50;
display: block;
border:15px solid green;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:green;
border-left-color:transparent;
}
.middle3
{
height: 20px;
background: green;
width: 50px;
display: block;
}
.bottom3
{
height:0;
width:50;
display: block;
border:15px solid green;
border-top-color:green;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
</STYLE>
</HEAD>
<BODY>
<div class="hexagon"style="position: absolute; top: 0px; left: 2px;">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<!-- GREEN-->
<div class="hexagon3" style="position: absolute; top: 48px; left: 55px;">
<span class="top3"></span>
<span class="middle3"></span>
<span class="bottom3"></span>
</div>
<!-- black-->
<div class="hexagon2" style="position: absolute; top: 120px; left: 40px;">
<span class="top2"></span>
<span class="middle2"></span>
<span class="bottom2"></span>
</div>
</BODY
</html>
Remove your comment from the css
like <!-- Second Hex--> and <!--hex 3-->
they are buggy.
These comments are meant to be in HTML only not for css
for css use this syntax --> /* A comment */
You have typo in width:50; Add px so it should be width:50px; for .top, .top2, .top3
Related
Here is the schema I'd like to have http://imgur.com/0CwOpVG
<div class='yellow/brown'>
<div class='green'>Some sentence</div>
<div class='blue_wrapper'>
<a>
<img src="" class="blue1">
</a>
<a>
<img class="blue2" src="">
</a>
</div>
</div>
Right now the whole set is as brown, but I want it to be like yellow. Here is the css:
.blue_wrapper{
position: relative; top: 0px; letter-spacing: 1px;
}
.yellow/brown{
border-bottom: 1px solid blacK;
padding: 20px;
}
.green{
letter-spacing: 0;
padding: 5px;
display:inline-block;
position: relative;
width: 100%;
}
.blue1, .blue2{
display: block;
float: right;
margin-bottom: 12px;
vertical-align: text-top;
width: 1.5vw;
}
I've tried this many times but always failed. Does anyone have any idea how? Thank you very much for your help...
You could approach it like this:
.wrap {
display: table;
table-layout:
fixed; width: 100%;
}
.images{
width: 20px;
}
.content, .images {
display: table-cell;
vertical-align: middle;
}
<div class='wrap'>
<div class='content'>Some sentence</div>
<div class='images'>
<a>
<img src="https://unsplash.it/20/20">
</a>
<a>
<img src="https://unsplash.it/20/20">
</a>
</div>
</div>
If I understand you correctly, you want your code to reflect the top image of the two in your link. The code is in the link below. It's rather simple. But I do want to warn you that the / operator is not a valid class naming (I forgot the word for that).
.green{
width:500px;
margin:0 auto;
}
.yellow{
letter-spacing: 0;
float:left;
padding: 5px;
display:inline-block;
position: relative;
width: 70%;
border:2px solid orange;
border-radius:10px;
}
.blue_wrapper{
float:left;
}
.blue1{
display: block;
vertical-align: text-top;
}
.blue2{
display: block;
vertical-align: text-top;
transform: rotate(180deg);
}
Here is your DEMO
I have searched a lot for this, I can not find an answer.
I want the div SubTopicInfo1 to appear when hovering over the div subTopicNav1. I need it to be only CSS.
Here is what I have:
Fiddle
HTML:
<div id="NavBar">
<div id="Mainbutton">
<center><h2 style="margin-top: 7px;"> Main </h2></center>
</div>
<div id="topic1button">
<center><h2 style="margin-top: 7px;"> Skiing </h2></center>
</div>
<div id="topic2button">
<center><h2 style="margin-top: 12px;"> Movies </h2></center>
</div>
</div>
<div id="Main">
<div id="IntroImage">
</div>
<div id="Title">
<h2 id="Titlemain"> TYLER POTTS</h2>
</div>
<div id="SubTopicNav">
<div id="subTopicNav1">
<center><h2>About Me</h2></center>
</div>
<div id="subTopicNav2">
<center><h2>Skiing</h2></center>
</div>
<div id="subTopicNav3">
<center><h2>Movies</h2></center>
</div>
</div>
<div id="SubTopicInfo">
<div id="SubTopicInfo1">
<h1> Test </h1>
</div>
<div id="SubTopicInfo2">
</div>
<div id="SubTopicInfo3">
</div>
</div>
<div id="Footer">
</div>
</div>
CSS:
#NavBar
{
width: 750px;
height: 40px;
background-color: white;
margin: 0 auto;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
}
#topic2button
{
width: 100px;
height: 45px;
margin-top:-50px;
margin-left: 215px;
float:left;
}
#topic2button:hover
{
background-color: #FFD640;
}
#Mainbutton
{
width: 100px;
height: 45px;
margin-top:;
margin-left: 315px;
float:left;
}
#Mainbutton:hover
{
background-color: #FFD640;
}
#topic1button
{
width: 100px;
height: 45px;
float: left;
}
#topic1button:hover
{
background-color: #FFD640;
}
#Main
{
width: 750px;
height: 1000px;
margin: 0 auto;
background-color: white;
}
#IntroImage
{
width: 750px;
height: 150px;
background-image:url("http://skiersedgeproshop.com/wp/wp-content/uploads/2013/11/snow-mountain-ski1.jpg")
}
#IntroImage:hover
{
opacity: 0.8;
}
#Title
{
width: 500px;
height: 40px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin:0 auto;
margin-top: 10px;
}
#Titlemain
{
margin-left: 170px;
margin-top: 6px;
}
#SubTopicNav
{
width: 150px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float:left;
}
#subTopicNav1
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav2
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav3
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav1:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav2:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav3:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#SubTopicInfo
{
width: 600px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float: left;
}
#SubTopicInfo1
{
display:none;
background-color: #FFD640;
}
#subTopicNav1:hover + #SubTopicInfo1
{
display: block;
}
Thanks.
You wont be able to do so with just CSS in your situation.
#subTopicNav1:hover + #SubTopicInfo1 {}
Works if #SubTopicInfi1 is next to (after #subTopicInfo1 closing tag) the container.
explained here:
How to affect other elements when a div is hovered
So you probably should look into a solution with Jquery/javascript!
Please try something like this:
(Hide the extra info panel by default, then make it visible on :hover like below)
<style>
.link {
display: block;
}
.link:hover p{
visibility: visible;
}
.info{
visibility: hidden;
}
</style>
<body>
<div class="link">
Text Here
<p class="info"> Info Here</p>
</div>
</body>
Here is the working Demo http://jsfiddle.net/H9fGP/1/
maybe its not the exact example. but I hope it helps :)
the main thing is that the sub info has absolute position
I rearanged the html and added some css.
.container
{
border-top: 5px solid #FFD640;
margin-top: 25px;
}
#SubTopicNav
{
position:relative;
}
#SubTopicNav > div > div
{
position:absolute;
left:200px;
top:0px;
display:none;
width: 600px;
height: 400px;
margin-top: 25px;
float: left;
}
#SubTopicInfo
{
display:none;
background-color: #FFD640;
}
#SubTopicNav > div:hover >div
{
display: block;
}
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;
}
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.