I've got this code as far as I can take it. Original I had two items scrolling. Then I wanted to add a third. However when I added the third item it threw everything off. I believe I'm missing something in the keyframe calculation somewhere. Not sure.
What am I missing? I need to have three items, or four, or five but always have them center no matter what device. They're centering perfectly with two items but not if I add another item.
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}
.header-banner .header-promotion {
background-color:#2abad9;
color:#fff;
padding:16px 0;
text-align:center;
font-size:.875rem;
letter-spacing:.0375rem
}
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}
#ticker-banner.hd-tickerloop2 .hd-loop-container {
display:flex;
align-items:center;
width:200%;
-webkit-animation:tickerloop2 20s infinite;
animation:tickerloop2 15s infinite;
animation-duration:15s
}
#ticker-banner.hd-tickerloop2 .hd-loop-container:hover,#ticker-banner.hd-tickerloop2 .hd-loop-container:active,#ticker-banner.hd-tickerloop2 .hd-loop-container:focus-within {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused
}
#ticker-banner.hd-tickerloop2 .ticker-item {
width:75%;
}
.ticker-item {
font-size:12px;
line-height:1.4em;
color:#fff;
text-decoration:none
}
#ticker-banner.hd-tickerloop2 .ticker-item {
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0 2em
}
#keyframes tickerloop2 {
0% { transform:translateX(0); flex-direction:row; }
40% { transform:translateX(0); flex-direction:row; }
50% { transform:translateX(-50%); flex-direction:row; }
89.9999% { transform:translateX(-50%); flex-direction:row; }
90% { transform:translateX(-50%); flex-direction:row;}
95% { transform:translateX(0); flex-direction:row-reverse;}
99.9999% { transform:translateX(-50%); flex-direction:row-reverse;}
100% { transform:translateX(0); flex-direction:row;}
}
<div class="header-banner">
<div class="header-promotion">
<div id="ticker-banner" class="hd-tickerloop hd-tickerloop2">
<div class="hd-loop-container">
<div id="ticker-item1" class="ticker-item" tabindex="0">Do You Want To Save 10%? Click Here To Subscribe + Save</div>
<div id="ticker-item2" class="ticker-item" tabindex="0">Receive Free Shipping On All U.S. Orders of $65 Or More</div>
<div id="ticker-item3" class="ticker-item" tabindex="0">Clean Beauty. Because Girl, You're Too Pretty To Posion™</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}
.header-banner .header-promotion {
background-color:#2abad9;
color:#fff;
padding:16px 0;
text-align:center;
font-size:.875rem;
letter-spacing:.0375rem
}
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}
#ticker-banner.hd-tickerloop2 .hd-loop-container {
display:flex;
align-items:center;
width:300%;
-webkit-animation:tickerloop2 20s infinite;
animation:tickerloop2 15s infinite;
animation-duration:15s
}
#ticker-banner.hd-tickerloop2 .hd-loop-container:hover,#ticker-banner.hd-
tickerloop2 .hd-loop-container:active,#ticker-banner.hd-tickerloop2 .hd-
loop-
container:focus-within {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused
}
#ticker-banner.hd-tickerloop2 {
width:75%;
margin-right:5%;
}
.ticker-item {
font-size:12px;
line-height:1.4em;
color:#fff;
text-decoration:none
}
.ticker-item{
width:100%;
}
#ticker-banner.hd-tickerloop2 .ticker-item {
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0 2em
}
#keyframes tickerloop2 {
0% { transform:translateX(5%); flex-direction:row;}
40% { transform:translateX(5%); flex-direction:row; }
45% { transform:translateX(-30%); flex-direction:row; }
60% { transform:translateX(-30%); flex-direction:row; }
70% { transform:translateX(-63%); flex-direction:row;}
100% { transform:translateX(-63%); flex-direction:row;}
}
</style>
</head>
<body>
<div class="header-banner">
<div class="header-promotion">
<div id="ticker-banner" class="hd-tickerloop hd-tickerloop2">
<div class="hd-loop-container">
<div id="ticker-item1" class="ticker-item" tabindex="0">Do You Want To Save 10%? Click Here To Subscribe + Save</div>
<div id="ticker-item2" class="ticker-item" tabindex="0">Receive Free Shipping On All U.S. Orders of $65 Or More</div>
<div id="ticker-item3" class="ticker-item" tabindex="0">Clean Beauty. Because Girl, You're Too Pretty To Posion™</div>
</div>
</div>
</div>
</div>
</body>
</html>
try runing hole code
Related
in the example below how to keep gotop inside story - i.e. bottom right of the middle div
and keep its show/hide functionality
the three divs - top, story and footer - are not of predictive width and height
I tried various position and margin params - without success
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:fixed;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
Use sticky position:
$(document).on('scroll', function() {
let x = $(this).scrollTop();
if (x > 25) {
$('.gotop').show();
} else {
$('.gotop').hide()
}
});
$('.gotop').on('click', function() {
$(document).scrollTop(0);
});
.container {
width: 50%;
margin: 0 auto;
background: silver;
text-align: center;
}
.top {
padding: 25px;
background: gold;
}
.story {
position: relative;
padding: 25px;
min-height: 150vh;
/* I need flexbox to push the button to bottom*/
display:flex;
flex-direction:column;
}
.footer {
padding: 25px;
background: gold;
}
.gotop {
display: none;
position: sticky;
margin-top:auto; /* push to bottom */
text-align:right; /* right align */
z-index: 99;
right: 14px;
bottom: 14px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
In the following implementation, I have taken some liberty to change minor css , replace jquery with js by introducing Intersection Observer which will only make the gotop element visible when our footer starts getting visible. Ofcourse you can use both jquery and js simultaneously but since I don't have experience with former, I used js only.
The benefit is that it's not dependent on any hardcoded values to control gotop visibility.
let footer = document.querySelector('.footer');
let gotop = document.querySelector('.gotop');
let observer = new IntersectionObserver((entries)=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
gotop.style.opacity = '1';
gotop.style.pointerEvents = 'auto';
}
else{
gotop.style.opacity = '0';
gotop.style.pointerEvents = 'none';
}
})
})
observer.observe(footer);
gotop.addEventListener('click',()=>window.scrollTo({top:true}));
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
opacity:0;
pointer-events:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
transition:all 0.2s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
You only need to change position:fixed; to position:absolute; for your .gotop div. Since it is positioned inside a position: relative div then it will be inside of it.
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
How to make 2 Rows and 8 Column Table in CSS?
Note: The Table must have strict and stick position,
I make 2 Rows and 8 Colums Table and
i added Text module to the every Column and then i added HTML Code to
the every Text module to take controll on the Behaviar of the text
module and to convert the text module into editable HTML column with
any drag and drop website builder plugin. So i get success in this
and now the Problem is that all Columns are showing in Rows i mean now
i have 8 rows and in every Row i have 1 Column. This Happened when i
added the HTML code to every Text Module. This is the Short html
that i added to every text Module to transform the text module in an
editable column.
HTML > The same code is added to all Text Modules... Total Text modules are 8
Text Mudule 1
<div id="main-section2"></div>
<div class="bg-wrapper-cover">
<div class="row2">
<div class="col-text-0"></div>
<div class="bg-wrapper-cover-background"></div>
</div>
Text Module 2
<div id="main-section2"></div>
<div class="bg-wrapper-cover">
<div class="row2">
<div class="col-text-0"></div>
<div class="bg-wrapper-cover-background"></div>
</div>
CSS:
#main-section2
.bg-wrapper-cover {
width:500px;
position:relative;
}
.row2 {
display: flex;
width:100%;
margin:0px;
}
.col-text-0 {
padding:0 14px;
border:1px solid black;
display:inline-block;
width:calc(25% - 30px);
height:50px;
background:pink;
z-index:10;
}
.bg-wrapper-cover-background {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index :0;
transition: background 3s;
}
.bg-wrapper-cover:hover .col-text-0 {
background:none;
}
.bg-wrapper-cover:hover .col-text-0:hover {
background:red;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(1):hover ~ .bg-wrapper-cover-background {
background:blue;
z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(3):hover ~ .bg-wrapper-cover-background {
background:darkgray;
z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(5):hover ~ .bg-wrapper-cover-background {
background:yellow;
z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(1) .col-text-0:nth-child(7):hover ~ .bg-wrapper-cover-background {
background:orange;
z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(1):hover ~ .bg-wrapper-cover-background {
background:gray;
z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(3):hover ~ .bg-wrapper-cover-background {
background:black;
z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(5):hover ~ .bg-wrapper-cover-background {
background:green;
z-index:0;
}
.bg-wrapper-cover:hover .row2:nth-child(2) .col-text-0:nth-child(7):hover ~ .bg-wrapper-cover-background {
background:lightblue;
z-index:0;
}
SNAPSHOT
why not just an unordered list with the following style:
li:nth-child(2n) {
margin-bottom: 10px;
}
I have a responsive site with a slideshow. I have set the slideshow to be 100% the width of the browser window, and that is working fine. The problem is, the slideshow is shifted a bit to the right, almost as if there is padding to the left of the image. The result is the user having to scroll to the right to see the entire slideshow. I have tried playing around with the attributes of the div and the slideshow itself, but with no luck. Any help with this issue is appreciated. Here is my CSS and HTML code:
CSS
html
{
background-color:#000000;
}
body
{
margin:0auto;
padding:0;
width:100%;
}
#header
{
margin:0auto;
padding-top:0.5%;
text-align:center;
}
#logo
{
margin:0auto;
max-width:186px;
max-height:123px;
padding-top:1%;
padding-bottom:15%;
text-align:center;
}
#banner
{
width:100%;
}
#home_content
{
width:100%;
padding-top:0.25%;
}
#history_content
{
width:100%;
padding-top:0%;
}
#home_slideshow
{
padding-top:1%;
display:flex;
justify-content:center;
}
#home_slideshow
{
padding-top:1%;
display:flex;
justify-content:center;
}
hr
{
border-color:#1BB7F2;
width:100%;
padding:0%;
}
#home_footer
{
width:100%;
margin-top:60%;
}
#history_footer
{
width:100%;
margin-top:155%;
}
.crossfadeHome>figure
{
animation:imageAnimation24slinearinfinite0s;
backface-visibility:hidden;
color:transparent;
opacity:0;
position:absolute;
text-alin:center;
width:100%;
z-index:0;
margin:0auto;
}
.crossfadeHome>figure:nth-child(1)
{
background-image:url('../photos/img_1.jpg');
background-repeat:no-repeat;
}
.crossfadeHome>figure:nth-child(2)
{
animation-delay:6s;
background-image:url('../photos/img_2.jpg');
background-repeat:no-repeat;
}
.crossfadeHome>figure:nth-child(3)
{
animation-delay:12s;
background-image:url('../photos/img_3.jpg');
background-repeat:no-repeat;
}
.crossfadeHome>figure:nth-child(4)
{
animation-delay:18s;
background-image:url('../photos/img_4.jpg');
background-repeat:no-repeat;
}
#keyframesimageAnimation
{
0%
{
animation-timing-function:ease-in;
opacity:0;
}
8%
{
animation-timing-function:ease-out;
opacity:1;
}
17%
{
opacity:1
}
25%
{
opacity:0
}
100%
{
opacity:0
}
}
.crossfadeHistory>figure
{
backface-visibility:hidden;
color:transparent;
opacity:0;
position:absolute;
text-alin:center;
width:100%;
z-index:0;
margin:0auto;
}
.crossfadeHistory>figure:nth-child(1)
{
background-image:url('../photos/history_1.jpg');
background-repeat:no-repeat;
}
.crossfadeHistory>figure:nth-child(2)
{
animation-delay:7s;
background-image:url('../photos/history_2.jpg');
background-repeat:no-repeat;
}
.crossfadeHistory>figure:nth-child(3)
{
animation-delay:14s;
background-image:url('../photos/history_3.jpg');
background-repeat:no-repeat;
}
.crossfadeHistory>figure:nth-child(4)
{
animation-delay:21s;
background-image:url('../photos/history_4.jpg');
background-repeat:no-repeat;
}
#keyframesimageAnimation
{
0%
{
animation-timing-function:ease-in;
opacity:0;
}
8%
{
animation-timing-function:ease-out;
opacity:1;
}
17%
{
opacity:1
}
25%
{
opacity:0
}
100%
{
opacity:0
}
}
HTML
<!DOCTYPEhtml>
<html>
<head></head>
<body id="body">
<!--HeaderSection-->
<div id="logo">
<img class="logo"src="graphics/logo.jpg"style="display:block;margin:0auto;width:100%;height:auto;max-width:225px;max-height:196px;vertical-align:top;"alt=""title="">
</div>
<div id="header">
<p id="contact_info">
<imgsrc="graphics/icon_phone.png"style="width:11px;height:15px;vertical-align:middle;"alt="PhoneIcon"title="Call Us!!">(518)459-9843
</p>
<pid="contact_info">
 
</p>
<p id="contact_info">
<img src="graphics/icon_clock.png"style="width:17px;height:17px;vertical-align:middle;"alt="ClockIcon"title="Our Hours">
</p>
</div>
<div id="banner">
<hr/>
<p id="page_home_header">
</p>
</div>
<div id="page_home_main">
<p id="home_content">
</p>
<p id="page_home_link">
link
<br/>
<br/>
site
</p>
</div>
<div id="home_slideshow"class="crossfadeHome">
<figure>
<img src="photos/img_1.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_2.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_3.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_4.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
</div>
<!--FooterSection-->
<footer id="home_footer">
<hr/>
<p id="footer_copyright">©<script>document.write(newDate().getFullYear())</script>mysite</p>
</footer>
</body>
</html>
Make sure you check typos in your code.
Change margin:0auto; to margin:0 auto; and text-alin:center; to text-align:center;.
If you want to know more about margin, click here.
To check errors in your css you can visit CSSLint.
I just hit sth that appears to be a bug or at least a really weird feature of CSS/HTML.
Now, the problem is that i got three divs in a row, all inside a parent div.
The first and the second one are supposed to be text containers in a chat-like matter. The last one is supposed to be excluded and be a paging navigation.
On the very first page, that works fine. On every other page, the last text container div expands over the navigation. When using the Chrome developer tools, it shows me that the second div is only having its real size, while the background still expands over the navigation. But if i delete the navigation, the second text container resizes to its real size.
Also, when using
position:absolute;
it doesn't expand. Setting the position to relative explicitly didn't fix the problem and setting the background-color to sth else didn't change the white background.
I made you a quick demonstration under jsfiddle.net.
So the final question is: Why does the second text div expand? Or doesn't it but it looks like it does?
//edit: As suggested in the comments, here is the raw CSS/HTML outside jsfiddle. I still don't think that's a good idea, but if you say so..
<div class="decoded_chat" pagenr="1" style="display: block;">
<div class="decoded_user decoded_user_first" isme="0">
<a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">
<img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">
<div class="decoded_user_name">
Zuckerberg
</div>
</a>
<div class="decoded_msg_date">
02.02.2014, 01:36 Uhr
</div>
<div class="decoded_msg">
I will listen to the songs when I'm not so tired
</div>
<div class="decoded_msg">
I don't know.. Possibly
</div>
<div class="decoded_user decoded_user_last" isme="0">
<a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">
<img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">
<div class="decoded_user_name">
Zuckerberg
</div>
</a>
<div class="decoded_msg_date">
02.02.2014, 01:33 Uhr
</div>
<div class="decoded_msg">
I've been ill all week.. Just haven't had time for much
</div>
<div class="decoded_chat_pager">
<a href="javascript:void(0);" pagenr="0" class="cloudview_msg_prev">
« Vorherige Seite
</a>
<a href="javascript:void(0);" pagenr="2" class="cloudview_msg_next">
Nächste Seite »
</a>
</div>
</div>
a {
text-decoration: none;
color: white;
}
.chat_list {
width:100%;
}
.decoded_chat {
text-align:left;
width:100%;
margin:auto;
background-color:white;
color:black;
border-radius:10px;
}
.cloudview_msg_next {
float:right;
}
.decoded_chat_pager {
margin:auto;
margin-top:5px;
text-align:left;
width:95%;
}
.decoded_msg {
margin-bottom:3px;
}
.decoded_user {
padding:15px 10px;
min-height:50px;
}
.decoded_user_last {
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.decoded_user_first {
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.decoded_user_name {
color:black;
margin-bottom:5px;
}
.mychatmessage {
background-color:#BFF2BF;
}
.decoded_msg_date {
float:right;
color:grey;
margin-top:-30px;
}
.decoded_user_avatar {
position:absolute;
}
.decoded_user_name {
font-weight:bold;
}
.decoded_user_name, .decoded_msg {
margin-left:64px;
}
table {
text-align:center;
}
.flipped-180 {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter:"FlipH";
}
#detailopener, #return_to_msg, #return_to_cloud, #cloudview_delete {
display:none;
}
.chat_list_names {
color:grey;
}
.invi {
position:fixed;
width:1px;
height:1px;
top:-2000px;
left:-2000px;
}
.next_page_chat_list {
text-align:right;
padding-right:5px;
}
.last_page_chat_list {
padding-left:5px;
text-align:left;
}
.loadingtext {
margin-top:7px;
}
#opener {
position:fixed;
left:25px;
bottom:25px;
cursor:pointer;
display:none;
}
.dontdroponme {
opacity:0.3;
}
#dropper {
position:fixed;
right:25px;
bottom:25px;
cursor:pointer;
display:none;
}
.dropinfo {
border-radius:7px;
color:white;
padding:5px 25px;
}
.dorpinfo img {
width:48px;
}
.chatlist_button img, .decoded_user_avatar {
box-shadow:0 0 5px #888;
border-radius:5px;
}
.chatlist_button {
background-color:white;
border-radius:5px;
box-shadow:0 0 5px #888;
padding:5px;
cursor:move;
max-width:200px;
margin:auto;
}
.ui-draggable-dragging {
position:absolute;
z-index:5;
}
body {
height:100%;
margin:0;
background-color:#3B5998;
color:white;
font-size:12px;
font-family:Calibri;
}
#innerbody {
margin:auto;
width:55%;
text-align:center;
}
#innerbody_floater {
height:50%;
width:100%;
margin:0;
}
Copy from http://www.w3schools.com/css/css_positioning.asp
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html:
Hey guy's I've been trying out something different with my CSS backgrounds in order to make a header line. I want to have it set up so the line is made up of 5 equally sized portions with each portion being a different color. Here is an example
I have the code set up but I can't get the background to show up properly I have my code down below. Any help would be appreciated, thanks!
HTML:
<div id="div-line">
<div class="blockOne"></div>
<div class="blockTwo"></div>
<div class="blockThree"></div>
<div class="blockFour"></div>
<div class="blockFive"></div>
</div>
CSS:
#div-line {
width:100%;
height:5px;
}
.blockOne {
width:20%;
background-image:url(../images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(../images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(../images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(../images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(../images/BlueBlock.png);
background-repeat:repeat-x;
}
You need to float the DIV elements and add height.
Working DEMO
Added a generic CSS class block in HTML:
<div id="div-line">
<div class="block blockOne"></div>
<div class="block blockTwo"></div>
<div class="block blockThree"></div>
<div class="block blockFour"></div>
<div class="block blockFive"></div>
</div>
and tweaked CSS:
#div-line {
width:100%;
height:5px;
}
.block {
height:100%;
float:left;
width:20%;
}
.blockOne {
background-color:red;
}
.blockTwo {
background-color:black;
}
.blockThree {
background-color:red;
}
.blockFour {
background-color:black;
}
.blockFive {
background-color:red;
}
You could achieve this by using background for color. And the reason why your divs are not showing up is because you need to give them a height and also you need to float them to the left.
#div-line div {
float:left;
}
#div-line {
width:100%;
height:5px;
}
.blockOne {
width:20%;
height:100%;
background:#00FFFF;
}
.blockTwo {
width:20%;
height:100%;
background:#FFA500;
}
.blockThree {
width:20%;
height:100%;
background:#00FFFF;
}
.blockFour {
width:20%;
height:100%;
background:#FFA500;
}
.blockFive {
width:20%;
height:100%;
background:#00FFFF;
}
Working sample here.
Why do you want to use background images where you can use background-color ?
You can offload the server atleast if you use background color.
.blockN {
width: 20%;
background-color: #0094ff; // or your color
}
Do something like this
.blockOne {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(images/BlueBlock.png);
background-repeat:repeat-x;
}
OR
.blockOne {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(./images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(./images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(./images/BlueBlock.png);
background-repeat:repeat-x;
}
The thing you are trying to do ie, background-image:url(images/orangeBlock.png) is used in linux.