I cannot get my .container{} to encompass all the content on my web page. My lower navigation buttons are sitting outside the container (marked by a 1px black border) and I can't figure out why. I'm not sure where I've went wrong in my CSS or HTML code! Thanks in advance for your help. Here is a link to my CodePen: https://codepen.io/IDCoder/pen/rGWeEE?editors=0100
Here are my code snippets:
<html>
<head>
<title>Ms.Jane Equities Management Corp</title>
</head>
<body>
<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"/>
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82"/> </div>
<div class ="nav wrap">
<!--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">
<!--<div class="search box wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>-->
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class ="nav wrap 2">
<!--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>
</body>
<html>
CSS:
.container-fluid{
border: 1px solid #000000;
max-width: 1600px;
/*overflow: hidden;*/
}
.wrap{
background-color: yellow;
display: inline: flex;
/*overflow: hidden;*/
}
.Logos{
width: 55%;
display: inline-block;
background-color: blue;
}
.nav.wrap{
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: 1600px;
height: 550px;
margin: auto;
}
.floater.box{
background-color: white;
border-radius: 10px;
opacity: .45;
max-width: 75%;
height: 200px;
position: absolute;
top:50%;
left: 0;
right: 0;
margin: auto;
}
/*.search {
width: 50%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
.search.box.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
I think your div.nav.wrap is getting pushed down because it's floated and there's no room for it in the container and because it's floated the container doesn't adjust for it. If you remove the float, you'll see the container start to contain it. That's normal float behaviour - elements with float are out of the 'flow' of the document so other elements aren't affected by them.
I'd just add a negative top margin to push it back up. I'd usually do this in rem or depending on how you size the nav height. So your existing .nav.wrap rule would become:
.nav.wrap{
display: inline-block;
background-color: green;
float: right;
margin-top: -35px;
}
Related
here is a screenshot of my website i want to adjust the image to be on the right of the page as indicated by the arrow below(float:right; didn't work).Also, as for (float:left;) i want on the left side to add some text as shown in the image below at the left side.Lastly for the circled part on the photo it is not clickable for some reason :(((
i want the picture to stick to the right side of the page as the arrow showing below::
the css code ::
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
}
.hp_div{
background-color: pink;
}
.hp_div section#hpimg{
float: left;
}
.hp_div section#hptext{
float: right;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
.form-inline {
display: flex;
}
.homeage_but {
width: 100%;
height: auto;
}
.mark_colour{
background-color: pink;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
background-color: pink;
}
.Hsection{margin-top:0px!important;margin-bottom:0px!important}
.Hcontent{max-width:980px;margin-left:auto;margin-right:auto}
.centered-element{text-align:center;}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code::
<!DOCTYPE html>
<!--F04 :moudhi al.gowiez-->
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
<div class="icons">
<a herf=""><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;"></i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="hp_div">
<!-- Slide Show -->
<section id="#hpimg">
<img class="mySlides" src="pink-velvet-cake-thumb_1_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="snicker-chocolate-cake-A_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="torta-unicorn.jpg" style="width:660; height: 660;">
</section>
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
<section id="#hptext">
<h5>welocome</h5>
<p>fkld;flfk;sk</p>
</section>
</div>
</body>
</html>
Two things I notice right away:
<section id="#hpimg"> & <section id="#hptext">
You'll need to remove the '#' from these id declarations in order for your CSS to affect them.
And the reason your links aren't working:
<a herf="">...</a>
'herf' isn't the same as 'href'. Always check for typos ;)
EDIT: It seemed like one of your edits indicated you wanted the image moved to the left instead of the right. I've updated the little fiddle I made, basically just changing float:left to float:right.
Why don't you use bootstrap the col-md for the text and image
For example
<div class="container">
<div class="row">
<div class="col-md-7">
<p> Text </p>
</div>
<div class="5">
<img href="cake img">
</div>
</div>
</div>
This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"
Good day! I'm having a struggle to aligned the jumbtron to my calendar icon. And the elements of the jumbtron is not inside of it. Can someone help me how to solve this? Ideas? i just started studying bootstrap and css.
Here's the picture.
here is my html code.
<div class="events">
<div class="container">
<div class="row">
<div class= "col-sm-4 col-xs-25">
<h4 id="event"><i class="fa fa-calendar" aria-hidden="true"></i> Upcoming Events</h4>
<hr class="carved">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<div class="container">
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div>
</div>
<hr class="divider">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<hr class="divider">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
</div>
<div class= "col-sm-8 col-xs-25">
<h4 id="event"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Latest News</h4>
<hr class="carved">
</div>
</div>
</div>
</div>
here is my css
#event {
color: #a92419;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
.date {
display: block;
width: 60px;
height: 60px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
}
.date .month {
background: #a92419;
display: block;
padding-bottom: 5px;
padding-top: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
border-bottom: 2px solid #a92419;
box-shadow: inset 0 -1px 0 0 #a92419;
}
.date .day {
display: block;
margin: 0;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
font-size: 20px;
color:#a92419;
box-shadow: 0 0 3px #ccc;
position: relative;
}
.date .day::after {
content: '';
display: block;
height: 95%;
width: 96%;
position: absolute;
top: 3px;
left: 2%;
z-index: -1;
box-shadow: 0 0 3px #ccc;
}
.date .day::before {
content: '';
display: block;
height: 90%;
width: 90%;
position: absolute;
top: 6px;
left: 5%;
z-index: -1;
}
.jumbotron {
width: 300px;
height: 100px;
margin:none;
}
.jumbotron p {
font-size:12px;
}
The .container class carries its own width(s) and is intended to be used as a outer wrapper for your layout. Because of this, they do not tend to nest well. The one you have as a sibling of your .date classed elements is breaking the layout.
As for the spacing of the .jumbotron contents, Bootstrap assigns some pretty dramatic padding to that class by default. Consider overwriting that with your own values in your .jumbotron rule. The other issue — the .jumbotron contents bleeding out of their container — that is a result of the height: 100px you are setting. You can stop the contents from taking up space beyond the boundaries of the .jumbotron by adding/modifying its overflow property. This may be a matter of opinion but I think it is usually better to avoid setting height in the CSS and let the contents define the size of the container — especially in cases where the content is CMS/client driven.
If you remove the .container, you’ll still have the problem of the .date and .jumbotron stacking vertically. To address that, you might consider treating Date element as .row with a column for your .date element, and a column for that Date’s event(s).
<hr class="carved">
<div class=“row”><!-- the Date wrapper -->
<div class="col-sm-4">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
</div>
<div class="col-sm-8"><!-- this column holds all the Events for this Date -->
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div>
</div>
</div>
Note: The new structure will require a bit of adjustment to some of your CSS width properties, and the col- device/sizes I put on the Date and Event columns are just examples — size as needed.
<div class="container">
<div class="row">
<div class="col-md-2">
<h4 id="event"><i class="fa fa-calendar" aria-hidden="true"></i> Upcoming Events</h4>
<hr class="carved">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div><!-- date -->
</div><!-- md2 -->
<div class="col-md-10">
<h4 id="event"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Latest News</h4>
<hr class="carved">
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div><!-- jumbo -->
</div><!-- md10 -->
</div><!-row>
</div><!-- container -->
+
#event {
color: #a92419;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
.date {
display: block;
width: 60px;
height: 60px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
}
.date .month {
background: #a92419;
display: block;
padding-bottom: 5px;
padding-top: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
border-bottom: 2px solid #a92419;
box-shadow: inset 0 -1px 0 0 #a92419;
}
.date .day {
display: block;
margin: 0;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
font-size: 20px;
color:#a92419;
box-shadow: 0 0 3px #ccc;
position: relative;
}
.date .day::after {
content: '';
display: block;
height: 95%;
width: 96%;
position: absolute;
top: 3px;
left: 2%;
z-index: -1;
box-shadow: 0 0 3px #ccc;
}
.date .day::before {
content: '';
display: block;
height: 90%;
width: 90%;
position: absolute;
top: 6px;
left: 5%;
z-index: -1;
}
Result
I have some divs.
I am using a Grid system and I cannot for the life of me figure out how to stop divs from pushing others down.
When I try to set the margin top to say 50px for the border div it pushes everything else down.
I do not want to use position absolute due to being responsive grid system.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
margin-top: 100px;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top:;
}
<div class="cover">
<div class="grid">
</div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
</div>
On the border div, you can remove the margin and add:
position: relative;
top: 50px;
Seems to me that the problematic margin is here:
ul {
margin-top: 100px;
}
Remove or shrink that and add your margin to .border as intended.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top: 50px;
;
}
<div class="cover">
<div class="grid"></div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
Try using:
position: relative;
top: 50px;
Here is a pen: http://codepen.io/anon/pen/GpyMKp
For your border div. This is a way to move an element from it's usual position without affecting the other divs.
Although I feel like you would be better off just reducing the margin-top on your ul element, and you could achieve the same layout without it being a sort of "hacky" solution.
So I got a sketch of a designer I worked with and was wondering how I create the border arrows in the picture below
I tried to put out this font-awesome icon by using the :after selector, it got pretty ugly:
http://fortawesome.github.io/Font-Awesome/icon/angle-right/
So instead, I tried to put an arrow on an arrow through this arrow generator:
http://apps.eky.hk/css-triangle-generator/
It also became very ugly. So now I wonder if there is anyone who has a good idea on how to solve this?
How my html look like so far:
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">
<a class="bx-pager-link active" data-slide-index="0" href=""> 1. DIN EXPERT </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="1" href=""> 2. VÅRA TJÄNSTER </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="2" href=""> 3. CASE </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="3" href=""> 4. KONTAKT </a>
</div>
</div>
You can create triangles with CSS borders by:
border-top: 20px solid transparent;
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green
I've created the same thing as you see above here:
#container {
width:150px;
height:40px;
background-color:green;
position:relative;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green;
position:absolute;
right:-20px;
}
<div id="container">
<div class="arrow-right"></div>
</div>
Atlast!! :)
div.main {
margin-right:30px;
}
ol > li {
display: table-cell;
height: 30px;
position: relative;
padding: 0px;
margin: 0px;
text-align: center;
border: 1px solid #d68a3a;
}
ol > li > div {
position:relative;
line-height: 30px; /* equal to the list item's height */
height:100%;
width: 100%;
}
ol>li:hover {
background-color: #d68a3a;
cursor: pointer;
color: white;
}
ol {
display: table;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
ol > li > div:after, ol > li > div:before {
content:"";
display:inline-block;
border-width: 16px;
border-style: solid;
width: 0px;
height: 0px;
left: 100%;
top: -1px;
position: absolute;
z-index: 1;
}
ol > li > div:after, ol > li:hover > div:before {
border-color: transparent transparent transparent #d68a3a;
}
ol > li > div:before {
border-width: 14px;
display: block;
border-color: transparent transparent transparent #ffffff;
z-index: 2;
top:1px;
}
Working Fiddle
You have to make little bit changes to your html structure
Put active class at bx-pager-item element level
Put 1 extra element after anchor tag .
Please refer below code snippet.
Working fiddle link: Fiddle
.container {
max-width: 700px;
margin: auto;
}
.bx-pager {
display: flex;
align-items: center;
height: 34px;
border-left: 1px solid #d68a3a;
}
.bx-pager .bx-pager-item {
display: flex;
align-items: center;
height: 100%;
flex: 0 25%;
border-top: 1px solid #d68a3a;
border-bottom: 1px solid #d68a3a;
}
.bx-pager .bx-pager-item .bx-pager-link {
text-decoration: none;
color: #222;
font-size: 13px;
flex: 1;
padding-left: 16px;
text-align: center;
}
.bx-pager .bx-pager-item .arrow {
border: solid #d68a3a;
display: inline-block;
padding: 9px;
border-width: 0 1px 1px 0;
transform: translateY(15.5px) rotate(-45deg) skew(-15deg, -15deg) translateX(18px);
background-color: #FFF;
}
.bx-pager .bx-pager-item.active {
background-color: #d68a3a;
}
.bx-pager .bx-pager-item.active .bx-pager-link {
color: white;
}
.bx-pager .bx-pager-item.active .arrow {
background-color: #d68a3a;
}
<body>
<div class="container">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item active">
<a class="bx-pager-link " data-slide-index="0" href=""> 1. DIN EXPERT </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="1" href=""> 2. VÅRA TJÄNSTER </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="2" href=""> 3. CASE </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="3" href=""> 4. KONTAKT </a>
<div class="arrow">
</div>
</div>
</div>
</div>
</body>
Please Change according to your specification.
<style>
.menu {
position: relative;
background: #88b7d5;
width:150px;
height:60px;
}
.menu:after, .menu:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0px;
width: 0px;
position: absolute;
pointer-events: none;
}
.menu:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
</style>
<div class="menu">
</div>
In case it is needed for others here is another solution, that can work as the requested answer, but will work if there is a need of separation of the elements.
Using the above examples, what will happen is that the background must always remain the same color. Like this it will always have a separation thus transparency between items.
Hope this helps, this post really helped me to find this solution :)
.items--container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
margin-left: 1rem;
width: 150px;
height: 50px;
}
.item.active .content {
color: #FFFFFF;
}
.item.active .arrow {
background: #d68a3a;
}
.content {
color: #000000;
position: absolute;
z-index: 2;
}
.arrow {
width: 100%;
height: 50%;
background: #FFFFFF;
}
.arrow.top {
transform: skew(45deg, 0deg);
border-left: 1px solid #d68a3a;
border-right: 1px solid #d68a3a;
border-top: 1px solid #d68a3a;
}
.arrow.bottom {
transform: skew(-45deg, 0deg);
border-left: 1px solid #d68a3a;
border-right: 1px solid #d68a3a;
border-bottom: 1px solid #d68a3a;
}
<div class="items--container">
<div class='item'>
<div class="arrow top"></div>
<div class="content">Menu Item 1</div>
<div class="arrow bottom"></div>
</div>
<div class='item'>
<div class="arrow top"></div>
<div class="content">Menu Item 2</div>
<div class="arrow bottom"></div>
</div>
<div class='item active'>
<div class="arrow top"></div>
<div class="content">Menu Item 3</div>
<div class="arrow bottom"></div>
</div>
<div class='item'>
<div class="arrow top"></div>
<div class="content">Menu Item 4</div>
<div class="arrow bottom"></div>
</div>
</div>