I'm developing a tumblr theme with bootstrap, and I'd like a nice big area for the user's profile picture right next to the header. The issue here is, that bootstrap has a very tight grid format and I can't see any room for what I want:
see that red thing? I want to move it where the blue arrow is pointing. I've tried expanding the container, setting the red circle to float left, and giving it margin-bottom:100%, but that shoved everything down off the page.
Here's my css and HTML for reference, the item in question is labeled with the class "talkbubble":
CSS
//Media Queries
#media (min-width: 1200px){
.container {
width: 800px;
}
}
#media (min-width: 992px){
.container {
width: 800px;
}
}
//Header Edits
.jumbotron{
margin-bottom: 0px;
h1{
color: red;
}
}
//upsidedown tab edits
.tab-content{
padding:10px;
border:1px solid #ddd;
border-bottom:0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom:0;
margin-top:-1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:-33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height:0;
width:0;
position:absolute;
bottom:2px;
right:67px;
}
//square gallery
.square{
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
//iconbubble
.talkbubble {
width: 120px;
height: 120px;
background: red;
position: absolute;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
HTML below
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/app.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap/tab.js"></script>
<script src="js/jquery.fakecrop.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-pinterest-extension-installed="cr1.39.1">
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<script>
$(document).ready(function () {
// for a filled square thumbnail
$('.square img').fakecrop({fill: true, wrapperWidth: 200, wrapperHeight: 200});
});
</script>
<div class="row marketing">
<div class="col-sm-4">
<div class="square"><img src="resources/testimg.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg2.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg3.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg4.png" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg5.jpg" alt="..."></div>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./Narrow Jumbotron Template for Bootstrap_files/ie10-viewport-bug-workaround.js"></script>
<div id="scrollrail-vertical" class="disabled" style="width: 12px; border-left-width: 1px;"><div id="scrollbar-vertical" style="visibility: hidden; border-radius: 5px 7px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; height: 1015px; top: 2px; opacity: 0;"></div></div><div id="scrollrail-horizontal" class="disabled" style="height: 12px; border-top-width: 1px;"><div id="scrollbar-horizontal" style="visibility: hidden; border-radius: 14px 10px; box-shadow: rgba(255, 255, 255, 0.901961) 0px 0px 1px 1px; width: 1916px; left: 2px; opacity: 0;"></div></div><div id="window-resizer-tooltip"><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div></body>
</html>
See this fiddle
The trick is this:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
...your image markup here...
</div>
<div class="col-md-9">
...
</div>
</div>
I've set it to be like that from md up. You might want to make use of hidden-* for the image column at lower widths as what you're doing from a design point of view would look strange at mobile widths.
The absolute position is a right way for your issue. But you have to use another properties instead of float:
top
bottom
left
right
For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the margin edge of the element and the edge of its containing block.
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
You can apply this properties directly to the bubble instead of the before: pseudo-element.
Use /* */ instead of // for comments in CSS. For example:
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
}
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Media Queries */
#media (min-width: 1200px) {
.container {
width: 800px;
}
}
#media (min-width: 992px) {
.container {
width: 800px;
}
}
/* Header Edits */
.jumbotron {
margin-bottom: 0px;
h1 {
color: red;
}
}
/* upsidedown tab edits */
.tab-content {
padding: 10px;
border: 1px solid #ddd;
border-bottom: 0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: 0;
margin-top: -1px;
margin-left: 32px;
width: 71px;
white-space: nowrap;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
background-color: #eee;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #eee;
border: 1px solid #ddd;
border-top-color: transparent;
}
.nav-tabs > li.active > a {
background-color: #eee !important;
}
.arrow {
border-color: #eee transparent transparent #eee;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: -33px;
}
.arrow2 {
border-color: #eee #eee transparent transparent;
border-style: solid;
border-width: 17px 17px 17px 17px;
height: 0;
width: 0;
position: absolute;
bottom: 2px;
right: 67px;
}
/* square gallery */
.square {
border-radius: 20px;
border-style: solid;
border-width: 2px;
width: 200px;
height: 200px;
margin-top: 60px;
}
/* iconbubble */
.talkbubble {
position: absolute;
top: 100px;
left: 20px;
z-index: 20;
width: 120px;
height: 120px;
background: red;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 50px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
<div class="container">
<div class="talkbubble"></div>
<div class="header clearfix">
<!--
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
-->
<h3 class="text-muted">Hi I'm...</h3>
</div>
<div class="jumbotron tab-content">
<div id="home" class="tab-pane fade in active">
<h1>CpBunni</h1>
<p class="lead">...and I'm an artist.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a cosplayer.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h1>CpBunni</h1>
<p class="lead">...and I'm a nude model.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1 <div class="arrow"></div><div class="arrow2"></div></a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2 <div class="arrow"></div><div class="arrow2"></div></a></li>
</ul>
<div class="row marketing">
<div class="col-sm-4">
<div class="square"><img src="resources/testimg.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg2.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg3.jpg" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg4.png" alt="..."></div>
</div>
<div class="col-sm-4">
<div class="square"><img src="resources/testimg5.jpg" alt="..."></div>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
Related
I would like to create a custom shape like this image
My HTML :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class="col-md-10 ">
<div class="col-md-2" style="background-color: yellow;height: 38px;padding:0;">
aaaaa
</div>
<div class="col-md-1" style="padding:0;">
<div class="col-md-12" style="background-color: green; border-radius: 0px 400px 50px 0px/0px 150px 23px 0px;">
mmm
</div>
<div class="col-md-12" style="background-color: red; border-radius: 0px 11px 400px 0px/0px 23px 150px 0px;">
nnnn
</div>
</div>
</div>
</div>
You can simply use pseudo element and data attribute. You will be able de generate the HTML from backend without changing CSS (you simply need to adjust the color as you need) :
* {
box-sizing: border-box;
}
.element {
display: inline-block;
position: relative;
padding: 10px 40px;
background: #ccc;
border: 1px solid #000;
}
.element:before {
content: attr(data-before);
position: absolute;
top: 0;
bottom: 50%;
right: -42px;
width: 40px;
background-image: linear-gradient(45deg, black, red);
border-top-right-radius: 100%;
border: 1px solid #000;
color: #fff;
z-index:99;
}
.element:after {
content: attr(data-after);
position: absolute;
top: 50%;
bottom: 0;
right: -42px;
width: 40px;
background-image: linear-gradient(45deg, black, green);
border-bottom-right-radius: 100%;
border: 1px solid #000;
color: #fff;
z-index:99;
}
<div class="element" data-before="A" data-after="B">
content 1
</div>
<div class="element" data-before="C" data-after="D">
content 2
</div>
<div class="element" data-before="E" data-after="F">
content 3
</div>
Use HTML5 canvas tag and java script to draw you own image in
you can read about it in below link
https://www.w3schools.com/html/html5_canvas.asp
I use the span element as a button to open a sidebar, and I need to position it above the #conteudo element, hiding the orange background... I have been trying some things with no success...
#conteudo {
background-color: green;
height: 100px;
}
body {
height: auto !important;
}
#body {
background-color: orange;
border-left: 1px solid #738290;
border-right: 1px solid #738290;
}
#navSideBtn {
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 3px;
border-bottom: solid green 3px;
border-bottom-right-radius: 3px;
border-right: solid green 1px;
color: green;
background-color: whitesmoke;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="body" class="container-fluid text-justify">
<div class="row">
<span id="navSideBtn" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-chevron-right"></span>
<section id="conteudo" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2>lorem ipsum title</h2>
</section>
</div>
</div>
Set the .row to position:relative and then you can set the #navSideBtn to be position:absolute and use top/left to position it.
#conteudo {
background-color: green;
height: 100px;
}
body {
height: auto !important;
}
#body {
background-color: orange;
border-left: 1px solid #738290;
border-right: 1px solid #738290;
}
#navSideBtn {
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 3px;
border-bottom: solid green 3px;
border-bottom-right-radius: 3px;
border-right: solid green 1px;
color: green;
background-color: whitesmoke;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.row {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="body" class="container-fluid text-justify">
<div class="row">
<span id="navSideBtn" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-chevron-right"></span>
<section id="conteudo" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2>lorem ipsum title</h2>
</section>
</div>
</div>
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;
}
I am attempting to construct a timeline similar to the one that is shown below:
The difficulty I am having is constructing the bottom portion of the timeline that has icons connected by a single line, as well as adding the triangle to the bottom of each event. This is currently my code:
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
white-space: nowrap;
overflow: auto;
padding-left: 0;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
</li>
<div id="triangle"></div>
<div class="timeline_icon">
<img src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""></div>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
The first list element in my list is my attempt at trying to add a triangle and an icon, but I can't figure out how to position the triangle on the bottom border, and how to position the icon directly below the triangle, with a horizontal rule, or other line, between icons.
The triangle is applied as a pseudo element ::after. The image is aligned with the block - it will be much easier to manipulate. Fixed the scroll view to scroll only in X, not in Y axis. The line is an object external to the scrollview, because otherwise its length is limited to the visible area and scrolls left with the view.
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
padding-left: 0;
padding-top: 40px;
padding-bottom: 60px;
position: relative;
}
#timeline_border {
position: relative;
top: -123px;
display: block;
width: 100%;
height: 1px;
border-top: 2px solid #ccc;
z-index: -1;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
position: relative;
}
#timeline > li:after {
position: absolute;
bottom: -20px;
left: 40px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: block;
content: "";
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
.timeline_ruler {
white-space: nowrap;
overflow-x: scroll;
overflow-y: visible;
display: block;
height: auto;
padding-bottom: 100px;
}
.timeline_icon {
width: 80px;
height: 80px;
position: absolute;
bottom: -102px;
left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<div class="timeline_ruler">
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
</ul>
</div>
<div id=timeline_border></div>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
As per the below code, by default home tab is showing blank. Content will display below when we click on product ordering tab. I have written this code in Javascript. But when i tried to convert these into bootstrap im struggling more to create this.
Anybody can help to resolve this?
<!DOCTYPE>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<link type="text/css" rel="stylesheet" media="all" href="images/style.css" />-->
<style>
.wrapper {
margin: 0px auto 0px auto;
padding: 3px 0px 0px 0px;
width: 100%;
}
.container{
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 900px;
height: 500px;
background-color: white;
border: 1px solid green;
}
.clear{
clear: both;
}
.menu_container{
margin: 0px;
padding: 0px;
width: 900px;
}
.middle_container{
margin:0px;
padding:0px;
width: 900px;
}
.middle_container_left{
margin:0px;
padding:0px;
width: 300px;
height: 246px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
float:left;
}
.middle_container_right{
margin:0px 0px 0px 10px;
padding:0px;
width: 580px;
height: 300px;
/*border: 1px solid black;*/
float:left;
}
.menu_font{
margin: 0px 5px 0px 0px;
width: 100px;
height:30px;
float:left;cursor:hand;
text-align:center;
padding-top:5px;
font-weight:bold;
background-color: #8eaf64;
border-radius:5px 5px 0 0;
color: white;
}
.menu_font:hover{
margin: 0px 5px 0px 0px;
width: 100px;
height:30px;
float:left;cursor:hand;
text-align:center;
padding-top:5px;
font-weight:bold;
color: white;
background-color:#64A70B !important;
border-radius:5px 5px 0 0;
}
.onoffswitch {
position: relative; width: 63px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 6px;
background-color: #85a857; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 2px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 30px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: -4px;
bottom: 0;
right: 26px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: -5px;
}
.green{
color: green;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
function show_menu(elementId) {
document.getElementById("home").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById(elementId).style.display="block";
}
function show_left_menu(elementId) {
document.getElementById("quick_add").style.display="none";
document.getElementById("solution_builder").style.display="none";
document.getElementById("bulk_load").style.display="none";
document.getElementById("product_search").style.display="none";
document.getElementById("saved_cart").style.display="none";
document.getElementById("view_favorites").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
</head>
<body>
<div class="wrapper">
<div class="container">
<h2 align="center">Demo</h2>
<div class="menu_container">
<div class="menu_font" onclick="show_menu('home');">Home</div>
<div class="menu_font" onclick="show_menu('id2');">Product Ordering</div>
<div class="clear"></div>
</div>
<div class="middle_container">
<div id="home" style="height: 300px;"></div>
</div>
<div class="middle_container" id="id2" style="display:none">
<div class="middle_container_left">
<ul style="list-style-type: none;margin:0px;padding:0px;">
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('quick_add');">Quick Add</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('solution_builder');">Solution Builder</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('bulk_load');">Bulk Load</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('product_search');">Product Search</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('saved_cart');">Saved Cart</li>
<li style="padding:10px;height:20px;" onclick="show_left_menu('view_favorites');">View Favorites</li>
</ul>
</div>
<div class="middle_container_right" id="quick_add">
<h2>Quick Add:</h2>
<table cellpadding="0" cellspacing="0" style="width: 300px;">
<tr>
<td>Item Name:</td>
<td>
<input list="product_name" name="item_name">
<datalist id="product_name">
<option value="112-800-00000">
<option value="112-700-00000">
<option value="700-800-00000">
<option value="100-800-00000">
<option value="900-800-00000">
<option value="600-800-00000">
<option value="08000BK07045">
<option value="08000BK04045">
<option value="08000BK06045">
</datalist>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row col-xs-12 col-sm-12 ">
<div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div>
<div class="onoffswitch dispinline ">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td>Quantity:</td>
<td><input type="textbox" name="Quantity"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
</table>
</div>
<div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div>
<div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div>
<div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div>
<div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div>
<div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
MY Bootstrap code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs > li > a { border: none; color: #666; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
.nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }
body{ background: #EDECEC; padding:50px}
</style>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<!--<div class="container-fluid text-center"> -->
<div class="container">
<div class="row content">
<div class="col-sm-2 sidenav" style="border: 1px solid red;">
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-8 text-left">
<h1 style="text-align: center;">DEMO</h1>
<div class="row">
<div class="col-md-6" style="border: 1px solid red;width:100%;">
<!-- Nav tabs --><div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<!--<li role="presentation">Messages</li>
<li role="presentation">Settings</li>-->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"></div>
<div role="tabpanel" class="tab-pane" id="profile"><h2>Quick Add:</h2>
<table cellpadding="0" cellspacing="0" style="border: 1px solid red;">
<tr>
<td>Item Name:</td>
<td>
<!--<input list="product_name" name="item_name">
<datalist id="product_name">
<option value="112-800-00000">
<option value="112-700-00000">
<option value="700-800-00000">
<option value="100-800-00000">
<option value="900-800-00000">
<option value="600-800-00000">
<option value="08000BK07045">
<option value="08000BK04045">
<option value="08000BK06045">
</datalist>-->
<div class="col-sm-10">
<input class="form-control" type="text" id="sm">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row col-xs-12 col-sm-12 ">
<div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div>
<!--<div class="onoffswitch dispinline ">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>-->
<input type="checkbox" checked data-toggle="toggle">
</div>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td>Quantity:</td>
<td><input type="textbox" name="Quantity"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
</table>
</div>
<!--<div role="tabpanel" class="tab-pane" id="messages"></div>
<div role="tabpanel" class="tab-pane" id="settings"></div>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Not even sure where to start here. But one main cause for unexpected display results may be that bootstrap-toggle.min.css is after your embedded styling so the default bootstrap CSS will override your custom styling which I am assuming is the opposite to what you are trying to do.
i dont know exactly what your saying but you could just line for line convert it by hand to a seperate language thats compatable, im sure theres a better way to do this but this is how i personaly do it.