I want to integrate a timeline on a website and used this code as a basis for the timeline: http://bootsnipp.com/snippets/featured/timeline-responsive
I further expanded the snippet by adding pictures. In the beginning everything worked great with two pictures (in the first row), three were also okay(below the first two), but as soon as a forth came, latter suddenly appeared one row below instead of next to the third under the second.
html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1981-1990</h4>
</div>
<div class="timeline-body">
<p>Some text</p>
<p>Some more text</p>
</div>
</div><div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
</div>
</li>
CSS:
/*body*/
body {
background-color: white;
}
.panel {
background-color: white;
color: black;
border-radius: 0;
text-align: justify;
font-size: 1.3em;
}
.panel-extra {
padding: 10px 0;
margin-top: 25px;
background-color: lightgrey;
border-radius: 0;
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
.box {
padding-top: 30px;
padding-bottom: 30px;
border-bottom-width: 3px;
border-bottom-color: lightgrey;
border-bottom-style: solid;
}
/*Timeline*/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
margin-bottom: 40px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-picture-body: before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body: after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body {
float: left;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-images-right {
display: inline-block;
vertical-align: top;
width: 40%;
float: left;
padding: 0 10px;
}
.timeline-images-left {
display: inline-block;
vertical-align: top;
width: 40%;
float: right;
padding: 0 10px;
}
.padding-bottom {
padding-bottom: 10px;
}
.align {
display: block;
}
/*fonts*/
h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 220px;
margin-top: 0;
}
.box h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 30px;
margin-top: 0;
}
h2{
text-align: center;
font-size: 2.3em;
color: black;
}
p {
text-align: justify;
font-size: 1.3em;
}
I already tried deleting any padding and changing the display and vertical-alignment property.
For clarification, the problem looks like this:
If you need further parts of the code, please tell me, I am happy to upload them as well.
I appreciate any help, thank you in advance!
It is not the perfect solution as it does not target the initial browser problem but this way the pictures no longer behave weird:
I have added a containerbetween the rows. It must be a bootstrap container, with all the other elements and classes that I tried it did not work.
<div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="img/tl7.jpg">
<img class="timeline-images-left padding-bottom" src="img/tl8.jpg">
<div class="container"></div>
<img class="timeline-images-left align" src="img/tl9.jpg">
<img class="timeline-images-left align" src="img/tl10.jpg">
</div>
Related
I am trying to create a speech bubble with an arrow on the left and right side. Something like below
I have used the below CSS to achieve the same :
.speech-wrapper{
padding: 30px 40px;
}
.chatbox {
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:3px;
background: #c7edfc;
color: #000;
position: relative;
border-radius: 4px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.chatbox_other{
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:3px;
background: #D3D3D3;
color: #000;
position: relative;
border-radius: 4px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.name_other{
font-weight: 600;
position: absolute;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
bottom: 8px;
right: 10px;
}
.timestamp_other{
font-size: 11px;
position: absolute;
text-align: left;
bottom: 0px;
left: 10px;
text-transform: uppercase; color: #999
}
.timestamp{
font-size: 11px;
position: absolute;
bottom: 8px;
right: 10px;
text-transform: uppercase; color: #999
}
/* speech bubble 13 */
.name{
font-weight: 600;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
}
.bubble-arrow {
position: absolute;
width: 0;
bottom:42px;
left: -16px;
height: 0;
&.alt{
right: -2px;
bottom: 40px;
left: auto;
}
}
.bubble-arrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 9px solid #c7edfc;
border-radius: 0 20px 0;
width: 15px;
height: 30px;
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
But for me, the arrow is missing always it always comes with a box.
I am a beginner to HTML and CSS any help on this will be appreciated.
Am I doing anything wrong to draw the rectangle?
EDIT:
I can see the chat bubble on chrome and all recent browsers but when I try using the very old browsers the below statement does not decode correctly. So the chat triangle was not in the appropriate position.
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
HTML CODE:
<div class="speech-wrapper"><div class="chatbox"><div class="txt"><p class="name">TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div><div class="bubble-arrow alt"></div></div>
Is there anything else can I use apart from the transform
Try this,
<!doctype html>
<html>
<head>
<title>Chat Bubbles Demo</title>
<style type="text/css">
.chat-box
{
width: 300px;
}
.header
{
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages
{
padding: 10px;
height: 200px;
background-color: green;
background-color: rgb(237, 239, 244);
border-width: 1px;
border-color: black;
border-style: solid;
overflow-y: scroll;
}
.messages ul
{
padding: 0px;
list-style-type: none;
}
.messages ul li
{
height: auto;
margin-bottom: 10px;
clear: both;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span
{
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.left
{
float: left;
}
.messages ul li span.left:after
{
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.left:before
{
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.right:after
{
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.right:before
{
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.right
{
float: right;
background-color: #dbedfe;
}
.clear
{
clear: both;
}
.input-box
{
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea
{
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
</style>
</head>
<body>
<div class="chat-box">
<div class="header">
Narayan Prusty
</div>
<div id="messages" class="messages">
<ul>
<li>
<span class="left">Hello</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Are you there?</span>
<div class="clear"></div>
</li>
<li>
<span class="right">Yes I am here</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Thanks for accepting my friend request</span>
<div class="clear"></div>
</li>
<li>
<span class="right">You Welcome</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Bye</span>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="input-box">
<textarea placeholder="Enter message"></textarea>
</div>
</div>
</body>
</html>
Has anybody ever encountered the problem that pictures are not shown inline in the Google Chrome browser, even though i.e. display:inline-blockand other css codes were used? In any other browser everything is depicted as it was intended. However, the 4th picture is only suddenly in another row when the site is being opened in Chrome.
The problem looks like this:
Code:
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1981-1990</h4>
</div>
<div class="timeline-body">
<p>Some text</p>
<p>Some more text</p>
</div>
</div><div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
</div>
</li>
CSS
/*body*/
body {
background-color: white;
}
.panel {
background-color: white;
color: black;
border-radius: 0;
text-align: justify;
font-size: 1.3em;
}
.panel-extra {
padding: 10px 0;
margin-top: 25px;
background-color: lightgrey;
border-radius: 0;
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
.box {
padding-top: 30px;
padding-bottom: 30px;
border-bottom-width: 3px;
border-bottom-color: lightgrey;
border-bottom-style: solid;
}
/*Timeline*/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
margin-bottom: 40px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-picture-body: before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body: after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body {
float: left;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-images-right {
display: inline-block;
vertical-align: top;
width: 40%;
float: left;
padding: 0 10px;
}
.timeline-images-left {
display: inline-block;
vertical-align: top;
width: 40%;
float: right;
padding: 0 10px;
}
.padding-bottom {
padding-bottom: 10px;
}
.align {
display: block;
}
/*fonts*/
h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 220px;
margin-top: 0;
}
.box h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 30px;
margin-top: 0;
}
h2{
text-align: center;
font-size: 2.3em;
color: black;
}
p {
text-align: justify;
font-size: 1.3em;
}
Since bootstrap is being used, inserting <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div> after the second picture in the code fixed the problem.
<div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
<img class="timeline-images-left align" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
</div>
This question was posted a few years ago By Sally but she solved it herself and her solution is not working for me.
I have gone through practically all of the relevant sticky footer pages on this site and a bunch from other places but I cannot find anything answering this question. I am sure it has to do with my layout but I have tried every way I have researched and can think of and this is the closest I could get to a sticky footer I am happy with.
Here is the HTML I am working with.
<body>
<div id="container">
<header class="main-header">
<img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<body class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs">
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="quote">
<h6>""</h6>
<p> - </p>
</div>
</footer>
</div>
</body>
and the CSS
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover{
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
.footer .quote {
float: right;
color: rgb(56, 56, 56);
}
.footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
.footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
Here is my JSfiddle
In my normal full screen the three 300px x 300px squares fit in a line and everything is well and good but when the window size is reduced (like the one in my fiddle) the squares turn into two lines and are pushed off the screen. The footer stays in place at the bottom of the screen until you scroll then it just stays put and does not follow the bottom of the page.
I would like the footer to either get pushed to the bottom of the screen when the squares get forced into two lines.
-or-
Stay at the bottom of the screen and scroll with the user.
Any help would be very much appreciate!
I removed the excess body and turned it into a div. I ended the container before the footer and added a push div, equal in height to the footer. Seems to work now. Check out the fiddle
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content:" ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover {
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
.push{height:60px;}
footer {
position: relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
footer .quote {
float: right;
color: rgb(56, 56, 56);
}
footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
<body>
<div id="container">
<header class="main-header"> <img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<div class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs"> <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
<footer class="footer">
<div class="quote">
<h6>"Hello"</h6>
<p>-</p>
</div>
</footer>
</body>
I am new to learning HTML and CSS. I am attempting to recreate some of the design interfaces of a certain site, but have run into a problem. The navigation menu, though in the header, appears below it for some reason. I have attempted multiple combinations of fixes but they do not end up working and I am too much of a novice to completely understand why it may be doing such a thing. I have uploaded my site and left the directories open to explore. The code is very small, so it should be somewhat easier to point out my mistake.
http://razorcloud.cz.cc/
HTML:
<body class="body">
<header class="header">
<img style="padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
<div class="bottom-header">
<div class="navigation-bar">
<ul>
<li>
Home
<div class="dropdown-container dropdown-shadow">
<div class="dropdown-column">
<p>This is a simple test to determine how dynamic and fluid the dropdown-container is.</p>
</div>
</div>
</li>
</ul>
<ul>
<li>
Video
</li>
</ul>
</div>
</div>
<!--<div class="header-alert">
This website is still under development!
</div>-->
</header>
CSS:
.body
{
margin: auto;
width: 95%;
clear: both;
}
.body a
{
color: inherit;
}
.header
{
background-color: black;
color: white;
display: block;
font-family: "GillSansStdRegular";
margin-bottom: 20px;
position: relative;
}
.bottom-header
{
display: block;
position: relative;
padding: 0 20px;
}
.navigation-bar
{
color: white;
display: inline-block;
font-size: 12px;
float: right;
text-transform: uppercase;
}
.navigation-bar > ul
{
border: transparent 1px solid;
border-bottom: 0;
float: left;
height: 34px;
list-style: none;
margin-left: 5px;
}
.navigation-bar > ul a
{
display: block;
line-height: 16px;
margin-right: 23px;
padding: 0px 2px 0px 2px;
text-decoration: none;
}
.navigation-bar > ul:active a
{
background-color: white;
}
.navigation-bar > ul:hover a
{
color: black;
height: 31px;
background: white;
}
.navigation-bar > ul:hover .dropdown-container
{
display: block;
}
.dropdown-column
{
}
.dropdown-container
{
color: black;
display: none;
position: absolute;
z-index: 99;
left: 0;
width: 100%;
border-color: black;
border-top: 2px;
border-top-style: solid;
}
.dropdown-shadow
{
margin-top: 0;
background: url("../images/backgrounds/submenu-bg.png");
-webkit-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
-moz-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
}
.dropdown-shadow:after
{
display: block;
clear: both;
}
.header-alert
{
background-color: white;
border-bottom: 2px solid black;
color: black;
font-family: "GillSansStdLightRegular";
font-size: 110%;
text-align: center;
text-transform: uppercase;
width: 100%;
}
You need to float your elements. Inside the header the<img/> should be set to float:left and the navigation container (.navigation-bar) needs to be set to float:right. And you'll need to add a clearfix after the floats:
FIDDLE
I wanted to ask what is the best way to create such button with css:
I was trying to create such button with divs using float left and right, but when i zoom in and out right side of the button drops down. Is there a better way to achieve this?
fiddle link
<div style="width:270px">
<div class="button">
<div>
<div>text</div>
<div>text</div>
</div>
<div><div></div></div>
</div>
</div>
.button {
height: 80px;
cursor: pointer;
}
.button:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.button > div:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #008f70;
background-color: #00b48c;
text-align: right;
float: left;
padding: 15px;
width: 165px;
}
.button > div:first-child > div:first-child {
color: #b8e3d6;
font-size: 12pt;
}
.button > div:first-child > div:last-child {
color: #fff;
font-weight: bold;
font-size: 20pt;
}
.button > div:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
float: right;
margin-right: 9px;
background-color: #008f70;
width: 64px;
height: 81px;
position: relative;
}
All it takes:
button.styled{
color:#fff;
background:#00B48C; /* CHANGE ONLY THIS ONE AND SEE IT HAPPEN ;) */
padding:10px 45px 10px 15px;
border-radius:4px;
/* Do not edit below */
border:0;
position:relative;
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
}
button.styled:after{
background: rgba(0,0,0,0.2);
padding:11px;
content:'\25be'; /* \25bc \25be */
/* Do not edit below */
position:absolute;
right:0;
top:0;
}
<button class="styled">Hello World</button>
For more UTF-8 characters see: https://stackoverflow.com/a/25986009/383904
you can use only one element with pseudo elements :before and :after
button {
border-radius: 4px 0px 0px 4px;
border-width: 1px;
border-color: #008f70;
border-style: solid;
background-color: #00b48c;
text-align: right;
padding: 15px;
width: 165px;
position: relative;
color: white;
}
button:before {
content: '\25BE';
position: absolute;
right: -32px;
z-index: 1;
font-size: 16px;
top: 50%;
color: white;
transform: translatey(-50%);
}
button:after {
content: '';
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin-right: 9px;
background-color: #008f70;
width: 54px;
position: absolute;
top: -1px;
left: 100%;
bottom: -1px
}
button:focus {
outline: 0;
box-shadow: none;
}
<button>test</button>
Get rid of the duplicate div with text and add top and bottom padding to the other div with text.
You can use Font Awesome to get the caret sign in the dropdown.
.button {
height: 80px;
cursor: pointer;
}
.button:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.button > div:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #008f70;
background-color: #00b48c;
text-align: right;
float: left;
padding: 22px 15px 26px 15px; /* add top and bottom border */
width: 165px;
}
.button > div:first-child > div:first-child {
color: #b8e3d6;
font-size: 12pt;
}
.button > div:first-child > div:last-child {
color: #fff;
font-weight: bold;
font-size: 20pt;
}
.button > div:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
float: right;
margin-right: 9px;
background-color: #008f70;
width: 64px;
height: 81px;
position: relative;
}
i{
margin-left: 45%;
margin-top: 45%;
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="width:270px">
<div class="button">
<div>
<div>text</div>
</div>
<div><div><i class="fa fa-caret-down"></i></div></div> <!-- add the caret -->
</div>
</div>
Updated jsFiddle
Source