I am trying to figure out how to illustrate a banner that goes behind the body and continues in the background.
I want to achieve something like this:
But the difficult part is the wrap-around when it goes to the background (3D-effect).
This is what I got so far: https://jsfiddle.net/4v6xLtyf/
<body>
<div class="navbar background-banner">
</div>
<div class="body-content">
<div style="height:1000px" class="container content-block">
<h1 style="text-align: center">My Website</h1>
<div class="navbar navbar-inverse navbar-top navbar-custom-top">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Login</a></li>
</ul>
</div>
</div>
<p>Content goes here</p>
</div>
</div>
</body>
You can play with :before, :after and border to do the trick, something close to what you need could be adding the following CSS rules:
.navbar-custom-top:before {
content: "";
background-color: transparent;
width: 30px;
height: 50px;
position: absolute;
border-left: 25px solid transparent;
border-top: 31px solid #bb5911;
top: 50px;
left:0;
}
.navbar-custom-top:after {
content: "";
background-color: transparent;
width: 30px;
height: 50px;
position: absolute;
border-right: 25px solid transparent;
border-top: 31px solid #bb5911;
top: 50px;
right: 0;
}
Working fiddle
Then play with the size, position and colors to match exactly what you need.
Update answer......
I made an example from #user2570380 reference link.
Just take a look my link_codpen .
New CSS with two new class ribbonoutline & ribbonul
/***********************/
.ribbonul:before, .ribbonul:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #BB5911 transparent transparent transparent;
bottom: -1em;
}
.ribbonul:before {
left:0;
border-width: 1em 0 0 1em;
}
.ribbonul:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbonoutline:after {
content: "";
position: absolute;
display: block;
background-image: linear-gradient(rgb(234, 115, 29), rgb(255, 168, 0)) !important;
height: 28px;
width: 100%;
margin-top: -10px;
left: 0;
z-index: -9999;
}
html,
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)) !important;
background-attachment: fixed;
font-family: Algerian;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-bottom: 100px;
padding-left: 15px;
padding-right: 15px;
position:relative;
z-index:1
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.content-block {
background-color: white;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
margin-top: 20px;
margin-bottom: 20px;
padding: 22px;
width: 70%;
margin: auto;
height: 500px;
}
.background-banner {
background-image: linear-gradient(rgb(234, 115, 29), rgb(255, 168, 0)) !important;
margin-top: 150px;
border-radius: 0px;
border: 0px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
z-index: 0;
}
a {
color: black;
text-decoration: none;
}
a:hover,
a:focus {
color: white;
text-decoration: none;
}
.navbar-custom-top {
background-image: linear-gradient(rgb(234, 115, 29), rgb(255, 168, 0)) !important;
margin-top: 50px;
margin-left: -40px;
margin-right: -40px;
border-radius: 0px;
border: 0px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
.custom-container {
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
border-top-width: 0px;
border-bottom-width: 0px;
}
.navbar-header {
float: left;
width: 100%;
text-align: center;
}
ul.navbar-nav > li {
display: inline;
}
ul.navbar-nav {
float: none;
margin: 0 auto;
text-align: center;
display: block;
position: relative;
}
.content {
min-height: 1000px;
}
.navbar-inverse .navbar-nav > li > a {
color: black;
margin-left: 50px;
margin-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
font-size: 25px;
border-bottom: 2px solid transparent;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: black;
border-bottom: 2px solid transparent;
border-bottom-color: #fff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #000000;
background-color: transparent;
border-bottom: 2px solid transparent;
border-bottom-color: black;
}
/***********************/
/***********************/
/***********************/
.ribbonul:before, .ribbonul:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #BB5911 transparent transparent transparent;
bottom: -1em;
}
.ribbonul:before {
left:0;
border-width: 1em 0 0 1em;
}
.ribbonul:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbonoutline:after {
content: "";
position: absolute;
display: block;
background-image: linear-gradient(rgb(234, 115, 29), rgb(255, 168, 0)) !important;
height: 28px;
width: 100%;
margin-top: -10px;
left: 0;
z-index: -9999;
}
<div class="navbar background-banner">
</div>
<div class="body-content">
<div class="container content-block">
<h1 style="text-align: center">My Website</h1>
<div class="navbar navbar-inverse navbar-top navbar-custom-top">
<div class="navbar-collapse collapse ribbonoutline">
<ul class="nav navbar-nav ribbonul">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Login</a></li>
</ul>
</div>
</div>
<p>Content goes here</p>
</div>
</div>
Related
I'm trying to make a google clone page, I am trying to make the footer to be sticked to the end of the viewport. But when I try position: absolute bottom: 0, it sticks to the end, but the page overflows.
I tried to use html, body and * height: 100% but it doesn't work.
I share my github repository for you to check the code: https://github.com/Diefonro/HTML-CSS
You can also check the webpage (on a PC) at: https://diefonro.github.io/HTML-CSS/
Code:
<body>
<header>
<nav>
<div class="nav">
<div id="nav-g-i">
<a class="menu-item" href="#">Gmail</a>
<a class="menu-item" href="https://google.com/imghp">Images</a>
</div>
<div class="" id="nav-gr-a">
<div class="dd-cont">
<div class="grid">
<img
id="grid"
src="assets/icons/apps_black_24dp.svg"
alt="apps-icon"
/>
</div>
<div class="drop-d">
<div class="dd-item">
<img
id="dd-search"
src="assets/icons/google-logo-dd.png"
alt="google-search-icon"
/>
<p>Search</p>
</div>
<div class="dd-item">
<img
id="dd-maps"
src="assets/icons/google-maps-dd.png"
alt="google-maps-icon"
/>
<p>Maps</p>
</div>
<div class="dd-item">
<img
id="dd-keep"
src="assets/icons/google-keep-dd.png"
alt="google-keep-icon"
/>
<p>Keep</p>
</div>
<div class="dd-item">
<img
class="dd-drive"
src="assets/icons/Google_Drive_dd.png"
alt="google-keep-icon"
/>
<p>Drive</p>
</div>
<div class="dd-item">
<img
class="dd-calendar"
src="assets/icons/512px-Google_Calendar_icon_dd.png"
alt="google-calendar-icon"
/>
<p>Calendar</p>
</div>
<div class="dd-item">
<img
class="dd-photos"
src="assets/icons/google_photos-dd.png"
alt="google-photos-icon"
/>
<p>Photos</p>
</div>
</div>
</div>
<img
id="profile-pic"
src="assets/icons/account_circle_black_24dp.svg"
alt="account-icon"
/>
</div>
</div>
</nav>
</header>
<main>
<section>
<div class="logo-cont">
<img
id="google-logo"
src="assets/images/googlelogo_color_272x92dp.png"
alt="google-logo"
/>
</div>
<div class="input-cont">
<input class="input-g" type="text" />
<img
src="assets/icons/search_black_24dp.svg"
alt="search-icon"
class="search-i"
/>
<img
class="mic"
src="assets/icons/Google_mic.svg.png"
alt="voice-search-icon"
/>
</div>
<div class="btn-cont">
<button class="custom-btn">Google Search</button>
<button class="custom-btn custom-btn-l">I'm Feeling Lucky</button>
</div>
<span class="s-lang"
>Google offered in:
<a href="#" class="s-link"
><div class="ll">Español (Latinoamérica)</div></a
>
</span>
</section>
</main>
<footer>
<div class="footer-cont">
<div class="top-footer">
<span class="f1">Colombiac test</span>
</div>
<div class="bottom-footer">
<div class="left-footer">
<div class="a-li">
About
Advertising
Business
How Search works
</div>
</div>
<div class="right-footer">
Privacy
Terms
Settings
</div>
</div>
</div>
</footer>
</body>
* {
margin: 0;
}
html{
height: 100vh;
}
body {
font-family: Arial, sans-serif;
}
nav {
text-align: right;
position: relative;
top: 9px;
right: 8px;
}
#nav-g-i {
display: inline-block;
position: relative;
top: 2px;
right: 23px;
}
#nav-gr-a {
display: inline-block;
position: relative;
top: 5px;
right: 10px;
}
#grid,
#profile-pic {
opacity: 50%;
}
section {
text-align: center;
position: relative;
top: 24px;
}
.input-g {
position: relative;
bottom: 2px;
width: 500px;
line-height: 17px;
border: none;
outline: none;
}
.input-cont {
width: 553px;
height: 16px;
position: relative;
bottom: 2px;
right: 1px;
color: #222;
border: 1px solid #dfe1e5;
font-size: 13px;
padding: 14px;
border-radius: 80px;
margin: 24px 0px;
display: inline-block;
}
.input-cont:hover,
.input-cont:focus {
box-shadow: 0 1px 5px 0 rgba(32, 33, 36, 0.28);
border-color: rgba(40, 40, 41, 0);
}
.input-cont > img {
position: absolute;
top: 10px;
right: 11px;
width: 23px;
}
.input-cont .search-i {
position: absolute;
top: 11.5px;
right: 547px;
width: 20px;
opacity: 40%;
}
#grid {
position: relative;
bottom: 3px;
margin-right: 16px;
}
.menu-item {
font-size: 13px;
color: #5b5f63;
text-decoration: none;
position: relative;
bottom: 8px;
margin-right: 10px;
}
.menu-item:hover {
text-decoration: underline;
}
#profile-pic {
width: 32px;
height: 32px;
}
.btn-cont {
position: relative;
top: 3px;
}
.custom-btn {
background-color: #f2f2f291;
color: #a2a8af;
font-size: 14px;
height: 36px;
padding: 0 16px;
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: #222;
border-radius: 5px;
}
.custom-btn:first-of-type {
margin-right: 7px;
}
.custom-btn:hover {
border: 1px solid #c6c6c656;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
.custom-btn:active {
border: 1px solid cornflowerblue;
}
.drop-d {
width: 285px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
right: 11px;
border-radius: 12px;
display: none;
}
.grid:hover {
display: inline-block;
}
.dd-item:hover {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.dd-item {
margin-top: 10px;
display: inline-block;
width: 70px;
padding: 6px 3px;
}
.dd-item > img {
height: 50px;
width: 50px;
}
.dd-item > p {
color: rgba(0, 0, 0, 0.87);
margin: 0;
margin-top: 15px;
margin-bottom: 5px;
}
.dd-cont {
display: inline-block;
}
.dd-cont:hover .drop-d {
display: block;
}
.s-lang {
font-size: 13px;
color: #333;
position: relative;
top: 30px;
right: 3px;
}
.s-lang a {
text-decoration: underline;
}
.s-lang a:visited {
color: rgb(30, 30, 179);
}
.ll {
display: inline-block;
position: relative;
left: 3px;
}
.top-footer,
.bottom-footer {
font-size: 15px;
background-color: #d6d8da49;
color: #8a8686;
position: relative;
top: 200px;
}
.top-footer{
border-bottom: 1px solid rgba(155, 155, 155, 0.267);
}
.left-footer a {
display: inline-block;
text-decoration: none;
padding: 12px;
font-size: 14px;
}
.right-footer a {
font-size: 14px;
padding: 14px;
text-decoration: none;
color: #8a8686;
}
.bottom-footer{
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom-footer a:hover{
text-decoration: underline;
}
span.f1 {
display: inline-block;
margin-left: 15px;
padding: 16px;
}
.a-li {
margin-left: 20px;
}
a:visited {
color: inherit;
}
.footer-cont {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: fit-content;
height: -moz-fit-content;
}
footer{
position: relative;
width: 100vw;
}
You can remove top: 200px on .top-footer, .bottom-footer. Why? because you have added bottom: 0 to .footer-cont which increases its position to 0 (.footer-cont) + 200px (.top-footer, .bottom-footer) = 200px down. If scroll bars in vertical bother you, you can add overflow-y: hidden style to body or html.
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
I have been trying for hours with different methods to get my navigation buttons to be mobile-responsive and collapse in a specified vertical order. I want the nav buttons to collapse in a vertical column below the two logos, once the screen size is shrunken (to around 500px). How do I fix my code to achieve this?
.container-fluid {
border: 1px solid #000000;
max-width: 1600px;
overflow: hidden;
}
.wrap {
/*background-color: yellow;*/
/*overflow: hidden;*/
}
.Logos {
width: 312px;
display: inline-block;
/*background-color: blue;*/
}
/*
.Logos img{
max-width: 300px;
height: auto;
}
*/
.nav.wrap.one {
display: inline-block;
/*background-color: green;*/
float: right;
margin-top: 25px;
}
ul.navigation {
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two {
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
height: 550px;
margin: auto;
}
.floater.box {
background-color: rgba(255, 255, 255, .40);
border-radius: 10px;
/*opacity: .45;*/
max-width: 75%;
height: 200px;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
}
.form-search {
margin: 0 auto;
text-align: center;
font: bold 13px sans-serif;
max-width: 325px;
position: relative;
}
.form-search input {
width: 230px;
box-sizing: border-box;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
background-color: #ffffff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 14px 15px 14px 40px;
border: 1px solid #b6c3cd;
;
border-right: 0;
color: #4E565C;
outline: none;
margin-top: 70px;
-webkit-appearance: none;
}
.form-search button {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
background-color: #6caee0;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
color: #ffffff;
padding: 15px 22px;
margin-left: -4px;
cursor: pointer;
border: none;
outline: none;
}
.form-search i {
position: absolute;
top: 15px;
left: 20px;
font-size: 16px;
color: #80A3BD;
}
/* Placeholder color */
.form-search input::-webkit-input-placeholder {
color: #879097;
}
.form-search input::-moz-placeholder {
color: #879097;
opacity: 1;
}
.form-search input:-ms-input-placeholder {
color: #879097;
}
.nav.wrap.two {
display: inline-block;
text-align: center;
width: 100%;
margin-top: 10px;
}
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" />
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div>
<div class="nav wrap one">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE">LOG IN</li>
<li id="NAV-TWO">BUY A HOME</li>
<li id="NAV-THREE">SELL A HOME</li>
<li id="NAV-FOUR">CONTACT US</li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<form class="form-search" method="get" action="#">
<input type="search" name="search" placeholder="I am looking for..">
<button type="submit">Search</button>
<i class="fa fa-search"></i>
</form>
</div>
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class="nav wrap two">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A">MY LISTINGS</li>
<li id="NAV-B">COMMUNITIES SERVED</li>
<li id="NAV-C">PROPERTIES</li>
</ul>
</div>
</div>
</div>
Here is a link to my CodePen: https://codepen.io/IDCoder/full/rGWeEE/
CSS is all about be natural order, natural position, natural styles... what I means is that your code isn't being natural, you can see here:
.navigation li {
display: inline-block;
}
.navigation a {
padding: 12px 20px;
}
I want to focus me in those properties because here we are saying:
You <a> element that are inside this man -> <li> (<li id="NAV-ONE">LOG IN</li>), yes you! You will be bigger even if you're inside him!
Well, in real life, we can't put bigger things into smaller spaces. What happens in real life and CSS is: smaller things into bigger things.
So if we make this change:
.navigation li {
display: inline-block;
padding: 12px 20px;
}
.navigation a {
/* We changed who is bigger than who */
}
It takes a natural order (because now the spaces where .navigation a will be is bigger than him). The final code is something like this (this will wrap when you use phone):
.navigation li {
display: inline-block;
padding: 12px 20px;
background: linear-gradient(#49708f, #293f50);
background: #395870;
border-right: 1px solid rgba(0, 0, 0, .3);
}
.navigation a {
color: #fff;
text-decoration: none;
}
More
I was playing and I found this cool way to wrap when screen is small, I think it's cool:
#media all and (max-width: 500px){
ul.navigation{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}
Also, remember that when you want to make responsive design you need meta:viewport into your html's head:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
I have two questions...
How do I make the #LeftTable and drop-down menu to keep their position on the page, regardless of the window size?
As it is right now, it will move to be relative to the size of the window. I'd rather it stay in exactly the same place on the background picture (even if it means having scrolling bars at the bottom of the browser). How do I do this?
How do I get the HTML link to work within the button?
body {
background-color: gray;
background-image: url('images/backgroundpic.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ul {
list-style-type: none;
position: fixed;
bottom: 0;
margin: 0;
padding: 0;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #87cefa;
}
li.dropdown {
display: inline-block;
}
ul li {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
bottom: 30px;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
input#gobutton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) cursor: pointer;
padding: 5px 25px;
background: #87CEFA;
border: 1px solid #1E90FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(0, 0, 0, .75);
color: #f3f3f3;
font-size: 1.1em;
}
input#gobutton:hover,
input#gobutton:focus {
background-color: #000080;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 75%;
left: 25%;
top: 25%;
bottom: 50%;
Right: 100px;
border: 1px;
color: black;
font-weight: bold;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
border: 1px solid black;
padding: 5px;
}
<table id = "LeftTable">
<tr>
<td width = "20%"></td>
<td width = "80%" id='test'>
<table>
<tr><td>Left</td></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
</table>
<table class="gobutton" align="center">
<tr>
<td>
<div class="b_left"></div>
<div class="b_middle">
<input id="gobutton" type="submit" value="LISTEN" />
<a href="http://www.google.com">
</a>
</div>
<div class="b_right"></div>
</div>
</td>
</tr>
</table>
For your link:
You link works however in your example it's trying to open in a frame so its failing. If you create a html file on your computer, or host the html on a site it should work. I tested this on my computer and the link does work like this:
<a href="http://www.google.com">
<input id="gobutton" type="submit" value="LISTEN" />
</a>
For your table
if you want the position to never change you should not use percentages you should use measurements like pixels.
so instead of
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 75%;
left: 25%;
top: 25%;
...
you would have something like:
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 50px; //in pixels
left: 50px; //in pixels
top: 50px; //in pixels
...
also you may have to wrap your tables in a div and apply the background to that if you want the image t move with the left table:
<div class="main">
//tables
</div>
.main{
background-image: url('imageurl');
width:100%;
height:100%;
position: absolute;
bottom: 0;
margin: 0;
}
here's an example: http://codepen.io/nilestanner/pen/EgNXwE
I want to achieve the following shapes using pure CSS, no images.
I've come to the following point.
Here is the HTML structure:
<div class="sixteen columns">
<div id="applicationStatus">
<ul>
<li class="applicationStatus">Application Received</li>
<li class="applicationStatusGood">Language Exam</li>
<li class="applicationStatusNoGood">Oral Exam</li>
<li class="applicationStatus">Grant</li>
</ul>
</div>
</div>
And here is the CSS:
#applicationStatus {
position: relative;
width: auto;
height: 140px;
left: 40px; }
ul.applicationStatus {
list-style: none; }
li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood {
height: 140px;
background-color: #767676;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
*display: inline;
margin-right: 30px;
margin-left: 30px;
padding: 10px;
color: white;
font-size: 18px;
text-align: center;
line-height: 150px;
/* vertical-align: middle; */ }
li.applicationStatus:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 30px solid #767676;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 10px; }
li.applicationStatus:before, li.applicationStatusGood:before, li.applicationStatusNoGood:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0px;
border-top: 80px solid transparent;
border-left: 30px solid white;
border-bottom: 80px solid transparent;
margin: -10px 0px 0 0px; }
li.applicationStatus:first-child, li.applicationStatusGood:first-child, li.applicationStatusNoGood:first-child {
margin-left: 0px;
text-indent: 30px; }
li.applicationStatus:last-child, li.applicationStatusGood:last-child, li.applicationStatusNoGood:last-child {
border-top: 0px solid transparent;
border-left: 0px solid transparent;
border-bottom: 0px solid transparent; }
li.applicationStatusGood {
background-color: #77a942; }
li.applicationStatusGood:after {
border-left: 30px solid #77a942; }
li.applicationStatusNoGood {
background-color: #c42c00; }
li.applicationStatusNoGood:after {
border-left: 30px solid #c42c00; }
Why doesn't the :before selector apply to all of the shapes or all in all how can I achieve what I want?
Modification of Your Code
The main issue you faced was not having position: relative on your li elements. But there were other things that needed tweaking too.
Here is a fiddle example to see.
I added the class you failed to reference in your HTML above to the ul element, so here is the HTML:
<div class="sixteen columns">
<div id="applicationStatus">
<ul class="applicationStatus">
<li class="applicationStatus">Application Received</li>
<li class="applicationStatusGood">Language Exam</li>
<li class="applicationStatusNoGood">Oral Exam</li>
<li class="applicationStatus">Grant</li>
</ul>
</div>
</div>
Then I modified your CSS a bit to condense it (could be more condensed if CSS3 only was being supported):
#applicationStatus {
position: relative;
width: auto;
height: 140px;
left: 40px; }
.applicationStatus li { /* Added this and moved much code to here */
position: relative; /* this was a key property missing from your code */
text-indent: 30px;
height: 140px;
background-color: #767676;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
*display: inline;
/* margin-right: 30px; Eliminated this */
margin-left: 30px;
padding: 10px 10px 10px 30px; /* tweaked this */
color: white;
font-size: 18px;
text-align: center;
line-height: 150px;
}
ul.applicationStatus { /* this was irrelevant with the HTML you gave, but I added the class to the ul */
list-style: none; }
/* tweaked various things below here */
li.applicationStatus:first-child:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 30px solid #767676;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 10px;
}
li.applicationStatus:last-child:before, li.applicationStatusGood:before, li.applicationStatusNoGood:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 80px solid transparent;
border-left: 30px solid white;
border-bottom: 80px solid transparent;
margin: -10px 0px 0 0px;
}
li.applicationStatus:first-child {
padding-left: 10px;
margin-left: 0;
}
li.applicationStatus:last-child {
padding-right: 30px;
}
li.applicationStatusGood {
background-color: #77a942; }
li.applicationStatusGood:after {
border-left: 30px solid #77a942; }
li.applicationStatusNoGood {
background-color: #c42c00; }
li.applicationStatusNoGood:after {
border-left: 30px solid #c42c00; }
U can try this website.
http://cssarrowplease.com/
.arrow_box {
position: relative;
background: #88b7d5;
border: 8px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
top: 50%;
margin-top: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 41px;
top: 50%;
margin-top: -41px;
}