7 replies [Last post]
Arkymedes
Arkymedes's picture
Offline
newbie
Tallinn/Estonia
Last seen: 13 years 25 weeks ago
Tallinn/Estonia
Timezone: GMT+2
Joined: 2008-12-11
Posts: 4
Points: 0

Hi guys, I got this job interview, and as a "task" they gave me an screenshot of some website and told me to recreate it using XHTML/CSS. Needless to say that my code "didn't satisfied the designers expectations" without any remarks of how to improve it.

I need some guidance on how to improve the attached code. I was wandering about my mistakes or maybe some old habits, but I just can't see anything so out of context.

The code (both CSS and the HTML) are valid.

If anyone can help me with that, I appreciate it. It will have an unmeasurable value for me. Thanks in advance.

HTML

<!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 name="generator" content="WIKA" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wika</title>
<link href="css/wika.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteiner">
	<div id="header">
		<div class="header_left header_outter"><span class="title_1">WIKA</span><span class="title_2">Deutschland</span></div>
		<div class="header_right header_outter"><img src="images/wika_logo.jpg" alt="wika" /></div>
		<div class="header_right header_outter">
			<form id="searchbox" method="post" action="/" name="searchbox">
				<input type="text" id="s" value="suche..." class="search" />
				<input type="image" src="images/go.jpg" id="go" alt="Search" title="Search" />
			</form>
		</div>
		<div class="header_right header_outter">
			<form id="jumpmenu" name="jumpmenu" action="/" >
				<select name="jump_menu" id="j" class="jump_menu">
					<option>WIKA Worldwide...</option>
				</select>
				<input type="image" src="images/go.jpg" id="go2" alt="Go" title="Go" class="form_button" />
			</form>
		</div>
	</div>
	<div id="topmenu">
		<ul>
			<li><a href="#">AKTUELLES</a></li>
			<li><a href="#">PRODUKTE</a></li>
			<li><a href="#">BRANCHEN</a></li>
			<li><a href="#">INTELLICHOICE</a></li>
			<li><a href="#">SERVICE</a></li>
			<li><a href="#">DOWNLOAD</a></li>
			<li><a href="#">KARRIERE</a></li>
			<li><a href="#">EINKAUF</a></li>
			<li><a href="#">WIKA</a></li>
			<li><a href="#">WEBSHOP</a></li>
		</ul>
	</div>
	<div id="leftmenu">
		<div id="login" class="bold">LOGIN</div>
		<div class="menu_login">
			<form id="formlogin" method="post" action="/" name="formlogin">
				<input type="text" id="u" value="Username" class="search" />
				<input type="password" id="p" value="Password" class="search" />
				<input type="image" src="images/go.jpg" id="go3" alt="Search" title="Search" />
			</form>
		</div>
		<div id="pressespiegel" class="bold">PRESSESPIEGEL</div>
		<div class="menu_block">
			<p class="bold">19.05.2007</p>
			<p class="bold">SA Instrumentation &amp; Control</p>
			<p>WIKA launches new compact pressure transmitter. With the new Model A-10. WIKA launches a new generation of pressure transmitters for general industrial applications...</p>
			<p align="right"><img src="images/arrow.jpg" alt="arrow" /></p>
		</div>
		<div id="produkte" class="bold">PRODUKTE</div>
		<div class="menu_block"> <a href="#">Druck elektronisch</a><br />
			<a href="#">Druck mechanisch</a><br />
			<a href="#">Druckmittler</a><br />
			<a href="#">Temperatur elektrisch</a><br />
			<a href="#">Temperatur mechanisch</a><br />
			<a href="#">Schutzrohre</a><br />
			<a href="#">Kalibriertechnik Druck</a><br />
			<a href="#">Kalibriertechnik Temp</a> </div>
		<div id="anwendungen" class="bold">ANWENDUNGEN</div>
		<div class="menu_block"> <a href="#">Ultra High Purity</a><br />
			<a href="#">Mobilhydraulik</a><br />
			<a href="#">Sterile Prozesstechnik</a> </div>
		<div id="bestellung" class="bold">BESTELLUNG</div>
		<div class="menu_block"> <a href="#">CD-ROM Product Catalog</a><br />
			<a href="#">Newsletter</a> </div>
		<div class="menu_block">
			<p class="bold">B-Typ</p>
			<form id="formbtyp" method="post" action="/" name="formbtyp">
				<input type="text" id="b" value="S-10" class="btyp" />
				<input type="image" src="images/go.jpg" id="go4" alt="go" title="go" />
			</form>
		</div>
	</div>
	<div id="main">
		<div id="main_image"><img src="images/ice_ship.jpg" alt="wika" /></div>
		<div class="info"> <img name="placeholder" src="images/placeholder.jpg" width="70" height="77" alt="placeholder" />
			<h3>CD-ROM PRODUKTKATALOG</h3>
			<p>Massgeschneiderte Losungen - WIKA CD-ROM Produktkatalog 2007</p>
		</div>
		<div class="arrow2"><img src="images/arrow.jpg" alt="arrow" /></div>
		<div class="info"> <img name="placeholder" src="images/placeholder.jpg" width="70" height="77" alt="placeholder" />
			<h3>INFORMATION</h3>
			<p>Am 14. Juli startete der 2. WIKA Staffel-Marathon in Klingenberg</p>
		</div>
		<div class="arrow2"><img src="images/arrow.jpg" alt="arrow" /></div>
		<div class="info"> <img name="placeholder" src="images/placeholder.jpg" width="70" height="77" alt="placeholder" />
			<h3>INTERNET SHOP</h3>
			<p>Besuchen Sie unseren WIKA eShop.</p>
		</div>
		<div class="arrow2"><img src="images/arrow.jpg" alt="arrow" /></div>
		<div id="products">
			<h1>PRODUKTINFORMATIONEN</h1>
			<div class="picture_conteiner">
				<div class="product_pics">&nbsp;<img src="images/fig01.jpg" alt="wika" /></div>
				<p>Product description goes here.</p>
				<div class="arrow"><img src="images/arrow.jpg" alt="arrow" /></div>
			</div>
			<div class="picture_conteiner">
				<div class="product_pics">&nbsp;<img src="images/fig02.jpg" alt="wika" /></div>
				<p>Product description goes here.</p>
				<div class="arrow"><img src="images/arrow.jpg" alt="arrow" /></div>
			</div>
			<div class="picture_conteiner">
				<div class="product_pics">&nbsp;<img src="images/fig03.jpg" alt="wika" /></div>
				<p>Product description goes here.</p>
				<div class="arrow"><img src="images/arrow.jpg" alt="arrow" /></div>
			</div>
			<div class="picture_conteiner">
				<div class="product_pics">&nbsp;<img src="images/fig04.jpg" alt="wika" /></div>
				<p>Product description goes here.</p>
				<div class="arrow"><img src="images/arrow.jpg" alt="arrow" /></div>
			</div>
			<div class="picture_conteiner">
				<div class="product_pics">&nbsp;<img src="images/fig05.jpg" alt="wika" /></div>
				<p>Product description goes here.</p>
				<div class="arrow"><img src="images/arrow.jpg" alt="arrow" /></div>
			</div>
		</div>
		<div id="druckmesstechnik">
			<h1>DRUCKMESSTECHNIK</h1>
			<h3>Elektronische Druckmesstechnik</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget velit et metus congue sodales. Quisque lacinia commodo nibh. Cras vitae nulla. Sed bibendum molestie urna. Mauris interdum dui ut mauris. <a href="#">mehr</a></p>
			<h3>Mechanische Druckmesstechnik</h3>
			<p>Mauris fringilla quam vel nulla. Aenean convallis ipsum et massa. In leo odio, lobortis at, tincidunt ut, imperdiet eu, eros. In hac habitasse dictumst. <a href="#">mehr</a></p>
			<h3>Druckmittler</h3>
			<p>Nunc libero. Aliquam erat nibh, cursus sed, dictum vitae, suscipit eget, felis. Cras facilisis fringilla tellus. Quisque sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">mehr</a></p>
		</div>
		<div id="news">
			<h1>WIKA NEWS</h1>
			<h3>10.10.2008</h3>
			<p>Quisque lacinia commodo nibh. Cras vitae nulla. Sed bibendum molestie urna. Mauris interdum dui ut mauris.<br />
				<a href="#">mehr</a></p>
			<h3>07.10.2008</h3>
			<p>In hac habitasse dictumst.<br />
				<a href="#">mehr</a></p>
			<h3>06.10.2008</h3>
			<p>Quisque sit amet enim. Lorem ipsum dolor sit amet elit.<br />
				<a href="#">mehr</a></p>
		</div>
	</div>
	<div class="clear"></div>
	<div id="footer">
		<p>&copy;2007 WIKA Alexander Wiegand GmbH &amp; Co. KG | <a href="mailto:[email protected]">info@wika.de</a> | <a href="www.wika.de">www.wika.de</a></p>
	</div>
</div>
</body>
</html>

CSS
body {
	background : transparent url(../images/bg.jpg) no-repeat scroll 0 0;
	color : #000000;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 1em;
	margin : 0;
	padding : 0;
	text-align : center;
}
 
/* Main structure */
 
#conteiner {
	background : #ffffff none repeat scroll 0 0;
	border-style : none solid solid;
	border-width : medium 2px 2px;
	border-color: #CCCCCC;
	margin : 0 auto;
	padding : 10px;
	width : 950px;
}
#header {
	background : transparent url(../images/header_bg.jpg) repeat-x scroll 0 0;
	height : 40px;
	width : 950px;
}
#leftmenu {
	float : left;
	margin-top : 10px;
	width : 200px;
}
#main {
	float : left;
	left : 15px;
	position : relative;
	top : 10px;
	width : 735px;
}
#main_image {
	float : left;
}
#druckmesstechnik {
	float : left;
	position : relative;
	top : 5px;
	width : 458px;
}
#news {
	float : left;
	left : 15px;
	position : relative;
	top : 5px;
	width : 257px;
}
#footer {
	border-top : 1px solid #cccccc;
	font-size : 0.6em;
	height : 40px;
	margin-bottom : -20px;
	margin-top : 10px;
	padding-left : 10px;
	text-align : left;
	color : #666;
}
 
/* Header elements */
 
.header_outter {
	line-height : 40px;
	vertical-align : middle;
}
.title_1 {
	color : #ffffff;
	font-family : Arial;
	font-size : 1.5em;
	font-weight : bold;
	margin-left : 10px;
}
.title_2 {
	color : #ffffff;
	font-size : 1em;
	margin-left : 10px;
}
.header_left {
	float : left;
	height : 40px;
}
.header_right {
	float : right;
	height : 40px;
}
#searchbox, #jumpmenu {
	font-size : 0.7em;
	margin-right : 15px;
	margin-top : 12px;
	width : 174px;
}
#searchbox #s, #jumpmenu #j {
	border : 0 none;
	float : left;
	height : 19px;
	margin : 0;
	padding : 0;
	width : 150px;
}
#searchbox #go, #jumpmenu #go2 {
	float : right;
	margin : 0;
}
 
/* Top Menu */
 
#topmenu {
	background : transparent url(../images/tabs_bg.jpg) repeat-x scroll 0 0;
	font-size : 0.75em;
	height : 22px;
	position : relative;
	top : 2px;
	width : 950px;
}
#topmenu ul {
	margin : 0;
	padding : 0;
}
#topmenu li {
	float : left;
	font-weight : bold;
	list-style-image : none;
	list-style-position : outside;
	list-style-type : none;
	margin-top : 2px;
}
#topmenu li a {
	color : #2e4197;
	margin-right : 10px;
	padding : 2px 5px 6px;
	text-decoration : none;
}
#topmenu li a:hover {
	background : transparent url(../images/tabs_bg_selected.jpg) repeat-x scroll 0 0;
	color : #D8A639;
}
 
/* Left Menu */
 
#formlogin #p {
	border : 1px solid #cccccc;
	height : 19px;
	width : 160px;
}
#formlogin #u {
	border : 1px solid #cccccc;
	height : 19px;
	width : 184px;
}
#formbtyp #b {
	border : 1px solid #cccccc;
	height : 19px;
	width : 160px;
}
#formlogin #go3, #formbtyp #go4 {
	position : relative;
	top : 6px;
}
#login {
	background : transparent url(../images/bg_gray.jpg) repeat-x scroll center top;
	color : #ffffff;
	font-size : 0.7em;
	line-height : 20px;
	padding-top : 0;
	text-align : left;
	text-indent : 5px;
}
#pressespiegel, #produkte, #anwendungen, #bestellung {
	background : transparent url(../images/bg_orange.jpg) repeat-x scroll center top;
	color : #ffffff;
	font-size : 0.7em;
	line-height : 20px;
	margin-top : 4px;
	padding-left : 3px;
	text-align : left;
}
.menu_login {
	background : transparent url(../images/fade_gray_bg.jpg) no-repeat scroll center top;
	border-bottom : 1px solid #cccccc;
	color : #666666;
	font-size : 0.7em;
	padding-bottom : 5px;
	padding-left : 5px;
	padding-top : 20px;
	text-align : left;
}
.menu_block {
	background : transparent url(../images/fade_orange_bg.jpg) no-repeat scroll center top;
	border-bottom : 1px solid #cccccc;
	color : #666666;
	font-size : 0.7em;
	padding : 5px;
	text-align : left;
}
.menu_block a {
	color : #666666;
	text-decoration : underline;
}
.menu_block a:visited {
	color : #666666;
}
 
/* Main Content */
 
.info {
	border-bottom : 1px solid #cccccc;
	float : left;
	height : 82px;
	margin-bottom : 5px;
	margin-left : 10px;
	width : 260px;
}
div.info img {
	float : left;
	text-align : left;
}
div.info h3 {
	color : #2e4197;
	float : left;
	font-size : 0.7em;
	font-weight : bold;
	margin-left : 5px;
	margin-top : 0;
	text-align : left;
	width : 185px;
}
div.info p {
	color : #666;
	font-size : 0.7em;
	font-weight : bold;
	left : 5px;
	position : relative;
	text-align : left;
	top : -10px;
}
#products {
	clear : both;
	margin-bottom : 10px;
	position : relative;
	width : 735px;
}
.picture_conteiner {
	border : 1px solid #ebebeb;
	float : left;
	height : 150px;
	position : relative;
	top : -5px;
	width : 145px;
}
.product_pics {
	line-height : 100px;
}
.product_pics img {
	vertical-align : middle;
}
div#products p {
	background : #e1e1e1 none repeat scroll 0 0;
	color : #666;
	font-size : 0.7em;
	font-weight : bold;
	height : 50px;
	margin-top : 2px;
	padding : 1px;
	text-align : left;
}
div#products h1, div#druckmesstechnik h1, div#news h1 {
	background : transparent url(../images/titles_bg.jpg) repeat-x scroll 0 0;
	color : #ffffff;
	font-size : 0.7em;
	font-weight : bold;
	height : 20px;
	padding-left : 5px;
	padding-top : 3px;
	text-align : left;
}
div#products h1 {
	width : 730px;
}
div#druckmesstechnik h1 {
	width : 458px;
}
div#news h1 {
	width : 257px;
}
div#druckmesstechnik h3, div#news h3 {
	color : #2e4197;
	font-size : 0.7em;
	font-weight : bold;
	text-align : left;
}
div#druckmesstechnik p, div#news p {
	color : #666666;
	font-size : 0.7em;
	text-align : left;
}
div#druckmesstechnik a, div#news a {
	color : #ff9900;
	text-decoration : none;
}
 
/* Footer */
 
#footer a, #footer a:visited {
	color : #666;
}
 
/* General Classes */
 
.bold {
	font-weight : bold;
}
.clear {
	clear : both;
}
.arrow {
	position : relative;
	text-align : right;
	top : -10px;
}
.arrow2 {
	position : relative;
	text-align : right;
	top : -20px;
	height : 10px;
}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

ok

It's hard to give good feedback without knowing what the end result looks like. Juts looking at the code, you suffer from a disease called Divitis. You can be cured of this fatal illness from hopefull thinking, and following this URL
http://csscreator.com/?q=divitis

This should be a

     <div class="menu_block"> <a href="#">Druck elektronisch</a><br />
          <a href="#">Druck mechanisch</a><br />
          <a href="#">Druckmittler</a><br />
          <a href="#">Temperatur elektrisch</a><br />
          <a href="#">Temperatur mechanisch</a><br />
          <a href="#">Schutzrohre</a><br />
          <a href="#">Kalibriertechnik Druck</a><br />
          <a href="#">Kalibriertechnik Temp</a> </div>

    You have alot of images placed in your XHTML. The better way to do this is to make them background images through CSS. You want the XHTML to look as clean as possible. Instead of doing this..
    PRODUKTINFORMATIONEN, make them caps through CSS, not XHTML. remember to keep all style out of the XHTML. Try something like this
    h1, h2, h3, h4 {text-transform: uppercase;}
     
    <h1>wiki news</h1>

    Triumph (not verified)
    Anonymous's picture
    Guru

    Wow, I wish more firms gave

    Wow, I wish more firms gave such a test.

    Arkymedes
    Arkymedes's picture
    Offline
    newbie
    Tallinn/Estonia
    Last seen: 13 years 25 weeks ago
    Tallinn/Estonia
    Timezone: GMT+2
    Joined: 2008-12-11
    Posts: 4
    Points: 0

    Thanks very much, I

    To make it easier, I uploaded here:

    http://www.agnesojala.com/wika/

    Thanks very much for your insights, I didn't have idea about the "disease" :blushing: I appreciate it.

    Triumph (not verified)
    Anonymous's picture
    Guru

    The layout fails with one

    The layout fails with one text size increase. Perhaps the menu shouldn't be a fixed height and you should contain it's floated list items.

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 32 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    But would we not agree that

    But would we not agree that it wasn't riddled with errors, wasn't failing on any major grounds? If I was interviewing someone I wouldn't dismiss them out of hand based on that example (but I haven't looked at the code in huge detail)

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Triumph (not verified)
    Anonymous's picture
    Guru

    Hugo wrote:But would we not

    Hugo wrote:

    But would we not agree that it wasn't riddled with errors, wasn't failing on any major grounds? If I was interviewing someone I wouldn't dismiss them out of hand based on that example (but I haven't looked at the code in huge detail)

    Agreed. It's better than most of the dross that's pumped out of the corporate web machine. The single failure of the menu and floated columns at one text size increase may have been the deciding factor.

    Arkymedes
    Arkymedes's picture
    Offline
    newbie
    Tallinn/Estonia
    Last seen: 13 years 25 weeks ago
    Tallinn/Estonia
    Timezone: GMT+2
    Joined: 2008-12-11
    Posts: 4
    Points: 0

    Hey guys, thanks very very

    Hey guys, thanks very very much for all the comments. That will definitely improve my work in future jobs. I will try to correct my mistakes and squeeze the code more. I'm already reading about my "divitis" Sad

    Again, thanks very much Smile