I am trying to popup div with error messages. The markup is as shown
.popup
{
background: #7ABC45 none;
border: 1px solid #7ABC45; border-radius: 5px; -moz-border-radius:5px;
font-size: 8pt; font-weight:bold;
position: relative; bottom:4px; right:4px; z-index:2;
}
.popuptop{height:7px; text-align:right; padding:0px 4px 2px 0;z-index:1;}
.popup-message { text-align:left; padding:3px 3px 3px 3px;z-index:1; }
.popup-shadow {background-color:#ccc;position: relative; bottom:4px; right:4px; border-radius:5px;-moz-border-radius:5px;z-index:1;}
.popupContainer{position:relative;z-index:1;}
#emailErrorAlert{position:absolute;top:-40px; left:10px;}
#duplicateEmailAlert{position:absolute;top:-40px; left:10px;}
#duplicateMobileAlert{position:absolute;top:-40px; left:10px;}
<tr step="step1">
<td class="grid_4">
<span>My Mob No/Email is </span>we protect your privacy
<div class="popupContainer">
<div id="emailErrorAlert" style="display:none;">
<div class="popup-shadow">
<div class="popup">
<div class="popuptop">X</div>
<div class="popup-message"><p>Please Enter a Valid Email Or Mobile Phone Number</p></div>
</div>
</div>
</div>
</div>
<div class="popupContainer">
<div id="duplicateEmailAlert" style="display:none;">
<div class="popup-shadow">
<div class="popup">
<div class="popuptop">X</div>
<div class="popup-message"><p>You may provide just one email address</p></div>
</div>
</div>
</div>
</div>
<div class="popupContainer">
<div id="duplicateMobileAlert" style="display:none;">
<div class="popup-shadow">
<div class="popup">
<div class="popuptop">X</div>
<div class="popup-message"><p>You may provide just one mobile phone number</p></div>
</div>
</div>
</div>
</div>
</td>
</tr>
The divs have to be positioned adjacent to the field. I am trying to position using absolute position as can be seen in css above for #duplicateMobileAlert. The problem is the div is getting cut beyond the tr. So if I change left:10px to left:-90px most of the div disappears behind the container. I want it to go over the tr and its container.
How can I do that? Any pointers?
The container further had a parent where overflow was set to hidden which was causing the issue
You can use z-index it is a "layering" CSS style.
On the container: z-index:0;
On the popup: z-index:999;
Related
Okay I do not know wether I have started completely wrong or just do not know how to get it right.
I want the layout of my website to be like this:
I put a div called 'myWrap' around the header and the content. And added this css:
.myWrap {
position: absolute;
padding: 0px;
margin: 0px;
background: white;
top: 2%;
left: 2%;
right: 2%;
}
.footer {
position: absolute;
background: #363130;
margin-top: 2%;
height: 300px;
left: 0;
width: 100vw;
}
And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute.
How do I put the header and content in the normal flow but infront of the background?
I structured the html like that:
<div class="row container-fluid myWrap">
CONTENT
<div class="container-fluid footer">
FOOTER
</div>
</div>
If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header
Change .myWrap to position: relative, your footer is getting the position absolute of the body, because It dosn't have a parent element with a relative position CSS atribute.
.myWrap {
position: relative;
}
With this, you will get your footer always on the bottom of myWrap. Then you can play with, the top/bottom properties and place it where you want ;)
I have created a Bootply to show it how it's working: http://www.bootply.com/8Wmx3CJHFv
Try this
<div class="myWrap">
<div class="container">
<div class="row">
Then add your footer after the end of the container
Personally, I would not work with your own wrapper. Bootstrap made them with a reason and that reason is they will work perfectly for responsive viewports.
I'd suggest you enhance something like this:
HTML
<html>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}
Just make sure you remove the padding for the .container-fluid. And a tip: if you ever feel like creating your own wrapper, don't position them with absolute, but with relative. Otherwise it won't work well on all viewports.
You mentioned that you are using bootstrap, in bootstrap the container class wraps your data into a wrapper that has a fixed width on each screen-device-width so you will need to add a container div for the header and the content without adding it inside the footer div.
If you are using bootstrap framework you will need to use these following classes for these div's as the following code:
<div class="site-container">
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
</div>
</div>
<div class="footer">
</div>
</div>
<style>
body{
background:url(../image.jpg);
}
header {
max-width:600px;
width:100%;
display:block;
background:#ccc;
height:250px; //header height no need to mention in your work
border:1px solid #000;
margin:auto;
}
#content {
max-width:600px;
width:100%;
display:block;
background:#ddd;
height:500px; //content height no need to mention in your work
border:1px solid #000;
margin:auto;
}
footer {
width:100%;
height: 300px;
left: 0;
background:#000;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// Header
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// Content
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
Demo: https://jsfiddle.net/q4Lcjmsy/3/
I am trying to create two column boxes with clickable headers. I have everything setup and working but when I was testing I realized only half of the header was clickable. On the left column, the left half is clickable. On the right column, the right half is clickable. The 'a' tag applies to the entire header.
<section class="container">
<div class="row">
<div class="col-sm-6">
<div class="item-block">
<h3 class="block-header">#</h3>
<p>#</p>
</div>
<div class="item-block">
<h3 class="block-header">#</h3>
<p>#</p>
</div>
</div>
<div class="col-sm-6">
<div class="item-block">
<h3 class="block-header">#</h3>
<p>#</p>
</div>
<div class="item-block">
<h3 class="block-header">#</h3>
<p>#</p>
</div>
</div>
</div>
</section>
I have added a picture of the layout. At the top of each item-block is a block-header which is the blue bar. The red part is the part that is linked. The blue part does nothing.
css:
.item-block {
border: 2px solid #0026FF;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
border-radius: 6px;
font-size:1.2em;
}
.block-header {
text-align:center;
background:#0026FF;
padding:10px;
color:white;
margin-top:0px;
margin-bottom:10px;
border-radius: 3px 3px 0px 0px;
}
.item-block .block-header a {
color:white;
display:block;
}
Anyone know how to fix this so the entire header is clickable?
I figured out that the issue was another part of my page. Lower down on the page was a centered column that overlapped anything in the center of the page, making those halves not work properly. I changed the z-index of the dual columns to put it above the centered column and it works properly now.
I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?
<style>
div.product{
width:90%;
margin:10px auto;
height: 200px;
transition: all 0.1s ease;
background-color: #069;
}
div.product:hover{
margin-top:-5px;
}
.img_box{
width:50%;
height:100%;
padding: 10px;
float:left;
box-sizing: border-box;
}
.desc_box{
width:50%;
height:100%;
float:left;
padding: 10px;
box-sizing: border-box;
}
.img{
background-color: #b65050;
height: 100%;
}
.desc{
background-color: chocolate;
height: 100%;
}
</style>
HTML:
<div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
</div>
heres my fiddle: MY FIDDLE
This is because you are floating the divs. Changing margin-top moves the element which creates room underneath it.
What you need is this:
div.product{
position:relative;
}
div.product:hover{
top:-5px;
}
position:relative basically takes up the original space but lets the div to be rendered elsewhere.
I have a Parent Div chatRooms , inside it there's many chatRoom's, and the chatRoomName Div was made only for proper formatting.
My Intention is to make each chatRoom float:left; beside the previous chatRoom, then have an horizontal scroll bar in case the maximum width of all chatRoom's exceeds the width of the parent div chatRooms, and this is actually working but the exceeding chatRoom's are being placed on a second line, not beside the last chatRoom, I want them all to say on the same line, even if some of them can't be seen, but I will be able to see them when I scroll right.
<div id="chatRooms">
<div class="chatRoom">
<div class="chatRoomName">
IUL
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
</div>
CSS:
#chatRooms
{
border-style:solid;
border-width: 1px;
border-color: green;
overflow-x:scroll;
margin-top:5px;
height:30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.chatRoom
{
width:100px;
border-style:solid;
border-color:green;
margin-right:1px;
float:left;
cursor:pointer;
}
.chatRoomName:hover
{
color:chartreuse;
}
.chatRoomName
{
background-color:green;
border-style:solid;
border-color:green;
color:white;
}
Try using inline block instead off floating the elements and using white-space: nowrap;
see fiddle http://jsfiddle.net/AFGU4/
.chatRoom
{
width:100px;
border-style:solid;
border-color:green;
margin-right:1px;
display: inline-block;
cursor:pointer;
}
What is needed in this case is display: inline-block; instead of float: left;. By making your divs inline-block and adding white-space: nowrap; on their parent you'll be ensured that the divs will always be on a single line. Adding overflow-x: auto; will provide a horisontal scrolling if necessary.
still learning how to lay out with div and css. I have the following html:
<div id="Fascione">
</div>
<div id="Wrapper">
<div id="Menu">
</div>
<div id="Contenuto">
<div id="Liturgia">
</div>
<div id="Container">
<div id="Ristorante">
</div>
<div id="Insieme">
</div>
<div id="Progetto">
</div>
</div>
<div id="Unitre">
</div>
</div>
</div>
<div id="Footer">
</div>
and css looks like:
html, body{width:100%;height:100%;}
body{width:1024px; margin:0px auto;padding:0px;border-width:0px;}
div#Fascione{width:inherit;height:125px;border-bottom:2px solid black;}
div#Wrapper{width:inherit;padding:8px 0px 8px 0px;/*background-color:#647;*/}
div#Menu{float:left;width:200px;/*background-color:#F41;*/}
div#Contenuto{margin-left:208px;/*background-color:#9bb;*/}
div#Liturgia{float:left;width:34%;margin-bottom:1%;background-color:#987;}
div#Container{float:left;width:65%;margin-bottom:1%;margin-left:1%;background-color:#aaaaaa;}
div#Ristorante{float:left;width:49%;margin-bottom:1%;margin-left:1%;background-color:#123;}
div#Insieme{float:left;width:49%;margin-bottom:1%;margin-left:1%;background-color:#abc;}
div#Progetto{float:left;border-top:1px solid gray;background-color:#369;}
div#Unitre{clear:left;border-top:1px solid gray;background-color:#de7;}
div#Footer{clear:left;width:inherit;height:40px;border-top:2px solid black;/*background-color:#1a9;*/} /* clear left needed! */
what I would like to do is to have the "Progetto" div bottom border stick together with the "Unitre" top border.
Reading other posts I tried to set the "Container" with position:relative and the "Progetto" with position:absolute;bottom:0px; but this does not do what I need.
Can anyone help me?
Setting containers with position relative is not a good practice.What you should try to do is zero out the margins beetween the two divs and only add border to the needed sides for example:
Proggetto{
//no bottom border;
border:1px 1px 0 1px;
border-color:black;
margin:0;
}
Unitre{
border:1px solid black
margin:0;
}