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;
}
Related
I am working on some side buttons for a project and would like the link the hover styles for both elements, but am not sure how to go about this. In the example below if I highlight the link name (search) it rolls over and changes to a red text and if I highlight the image, it changes to the rollover image as expected. However what I would like to achieve is to link both so when I hover over the icon the link changes to red as well and vice versa.
#linkchoice{
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#image:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover{
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
I have made a JSFiddle as well here
https://jsfiddle.net/bzsvgwp8/
Thanks
Just update your css from
#image:hover {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover {
color: #EB0307;
}
to
#linkchoice:hover #image {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color: #EB0307;
}
You will see the combined hover effect !
The first solution could be to use the hover on the parent div:
#linkchoice {
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#linkchoice:hover #image {
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
in the second solution you can simplify the html using a single div, in this way:
#linkchoice{
width:100px;
height:100px;
}
#linkname{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:top;
padding-top:75px;
font-size:15px;
text-align:center;
}
#linkname:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
color:#EB0307;
}
<div id='linkchoice'>
<div id='linkname'>Search</div>
</div>
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
I'm trying to make a div appear when the user hovers over another div. The problem is that the appearing div is neither a child nor a sibling of div the user should hover over. I made a jsfiddle to show what I mean here.
How do I make the #showMe appear when the user hovers over the #button?
#parent{
height:200px;
width:200px;
background-color:yellow;
}
#button{
height:100px;
width:100px;
background-color:blue;
}
#child, #sibling, #showMe{
height:50px;
width:50px;
background-color:red;
display:none;
}
#button:hover #child{
display:block;
}
#button:hover + #sibling{
display:block;
}
<div id="parent">parent
<div id="button">button<div id="child">child</div></div>
<div id="sibling">sibling</div>
</div>
<div id="showMe">showMe</div>
Well, your only option is to do it via Javascript
Javascript:
function showShowMe() {
document.getElementById("showMe").style.display = "block";
}
function hideShowMe() {
document.getElementById("showMe").style.display = "none";
}
#parent{
height:200px;
width:200px;
background-color:yellow;
}
#button{
height:100px;
width:100px;
background-color:blue;
}
#child, #sibling, #showMe{
height:50px;
width:50px;
background-color:red;
display:none;
}
#button:hover #child{
display:block;
}
#button:hover + #sibling{
display:block;
}
<div id="parent">parent
**<div id="button" onmouseover="showShowMe()" onmouseout="hideShowMe()">button<div id="child">child</div></div>**
<div id="sibling">sibling</div>
</div>
<div id="showMe">showMe</div>
Well, actually it is not possible to achieve that that by pure CSS and you'd use JavaScript.
But in this particular case we can somehow fake the effect by using adjacent sibling combinator + over the #parent instead, and giving a pointer-events of none to the parent and then re-setting the value of pointer-events to initial on the #button itself.
It's worth mentioning that pointer-events on HTML/XML elements is not supported in IE<=10.
Updated example
#parent{
height:200px;
width:200px;
background-color:yellow;
pointer-events: none;
}
#parent:hover + #showMe {
display: block;
}
#button{
height:100px;
width:100px;
background-color:blue;
pointer-events: initial;
}
#child, #sibling, #showMe{
height:50px;
width:50px;
background-color:red;
display:none;
}
#button:hover #child{
display:block;
}
#button:hover + #sibling{
display:block;
}
<div id="parent">parent
<div id="button">button<div id="child">child</div></div>
<div id="sibling">sibling</div>
</div>
<div id="showMe">showMe</div>
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.