I'm crap with css.
I began building a page with the body set to absolute, and build all elements around this.
When the browser zoom changes, the positioning goes & nothing looks correct (only correct # 100% ).
I changed the body to be relative and re-structed so the main divs that build up the page are running off of the body.
However, it seems I've truly funked this one.
nearly all elelments hide away when updating the body to be relative, even though I understand absolute & relative to work together (parent/child).
ScreenShots:
(Should Look like this (all position absolute))
(The issue I'm trying to resolve. zooming in/out causes the tabs to move up/down (above & below))
(This is when I set body to relative, yes, that's the whole page shot.(below))
css:
body{
position: relative;
margin: 0;
width: 100%;
height: 100%;
//font-family: Arial;
zoom: 100%;
}
#invoiceOptions{
position: absolute;
background-color: #f9dede;
top: 11.9%;
left: 10%;
width: 80%;
height: 33.5%;
border-radius: 10px;
font-size: 15pt;
}
#referals{
position: absolute;
//background-color: #C93939;
top: 11.9%; //11
left: 10%;
width: 80%;
height: 33.5%;
font-size: 15pt;
border-radius: 1%;
}
#orders{
position: absolute;
//background-color: #C93939;
//background-image: url('background.png');
background-repeat: no-repeat;
top:11.9%;
left:10%;
width: 80%;
height: 75%;
border-radius: 1%;
font-size: 15pt;
overflow: scroll;
overflow-x: hidden;
overflow-y: hidden;
}
#orders:hover{
overflow-y: visible;
}
#toolbar{
position: absolute;
background-color: white;
width: 80%;
left: 8%;
height: 20%;
border-radius: 5px;
}
#border1{
position: absolute;
width: 10%;
height: 100%;
background-color: black;
//same for border2, but on right.
}
.tab-links{
position: absolute;
width: 40%;
top: 28.5%;
left: 3%;
background: no-repeat;
border-radius: 20px 20px 0px 0px;
background-color: #dbdbdb;
box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
}
html.
<body>
<div id="toolbar">
<div style="">
<h4 style="position: absolute; top: 5%; left: 15%;">Welcome <?php echo $User[0]; ?>!</h4>
<ul class="tab-links">
<li class="active">Orders <div id='orderCount' style='display: inline;'></div></li>
<li>Referrals <div id='referralCount' style='display: inline;'></div></li>
<li>Options</li>
</ul>
<div style="">
<a href="https://XXXXXXXX.com/mysagepay/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 60%;" border=0 alt=SagePay src="https://live.sagepay.com/mysagepay/images/sagepay_logo.png" width=136 height=50>
</a>
<A href="https://www.businessexpress-uk.com/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 70%;" border=0 alt=SagePay src="https://XXXX.com/Content/images/logo.png" width=140 height=50>
</A>
<A href="http://XXXXX.co.uk/support/staff/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 80%;" border=0 alt=Fusion src="http://XXXXX.co.uk/support/__swift/themes/__cp/images/fusion.gif" width=200 height=50>
</A>
</div>
</div>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="orders">
<div class="CSSTableGenerator">
<table width="100%" class='table'>
<thead>
<tr>
<td><b>Customer</b></td>
<td><b>Company</b></td>
<td>User ID</td>
<td><b>Time</b>
</tr>
</thead>
<tbody id="orderBody">
</tbody>
</table>
<div id="orderHolder"></div>
</div>
</div>
<div id="print">
<img src="print.png" title="Print All Invoices"/>
</div>
</div>
<div id="tab2" class="tab">
<div id="referals">
<div class="CSSTableGenerator">
<table width='100%' class='table'>
<thead>
<tr>
<td><b>Account</b></td>
<td><b>Customer</b></td>
<td><b>Referral ID</b></td>
<td><b>UUID</b></td>
<td><b>Time</b></td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div id="hold"></div>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div id="invoiceOptions">
<div id="DisplayOptions">
<fieldset style="width: 100%;">
</fieldset>
</div>
</div>
</div>
</div>
<div id='border1'></div>
<div id='border2'></div>
</body>
Notes.
I'm using ajax to populate a web-gen table. I've excluded the table css for now, however comment if required & I will include
update.
I've included tab-links into the css. this is the css for the holder of the tab buttons (grey). The tab buttons themselves are floated left.
the table contents, is a styleless div contaings the 3 tab option contents (referral, order & options).
Related
I have the requirement as per below image
I tried to this with table, but still no success in aligning the side images.
testTable.html
<style>
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 10%;
overflow: hidden;
}
.center-image{
width: 80%;
}
</style>
<table class="container">
<tr>
<td class="left-image">
<img src="img1.png" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="img2.jpg" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="img3.png" alt="Snow" style="width:100%">
</td>
</tr>
</table>
My requirement:
I want to have center active image, with left and right images blur. side images should look like they are behind the center image
Maybe you can try this code but to make it slide through slides you need to add jQuery to code. Working example here
If you need further help with that blur to side images contact me through email faceree123#gmail.com :)
<div class="slider-wrapper">
<div class="slider-btns">
<button class="slider-btn btn-1 active"></button>
<button class="slider-btn btn-2"></button>
<button class="slider-btn btn-3"></button>
</div>
<div class="slider">
<div class="slide">
<img class="slide-img" src="your-1st-image.src">
<!-- This is not necessary --><p>Slide 1</p>
</div>
<div class="slide">
<img class="slide-img" src="your-2nd-image.src">
<!-- This is not necessary --><p>Slide 2</p>
</div>
<div class="slide">
<img class="slide-img" src="your-3rd-image.src">
<!-- This is not necessary --><p>Slide 3</p>
</div>
</div>
</div>
<style>
*{
margin: 0; padding: 0;
}
.slider-wrapper{
overflow: hidden;
position: relative;
width: 100%; height: 300px; /* You can choose your own width and height */
background: grey; /* This is not necessary */
}
.slider-wrapper > .slider{
position: relative;
width: 300%; height: 100%;
left: 0%;
transition: 1s;
}
.slider-wrapper > .slider-btns{
z-index: 999;
position: absolute;
left: 50%; transform: translateX(-50%);
top: 90%;
}
.slider-wrapper > .slider-btns > button.active{
width: 20px; height: 20px;
border-radius: 50px;
border: none;
}
.slider-wrapper > .slider-btns > .slider-btn{
width: 15px; height: 15px;
border-radius: 50px;
border: none;
}
.slider-wrapper > .slider > .slide{
text-align: center; /* This is not necessary */
float: left;
margin: 0 20px;
width: calc((70% / 3) - 40px); height: 100%;
background: purple; /* This is not necessary */
}
.slider-wrapper > .slider > .slide > .slide-img{
width: 100%; height: auto;
display: none; /* When you use this code delete this line */
}
p{
font-family: Arial; font-size: 40px;
line-height: 300px;
} /* This style is not necessary */
</style>
Your query still not clear to me but I tried my best to understand and answer it.
<table class="container">
<tr>
<td class="left-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
</tr>
</table>
and here is the CSS
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 33.33%;
overflow: hidden;
}
.center-image{
width: 33.33%;
}
Below is the result and Fiddle
https://jsfiddle.net/u97oewqy/
Maybe this snippet helps.
border-collapse: collapse; on the .container
set padding: 0; the images.
<style>
.container{
width: 100%;
height: 200px;
border-collapse: collapse;
}
.left-image, .right-image, .center-image {
padding: 0
}
.left-image, .right-image{
width: 10%;
overflow: hidden;
}
.center-image{
width: 80%;
}
</style>
<table class="container">
<tr>
<td class="left-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
I want to fixed the "X" button inside the popup and sticky top.
But position:fixed & position:absolute both not working.
It will work fine if I using IOS google chrome and safari.
.popup-inner {
position: absolute;
bottom: 0px;
overflow: auto;
padding-bottom: 30px;
-webkit-text-size-adjust: none;
}
.popup-close {
width: 30px;
height: 30px;
position: fixed;
top: 25px;
right: 20px;
}
<a class="btn" data-popup-open="popup-1" href="#"><i class="fa fa-globe" aria-hidden="true"></i>popup</a>
<div class="popup" data-popup="popup-1">
<div class="popup-overlay"></div>
<div class="popup-inner">
<div class="fixed-content">
<div class="col-main">
<div>123</div>
<div class="content">
<ul>
<li>
<a>
<span>aaaaa</span>
<div class="lan">bbbb</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<a class="popup-close" data-popup-close="popup-1" href="#">
<div class="popup-icon"></div>
</a>
</div>
</div>
JSFiddle Here
Thanks for help.
I would suggest some CSS fixes
CSS
.popup-icon{
height:30px;
width:30px;
position: relative;
}
.popup-icon:before,
.popup-icon:after {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #aaa;
margin: auto;
}
Link for reference
I'm very new to web design and I'm practicing designing a website at my internship for this summer. I'm trying to make a table for a table on the right side and the bottom the classes are named "BroadCastSchedule" and "RightSearchBar" in the code.
I can't post the picture because this is my first post to stack overflow but if you run the code you can see the two sections of the table are very far apart and I can't get them to be together.
<!DOCTYPE html>
<html>
<head>
<title>Channel 14 Schedule</title>
<div class="img">
<img src="images/logo.png">
</div>
</head>
<style type="text/css">
#navBar {
height: auto;
position: relative;
bottom: 75px;
left: 200px;
}
#menuli {
margin: 0px;
max-width: 450px;
}
li {
display: inline-block;
padding: 0.5em;
font-family: sans-serif;
color: gray;
}
h1,
h2 {
color: gray;
font-size: 75%;
}
.searchBar {
top: 200px;
}
.titleBox {
position: relative;
left: 400px;
bottom: 75px;
}
.img {
position: relative;
left: 250px;
}
.RecentlyWatchedBar {
position: relative;
bottom: 575px;
left: 200px;
}
.searchTool {
position: relative;
right: 200px;
}
.videoLink {
/*Change size where the video is linked*/
position: relative;
left: 250px;
}
.RightSearchTable {
position: relative;
right: 75px;
top: 100px;
}
.Calender {
position: relative;
margin-top: -75px;
right: 75px;
}
.BroadcastSchedule {
display: table-header-group;
position: relative;
table-layout: fixed;
right: 350px;
margin-right: -200px;
padding-right: -200px
}
#h1FontSize {
font-size: 150%;
left: 700px;
}
#h2Location {
position: relative;
bottom: 20px;
}
input {
position: relative;
left: 1000px;
bottom: 25px;
}
table,
td {
border: 1px solid black;
position: relative;
left: 1000px;
bottom: 500px;
}
</style>
<body background="images/bg.png">
<div class="mainItemsDiv">
<div class="titleBox">
<h1 id="h1FontSize">Channel 14 Schedule</h1>
<h2 id="h2Location"><i>Local Government And Sports</i></h2>
</div>
<div id="navBar">
<ul id="menuli">
<li><strong>Main</strong></li>
<li><strong>About</strong></li>
<li><strong>Schedule</strong></li>
<li><strong>Podcasts</li>
<li>Search</li>
</ul>
<div class="searchTool">
<input type="text" placeholder="search">
<input type="button" value="Search">
</div>
</div>
<div>
<div class="videoLink">
<iframe style="margin-top: -80px"width="657" height="400" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="RightSearchTable">
<table width="225"; height="580">
<tr>
<th>Show Search
<p>Roseville High School Concerts</p>
<p>St. Anthony Football</p>
</th>
</tr>
</table>
</div>
<div class="RecentlyWatchedBar">
<p style= "color: #707070; text-indent: 50px">Recently Watched</p>
<p>
<ul>
<li><iframe style="margin-top: 0px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
</ul>
</p>
</div>
<div class= "Calender">
<table width="225"; height="225">
<th>
<p>Calender tool will go here</p>
</th>
</table>
</div>
<div class="BroadcastSchedule">
<table width="250"; height="100">
<tr>
<th>Date</th>
<th>Location</th>
<th>Start Time</th>
</tr>
<tr>
<td>Date Data</td>
<td>Location Data</td>
<td>Start Time Data</td>
</tr>
</table>
<!--
<table style="width:650px; height: 100px;">
<tr><td>Firstname</td>Eve</tr>
</th>
<th>Lastname</th>
<td>Eve</td>
<th>Points</th>
<td>Eve</td>
<tr>
<th>Eve</th>
<th>Jackson</th>
<th>94</th>
</tr>
</table>
-->
</div>
</div>
</body>
</html>
You are editing table data instead of table row. Change this line in your css:
table, td{
//Do something
}
To this:
table, tr{
//Do something
}
I'm trying to layout some content (an icon on the left, heading and text on the right) on top of an image which sits within an expanding div. I'm mainly doing this to see if it can be done but would be nice if I can make it functional. I stitched the functionality together from a couple of tutorials but can't find anything online on how to finish it off.
I'm struggling to layout the div on top of the wave image.
kind of see it working here
I've laid it out in a table so you can see roughly how I need it, I'm guessing I need to float to lay the divs out but can't get it to work. any help would be most appreciated.
<style type="text/css">
#container {
position: absolute;
bottom: 0;
left: 0;
}
.grow {
height: 200px;
width: 499px;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
background-image: url(images/passmembers/test/sunset.jpg);
}
.grow:hover {
height: 300px;
}
</style>
<body>
<div class="grow" );>
<div id="container">
<img src="images/passmembers/test/wave.png">
<div style="position: absolute; bottom: 0; left: 0; margin: 0px; text-align: center; color: #FFF; font-family: Arial, Helvetica, sans-serif;">
<table width="499px">
<tr>
<td width="239" align="left" valign="bottom">
<img src="images/passmembers/test/icon.png" width="75" height="75">
</td>
<td width="248">
<p><strong>Hot Deals</strong></p>
<p>Hot Deals, Hot DealsHot Deals, Hot DealsHot Deals, Hot Deals</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="clear: left;"></div>
</body>
I guess you solved the problem by your own.
Here's the JSFiddle: http://jsfiddle.net/D4J9H/7/
When using the JSFiddle, there's a textfield for the HTML content, a textfield for the CSS and a textfield for the Javascript code. You wrote everything in the CSS textfield, that's why the result wasn't what you expected.
HTML:
<div class="grow" style="position:relative;">
<div id="container">
<img src="http://i128.photobucket.com/albums/p195/R3DG3CKO/wave.png">
<div style="position: absolute; bottom: 0; left: 0; margin: 0px; text-align: center; color: #FFF; font-family: Arial, Helvetica, sans-serif;">
<table width="499px">
<tr>
<td width="239" align="left" valign="bottom">
<img src="http://i128.photobucket.com/albums/p195/R3DG3CKO/icon.png" width="75" height="75">
</td>
<td width="248">
<p><strong>Hot Deals</strong>
</p>
<p>Hot Deals, Hot DealsHot Deals, Hot DealsHot Deals, Hot Deals</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="clear: left;"></div>
CSS:
#container {
position: absolute;
bottom: 0;
left: 0;
}
.grow {
height: 200px;
width: 499px;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
background-image: url(http://i128.photobucket.com/albums/p195/R3DG3CKO/sunset.jpg);
}
.grow:hover {
height: 300px;
}
Please see the html below
it works fine in IE, but in Firefox it overlaps..please try and give me solution.
When the position of the div inside the td was given static, it's working properly.But i need absolute there since i need to use the left and top attributes.Any help is appreciated.Thanks
<table style="height:auto; position:fixed;">
<tr>
<td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent">
<div style="LEFT: 20px; WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;" >Traffic Light</div>
<div style="LEFT: 0px; WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;" ><img src="../common/Images/rollingstock.png" width="100%" height="100%" /></div>
<div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;" ><ul><li>Traffic Light Information</li><li>Signalling Information</li><li>Euro Light</li></ul></div>
</td>
<td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent">
<div style="LEFT: 10px;WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;">LED Dialight Iformation</div>
<div style="LEFT: 0px;WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;"><img src="../common/Images/EN-12368_Euro.png" width="100%" height="100%" /></div>
<div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;"><ul><li>Traffic Light Information</li><li>Signalling Information</li><li>Caltran Signals Light</li></ul></div>
</td>
<td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent">
<div style="LEFT: 10px;WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;">Signalling Information</div>
<div style="LEFT: 0px;WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;"><img src="../common/Images/caltransignals.png" width="100%" height="100%" /></div>
<div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;"><ul><li>Traffic Light Information</li><li>Signalling Information Light Test Data..</li><li>LED Light</li></ul></div></td>
</tr>
</table>
Well of course it overlaps. In every browser. You're absolute-positioning elements with exactly the same left/top values, how could it not? (Plus you're using position: fixed, which won't work in IE6, but will establish a different containing parent in other browsers.)
As Richard says, you could give each td element position: relative so that the absolutes inside are positioned relative to the cell. But if, as it looks like, all you want is three divs side-by-side, forget both absolute positioning and tables, and just say:
<style>
.contentBoxcontent {
float: left;
width: 201px; height: 205px;
padding: 6px; margin: 2px;
cursor: move;
}
.contentBoxcontent a { margin-left: 10px; height: 29px; }
.contentBoxcontent img { display: block; width: 161px; height: 110px; }
</style>
<div class="contentBoxcontent">
Traffic light
<img src="../common/Images/rollingstock.png" alt="" />
<ul>
<li>Traffic light information</li>
<li>Signalling information</li>
<li>Euro light</li>
</ul>
</div>
<div class="contentBoxcontent">
LED dialight information
<img src="../common/Images/EN-12368_Euro.png" alt="" />
<ul>
<li>Traffic light information</li>
<li>Signalling information</li>
<li>Caltran signals light</li>
</ul>
</div>
<div class="contentBoxcontent">
Signalling information
<img src="../common/Images/caltransignals.png" alt="" />
<ul>
<li>Traffic light information</li>
<li>Signalling information</li>
<li>Light test data</li>
<li>LED light</li>
</ul>
</div>