problem in my first code

Discussion in 'CSS' started by promotingspace.net, Jul 28, 2007.

0
  1. #1
    Hi
    I want to code something like this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  img.1 {z-index:-1;}
  img.2 {top:20px;
  left=0px;
  }
div {display: none}
</style>
  
  </head>
  <body>
<img class="1" border="0" src="big.jpg" width="720" height="180">
<img class="2"  src="login.gif" >

  <img class="2" border="0" src="logout.gif" width="144" height="72"><img class="2" border="0" src="add.gif" width="144" height="72"><img class="2" border="0" src="pass.gif" width="144" height="72"></p>
 </body>
</html>
    Code (markup):
    and please see want i need and what i get at this url:
    http://pedia.sys17.net/css1.htm
     
    promotingspace.net, Jul 28, 2007 IP
  2. themasterplan

    themasterplan Peon

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    First, I don't want to disappoint you, but there's no way you can have good css and xthml code if you're not doing it by hand. That PSPad editor won't help you, believe me.
    Second, you have an end </p> tag but no beginning for it. That could be causing the page to display different.
     
    themasterplan, Jul 28, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    You are attempting to use positioning on elements you haven't told to be able to be positioned - and in general let me save you some effort now - using top, bottom, left or right in your CSS USUALLY means you are trying to do something the wrong way.

    Second, if you want that image behind them the way you are trying you should be using a negative value on top, not a positive one - not that you should be using top at all as the fastest way to achieve what you are trying is to use a BACKGROUND.

    I belive this is what you are trying to achieve:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Image test</title>

<style type="text/css">

.controls {
	width:720px;
	height:80px;
	padding-top:100px;
	background:url(images/big.jpg) top left no-repeat;
	text-align:center;
}

.controls img {
	border:none;
}

</style>
  
</head><body>

<div class="controls">
	<img src="login.gif" width="144" height="72" alt="Log In">
	<img src="logout.gif" width="144" height="72" alt="Log Out">
	<img src="add.gif" width="144" height="72" alt="Add">
	<img src="pass.gif" width="144" height="72" alt="Pass">
</div>

</body></html>
    Code (markup):
     
    deathshadow, Jul 28, 2007 IP