Optimising some HTML/CSS

Discussion in 'HTML & Website Design' started by asgsoft, Dec 5, 2012.

0
  1. #1
    Hey guys

    I am working on a landing page which I want to have an image with mapped areas on top with also a form overlayed.

    The coding doesn't feel right so I was wondering if somebody can have a look at it and see if there is anyway it could be optimised etc...


    <style type="text/css">
#emailbox{
        background: transparent;
        width: 810px;
        height: 611px;
		/* background-image: url(bg.png);*/
        overflow: hidden; /* Clear floats */
		position:relative;
		background-repeat:no-repeat;
}

#email-sub, #submit-sub{
        float: left;
}


#email-sub{
	position:absolute;
	padding: 0px 0px;
	height: 41px;
	width: 304px;
	border: 0px solid #cbc5c5;
	font: bold 24px arial, helvetica;
	color: #000;
	background: transparent;
	top: 475px;
	left: 475px;
}

/* ----------------------- */

#submit-sub
{
	position:absolute;
	background: transparent;
	top: 542px;
	left: 658px;
	border-width: 0px;
	height: 54px;
	padding: 0;
	width: 135px;
	cursor: pointer;
	font: bold 28px Arial, Helvetica;
	color: #23441e;
}

#submit-sub:hover
{
		position:absolute;
        background: transparent;
		top: 107px;
		left: 207px;
        height: 23px;
        padding: 0;
        width: 83px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;
}
</style>
<div id="emailbox">
<img src="bg.png" width="810" height="611" border="0" usemap="#Map"> 

  <map name="Map"><area shape="rect" coords="39,540,93,595" href="link.php">
    <area shape="rect" coords="95,540,148,595" href="link.php">
    <area shape="rect" coords="147,541,200,594" href="link.php">
    <area shape="rect" coords="2,346,114,387" href="link.php">
    <area shape="rect" coords="144,349,226,384" href="link.php">
    <area shape="rect" coords="256,349,314,385" href="link.php">
    <area shape="rect" coords="343,351,500,384" href="link.php">
    <area shape="rect" coords="528,347,685,387" href="link.php">
    <area shape="rect" coords="717,349,808,388" href="link.php">
    <area shape="rect" coords="48,8,272,45" href="link.php">
  </map>
  <form action="post.php" method="post" target="_blank">
    <input type="hidden" name="u" value="">
	<input type="hidden" name="id" value="">
	<input type="email" value="" name="EMAIL" class="email" id="email-sub" required>
    <input id="submit-sub" type="submit" value=""></form>
</div>
    HTML:





    Thanks for looking :)
     
    asgsoft, Dec 5, 2012 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2
    For one thing, you're duplicating things. If the positioning in submit-sub is absolute, it's absolute in its hover elements (and all other elements) too. By default.

    If you're not using u or id, you don't need them there.
     
    Rukbat, Dec 5, 2012 IP
  3. Zora2012

    Zora2012 Greenhorn

    Messages:
    82
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #3
    <html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />

    <head>
    <title>thomasteilmann.dk</title>
    </head>
    <body>

    <div class="header">
    <h1><img src="images/thomas_logo_Web.png" alt="Sick Logo" /></a></h1>
    </div>

    <div id="content">

    <div class="view-first">
    <img src="images/cosmic_art_icon.jpg"/>
    <div class="mask">
    <h2>Cosmic Art</h2>
    <p>A galleri of cosmic art made in Photoshop</p>
    <a href="#" class="info">View</a>
    </div>
    </div>

    <div class="view-second">
    <img src="images/thomas_web.jpg"/>
    <div class="mask">
    <h2>About myself</h2>
    <p>Information about my skills and my personality in general</p>
    <a href="#" class="info">View</a>
    </div>
    </div>

    <div class="view-third">
    <img src="images/web_web.jpg"/>
    <div class="mask">
    <h2>Websites</h2>
    <p>A list of websites i've made/worked on.</p>
    <a href="#" class="info">View</a>
    </div>
    </div>

    <div class="view-fourth">
    <img src="images/ice_age_web.jpg"/>
    <div class="mask">
    <h2>Cartoon Art</h2>
    <p>A galleri of Cartoon art made in Photoshop</p>
    <a href="#" class="info">View</a>
    </div>
    </div>
    </div>

    </body>
    </html>
     
    Zora2012, Dec 6, 2012 IP