I'm trying to have a roll over image effect but also make it responsive to small media types, hard to explain but here is a link to video to what Im trying to do... https://www.youtube.com/watch?v=PWoOpJtkyjI&t=118s
any help will be great
jsfiddle
https://jsfiddle.net/0b5sz9zo/
Thank you
<!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" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<nav>
HOME
ABOUT
WRITINGS
EXTRA
CONTACT
</nav>
<div class="sect sectOne"></div>
<div class="subSection1">subSection1 test </div>
<div class="sect sectTwo"></div>
<div class="subSection2">subSection2 test </div>
<div class="sect sectThree"></div>
</body>
</html>
*{margin:0;}
html, body {height:100%;}
h1,h2,h3,h4,h5,h6, p
{margin-bottom:20px;}
nav{
position:fixed;
width:100%;
height:50px;
background-color:rgba(0,0,0,.5);
z-index:99;
text-align:center;
}
nav a{
text-decoration:none;
color:white;
margin-left:30px;
line-height:50px;
}
.sect{
height:100%;
background-size:cover;
background-attachment:fixed;
}
.subSection1{
height:50%;
background-color:white;
color:black;
font-size:50px;
}
.subSection2{
height:50%;
background-color:white;
color:black;
font-size:50px;
}
.sectOne{
background-image: url("img/bk1.jpg");
}
.sectTwo{
background-image: url("img/image2.jpg");
}
.sectThree{
background-image: url("img/image3.jpg");
}
Related
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
</head>
<body style="width: 100%; height: 100%">
<table cellspacing="1" style="width: 100%; height: 100%">
<tr>
<td valign="middle" align="center">
<h1>Hello World</h1>
</td>
</tr>
</table>
</body>
</html>
The result of that html snippet is the word Hello World is on top of the screen. I did everything to make it in the middle. What can I do?
I tried another way using vertical align style
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How to get Sexier Avatar in IMVU 2</title>
</head>
<body style="width: 100%; height: 100%">
<div style="height: 100%;width: 100%;vertical-align: middle">
<h1>Click here to Get Game and See Yourself</h1>
</div>
</body>
</html>
I clearly said that the vertical align for the div should be middle. It doesn't work.
It seems that the size of the body is not fullscreen. How do I make it full screen?
<!doctype HTML>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<style>
#centerInScreen {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#centerInScreen h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="centerInScreen">
<h1>Hello World!</h1>
</div>
</body>
</html>
Use this to center in screen.
Use CSS
<div class="center">Hello World</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
I am having a slight difficulty with my Dreamweaver and CSS... Here is the code:
<!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>
<link href="myCss.css" rel="stylesheet" type="text/css" />\
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p id="paragraph">welcome!</p>
<button id="button"> Click here </button>
</body>
</html>
Here is my css codes
#charset "utf-8";
<style type="text/css">
#button{
font-style:italic;
font-color:red;}
#paragraph{
font-style:italic;}
</style>
My question is why is my #paragraph working and #button isn't working ?
Remove that charset declaration before your style tag, also change font-color to just color
http://jsfiddle.net/63GRZ/
<p id="paragraph">welcome!</p>
<button id="button"> Click here </button>
Here is my css codes
<style type="text/css">
#button{
font-style:italic;
color:red;}
#paragraph{
font-style:italic;}
</style>
My webpage's view differ at different resolutions. I am using MS Superpreview for testing. Here are the screenshots at 1024x768 and 1280x1024.
https://dl.dropboxusercontent.com/u/27899629/stack/1024x768.png
https://dl.dropboxusercontent.com/u/27899629/stack/1280x1024.png
Here is the code.
<!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>Spanchem - Chemical Cleaning Services, Mumbai India</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen, projection"/>
<!--[if IE 6]>
<![endif]-->
<style type="text/css">
img#pngfix { behavior: url(iepngfix/iepngfix.htc) }
#header {
}
#header_bg{
background:url(images/header_bg.png) no-repeat;
width:100%;
min-height:171px;
height:auto !important;
height:171px;
z-index:9999;
border:1px solid red;
}
#top_menu {
left:435px;
position:relative;
top:-115px;
z-index:-999;
color:blue;
}
</style>
</head>
<body>
<div id="header">
<div id="header_bg" ></div>
<div id="top_menu"><img src="images/menu_bg.png" id="pngfix"/></div>
<div id="m_banner">Banner</div>
</div>
</body>
</html>
I would like to the reason as to why my pages renders differently at different resolutions and how to correct it.
I'm trying to make an image go ALL the way right on a DIV but it's not happening:\
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>* { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:5px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;">#Testing<br />Logout</div>
<div style="clear:both;"></div></div>
</body>
</html>
Try that on say... http://htmledit.squarefree.com/ that and you'll see red is still visible on the right-hand side of the border when it should float all the way right.
<div style="float:right,margin-right:5px;">
margin-right:5px
Take off the margin-right:5px; on your inner DIV around the image.
<div style="float:right;">
Well the float has "margin-right:5px;" in its style attribute. That's causing a 5-pixel margin on the right... if you remove that, it will go all the way to the right.
You asked to make the image go all the way to the right on a div, but you didn't say which div. The img is already all the way to the right on its immediate parent, but that div is 5 pixels from the right of its parent ("login").
Setting the margin to 0 inside your image div gets the image all the way over.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>body { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:0px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;">#Testing<br />Logout</div>
<div style="clear:both;"></div></div>
</body>
</html>
Do like that:
<div id="login"><div style="float:right;padding-left:10px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
I want to make a div that is 960 x 960px with the glow corners.
How do you position this image correctly using css so it appears in the corners?
http://www.halogamertags.com/sprite_glowCorners_62_59.png
This is how it can be done.
div{
position:relative;
width:300px;
height:200px;
}
img{
position:absolute;
width:100%;
top:0;
bottom:0;
}
Changing the height of the div will also affect the dimensions of the glow image. There are other ways of accomplishing a similar effect, but using the image provided this is how it can be done.
Check working example at http://jsfiddle.net/ZRnJf/
I saved an 1x1 px slice of your glow effect as glow.png.
I do not know what exactly your goal is, but with this code I get the corners, and the content in the middle.
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta name="page-topic" content="CSS, HTML, Tutorialo" />
<meta name="robots" content="index,follow" />
<meta name="distribution" content="global" />
<meta name="keywords" content="Keywords, here" />
<meta name="description" content="A good listing to vote up" />
<title>CSS - DEMO</title>
</head>
<body style="background-color: gray;">
<div style="background-image: url('glow.png'); background-repeat: repeat-x; background-position: top; width: 960px; height:960px; margin: 15px;">
<div style="background-image: url('glow.png'); background-repeat: repeat-x; background-position: bottom; width: 960px; height:960px; ">
<div style="background-image: url('glow.png'); background-repeat: repeat-y; background-position: left; width: 960px; height:960px; " >
<div style="background-image: url('glow.png'); background-repeat: repeat-y; background-position: right; width: 960px; height:960px; ">
<div style="margin: 1px;">
Hello World
</div>
</div></div></div></div>
</body>
</html>
EDIT: Nowadays there are rumors going on for better using HTML5 doctype rather than XHTML, so before just using XHTML better do some research on the (dis)advantages. I think HTML5 is standard.