Can someone please help me with the rollover states on this Instagram feed?
http://www.christielakekids.com/gala2015/
I can't figure out why they are showing below the images in the very bottom row.
.image_block div:hover .rollover { bottom:0px; transition:all ease-in-out 0.5s;}
.rollover { width:100%; height:100%; background-color:rgba(92, 112, 163, 0.9); position:absolute; bottom:-100%; left:0px; display:block;}
.roll_content a { display:block; font-family: 'GothamBookRegular'; color:#FFF; font-size:25px; text-decoration: none;}
.roll_content p { margin-top: 20px; font-family: 'GothamBookRegular'; font-size:25px; color:#FFF; line-height:30px; text-align:center; padding:3% 10% 0 10%;}
Related
so at first i was just doing a section and aside, with footer at bottom. no problem, they were where i wanted, now i want to add another
so i want the yellow bit which is the article to be centered below the achievements and favorites section, but above footer. i've been messing around with positions, clear, float, margins and i'm losing my sanity for this assignment that's due next week. So far all i've managed to achieve is either putting it behind or on top of the section and article.
please help.
keep in mind: i have to have a liquid page layout
body{
background:white;
margin:0;
font-family:arial;
margin-left:0;
margin-right:0;
}
#typeAbout{
font-family:'Fira Mono', monospace;
text-align:center;
position:relative;
color:black;
font-size:40px;
margin:0.5%;
width:max-content;/*this is interefering with text alignment for some reason*/
}
#typeAbout::before,
#typeAbout::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#typeAbout::before{
background:white;
animation:typewriter 2s steps(11) 500ms forwards;/*steps stand for letter characters*/
}
#typeAbout::after{
width:0.125em;
background:black;
animation:typewriter 2s steps(11) 500ms forwards, blink 500ms steps(11) infinite;
}
#keyframes typewriter{
to{
left:100%;
}
}
#keyframes blink{
to{
background:transparent;
}
}
.navbar ul{
top:0;
list-style:none;
text-align:center;
background:purple;
margin:0;
margin-top:0;
padding:0.5%;
box-shadow:0 0 40px 0;
}
.navbar li{
display:inline-block;
}
.navbar a{
text-decoration:none;
text-align:center;
color:black;
width:100px;
display:block;
padding:10% 10%;
text-transform:uppercase;
}
.navbar a:hover{
background:lightgray;
}
section{
font-family:'Fira Mono', monospace;
position:absolute;
float:left;
width:28%;
height:50%;
margin-top:1%;
margin-bottom:5%;
margin-left:20%;
padding-left:1%;
background-color:white;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
aside{
float:right;
width:25%;
height:100%;
margin-top:1%;
margin-right:20%;
padding-left:1%;
background-color:lightgray;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
article{
position:inital;
background:yellow;
clear:both;
}
footer{
position: absolute;
bottom:0;
clear:both;
width:100%;
height:10%;
background-color:red;
}
Maybe you can try something like this. You didn't provide all your code so I just made something similar with your code. Let me know
body{
background:white;
margin:0;
font-family:arial;
margin-left:0;
margin-right:0;
}
#typeAbout{
font-family:'Fira Mono', monospace;
text-align:center;
position:relative;
color:black;
font-size:40px;
margin:0.5%;
width:max-content;/*this is interefering with text alignment for some reason*/
}
#typeAbout::before,
#typeAbout::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#typeAbout::before{
background:white;
animation:typewriter 2s steps(11) 500ms forwards;/*steps stand for letter characters*/
}
#typeAbout::after{
width:0.125em;
background:black;
animation:typewriter 2s steps(11) 500ms forwards, blink 500ms steps(11) infinite;
}
#keyframes typewriter{
to{
left:100%;
}
}
#keyframes blink{
to{
background:transparent;
}
}
.navbar ul{
top:0;
list-style:none;
text-align:center;
background:purple;
margin:0;
margin-top:0;
padding:0.5%;
box-shadow:0 0 40px 0;
}
.navbar li{
display:inline-block;
}
.navbar a{
text-decoration:none;
text-align:center;
color:black;
width:100px;
display:block;
padding:10%;
text-transform:uppercase;
}
.navbar a:hover{
background:lightgray;
}
.wrapper{
display: flex;
justify-content: space-evenly;
}
section{
font-family:'Fira Mono', monospace;
width:100%;
height:auto;
margin-top:1%;
margin-bottom:5%;
margin-left:20%;
padding-left:1%;
background-color:white;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
aside{
width:100%;
height:100%;
margin-top:1%;
margin-right:20%;
padding-left:1%;
background-color:lightgray;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
article{
position:inital;
background:yellow;
clear:both;
}
footer{
position: absolute;
bottom:0;
clear:both;
width:100%;
height:10%;
background-color:red;
}
<nav class="navbar">
<ul>
<li>HOME</li>
<li>ORIGIN</li>
<li>ABOUT</li>
<li>STUDY</li>
<li>ANIMATION</li>
</ul>
</nav>
<div class="wrapper">
<div>
<section>This is the achievements</section>
</div>
<div>
<article> This is your article</article>
</div>
<div>
<aside> This is your Favourite</aside>
</div>
</div>
I have a header set up as fixed, so that it will always be at the top of the page when scrolling, however when the browser window is re-sized, the full header doesn't show. It is fixed, but I want the horizontal scroll to show the full header. I just need help in doing that. I tried the alternative position attributes but it failed to accomplish what I wanted, alongside my attempt with float.
Here's the html `
<div id="container">
<header>
<h1>Home</h1>
</header>
<div id="content">
<nav>
<div id="logo">
<img src="Images/Logo.png" >
</div>
<ul>
<li>
<a href="Index.HTML">
<i class="fa fa-HOME fa-2x" id="on"></i> <!--this is using the font awesome icons, reffered to in the head. Multiple divs are used as the websote declared it should be done. Purely used for the icons -->
<span class="nav-text" id="on">
HOME
</span>
</a>
</li>
<li>
<a href="standards&info.HTML">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
STANDARDS & INFORMATION
</span>
</a>
</li>
<li>
<a href="interesting_info.HTML">
<i class="fa fa-magic fa-2x"></i>
<span class="nav-text">
INTERESTING INFORMATION
</span>
</a>
</li>
<li>
<a href="JOBS.HTML">
<i class="fa fa-briefcase fa-2x"></i>
<span class="nav-text">
JOBS
</span>
</a>
</li>
<li>
<a href="photo&video.HTML">
<i class="fa fa-picture-o fa-2x"></i>
<span class="nav-text">
PHOTOS & <BR> VIDEOS
</span>
</a>
</li>
</ul>
</nav>
</div>
<footer>
<h4>© 2015</h4>
</footer>
</div>`
And heres the CSS
#import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
html, body{
height:100%;
width:100%;
background: rgb(110, 110, 110);
padding:0;
margin:0;
min-width:1280px;
}
#container{
width: 100%;
height: 100%;
}
.fa-2x{
font-size:2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
margin-right:10px;
margin-left:10px;
}
nav {
background:rgb(255, 90, 9);
position:fixed;
top:0;
height:calc(100% - 40px);
min-height:600px;
left:0;
width:80px;
overflow:hidden;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);
float:left;
z-index:100;
}
nav:hover{
width:200px;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);;
}
nav li {
position:relative;
display:block;
width:250px;
}
#on{
color:#41A3A3;
}
nav li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
font-size: 14px;
text-decoration:none;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);
transition:all .1s linear;
margin-top: calc(100% / 8);
}
nav .nav-icon {
position:relative;
display: table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.nav-text {
position:relative;
display: table-cell;
vertical-align:middle;
width:180px;
font-family: 'Droid Serif', serif;
font-size:14px;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
header{
position:fixed;
top:0px;
margin-left:80px;
width:100%;
height:113px;
background:rgb(57, 57, 57);
z-index:90;
white-space: nowrap;
}
h1{
font-family: 'Impact', sans-serif;
text-align:center;
font-size:40px;
color:white;
line-height:50px;
padding-left:129px;
}
footer{
position:fixed;
bottom:0px;
right:0px;
width:100%;
height:40px;
background:rgb(57, 57, 57);
line-height:0px;
}
h4{
font-family: 'Impact', sans-serif;
font-size:22px;
color:white;
text-align:center;
padding-right:20px;
}
h2{
text-align:center;
font-family: 'Cuprum', sans-serif;
font-size:50px;
color:#BFBFBF;
}
#content{
height:calc(100% - 160px);
width:100%;
min-width:100%;
top:114px;
}
.twobox{
width:35%;
height:96%;
top:0;
margin-right:4%;
margin-left:6%;
float:left;
}
.title{
background-color:#7E4A00;
height:70px;
margin-bottom:8%;
margin-top:6%;
width:100%:
}
.info{
background-color:#7E4A00;
height:auto;
padding-top:10px;
width:auto%;
padding-left:4%;
padding-right:4%;
overflow:hidden;
text-overflow:ellipsis;
height:500px;
overflow-y:auto;
}
.infojob{
background-color:#7E4A00;
height:auto;
padding-top:10px;
width:auto%;
padding-left:4%;
padding-right:4%;
overflow:hidden;
text-overflow:ellipsis;
height:600px;
overflow-y:auto;
}
hr{
margin-top:40px;
margin-bottom:40px;
opacity: 0.0001;
}
p{
text-align:center;
font-family: 'Times New Roman', serif;
color:#BFBFBF;
font-size:18px;
}
#onebox{
width:40%;
height:96%;
top:0;
float:left;
margin-left:26%;
background-color:#7E4A00;
overflow-y:auto;
}
.threebox{
width:20%;
height:94%;
top:0;
margin-right:4%;
margin-left:6%;
float:left;
}
.row{
display: inline-block;
height:170px;
width:80%;
margin-left:10%;
margin-top:60px;
min-width:1120px;
}
#rows{
display: inline-block;
height:390px;
width:80%;
margin-left:10%;
margin-top:60px;
min-width:1120px;
}
.read_more{
text-align:center;
font-family: 'Times New Roman', serif;
color:#E50000;
font-size:18px;
opacity:0.8;
}
h3{
text-align:center;
font-family: 'Times New Roman', serif;
color:#BFBFBF;
font-size:30px;
}
h5{
font-family: 'Impact', sans-serif;
text-align:center;
font-size:25px;
color:#BFBFBF;
text-align:center;
}
a:link {
color:#efefef;
}
a:visited {
color:#efefef;
}
a:hover {
color:#52CCCC;
}
.boxmore{
width:18%;
height:170px;
background-color:#7E4A00;
float:left;
margin-left:4%;
margin-left:4%;
border-radius:0px 0px 30px 30px;
}
.box{
width:18%;
height:170px;
background-color:#7E4A00;
float:left;
margin-left:4%;
margin-left:4%;
}
.center{
margin-left:42%;
width:260px;
height:50px;
background-color:#7E4A00;
margin-bottom:15px;
}
.wraps{
width:220px;
height:350px;
float:left;
margin-right: calc((100% - 910px ) / 4);
}
.discriptions{
width:220px;
height:60px;
margin-top:310px;
margin-left:43px;
background-color:#7E4A00;
padding-bottom:1px;
}
.discriptionvid{
width:240px;
height:60px;
background-color:#7E4A00;
padding-bottom:1px;
}
.rowvid{
display: inline-block;
white-space:nowrap;
padding-left:3%;
margin-left:6%;
height:280px;
width:calc( (560px * 2) + (20px * 2));
}
.media{
width:240px;
height:280px;
margin-left:38px;
float:left;
}
.standard{
width:30%;
min-width:20%;
margin-left:10%;
margin-bottom:100px;
border-spacing:0px;
padding:10px;
}
.centered{
margin-left:40%;
width:260px;
height:70px;
background-color:#7E4A00;
}
.standard th {
width:200px;
border-bottom:solid #000000;
padding:20px;
background:#7E4A00;
height:50px;
}
.standard td {
border-bottom:dashed #000000;
padding: 0px 10px;
height:170px;
min-height:170px;
min-width:365px;
}
.left{
width:40%;
}
.mid {
border:1px;
border-right:solid #000000;
border-left:solid #000000;
}
.involves{
height:144px;
background-color:#7E4A00;
width:60%;
margin-top:0%;
margin-left:19%;
padding:1px;
}
.small{
height:30px;
background-color:#7E4A00;
width:60%;
margin-top:0%;
margin-left:4%;
margin-bottom:14.5px;
}
.small_ind{
margin-top:0%;
height:30px;
margin-bottom:105px ;
background-color:#7E4A00;
width:60%;
margin-left:18%;
}
And here's the JSFiddle
It isn't displaying properly as font awesome isn't working, so the nav seems a bit out of sorts. You can still see the issue with the header though, if you minimise the screen size.
Any help will be appreciated, thank you!!
Remove this CSS:
html, body{min-width:1280px;}
header{margin-left:80px;
h1{padding-left:129px;}
See JSFiddle
I'd like to ask you experts a CSS-based question, which I think will probably be too easy for you to answer. I've tried - but failed.
http://codepen.io/fatihturan/pen/iLgub
I've seen this pen and really appreciate the effect - though it would be perfect if the text could be on one line, such as this:
Title: Foo
and keeping the hidden scrolling intact.
Thanks!
Rob
<div class="badge">
<span class="title">Title:</span>
<div>
<span class="first">Foo</span>
<span class="second">Bar</span>
</div>
</div>
body {
background:#fff;
font:14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.badge {
margin:100px auto;
width:80px;
height:40px;
padding:10px 0px;
border-radius:4px;
background-color:#e3e3e3;
box-shadow:0 1px rgba(255,255,255,.75), inset 0 1px 2px rgba(0,0,0,.1);
text-align:center;
color:#949494;
line-height:14px;
text-shadow:0 1px 0 #fff;
div {
overflow:hidden;
padding:2px 0;
height:16px;
}
span {
display:block;
font-size:18px;
color:#8b8b8b;
cursor:default;
}
&:hover {
.first {
top:-20px;
}
.second {
top:-19px;
}
}
}
.title {
margin-bottom:5px;
font-size:12px;
font-weight:100;
}
.first, .second {
position:relative;
top:0;
transition:top .1s ease-in;
-webkit-transition:top .1s ease-in;
-moz-transition:top .1s ease-in;
}
.first {
margin-bottom:5px;
}
Just use:
display: inline;
instead of
display: block;
on the spans.
P.S. Your code isn't a valid CSS. That is SCSS which has to be compiled into CSS!
see my update in link
codeopen
body {
background:#fff;
font:14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.badge {
margin:100px auto;
width:150px;
height:20px;
padding:10px 0px;
border-radius:4px;
background-color:#e3e3e3;
box-shadow:0 1px rgba(255,255,255,.75), inset 0 1px 2px rgba(0,0,0,.1);
text-align:center;
color:#949494;
line-height:14px;
text-shadow:0 1px 0 #fff;
div {
overflow:hidden;
padding:2px 0;
height:16px;
}
span {
display:block;
font-size:18px;
color:#8b8b8b;
cursor:default;
}
&:hover {
.first {
top:-20px;
}
.second {
top:-19px;
}
}
}
.title {
margin-bottom:5px;
font-size:12px;
font-weight:100;
width:50%;
float:left;
}
.first, .second {
position:relative;
top:0;
transition:top .1s ease-in;
-webkit-transition:top .1s ease-in;
-moz-transition:top .1s ease-in;
}
.first {
margin-bottom:5px;
}
You need to implement -webkit-box to badge class.
Working demo
-webkit-box has been supported by IE9+ , Firefox, Chrome, Safari and Opera.
I am developing a web page and I am pretty new to HTML.
I have the problem that my navigation bar goes down to a new line and everything jumps with it.
Like this:
I think this is a problem with the height of the hover. I have for the project description another box as for the navigation bar. So the should move independent.
The Css code is like:
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#header {
height:100px;
width:1260px;
margin-left:auto;
margin-right:auto;
}
#navpanel {
height:50px;
width:1260px;
background:rgba(0,50,0,1);
border-radius: 10px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
box-shadow:10px 10px 10px #888888;
}
#content {
height:900px;
width:1260px;
border-radius:10px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:100px;
box-shadow:10px 10px 10px #888888;
background:rgba(255,255,255,1);
}
#tekst {
height:700px;
width:1060px;
margin-left:auto;
margin-right:auto;
position:relative;
top:75px;
text-align:justify;
}
.menu1 {
height:50px;
width:30%;
background:rgba(0,200,0,1);
float:left;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu2 {
height:50px;
width:200px;
background:rgba(0,150,0,1);
float:left;
position:relative;
left:-15px;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu3 {
height:50px;
width:200px;
background:rgba(0,100,0,1);
float:left;
position:relative;
left:-30px;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu4 {
height:50px;
width:200px;
background:rgba(0,50,0,1);
float:left;
position:relative;
left:-45px;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
h1
{
font-family:Calibri;
font-size:50px;
}
.phead {
font-family:"Cooper Black";
font-size:100px;
color:rgba(0,0,0,1);
position:relative;
width:auto;
}
.p1 {
font-family:"Cooper Black";
font-size:25px;
color:rgba(255,255,255,.75);
position:relative;
margin-left:25px;
margin-top:10px;
width:100px;
}
.p2 {
font-family:"Cooper Black";
font-size:25px;
color:rgba(255,255,255,1);
position:relative;
margin-left:25px;
margin-top:10px;
width:100px;
}
p {
font-family:Calibri;
font-size:20px;
}
.menu2:hover {
width:20%;
}
.menu3:hover {
width:50%;
height:auto;
border-bottom-right-radius: 10px;
box-shadow:10px 10px 10px #888888;
}
.menu2:hover .p1 {
color:rgba(255,255,255,1);
}
.menu3:hover .p1 {
color:rgba(255,255,255,1);
}
.menu4:hover .p1 {
color:rgba(255,255,255,1);
}
.menu3 ul {
visibility:hidden;
list-style:none;
font-family:"Cooper Black";
font-size:16px;
color:rgba(255,255,255,.75);
height:200;
margin-left:-5px;
}
.menu3:hover ul {
visibility:visible;
}
.menu3 ul li:hover {
color:rgba(255,255,255,1);
}
Hope somebody has the solution.
HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TU Eindhoven iGEM</title>
<link rel="stylesheet" href="TU_Eindhoven_Style.css" type="text/css" />
<style type="text/css">
.class1 A:link {text-decoration: none; color:rgba(255,255,255,.75)}
.class1 A:visited {text-decoration: none; color:rgba(255,255,255,.75)}
.class1 A:active {text-decoration: none; color:rgba(255,255,255,1)}
.class1 A:hover {text-decoration:none; color:rgba(255,255,255,1)}
.class2 A:link {text-decoration: underline overline}
.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}
</style>
</head>
<body style="background-image:url(Images/Background.jpg)">
<div id="header">
<p class="phead">Microencapsulation</p>
</div>
<span class="class1">
<div id="navpanel">
<div class="menu1">
<p class="p2">Home</p>
</div>
<div class="menu2">
<p class="p1">Team</p>
</div>
<div class="menu3">
<p class="p1">Project</p>
<ul>
<li>
<p >Planning</p>
</li>
<li>
<p >Brainstorm</p>
</li>
</ul>
</div>
<div class="menu4">
<p class="p1">Notebook</p>
</div>
</div>
</span>
<div id="content">
<h1 align="left">Project Description</h1>
</div>
</body>
</html>
Try using z-index or position: absolute; to put your navigation header above the actual page :)
JSFIDDLE
Here you go. I did several changes:
I added an id to your .menu 3 ul .
ul class="context">
<li>
<p >Planning</p>
</li>
<li>
<p >Brainstorm</p>
</li>
</ul>
I removed the transition animation. It caused too many problems.
I removed some unnecessary/problematic CSS rules.
I made the menu with position:absolute and added some formatting.
Here is the full CSS
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#header {
height:100px;
width:1260px;
margin-left:auto;
margin-right:auto;
}
#content {
height:900px;
width:1260px;
border-radius:10px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:100px;
box-shadow:10px 10px 10px #888888;
background:rgba(255, 255, 255, 1);
}
#tekst {
height:700px;
width:1060px;
margin-left:auto;
margin-right:auto;
position:relative;
top:75px;
text-align:justify;
}
.menu1 {
height:50px;
width:30%;
background:rgba(0, 200, 0, 1);
float:left;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu2 {
height:50px;
width:200px;
background:rgba(0, 150, 0, 1);
float:left;
position:relative;
left:-15px;
transition:all .2s ease-in-out 0s;
border-radius: 10px;
}
.menu3 {
height:50px;
width:200px;
background:rgba(0, 100, 0, 1);
float:left;
position:relative;
left:-30px;
border-radius: 10px;
}
.menu4 {
height:50px;
width:200px;
background:rgba(0, 50, 0, 1);
float:left;
position:relative;
left:-45px;
border-radius: 10px;
}
h1 {
font-family:Calibri;
font-size:50px;
}
.phead {
font-family:"Cooper Black";
font-size:100px;
color:rgba(0, 0, 0, 1);
position:relative;
width:auto;
}
.p1 {
font-family:"Cooper Black";
font-size:25px;
color:rgba(255, 255, 255, .75);
position:relative;
margin-left:25px;
margin-top:10px;
width:100px;
}
.p2 {
font-family:"Cooper Black";
font-size:25px;
color:rgba(255, 255, 255, 1);
position:relative;
margin-left:25px;
margin-top:10px;
width:100px;
}
p {
font-family:Calibri;
font-size:20px;
}
.menu2:hover {
width:20%;
}
.menu3:hover {
width:50%;
border-bottom-right-radius: 10px;
box-shadow:10px 10px 10px #888888;
}
.menu2:hover .p1 {
color:rgba(255, 255, 255, 1);
}
.menu3:hover .p1 {
color:rgba(255, 255, 255, 1);
}
.menu4:hover .p1 {
color:rgba(255, 255, 255, 1);
}
.menu3 ul {
visibility:hidden;
list-style:none;
font-family:"Cooper Black";
font-size:16px;
color:rgba(255, 255, 255, .75);
height:200;
background: rgba(0, 100, 0, 1);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.menu3 ul li {
padding: 5px;
}
.menu3:hover ul {
visibility:visible;
}
.menu3 ul li:hover {
color:rgba(255, 255, 255, 1);
}
.menu3:hover ~ .menu4 {
display: none;
width: 0px;
}
.context {
position: absosute;
}
#navpanel {
height:50px;
width:1260px;
background:rgba(0, 50, 0, 1);
border-radius: 10px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
box-shadow:10px 10px 10px #888888;
}
Am having a struggle finding a working solution to solve the invisible padding on image tabs that are rounded.
I have tried using border radius on the a tags, including the div but nothing works.
JSFiddle
Also, if anyone can help me figure out how to vertical align the images... That'd be highly appreciated.
HTML:
<div class="linksbar">
<div class="logo"><img src="images/logo2.png"></div>
<div class="logo2"><img src="images/logo.png"></div>
<div class="tabs">
<nav><ul style="min-width:90%;">
<li><img src="images/b_home.png"></li>
<li><img src="images/g_portfolio.png"></li>
<li><img src="images/g_grades.png"></li>
<li><img src="images/g_school.png"></li>
</ul></nav>
</div>
</div>
CSS:
body{
margin:0 !important;
overflow-y: scroll;
}
h2, h3, h4{
margin: 0;
}
.okbar{
width:100%;
background-color:black;
color:black;
height:25px;
min-width:90%;
}
.okbarlinks li{
list-style-type:none;
display:inline;
padding:0px 10px 0px 10px;
float:right;
}
.okbarul {
padding:3px;
}
.okbarlinks a{
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
color:#8a8a8a;
padding:0px;
transition:all 1s ease;
-webkit-transition-delay:all .5s ease;
-moz-transition-delay:all .5s ease;
-ms-transition-delay:all .5s ease;
-o-transition-delay:all .5s ease;
position:static;
}
.okbarlinks a:hover{
color:#454545;
}
.whitestrip{
width:100%;
height:1px;
background-color:white;
color:white;
text-align:center;
}
.linksbar{
background: url('images/blacktabbar.jpg');
background-color:black;
width:100%;
height:102px;
}
.logo{
height:102px;
margin-left:5%;
width:68px;
background-repeat:no-repeat;
vertical-align:middle;
background-position: center center;
float:left;
display:block;
border-radius:15px;
}
.logo2{
height:102px;
width:200px;
padding-left:30px;
background-repeat:no-repeat;
vertical-align:middle;
background-position: center;
float:left;
display:block;
border-radius:15px;
}
.bluebody{
background: url('images/bluebar.jpg');
width:100%;
height:200px;
margin-top:1px;
padding:0;
}
.tabs ul{
margin:0;
}
.tabs li{
list-style-type:none;
display:inline;
min-width:90%;
}
.tabs a{
margin-left:10px;
text-decoration:none;
}
.tabs{
position:absolute;
text-align:center;
width:100%;
}
.bluebodyheaderfont{
font-size:22px;
font-family:'Helvetica Neue', Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
}