My code is like this
<div class="nav-fixed">
<div class="brand">
Logo of the company
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Others</li>
</ul>
</div>
</div>
<div class="data">
<p>
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ...
</p>
</div>
<div class="overlay">
</div>
<div class="highlight">
</div>
In this I have a 3 fixed position elements, the nav-bar, overlay and the highlight section..
now I want to bring the brand inside the nav-bar on top of the highlight.. then next highlight
then next overlay and then the body or nav-bar..
the css
.overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
opacity: 0.7;
z-index: 1000;
}
.highlight {
position: fixed;
top: 5px;
left: 5px;
width: 200px;
height: 50px;
background: #efefef;
z-index: 1100;
border-radius: 5px;
}
.nav-fixed {
background: #333;
height: 60px;
position: fixed;
top: 0;
padding: 0 20px;
left: 0;
right: 0;
}
.brand {
color: #fff;
font-size: 20px;
line-height: 60px;
display: inline-block;
z-index: 1200;
position: relative;
}
.menu {
float: right;
}
.menu ul {
list-style-type: none;
margin: 0;
}
.menu ul li {
display: inline-block;
line-height: 60px;
margin: 0 5px;
color: #fff;
cursor: pointer;
}
The constraints are I cant change the order of the markup.. Here is the fiddle.. Feel free to edit..
http://jsfiddle.net/bjcth/
Here you go. Now the navigation bar is on the menu wrapper.
.brand {
color: #000;
font-size: 50px;
line-height: 100px;
float:left;
Related
See below code. That i have tried but not getting box-shadow for that triangle shape.
As seen in above image i want to create a triangle shape with shadow using css.(For responsive view also).
I have also add extra div and try using rotate properties but not getting proper solution.
ul {
margin-bottom: 0px;
}
ul li {
list-style: none;
}
.main-header {
background-color: #F16322;
display: inline-block;
vertical-align: top;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
}
.main-header:before {
content: '';
width: 50%;
height: 190px;
background: #cccccc;
top: 0;
position: fixed;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 0 100%);
}
.main-menu {
float: right;
display: inline-block;
}
.main-menu ul {
float: left;
}
.main-menu li {
float: left;
margin-right: 10px;
}
.main-menu li a {
display: inline-block;
padding: 34px 16px;
color: #ffffff;
font-size: 20px;
}
.main-menu>ul>li:last-child {
margin-right: 0px;
}
.main-menu>ul>li:last-child>a {
padding-right: 0px;
}
.main-menu li a:hover,
.main-menu li.current-menu-item>a {
color: #000000;
}
.header-logo {
float: left;
}
.header-wrap {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
<header class="main-header">
<div class="container">
<div class="header-wrap">
<div class="header-logo">
<img src="images/logo.png" alt="BNPK logo">
</div>
<div class="main-menu">
<ul>
<li>
Features
</li>
<li>
Pricing
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header>
As seen in above image i want to create a triangle shape with shadow using css.(For responsive view also).
I have also add extra div and try using rotate properties but not getting proper solution.
You can not add a box-shadow to an element you are using clip-path on, but i fixed it for you using a workaround ive found once.
<head>
<style>
ul {
margin-bottom: 0px;
}
ul li {
list-style: none;
}
.main-header {
background-color: #F16322;
display: inline-block;
vertical-align: top;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
}
.triangle {
filter: drop-shadow(3px 1px 1px #b0b0aa);
position: absolute;
width: 50%;
height: 190px;
}
.triangle::before {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #cccccc;
color: #cccccc;
--p: polygon(100% 0, 0 0, 0 100%);
-webkit-clip-path: var(--p);
clip-path: var(--p);
content: '';
}
.main-menu {
float: right;
display: inline-block;
}
.main-menu ul {
float: left;
}
.main-menu li {
float: left;
margin-right: 10px;
}
.main-menu li a {
display: inline-block;
padding: 34px 16px;
color: #ffffff;
font-size: 20px;
}
.main-menu>ul>li:last-child {
margin-right: 0px;
}
</style>
</head>
<body>
<header class="main-header">
<div class="triangle">
</div>
<div class="main-menu">
<ul>
<li>
Features
</li>
<li>
Pricing
</li>
<li>
Contact
</li>
</ul>
</div>
</header>
</body>
</html>
As #Pitzas proposed, a filter would be the solution. Personally, I would prefer to use an SVG for the triangle shape and then apply the shadow to it. Filters are extremely powerful combined with SVGs.
For your shadow, I would use the feGaussianBlur filter:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur
Here you have an example using it:
http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow.svg
I am working on my final project for my intro to HTML and CSS class.
I am building a very simple website, and everything seemed to be going alright until I wanted to see how the page looks when I resize the browser window. The page looks fine until any sort of resizing is done, and then all of the elements start to get really messed up.
I am a complete noob and have been stuck trying to fix this for almost an hour now. I'm not really sure what to do. I'm trying to make the elements scale until a certain minimum width, but I fear ive built the whole website wrong from the beginning..
Here is the code, if someone could give some insight I would be very grateful..
#wrapper {
height: 1000px;
margin: 0 auto;
background-color: black;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
#header {
height: 150px;
position: absolute;
background-color: red;
width: 100%;
}
#welcome {
left: 75px;
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
font-family: courier;
position: absolute;
font-size: 64pt;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
#main-nav {
position: absolute;
bottom: 0;
right: 0;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
font-family: courier;
font-size: 24pt;
white-space: no-wrap;
}
#main-nav ul li a.current {
font-weight: bold;
font-size: 28pt;
}
#main-nav ul li a:hover {
color: #ffb0ac;
}
#main-content {
position: relative;
width: 100%;
height: 500px;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: courier;
font-size: 36pt;
color: #fff;
}
.button {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<h1 class="w">Welcome</h1>
</div>
<nav id="main-nav">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Introduction</li>
<li>Keys</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<h1 class="intro">Basic Music Theory Introdution</h1>
<img class="button" src="images/button.jpg" alt="button">
</div>
</div>
<!-- End of wrapper-->
Your elements are all using fixed pixel sizes in css. you have other options there, you can set elements to percentage of viewport width (50vw) or height (50vh), or just a percentage (50%). If percentage is used inside of another element it will be scaled to that element not the browser window.
Also - you have pt sizes in your css. those dont exist in css and would need to be changed to px. There are various calculations out there for converting pt size to other units.
for example I've copied your snippets below and changed a few sizes to use viewport width (vw) viewport height (vh) and percentages. your css could be like this:
#wrapper {
height: 100vh;
margin: 0 auto;
background-color: black;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
#header {
height: 30vh;
position: absolute;
background-color: red;
width: 100%;
}
#welcome {
left: 5vw;
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
font-family: courier;
position: absolute;
font-size: 15vw;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
#main-nav {
position: absolute;
bottom: 0;
right: 0;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
font-family: courier;
font-size: 4vw;
white-space: no-wrap;
}
#main-nav ul li a.current {
font-weight: bold;
font-size: 28pt;
}
#main-nav ul li a:hover {
color: #ffb0ac;
}
#main-content {
position: relative;
width: 100%;
height: 500px;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: courier;
font-size: 36pt;
color: #fff;
}
.button {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<h1 class="w">Welcome</h1>
</div>
<nav id="main-nav">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Introduction</li>
<li>Keys</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<h1 class="intro">Basic Music Theory Introdution</h1>
<img class="button" src="images/button.jpg" alt="button">
</div>
</div>
<!-- End of wrapper-->
I'm trying to create a horizontal/scrollable nav with gradient fades on each end. Setting the parent to overflow: auto almost solves my problem but hides my active link border, which I position absolute as a :before pseudo above its parent link. I was wondering if there was a way for me to keep the overflow while having my pseudo border break out of it? For the sake of this question, the gradient really doesn't matter per se but this structure needs to remain in tact.
ul {
margin: 0;
}
li {
display: inline-block;
}
.vertical-title {
height: 55px;
margin-bottom: 13px;
border-bottom: 3px solid #dceaec;
font-size: 22px;
line-height: 57px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.vertical-title-wrapper {
padding: 0;
z-index: 0;
position: relative;
}
.hub-nav {
display: block;
padding: 0 15px;
width: 100%;
z-index: 1;
white-space: nowrap;
overflow: auto;
}
.hub-nav-link {
position: relative;
}
.hub-nav-link.active-path:before {
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
position: absolute;
top: -16px;
background-color: #007eff;
}
<div class="hub-wrapper">
<div class="vertical-title">
Page Title
</div>
<nav class="hub-nav">
<ul class="hub-nav-list">
<li class="hub-nav-list-item">
<a class="hub-nav-link active-path" href="">
There's supposed to be a border above me!
</a>
</li>
</ul>
</nav>
</div>
<div>
Content Below
</div>
Negative margins will do the trick:
ul {
margin: 0;
}
li {
display: inline-block;
}
.vertical-title {
height: 55px;
margin-bottom: 13px;
border-bottom: 3px solid #dceaec;
font-size: 22px;
line-height: 57px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.vertical-title-wrapper {
padding: 0;
z-index: 0;
position: relative;
}
.hub-nav {
display: block;
padding: 0 15px;
width: 100%;
z-index: 1;
white-space: nowrap;
overflow: auto;
padding-top: 16px;
margin-top: -16px;
}
.hub-nav-link {
position: relative;
}
.hub-nav-link.active-path:before {
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
position: absolute;
top: -16px;
background-color: #007eff;
}
<div class="hub-wrapper">
<div class="vertical-title">
Page Title
</div>
<nav class="hub-nav">
<ul class="hub-nav-list">
<li class="hub-nav-list-item">
<a class="hub-nav-link active-path" href="">
There's supposed to be a border above me!
</a>
</li>
</ul>
</nav>
</div>
<div>
Content Below
</div>
So that you don't have to look for too long - I added these two lines into your snippet:
.hub-nav {
padding-top: 16px;
margin-top: -16px;
}
I am currently coding a responsive menu using the checkbox hack and noticed that when my menu appears after clicking the hamburger icon, it is wider than the viewport. The menu has a fixed position and a flex display. I have added red borders around elements to give show this issue. Here is the relevant code:
/* General styles */
html, body { height: 100%; }
body {
font-family: 'Miriam Libre', sans-serif;
}
a {
color: white;
text-decoration: none;
transition: 0.2s;
}
a:hover {
color: #ea3c53;
}
/* Navigation styles */
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #222222;
}
.donate {
position: absolute;
margin: 21px;
}
nav .brand {
display: block;
height: 70px;
margin: 10px auto;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
nav label {
position: absolute;
top: 0;
right: 0;
padding: 21px;
background: #63E2C6;
cursor: pointer;
z-index: 2;
}
nav > label > span {
display: block;
margin: 4px auto;
height: 4px;
width: 25px;
border-radius: 1px;
background: #ffffff;
transition: 0.5s;
}
.menu {
display: flex;
position: fixed;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
top: -100vh;
left: 0;
height: 100vh;
width: 100%;
background: #222;
list-style-type: none;
border: 1px solid red;
transition: top 0.5s cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
.menu li {
font-size: 30px;
border: 1px solid red;
}
input[type=checkbox]:checked ~ .menu {
top: 0;
}
<nav>
<!-- Top bar -->
Donate
<img src="media/logo2.png" alt="Logo" class="brand">
<input type="checkbox" id="nav">
<label for="nav">
<span></span>
<span></span>
<span></span>
</label>
<ul class="menu">
<li>Home.</li>
<li>Mission.</li>
<li>Contact.</li>
</ul>
</nav>
So, my question is, why is this happening? After all, I do have the width set to 100%, not 110%.
You have margin on your body element. Add:
body {
margin: 0;
}
There is also default margin and padding on your ul element that is also being set to width: 100%;
I recommend checking all of your primary containers, looking at them in your browser's inspector will highlight when you have additional spacing on an element that you may not be accounting for.
I want to get these two elements to align perfectly vertical side by side using a position value of relative. I'm having trouble as to understanding why these two elements don't want to align.
Can someone explain what I'm doing wrong? and if possible find a solution?
https://jsfiddle.net/kerberonix/qcq68gfg/
HTML
<html>
<body>
<footer>
<div class="test">
<p>Footer Text</p>
</div>
<ul class="social-links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</footer>
</body>
CSS
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
padding: 0 20px;
background-color: #262626;
}
.test {
position: relative;
display: inline-block;
top: 50%;
width: 50%;
transform: translateY(-50%);
}
footer p {
font-size: 100%;
color: #888;
}
.social-links {
position: relative;
display: inline-block;
top: 50%;
width: 50%;
transform: translateY(-50%);
}
.social-links li {
display: inline-block;
margin-right: 35px;
text-decoration: none;
}
.social-links li:last-child {
margin: 0;
}
I would remove all of the positioning on the text and social elements, and use display: flex; align-items: center; on the parent.
footer {
position: absolute;
bottom: 0;
height: 70px;
padding: 0 20px;
background-color: #262626;
display: flex;
align-items: center;
box-sizing: border-box;
left: 0; right: 0;
}
.test {
position: relative;
}
footer p {
font-size: 100%;
color: #888;
}
/*--------------------------------------------------------------------------------------------
SOCIAL LINKS
--------------------------------------------------------------------------------------------*/
.social-links {
position: relative;
color: white;
text-align: right;
padding: 0;
}
.test, .social-links {
flex: 1 0 0;
}
.social-links li {
display: inline-block;
margin-left: 35px;
text-decoration: none;
}
.social-links li:last-child {
margin: 0;
}
<html>
<body>
<footer>
<div class="test">
<p>Footer Text</p>
</div>
<ul class="social-links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</footer>
</body>
</html>
Use position: absolute on the two elements and consider the additional 20px for widths and positions caused by the padding of the footer. Also don't forget to reset the padding for the ul. See the code in my snippet for details:
html,
body {
margin: 0;
}
footer {
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
padding: 0 20px;
background-color: #262626;
}
.test {
position: absolute;
display: inline-block;
top: 50%;
width: calc(50% - 20px);
transform: translateY(-50%);
}
footer p {
font-size: 100%;
color: #888;
}
.social-links {
position: absolute;
left: calc(50% - 20px);
top: 50%;
width: calc(50% - 20px);
transform: translateY(-50%);
text-align: right;
margin: 0;
padding: 0;
}
.social-links ul {}
.social-links li {
display: inline-block;
margin-right: 35px;
text-decoration: none;
}
.social-links li:last-child {
margin: 0;
}
<footer>
<div class="test">
<p>Footer Text</p>
</div>
<ul class="social-links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</footer>
Now its Okay I think you get What you need just replace the code in ssocial links
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
padding: 0 20px;
background-color: #262626;
}
.test {
position: relative;
display: inline-block;
top: 50%;
width: 50%;
transform: translateY(-50%);
}
footer p {
font-size: 100%;
color: #888;
}
/*--------------------------------------------------------------------------------------------
SOCIAL LINKS
--------------------------------------------------------------------------------------------*/
.social-links {
position: relative;
display: inline-block;
top: 50%;
width: 50%;
transform: translateY(-50%);
text-align: right;
}
.social-links li {
top 150px;
height:20px;
width: 250px;
position: relative;
left: calc(50% – 125px);
}
.social-links li:last-child {
margin: 0;
}