Hej
Jeg har de sidste par timer forsøgt mig med at slice et design for første gang. Designet fik jeg fra en tutorial som kan ses her:
http://www.tutzor.com/index.php/2008/05/tutzor-web-20-style-re-design/ .
Indtil videre har jeg fået sat hovedskabelonen op og det er ser fint ud. Det kan ses på
http://www.thewilson.dk/tutzor/ .
Men, da jeg skulle til at sætte newsboksene op inde i content området fik jeg et problem. Tror jeg har brugt 3 timer på at få bare en boks til at se næsten normal ud, og så dur det kun i alt andet end IE, selvfølgelig. Tænkte om der var en, der kunne komme med et forslag til kodningen? Det ville være en kæmpe hjælp.
Kodningen indtil videre:
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" xml:lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Tutzor design</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/style.css" />
<link rel="shortcut icon" href="images/favicon.jpg" />
</head>
<body>
<div id="outer_container">
<div id="header">
<div id="logo">
<a href="/"><img src="images/header_logo.jpg" alt="tutzor logo" /></a>
</div>
<div id="header_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Write a tutorial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="menu">
<ul>
<li><a href="#">All</a></li>
<li><a href="#">Designing</a></li>
<li><a href="#">Drawing</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Interface</a></li>
<li><a href="#">Photo effects</a></li>
<li><a href="#">Text effects</a></li>
<li><a href="#">Others</a></li>
</ul>
</div>
<div id="content_container">
<div id="news">
<!-- NEWS GOES HERE -->
</div>
<div id="right_menu">
<!-- RIGHT MENU GOES HERE -->
</div>
<div id="next_buttons">
<!-- NEXT BUTTONS GOES HERE -->
</div>
</div>
<div id="footer">
Copyright © 2008 Tutzor - Best Photoshop Tutorials
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</div>
</div>
</body>
</html>
CSS
/**** RESETS ****/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ol, ul, li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body
{
background: #BFBFBF;
}
#outer_container
{
width: 1024px;
margin: 0 auto;
border-left: 1px solid #aaaaaa;
border-right: 1px solid #848484;
}
/**** HEADER & MENU ****/
#header
{
background: #333225;
height: 135px;
position: relative;
border-bottom: 1px solid #bfd066;
}
#logo img
{
border: 0px;
float: left;
}
#header li
{
display: inline;
padding: 10px;
}
#header ul
{
padding: 105px 0 0 0;
float: right;
}
#menu
{
height: 90px;
background: #89a500 url(../images/menu_slice.gif) repeat-y;
padding: 0;
margin: 0;
border-bottom: 1px solid #faf8f4;
}
#menu ul
{
list-style-type: none;
padding: 60px 0 0 0;
margin: 0;
}
#menu li
{
display: inline;
padding: 10px;
}
#header, #menu
{
font-size: 13px;
font-family: arial, sans-serif;
}
#header a:link, #header a:visited, #header a:active, #menu a:link, #menu a:visited, #menu a:active
{
color: #FFFFFF;
text-decoration: none;
}
#header a:hover, #menu a:hover
{
text-decoration: underline;
}
/**** CONTENT CONTAINER ****/
#content_container
{
background: #eee9d9 url(../images/footer_shadow.gif) 0 100% no-repeat;
min-height: 500px;
height: 500px; /* FOR IE6 */
margin: 0;
padding: 0;
}
/**** FOOTER ****/
#footer
{
height: 70px;
background: #333225;
text-align: center;
color: #eee9d9;
font-family: arial, sans-serif;
font-size: 12px;
padding-top: 5px;
}
#footer img
{
border: none;
padding: 10px;
}