i'm creating a div with the image and putting overlay on the top . when you hover on image the overlay will appear but it's not taking the padding
<div class="col-lg-6 text-center full-width">
<div class="overlay">
<p class="overlay-price-product">
$9.00
</p>
<p class="color-white">
MENS,T-SHIRT
</p>
<p>
<a href="#">
<button type="button" class="btn btn-default-buy">
add to cart
</button>
</a>
</p>
</div>
<img src="img/men_shirt_1.jpg" class="spaces">
</div>
My CSS
.full-width{
padding-right: 0px !important;
padding-left: 0px !important;
background-color: #F6F6F6;
}
now the problem is here its taking padding for the image class but its not taking overlay class padding
.overlay{
opacity: 0;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position: absolute;
padding: 20px;
}
.spaces{
padding:20px;
}
i wan't my overlay to be the exact size of image any suggestions ? or any efficient way of doing it?
You can use this code below: Here is the Live Demo
<div class="container">
<img src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" width="200"/>
<div class="overlay">
<p class="overlay-price-product"> $9.00 </p>
<p class="color-white"> MENS,T-SHIRT </p>
<p><button type="button">add to cart</button></p>
</div>
</div>
.container{
width:200px;
height:200px;
background:green;
position:relative;
}
.container img{
width:100%;
height:100%;
}
.overlay{
width:100%;
height:100%;
background:red;
opacity:0;
position:absolute;
text-align:center;
box-sizing:border-box;
padding:20px;
top:0;
transition:all .5s;
transform:scale(.9, .9);
}
.overlay:hover{
opacity:1;
transform:scale(1, 1)
}
There is another way. I will show an example. Here will be the three-type zooming effect.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Powerful Zooming Effect Using jQuery </title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300, 300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'Image/image1.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400, 400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: 'Image/image2.jpg' //<-- No comma after last option!
})
$('#image3').addimagezoom()
})
</script>
<style type="text/css">
.magnifyarea
{
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
<img id="image1" border="0" src="Image/image1.jpg" style="width: 300px; height: 225px" /><p>
<p>
<img id="image2" border="0" src="Image/image2.jpg" style="width: 300px; height: 225px" /><p>
<p>
<img id="image3" border="0" src="Image/image3.jpg" style="width: 300px; height: 225px" /><p>
</form>
</body>
</html>
By default, background applies to the inner space, including padding.
If you don't want this, you can change with background-clip property. In your case,
.overlay {
background-clip: content-box;
}
fiddle
Add this css in overlay class
.overlay{
box-sizing: border-box;
}
I tried to reproduce your code. As you can see the padding works on the overlay.
Can you check if one of the paragraph tags inside the overlay class has some padding or margin?
Other option will be that some other css code overrides the overlay container elsewhere. You should check this with a browser inspector.
.container {
background:green;
}
.overlay {
position: absolute;
width:150px;
height:150px;
padding: 20px;
background:red;
}
.overlay:hover {
opacity:.5;
}
.spaces {
width:150px;
height:150px;
padding:20px;
}
<div class="container">
<div class="overlay">
<p>I'm overlay</p>
<p class="overlay-price-product">
$9.00
</p>
</div>
<img class="spaces" src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" />
</div>
Related
Let me first point out that I am new to HTML. I'm in high school and I'm currently making a website for my portfolio. Here's the problem, I can't get my page to be responsive. I have tried the stuff that was on the internet but they didn't seem to work. Here is my website- http://danil1.gitastudent.online/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Quicksand', sans-serif;
font-size:25px;
overflow-x:hidden;
}
.container {
position:absolute;
width:100%;
}
.zoom {
padding: 10px;
transition: transform .2s;
margin: 0 auto;
}
.textG {
left:730px;
top:250px;
transition-property: left;
transition-duration: 0.15s;
transition-timing-function: linear;
position:relative;
z-index:-1;
}
.textI {
left:1180px;
top:250px;
transition-property: left;
transition-duration: 0.15s;
transition-timing-function: linear;
position:relative;
z-index:-1;
}
.textT {
left:730px;
top:750px;
transition-property: left;
transition-duration: 0.15s;
transition-timing-function: linear;
position:relative;
z-index:-1;
}
.textA {
left:1180px;
top:750px;
transition-property: left;
transition-duration: 0.15s;
transition-timing-function: linear;
position:relative;
z-index:-1;
}
.container:hover .textG{
left:850px;
}
.container:hover .textI{
left:1340px;
}
.container:hover .textT{
left:830px;
}
.container:hover .textA{
left:1400px;
}
.zoom:hover {
transform: scale(1.02);
</style>
</head>
<body>
<div style="position:relative; left:30; top:30; font-size:30px;"><b>GITA.</b></div>
<div class="container">
<div class="zoom">
<img src="G.png" id="g" width="40%" style="position:absolute; left:300; top:10;">
</div>
<div class="textG">
<div><b>ABOUT</b></div>
</div>
</div>
<div class="container">
<div class="zoom">
<img src="I.png" id="i" width="40%" style="position:absolute; left:850; top:10;">
</div>
<div class="textI">
<div><b>WORKS</b></div>
</div>
</div>
<div class="container">
<div class="zoom">
<img src="T.png" id="t" width="40%" style="position:absolute; left:300; top:450;">
</div>
<div class="textT">
<div><b>GITA</b></div>
</div>
</div>
<div class="container">
<div class="zoom">
<img src="A.png" id="a" width="40%" style="position:absolute; left:850; top:450;">
</div>
<div class="textA">
<div><b>CONTACT</b></div>
</div>
</div>
</body>
</html>
For each screen size you can use:
#media screen and (min-width: 900px) {
#your Code...
}
or
#media screen and (max-width: 900px) {
#your Code...
}
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
As I mentioned in my original comment, I'd strongly advise against using CSS position to establish layout. You'll find yourself in a cat-herding situation as content changes and as you're trying to adapt to different viewport sizes.
The snippet below does not faithfully recreate every aspect of your existing page, but it demonstrates a much simpler approach using less markup and less css that will be much easier to manage and make responsive.
img {
max-width: 100%; /* prevent images from being larger than their container */
}
.big-nav {
list-style: none; /* get rid of default list styling */
padding: 0; /* get rid of default list margin */
margin: 0; /* get rid of default list padding */
max-width: 1024px; /* limit max width */
margin: 0 auto; /* center in the page */
display: grid; /* use a grid layout */
grid-template-columns: 1fr 1fr; /* two equally sized columns */
gap: 1rem; /* space between the grid cells */
}
.big-nav > * {
border: 1px dashed lightblue; /* so you can see the grid */
}
<!-- set base href so your images will load -->
<base href="http://danil1.gitastudent.online/"/>
<div>
<div><b>GITA.</b></div>
<ul class="big-nav">
<li>
<img src="G.png">
<div class="label">ABOUT</div>
</li>
<li>
<img src="I.png">
<div class="label">WORKS</div>
</li>
<li>
<img src="T.png">
<div class="label">GITA</div>
</li>
<li>
<img src="A.png">
<div class="label">CONTACT</div>
</li>
</ul>
</div>
I am trying to make a website for my niece, kind of like a homepage for her. I have a little experience coding and I got stuck positioning an image. I don't know whats wrong with it.
Here's my HTML code:
<html>
<head>
<title>MWM</title>
<h1>Welcome to ---- HomePage!</h1>
<link rel="stylesheet" type="text/css" href="C:\Style.css">
<script language="javascript">
function MouseRollover(MyImage)
{MyImage.src = "C:\N2.png";}
function MouseOut(MyImage)
{MyImage.src = "C:\N1.png";}
function MouseRollover2(MyImage)
{MyImage.src = "C:\C2.png";}
function MouseOut2(MyImage)
{MyImage.src = "C:\C1.png";}
function MouseRollover3(MyImage)
{MyImage.src = "C:\Y2.png";}
function MouseOut3(MyImage)
{MyImage.src = "C:\Y1.png";}
function MouseRollover4(MyImage)
{MyImage.src = "C:\H2.png";}
function MouseOut4(MyImage)
{MyImage.src = "C:\H1.png";}
</script>
</head>
<body>
<!--Cartoons-->
<a class="Dec" href="C:\Cartoons.html">
<img class="border size" src="C:\C1.png" onMouseOver="MouseRollover2(this)" onMouseOut="MouseOut2(this)">
</a>
<!--Google-->
<a Class="Dec" href="http://www.Google.com">
<img id="N" class="border size" src="C:\N1.png" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
</a>
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<!---->
</body>
</html>
and here's my CSS:
body {Background-color: lime;}
h1 {text-align: center;Color: Black;}
/**/
.Border {border-style: inset;border-width: 10px;border-bottom-color: #454545;border-right-color: #454545; border-top-color: #DEDEDE; border-left-color: #DEDEDE;}
.Dec {text-decoration: None;}
.Size {height: 57px;width: 227px;}
.SY {height:77px;Width: 227px}
/*
Postion Equation: (Height+20Border+IconLeft+20Image growth)="Height"
(Width+20Border+IconLeft+20Image growth)="Width"
*/
#C {position:absolute;}
#N {position:absolute; TOP:163px; LEFT:275px;}
#Y {position:absolute; TOP:260px; LEFT:542px;}
#H {position:absolute; TOP:163px; RIGHT:275px;}
/**/
img:link {}
img:visited {}
img:hover {height: 77px;width: 247px;}
img:hover.SY {height: 97px;Width: 247px;}
/**/
Even though I did everything the same I still cant make the "Facebook Link" work!
I made every other option works perfectly fine except that one. I tried using Margin-Top:163px; and Margin-Right:275px; in CSS but that just moved everything down... I want it to change picture when you hover over it and also for it to grow in size...
You dont need to use JavaScript at all.
Of what I understand, you only want the picture to change on hover. So this is what you'll need to do.
HTML
CSS
#fbimage{
background-image:url('fbimage.png');
}
#fbimage:hover{
background-image:url('fbhoverimage.png');
}
You forget a > after the Youtube link:
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a>
<!-- Right up ^ here-->
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<html>
<head>
<title>MWM</title>
<style>
.container{
background-color: lime;
width:100%;
height:100%;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:absolute;
}
h1 {text-align: center;color: black;font-size:3em;}
ul{
list-style-type:none;
}
a{
display:block;
border-style: inset;
border-width: 10px;
border-bottom-color: #454545;
border-right-color: #454545;
border-top-color: #DEDEDE;
border-left-color: #DEDEDE;
height:100px;
width:200px;
position:absolute;
background:red;
float:left;
text-align: center;
vertical-align: middle;
color:white;
font-size:2em;
line-height:100px;
}
a.cartoon{
top:0;
left:0;
background:url(C:\C1.png) blue;
}
a.cartoon:hover{
background:url(C:\C2.png)aqua;
}
a.google{
top:200;
left:200;
background:url(C:\G1.png) yellow;
}
a.google:hover{
background:url(C:\G2.png)gold;
}
a.youtube{
top:400;
left:400;
background:url(C:\Y1.png) red;
}
a.youtube:hover{
background:url(C:\Y2.png)darkred;
}
a.facebook{
top:600;
left:600;
background:url(C:\F1.png) green;
}
a.facebook:hover{
background:url(C:\F2.png)lawngreen;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to ---- HomePage!</h1>
Cartoon
Google
Youtube
Facebook
</div>
</body>
</html>
I am trying to set out my webpage and I am facing a big problem. I have wrapped all of my code in a tag as I wish to wrap all of my content in an additional background of different color.
However when I set the attributes for my code this happens:
It is as if by bottom element is overlapping somehow with the two above. I am using column separators I do not know if this affects it. Here is my full CSS & HTML code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Featured</li>
<li>Coming Soon</li>
</ul>
<ul class="pull-right">
<li>Sign In</li>
<li>Register</li>
</ul>
<div id="logo-game">
<img src="http://upload.wikimedia.org/wikipedia/he/b/b7/Gamespot_logo.png">
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="feature-cont">
<div id="feature-cont-back">
<h1>100's Of Featured Game Reviews</h1>
<p>Browse through our collection of the most popular game reviews out there</p>
Find Out More
</div>
</div>
</div>
</div>
<div class="bodytwo">
<!--Recommened Section-->
<div class="recommended">
<div class="text-center">
<div class="container">
<ul>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Destiny.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_CODAW.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Evolve.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_AssassinsCreed.jpg"</li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FIFA.jpg"</li>
</ul>
<ul>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Forza.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_BattlefieldHardlines.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_GTAV.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Halo.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FarCry4.jpg"> </li>
</ul>
</div>
</div>
</div>
<!--Start Of Tables-->
<div class="mainc">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="new-game">
<table>
<tr>
<th colspan="3">Games</th>
</tr>
<tr>
<td>
<img src="http://static.gamespot.com/uploads/original/1197/11970954/2396871-battlefield4.jpeg">
<p>Battlefield 4 is the genre-defining action blockbuster made from moments that blur the line between game and glory...</p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/fifa_14/cover_large.jpg">
<p>This year it's all about the emotion of scoring great goals - the challenge of building play as a team...</p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/dead_island_riptide/cover_large.jpg">
<p>Take on hundreds of Zombies at once as your screen becomes swamped with the undead all after one thing…. You!</p>
</td>
</tr>
<tr>
<td height="400">
<img src="http://images.pushsquare.com/games/ps4/need_for_speed_rivals/cover_large.jpg">
<p>High speed meets high stakes in Need for Speed: Rivals. Play as a lone-wolf racer or a team-based cop as you speed... </p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps4/watch_dogs/cover_large.jpg">
<p>Join the Community and Social Team from GAME as they head to Paris for a special Watch Dogs event with Ubisoft!.. </p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/last_of_us/cover_large.jpg">
<p>From the creators of the Uncharted Series comes an emotionally-charged experience that’ll keep you gripped...</p>
</td>
</tr>
</table>
</div>
</div>
<!--End Of Tables-->
<!--Start of chart-->
<div class="col-md-6">
<div class="table-chart">
<table class="background">
<tr>
<th colspan="3"><h1>Game Charts</h1></th>
</tr>
<tr>
<td><h1>1</h1></td>
<td><img src="http://images.pushsquare.com/games/ps3/gran_turismo_6/cover_large.jpg"</td>
<td><h3>Gran Turismo</h3>View Review</td>
</tr>
<tr>
<td><h1>2</h1></td>
<td><img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg"</td>
<td><h3>Call of Duty:Ghosts</h3>View Review </td>
</tr>
<tr>
<td><h1>3</h1></td>
<td><img src="http://images.pushsquare.com/games/ps4/killzone_shadow_fall/cover_large.jpg"</td>
<td><h3>Killzone</h3>View Review</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--End of chart-->
</div>
<div class="feature-article">
<div ="feature-back">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Call Of Duty: Ghosts</h2>
<img src="http://eaglerising.com/wp-content/uploads/2013/11/call_of_duty_ghosts-hd-300x180.jpg">
<p>Build your team and take up to 6 of them into battle in the all new Squads mode. This mode takes the best parts of the multiplayer experience and allows you to play either solo or cooperatively with the custom soldiers created and leveled up in multiplaye</p>
</div>
<div class="col-md-4">
<div id="feature_back">
<h2>Grand Theft Auto V</h2>
<img src="http://ronewiznation.files.wordpress.com/2013/10/grand-theft-auto-game-cover.jpg?w=300&h=180">
<p>Grand Theft Auto V Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets, and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV. </p>
</div>
</div>
<div class="col-md-4">
<h2>Assasins Creed</h2>
<img src="http://www.ketubanjiwa.com/wp-content/uploads/2013/12/Assassins-Creed-IV-Black-Flag-Freedom-Cry-DLC-Reloaded-Single-Link-300x180.jpg">
<p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#121212;
}
.bodytwo {
background-color:white;
position:relative;
}
.nav {
background-color:black;
width:100%;
position:fixed;
z-index:5;
}
.nav li {
display:inline;
}
.nav a {
padding:10px 8px;
position:relative;
top:6px;
color:#FF6600;
text-transform:uppercase;
}
#logo-game img {
position:relative;
height:50px;
left:20%;
}
.jumbotron {
position:relative;
top:50px;
background-image:url('http://collectortoys.net/wp-content/uploads/2014/06/battlefield-4-server-bannerladder-standings-for-xboxone-battlefield-4---bf4-xbox-one-mretosqa.jpg');
height:500px;
z-index:2;
background-size:cover;
}
.feature-cont {
position:relative;
left:800px;
width:350px;
color:white;
z-index:2;
}
#feature-cont-back {
background-color:rgba(20,20,20,.5);
width:400px;
height:400px;
position:relative;
border-radius:10px;
padding:5px;
z-index:1;
}
.jumbotron h1 {
font-family:ubuntu, Arial;
}
.recommended li {
display:inline;
margin:auto;
float: none;
position:relative;
top:80px;
}
.new-game {
position:relative;
}
.new-game td, th {
padding: 0.5;
}
.new-game table {
border-collapse:separate;
border-spacing:15px 10px;
border: 1px solid black;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game tr {
padding:10px;
}
.new-game tr th {
text-align:center;
color:white;
font-family:ubuntu;
font-size:25px;
}
.new-game td {
padding:10px;
width:100px;
height:200px;
vertical-align:top;
background-color: rgba(24,24,24,.2);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game td p {
text-align:center;
font-family:arial;
font-size:12px;
color:white;
}
.new-game td img {
width:100px;
height:100px;
}
.background {
background: url("http://i1057.photobucket.com/albums/t390/Alexwileyy/box-01_zpsdd34bf84.png")
no-repeat;
height:500px;
width:424px;
}
.table-chart table {
position:relative;
border-collapse:separate;
}
.table-chart tr td h3 {
width:150px;
text-align: center;
font-family:Arial;
font-size:20px;
position:relative;
top:-20px;
color:black;
}
.table-chart td a {
position:relative;
top:-20px;
}
.table-chart td img {
width:100px;
height:100px;
}
.table-chart th h1 {
text-align:center;
font-family:ubuntu;
color: #dd6a15;
text-shadow: 0 2px rgba(0,0,0,0.75);
}
.table-chart td {
padding:15px;
box-shadow: 0 3px 1px rgba(26,26,26,0.75);
}
.feature-article {
position:relative;
clear:both;
height:400px;
border-bottom:3px solid #2f2f2f;
border-top:3px solid #2f2f2f;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/1_zps87c3163e.jpg');
}
.feature-article .col-md-4 {
width:370px;
height:200px;
text-align:center;
margin:auto;
z-index:1;
}
.feature-article .col-md-4 img {
width:300px;
height:180px;
}
.feature-article .col-md-4 p {
width:350px;
}
#feature_back {
clear:both;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/line-01_zps79e6ad19.png');
height:400px;
width:370px;
padding-left:10px;
background-repeat:no-repeat
}
/*Buttons Design*/
.view-review {
margin-top: 0px;
margin-right: 0px;
padding: 14px 26px;
font-size: 14px;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
color: #fff;
display:inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-weight: bold;
transition: background 0.1s ease-in-out;
/*for different browsers */
-webkit-transition: background 0.4s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
/*END*/
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.view-review:active {
padding-top: 15px;
margin-bottom: -1px;
}
.view-review, .view-review:hover, .view-review:active {
outline: 0 none;
text-decoration: none;
color: #fff;
border-radius: 3px;
}
.view-review {
background-color: #2f2f2f;
box-shadow: 0px 3px 0px 0px #ea6300;
width:150px;
height:35px;
}
.view-review:hover {
background-color: #454545;
}
.mainc .row {
position:relative;
top:80px;
}
To summarise I want to have the white background wrapped around only the table elements on the page running all the way down the page, however the bottom element is overlapping the tables.
Any idea at all of what I could possible do?
The problem is that you gave a 'top:80' to '.mainc .row'. This causes the overlap. Delete it, and your footer will not overlap the content. Also, give a 'margin-top:100px' to your '.mainc' class. this will fix the new overlapping problem.
You need to learn to use bootstrap more efficiently. Don't be afraid to abuse bootstrap's 'container' and 'row' divs. Think of those element as some big lego blocs that will stack themselves untop of each others.
Also I would not recommend using tables, as they are old-school and less edit-friendly. Use DIVs, you will have more control over them and they will adjust more easily with bootstrap.
If you want your site to be responsive, learn how to scale and place your columns accordingly by adding all of bootstrap 'col-x-x' classes.
You're adding position:relative all over for no good reason. In general you use position:relative to set the anchor point for absolutely-positioned child elements. You'd then use position:absolute to move those elements around in the layout.
If you need to perform minor tweaks of element positioning, use margin:, not position:relative.
I want to set a button which allow the user to reset the contact form, is there any method to do it?
here is my coding for text field
<div style="float:left;width:600px;"><!--textfield-->
<div style="float:left;">
<div style="float:left;width:90px;padding-top:5px">
NAME
</div>
<div style="float:left;padding-top:4px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
EMAIL ADDRESS
</div>
<div style="float:left;padding-top:2px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
CONTACT NUMBER
</div>
<div style="float:left;padding-top:2px">
:
<input type="text" class="textfield"/>
</div>
</div>
<div style="width:120p;float:left;padding-top:8px;">
<div style="float:left;width:90px;padding-top:5px">
MESSAGE
</div>
<div style="float:left;padding-top:2px">
:
</div>
<div style="float:left;margin-left:3px;padding-top:2px;">
<textarea cols="48" rows="6" class="textfield"></textarea>
</div>
</div>
</div><!--textfield-->
</div><!--end leave your personal details-->
<div style="clear:both"></div>
<div>
<div id="buttonreset"><!--buttonreset-->
<img src="img/buttonreset1.png" width="54" height="24" alt="reset" />
</div><!--end.buttonreset-->
<div id="buttonsend"><!--buttonsend-->
<img src="img/buttonsend1.png" width="54" height="24" alt="send" />
</div><!--end.buttonsend-->
</div>
Css
.textfield {
font-family: CenturyGothic;
font-size: 12px;
color: #231F20;
resize: none;
text-align: left;
}
textarea {
border: thin solid #221F1F;
border-radius: 5px;
width: 430px;
height: 160px;
opacity: 0.8;
}
input {
border: thin solid #221F1F;
border-radius: 4px;
width: 430px;
height: 21px;
opacity: 0.7;
}
#buttonreset {
margin-top: 5px;
background-image: url(../img/buttonreset.png);
background-repeat: no-repeat;
height: 24px;
width: 54px;
margin-top: 10px;
margin-left: 410px;
float:left;
}
#buttonreset img {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
opacity:0;
}
#buttonreset img:hover {
opacity:1;
cursor:pointer;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
Chrome, and Safari */
}
I haven't add any coding to my button, what code suitable for my button?
this is my fiddle:
http://jsfiddle.net/K5CJ4/
<input type='reset'>
is the easiest method.
[Edit]
Since you're trying to reset the form using an image, the easiest way is to use the reset() method in Javascript. (No need for a library like jQuery). To accomplish this, I simply added a bit of javascript to your <a> tag in your form, as well as wrapped the entire example in <form></form> tags, giving it an id of contactForm .
DEMO
use jQuery way to solve it. like this :
$("#buttonreset").click(function() { // div's id
$("#txtField1").val("");
$("#txtField2").val("");
});
Try to use :
<button type="reset" id="btnreset" value="Reset">Reset</button>
The button is a reset button (resets the form-data to its initial values)
#btnreset {
background-image: url("http://www.ricksdailytips.com/wp-content/uploads/2013/11/reset-button.gif");
border: 0 none;
height: 204px;
width: 200px;
}
If you want to automate this, you could set it such that the page refreshes the entire page after a given number of seconds. use the meta tag:
<meta http-equiv="refresh" content="(enter number of seconds before refresh);url=thispage.html" />
I would like to do a CSS effect on hovering an image.
I'd like to show a div containing content like text when I hover on an image.
So I'd like to do something with this code:
<div id="image"><img src="image.png"/></div>
<div id="hover">Test message</div>
I have tried to hide the "hover" div in css display and on hover I tried to set the display to block, but its not working...:(
EDIT: I want the text on the image. When I hover the image it should get some opacity BUT the text should not recieve that opacity!
IS there any method to do this?
http://jsfiddle.net/ZSZQK/
#hover {
display: none;
}
#image:hover + #hover {
display: block;
}
Just keep it simple, no need to change your markup.
Update
If you want to change opacity of image on mouse hover, then
http://jsfiddle.net/ZSZQK/4/
#hover {
display: none;
position: relative;
top: -25px;
}
#image:hover {
opacity: .7;
}
#image:hover + #hover {
display: block;
}
Update 2
Since you added a couple of more requirements to your initial question, now it requires a change in the original html markup.
I am assuming you are using html5, and if so, you should use the tags appropriated for your content's context:
<figure>
<img src="http://placekitten.com/200/100" />
<figcaption>Test message</figcaption>
</figure>
and the css
figure {
position: relative;
display: inline-block;
}
figcaption {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,.15);
}
figure:hover img {
opacity: .7;
}
figure:hover figcaption {
display: block;
}
jsFiddle
Try:
<div id="image">
<img src="image.png"/>
<div class="hover">Test message</div>
</div>
CSS:
#image {
position:relative;
}
#image .hover {
display:none;
position:absolute;
bottom:0;
}
#image:hover .hover {
display:block;
}
Basically what I did was:
Moved text div inside #image div.
Changed id="hover" to class="hover"
Added display:block when #image is hovered and display:none if not.
Some positioning rules, it's just a fast example, let me know if it works.
There are so many ways to do this, but if you want a CSS only approach, you would need to restructure your html to something like:
<div id="image">
<img src="image.png"/>
<div id="hover">Test message</div>
</div>
And then in your CSS hide the message by default:
#hover {display:none;}
Then show the message:
#image:hover #hover {display:block;}
Without JavaScript you can do like this :
1.Make the #hover div be on top of the image and set the opacity:0;
2.Than add this to the css :
#hover:hover {
opacity:1
}
This should resolve your problem.
here is the solution i found on google
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#mybox {
width:80px;
height:90px;
float:left;
background-color:#0F9;
padding:10px;
}
.Imgdiv {
width:80px;
height:20px;
margin:0px 0px 10px 0px; padding:0px;
cursor:pointer;
background-color:#39C;
}
#mybox .hiddenDiv {
left:0px;
display:none;
z-index:100;
width:80px;
height:50px;
margin:0px;
background-color:#336;
float:left;
}
#mybox:hover .hiddenDiv {
display:block; top:0px; left:8px;
}
</style>
<body>
<div id="mybox">
<div class="Imgdiv"></div>
<div class="hiddenDiv"></div>
</div>
</body>
</html>
Hello If I understand correctly you want something like this:
<div id="wrapper">
<div id="img-wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
</div>
<div id="text-wrapper">
<p>Hello world!</p>
</div>
</div>
CSS:
#wrapper{
position:relative;
border:1px solid black;
width:102px;
height:102px;
}
#text-wrapper{
position:absolute;
height:0px;
overflow:hidden;
font-size:14px;
font-family:Arial,Tahoma;
font-weight:bold;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera */
}
#img-wrapper:hover + #text-wrapper{
height:32px;
width:102px;
}
The key to accomplish this is this css line:
#img-wrapper:hover + #text-wrapper{
What it actually does is "When I hover img-wrapper div do some stuff in text-wrapper div"
Check demo here: http://jsfiddle.net/A9pNg/1/