I was studying how to make static navigation bars and managed to get up to this
https://jsfiddle.net/dm310tau/
.bottom-bar
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
z-index: 100;
bottom: 10px;
left: 0;
width: 100%;
height: 35px;
color: #999999;
background-color: #101010;
}
.bottom-bar li
{
float: left;
}
.bottom-bar a
{
display: block;
color: #999999;
text-align: center;
font-size: medium;
padding: 6px 16px;
text-decoration: none;
border: 1px solid transparent;
}
.bottom-bar a:hover:not(.active)
{
color: #EFEFEF;
border: 1px solid #AAAAAA;
}
.bottom-bar .active
{
color: #FEFEFE;
background-color: #303030;
padding: 3px 16px 8px 16px;
border: 1px solid #EEEEEE;
}
.bottom-bar .active:after
{
}
<ul class = "bottom-bar">
<li class = "bottom-link">
<a class = "active"
href = "/one">
One
</a>
</li>
<li class = "bottom-link">
<a href = "/two">
Two
</a>
</li>
<li class = "bottom-link">
<a href = "/three">
Three
</a>
</li>
</ul>
As the next step I was trying to make it so that active bar ends up a little bit taller like so,
However, I am not sure where is the first place to look for something like this. I have explored option of using
.bottom-bar .active:after, but, unfortunately, because the bar is supposed to be static, I can not make the part pop up a little bit higher by using a border like I have seen it done on other websites.
I do understand that I can do a few of these using Bootstrap, but that is not my intention. I would like to learn CSS instead of just using what's there and not understanding what is going on behind the scenes.
This works in Chrome at least. The comments explain what is happening.
<!DOCTYPE HTML>
<html>
<head>
<style>
#footer {
width: 100%;
height: 35px;
background-color: black;
position: fixed;
left: 0;
bottom: 0;
padding: 5px 0 0 20px; //top right bottom left
}
.link {
color: gray;
margin-right: 10px;
padding: 5px;
float: left;
position: relative;
}
.active {
color: white;
height: 50px;
border-bottom: none;
border-radius: 5px 5px 0 0;
}
.active:after { /*or :before*/
content: ""; /*allows shape to display*/
display: block;
width: 100%; /*cover element*/
top: -20px; /*position as you would like, just to show the difference*/
left: 0;
position: absolute;
height: 60px;
border: 1px solid white;
border-radius: 5px;
background-color: black;
z-index: -1; /*place behind element*/
}
</style>
</head>
<body>
<div id="footer">
<div id="links">
<div class="link active">Contact</div>
<div class="link">About</div>
<div class="link">Support me!</div>
</div>
</div>
</body>
</html>
Related
I'm trying to recreate this stylized line border behind my header (see: https://www.vox.com's yellow border behind 'Top Stories'). I understand that it's being created using :before but I can't seem to get my header span (projheader_name) to white out some of the border AND I'm getting two of the :before elements created for some reason. One gets inserted after div class="container" and the other after span="projheader_name".
#projheader {
margin-top: 40px;
padding-top: 20px;
}
#projheader .container {
background-color: white;
}
#projheader h3 {
margin-bottom: 10px;
}
.projheader_name {
background-color: white;
position: relative;
z-index: 3;
}
#projheader :before {
border-left: 4px solid #17A2B8;
border-right: 4px solid #17A2B8;
border-top: 4px solid #17A2B8;
content: " ";
height: 40px;
left: 6%;
position: absolute;
right: 6%;
top: 27%;
}
<section id="projheader">
<div class="container">
<span class="projheader_name">
<h3>Landing Page: Sense</h3>
</span>
</div>
</section>
h3 {
text-align: center;
border: 4px solid #17A2B8; border-bottom: 0;
}
h3 span {
position: relative;
top: -0.7em;
background: #fff;
display: inline-block;
padding: 0 0.7em;
}
<h3><span>LANDING PAGE</span></h3>
An <a href> element surrounds two divs. One of the divs is only shown, if the link is active (moment of clicking). And it is placed above the other div. It is used as a feedback for clicking.
You can see and try this here: https://jsfiddle.net/pjgdtade/2/
a {
text-decoration: none;
display: flex;
position: relative;
width: 328px;
}
div.tile {
position: relative;
padding: 12px 10px;
box-sizing: border-box;
background-color: white;
color: black;
display: block;
width: 328px;
margin: 0;
box-shadow: 1px 2px 4px 0 #e0e0e0;
border: solid 1px #dcdcdc;
}
div.link-active-cover {
background: rgba(220, 220, 220, 0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}
a:active div.link-active-cover {
display: block;
}
<a href="https://www.google.de" target="_blank">
<div class="tile">
This is some content in a clickable box.
</div>
<div class="link-active-cover"></div>
</a>
In Chrome everything works as expected, but in Firefox the link is not executed. On click the div.link-active-cover shows up, but the new page does not open.
Funny fact: If div.link-active-cover is visible from the beginning (no display: none), the div is shown and the link works.
Am I wrong with this or is it a bug in Firefox?
Probably because when click event occurs (after mouseup), the mouse is not on primary clicked element.
No matter, the solution would be to use opacity change:
a {
text-decoration: none;
display: flex;
position: relative;
width: 328px;
}
div.tile {
position: relative;
padding: 12px 10px;
box-sizing: border-box;
background-color: white;
color: black;
display: block;
width: 328px;
margin: 0;
box-shadow: 1px 2px 4px 0 #e0e0e0;
border: solid 1px #dcdcdc;
}
div.link-active-cover {
background: rgba(220, 220, 220, 0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .001;
}
a:active div.link-active-cover {
opacity: 1;
}
<a href="https://www.google.de" target="_blank">
<div class="tile">
This is some content in a clickable box.
</div>
<div class="link-active-cover"></div>
</a>
Updated Fiddle.
Here is my code. It is frustrating me so bad.
html {
height:100%;
width:100%;
}
body {
background-color: #3D56E3;
margin:0;
width:100%;
height:100%;
}
#title {
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
margin: 20px 900px 30px 0;
text-align: left;
position: absolute;
left: 0;
top: 0;
padding-left: 5px;
padding-right: 5px;
}
#title:hover {
color: #271573;
transition: 0.5s;
}
.intro {
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
margin: 90px 900px 30px 0;
text-align: left;
top: 8px;
left: 0;
position: fixed;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
}
marquee {
box-shadow:0 0 10px black;
position: fixed;
top: 0;
border-bottom: solid 2px black;
background-color: black;
right: 0;
color: white;
z-index: 2;
width: 100%;
}
.Projects {
border: 2px solid black;
position: fixed;
margin: 20px 900px 30px 50px;
left: 1120px;
width: 200px;
top: 0;
height: auto;
max-height: 50%;
padding-left: 5px;
background-color: #A8B5ED;
}
#Projects-Header:hover {
color: #271573;
transition: 0.5s;
}
a:link {
color:#2333DE;
}
a:visited {
color: #7855D9;
}
a:hover {
color: #4B6BEB;
text-decoration: none;
}
a:active {
color: #092AAD;
}
#footer{
color: white;
border-top: 2px solid black;
position: fixed;
left: 0;
bottom: 0;
}
<!DOCTYPE HTML>
<html>
<!--Website by Keyblademaster33-->
<head>
<link type="text/css" rel="stylesheet" href="http://keybladia.site11.com/style.css"/>
<link type="icon/ico" rel="shortcut icon" href="favicon.ico?v=2"/>
<script type="text/javascript" src="http://keybladia.site11.com/home.js">
</script>
<title>
Keybladia | Home Page
</title>
</head>
<body>
<marquee title="Site News" scrollamount="5">
The Future is now, Thanks to Science!!! </marquee>
<h1 id="title">Welcome To Key's Website</h1>
<p class="intro"> Sorry for almost quiting on this website. I got frustrated
and quit working on the website for about a month and a half. In the end,
I couldn't give up and started working again. Hopefully, It should not happen again because
I have more vigor than I ever did before. And to show how sorry I am, I redesigned the
entire home page of the website.</p>
<div class="Video">
</div>
<div class="Projects">
<h3 id="Projects-Header">Projects</h3>
Site Navigation
<ul>
<li><a title="Now you don't have to hit the back button" href="http://keybladia.site11.com/"> Home </a></li>
<li><a title="Them updates" href="http://keybladia.site11.com/pages/update_notes.html"> Site Updates </a></li>
<li><a title="The future is now!" href="http://keybladia.site11.com/pages/future_plans.html"> Future Plans </a></li>
<li><a title="Fight the Man!" href="http://keybladia.site11.com/school"> School </a></li>
</ul>
Cool Links
<ul>
<li><a title="Codecademy" href="http://www.codecademy.com/">Go here to learn code!</a></li>
<li><a title="Reese Trcalek Inc." href="https://www.youtube.com/channel/UCY9Y9OyMwToDklOQ0-buegA">My YouTube Channel</a></li>
<li><a title="Too Many Tags!" href="http://www.w3schools.com/">Coding References</a></li>
<li><a title="You can't handle the code!" href="http://stackoverflow.com/">Coding Help</a></li>
</ul>
</div>
<div id="footer">
<p> This website is created by Keyblademaster33 in 2014 - 2015 </p>
</div>
</body>
</html>
Please I ask for help. Tell anything about other problems you see in the code. I have tried for about a month or so to figure it out. Here is the link to my website as well if that will help. http://www.keybladia.site11.com/
http://jsfiddle.net/ay2Lav3c/15/
Just messed with it a little.
Customize it however you want.
body {
background-color: #3D56E3;
}
#title {
display: inline-block;
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
text-align: left;
position: absolute;
top: 0px;
left: 0px;
padding-left: 5px;
padding-right: 5px;
}
.intro {
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
text-align: left;
top: 8px;
left: 0;
position: absolute;
top: 90px;
right: 250px;
margin-right: 50px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
}
marquee {
box-shadow:0 0 10px black;
position: fixed;
top: 0;
border-bottom: solid 2px black;
background-color: black;
right: 0;
color: white;
z-index: 2;
width: 100%;
}
.Projects {
border: 2px solid black;
position: absolute;
top:0px;
right: 10px;
width: 200px;
top: 0;
height: auto;
padding-left: 5px;
background-color: #A8B5ED;
}
.Projects - you could use a float: right; instead of fixed position with margins.
.Projects {
border: 2px solid black;
float: right;
width: 200px;
top: 0;
height: auto;
max-height: 50%;
padding-left: 5px;
background-color: #A8B5ED;
}
I'm trying to achieve the effect of having a centered image that flows past its containing div's borders, but without using position: absolute, because it hides the header buttons behind it. Is there any clean way to do this without just using old-school absolute position with all the elements (which would be a real pain if I try to do any kind of responsiveness at all)?
Relevant code:
.container {
max-width: 60rem;
margin: 0 auto;
padding: 3rem 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
}
.container.no-border {
border: none;
background-color: transparent;
position: relative;
}
#logo {
display: block;
position: absolute;
top: 0;
left: 50%;
width: 150px;
margin-left: -75px;
}
JSFiddle: http://jsfiddle.net/bH35r/
P.S. I'm willing to utilize pretty much anything as long as it does the job cleanly.
You can use display:inline-block;
FIDDLE
HTML :
<div class="section header">
<div class="container no-border">
<a class="header" href="#">About</a>
<a class="header" href="#">News</a>
<a class="header" href="#">Teams</a>
<div class="logo_wrap">
<img id="logo" src="http://equineclub.zachschristmaslist.info/images/pennant.png"/>
</div>
<a class="header" href="#">Apparel</a>
<a class="header" href="#">Sponsorship</a>
<a class="header" href="#">Contact</a>
</div>
</div>
CSS :
body {
margin: 0;
font-family: Helvetica;
font-size: 100%;
background-color: #191A18;
}
.section {
margin: 0;
padding: 0;
clear: both;
}
.section.header {
background-image: url('../images/background.png');
background-position: 50% 90%;
border-bottom: 1px solid #A8A8A8;
box-shadow: 0 1rem 1rem #000;
text-align: center;
}
.container {
max-width: 60rem;
margin: 0 auto;
padding: 0 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
}
.container.no-border {
border: none;
background-color: transparent;
position: relative;
}
.container.logo {
background-image: url('../images/main-image.jpg');
background-position: 50% 20%;
min-height: 20rem;
}
a.header {
color: white;
display:inline-block;
text-decoration: none;
padding: 3rem 1.5rem;
margin: 0 0.5rem;
background-color: rgba(255,255,255,0.1);
}
#logo {
width: 150px;
}
.logo_wrap{
display: inline-block;
height: 5.5rem;
vertical-align:top;
overflow:visible;
}
Use a CSS background image.
.container {
max-width: 60rem;
margin: 0 auto;
padding: 3rem 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
background-image:url(....);
background-repeat-no-repeat;
background-position: 0px 0px; <--- adjust accordingly.
}
In general, images that are part of the UI (not the content) should be CSS backgrounds, not inline images anyway.
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}