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;
}
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 am a novice to learning HTML and CSS. I want to add images at the top of footer. How can I achieve it.
I have the footer created and the images in one line. But somehow i don't know how to place them at top of the footer. The HTML and CSS are below. Using stylesheet from bootstrap.
<id ="image">
<img src="images1.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;" />
<img src="images2.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images3.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images4.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images5.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
</id>
<footer id="footer">
<div class="container">
<p>some text for the footer</p>
</div>
</footer>
The CSS used is below.
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align:center;
background-color: #f5f5f5;
}
#image {
position: relative;
bottom: 0;
width: 100%;
}
Try something like this:
http://codepen.io/anon/pen/bVeQyb
<div id="images">
<img src="http://placehold.it/80x80.png">
<img src="http://placehold.it/80x80.png">
<img src="http://placehold.it/80x80.png">
<img src="http://placehold.it/80x80.png">
<img src="http://placehold.it/80x80.png">
</div>
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align:center;
background-color: #f5f5f5;
}
#images {
text-align: center;
position: absolute;
bottom: 80px;
width: 100%;
}
#images a{
display: inline-block;
margin: 0 10px;
}
One method would be to position your images absolute as well. Code below:
<div id="image">
<img src="images1.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"/>
<img src="images2.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images3.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images4.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images5.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
</div>
<footer id="footer">
<div class="container">
<p>some text for the footer</p>
</div>
</footer>
#image {
position: absolute;
bottom: 60px;
width: 100%;
}
2nd method: Place your images inside the footer, in this case you need to change the footer height, since it is absolute positioned.
3rd method: Simply leave the footer in the content flow. Remove the absolute positioning.
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 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).
So I just want to say sorry for messy code, I have tried vigorously with this. Basically I want there to be 3 images side by side which I will later make clickable, and a gray background behind them. Then I want to be able to include text below the images. Any help?
HTML
Premium Store
<table id="table1" >
<tr id="imgs">
<div id="tablet">
<table border="0";>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/></td>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/></td>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro-> </icons8-metro->style/128/Business-Shop-icon.png"/></td>
</div>
</tr>
<td>
Contact a representative!
</td>
<td>
Deliver to your house!
</td>
<td>
Locate a store!
</td>
</table>
CSS
#backgroundH
{
width: 100%;
height: 50px;
background-color: #dddddd;
position: absolute;
}
#header
{
top: -50px;
color: black;
font-family: "Courier New";
text-align: center;
}
body
{
background-color: #cccccc;
}
#table1
{
width: 500px;
height: 200px;
background-color: #d9d9d9;
position: fixed;
margin-left: -250px;
margin-top: -100px;
top:50%;
left:50%;
}
td
{
width: 10px;
height: 450px;
position: relative;
margin-left: -5px;
margin-top: -225px;
top: 35%;
left: 3%;
}
Also please include what I did wrong! I am having a hard time understanding positioning, in-specific how to add a neat setup. (If somebody could skype with me I have some questions.. :P skype-ikorey1)
Thank you all for the help and reading. I really do appreciate all the feedback.
<html lang="en">
<head>
<style type="text/css">
.img-with-text { float: left; text-align: center}
</style>
</head>
<body>
<div class="container">
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email Carl Call </p>
</div>
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email Sjon Gentry</p>
</div>
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email John Mabery </p>
</div>
</div>
<!-- End of your code -->
<p style="clear: both">Something more here </p>
There is a special way of making that type of arrangement (image with caption).
And this would be my way of doing what you need:
HTML
<div id="container">
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro-> </icons8-metro->style/128/Business-Shop-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
</div>
CSS
#container{
background:#ccc;
}
#container figure{
float:left
}
How about this..
<table id="table1">
<tr id="imgs">
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" />
<p class="content">
Contact a representative!
</p>
</td>
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" />
<p class="content">
Deliver to your house!
</p>
</td>
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Shop-icon.png" />
<p class="content">
Locate a store!
</p>
</td>
</tr>
</table>
and css
body {
background-color: #cccccc;
}
#table1 {
width: 500px;
height: 200px;
background-color: #d9d9d9;
position: fixed;
margin-left: -250px;
margin-top: -100px;
top: 50%;
left: 50%;
}
tr {
width: 10px;
height: 450px;
position: relative;
margin-left: -5px;
margin-top: -225px;
top: 35%;
left: 3%;
}
td.content {
position: absolute;
}
and for position details are explained clearly in w3schools
which will helps us alot.