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>
Related
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.
When I zoom in in IE7, the element with position relative gets overlapped..How can I fix this?
<!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>HTML5</title>
<style type="text/css" media="all">
.wrapper{width:500px;height:1000px;border:1px red solid;}
.block1{border:1px red solid;width:100px ;height:100px;position:relative;}
.block2{border:1px red solid;width:100px ;height:100px;}
.block3{border:1px red solid;width:100px ;height:100px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="block1">A</div>
<div class="block2">B</div>
<div class="block3">C</div>
</div>
</body>
</html>
I tries adding zoom:1 to .block1 also but it didn't work
.block1 {
zoom: 1 ;
}
Try something like this, Hope this helps.
The parent collapses when I do not specify a height..
<!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>
<style type="text/css" >
#parent{width:500px;border:#000 thin groove}
#parent p{float:left}
</style>
</head>
<body>
<div id="parent">
<p height="100px" width="100px">text</p>
</div>
</body>
</html>
Add overflow: hidden to your #parent div
Explanations as to why this works is at http://www.quirksmode.org/css/clearing.html
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>
Div height is not support in below code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<style type="text/css">
.Footer{
background-color:red;
width:673px;
height:1px;
}
</style>
<title>Fist</title>
</head>
<body>
<div class="Footer"></div>
</body>
</body>
</html>
But its work below code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<style type="text/css">
.Footer{
background-color:red;
width:673px;
height:1px;
}
</style>
<title>Second</title>
</head>
<body>
<div class="Footer"></div>
</body>
</body>
</html>
How to set div height in 1st coding
why are you using 2 body tags??????????????
add < befor div tag
In first piece of code you have:
div class="Footer"></div>
which should be:
<div class="Footer"></div>
You also do not have a doctype set for your first example. I would suggest adding something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body>
div class="Footer"></div>
</body>
You can add < before div tag