Visa ett inlägg
Oläst 2009-04-27, 16:20 #1
naME naME är inte uppkopplad
Nykomling
 
Reg.datum: Feb 2007
Inlägg: 5
naME naME är inte uppkopplad
Nykomling
 
Reg.datum: Feb 2007
Inlägg: 5
Hej, jag håller på med en layout där man skall kunna bläddra mellan kategorier på startsidan typ som på www.prisjakt.nu men jag lyckas inte få det som jag vill. Jag skulle vilja slippa dela upp det i två kolumner men när jag bara använder float left så blir det mellanrum när höjden varrierar (se bild). Går detta att lösa eller alternativt hur löser man det snyggast?

se:
http://bayimg.com/IAPPKAaBE

index.html
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
 * <head>
 * * *<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 * * *<title>untitled</title>
 * * *<link href="css/standard.css" rel="stylesheet" type="text/css" />
 * </head>
 
 * <body>
 * * *<div id="layout">
 * * * * <dl id="content">
 * * * * * *<dd>
 * * * * * * * <div class="category">2D-grafik</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">Fireworks</a></li>
 * * * * * * * * *<li><a href="#">Flash</a></li>
 * * * * * * * * *<li><a href="#">Gimp</a></li>
 * * * * * * * * *<li><a href="#">Illustrator</a></li>
 * * * * * * * * *<li><a href="#">Incscape</a></li>
 * * * * * * * * *<li><a href="#">Paint Shop Pro</a></li>
 * * * * * * * * *<li><a href="#">Photoshop</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">3D-grafik</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">3DS MAX</a></li>
 * * * * * * * * *<li><a href="#">AutoCAD</a></li>
 * * * * * * * * *<li><a href="#">Blender 3d</a></li>
 * * * * * * * * *<li><a href="#">Bryce 3d</a></li>
 * * * * * * * * *<li><a href="#">Cinema 4D</a></li>
 * * * * * * * * *<li><a href="#">Lightwave 3D</a></li>
 * * * * * * * * *<li><a href="#">Maya</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Ljudredigering</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">Assembler</a></li>
 * * * * * * * * *<li><a href="#">C#</a></li>
 * * * * * * * * *<li><a href="#">C++</a></li>
 * * * * * * * * *<li><a href="#">Java</a></li>
 * * * * * * * * *<li><a href="#">Perl</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Kontorsprogram</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">MS Excel</a></li>
 * * * * * * * * *<li><a href="#">MS PowerPoint</a></li>
 * * * * * * * * *<li><a href="#">MS Word</a></li>
 * * * * * * * * *<li><a href="#">QuarkXPress</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Databaser</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">DB Design</a></li>
 * * * * * * * * *<li><a href="#">DB2</a></li>
 * * * * * * * * *<li><a href="#">MS Access</a></li>
 * * * * * * * * *<li><a href="#">MsSQL</a></li>
 * * * * * * * * *<li><a href="#">MySQL</a></li>
 * * * * * * * * *<li><a href="#">Oracle</a></li>
 * * * * * * * * *<li><a href="#">SQL Basics</a></li>
 * * * * * * * * *<li><a href="#">Sybase</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Programmering</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">Assembler</a></li>
 * * * * * * * * *<li><a href="#">C#</a></li>
 * * * * * * * * *<li><a href="#">C++</a></li>
 * * * * * * * * *<li><a href="#">Java</a></li>
 * * * * * * * * *<li><a href="#">Perl</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Operativsystem</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">GNU/Linux</a></li>
 * * * * * * * * *<li><a href="#">Ubuntu</a></li>
 * * * * * * * * *<li><a href="#">BSD</a></li>
 * * * * * * * * *<li><a href="#">MAC OSX</a></li>
 * * * * * * * * *<li><a href="#">Windows 7</a></li>
 * * * * * * * * *<li><a href="#">Windows Vista</a></li>
 * * * * * * * * *<li><a href="#">Windows XP</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Webbutveckling</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">Adobe Flex</a></li>
 * * * * * * * * *<li><a href="#">ASP</a></li>
 * * * * * * * * *<li><a href="#">ASP.NET</a></li>
 * * * * * * * * *<li><a href="#">ColdFusion</a></li>
 * * * * * * * * *<li><a href="#">CSS</a></li>
 * * * * * * * * *<li><a href="#">Dreamweaver</a></li>
 * * * * * * * * *<li><a href="#">HTML</a></li>
 * * * * * * * * *<li><a href="#">Java</a></li>
 * * * * * * * * *<li><a href="#">Javascript</a></li>
 * * * * * * * * *<li><a href="#">MM Fusion</a></li>
 * * * * * * * * *<li><a href="#">MS FrontPage</a></li>
 * * * * * * * * *<li><a href="#">Perl and CGI</a></li>
 * * * * * * * * *<li><a href="#">PHP</a></li>
 * * * * * * * * *<li><a href="#">Python</a></li>
 * * * * * * * * *<li><a href="#">Ruby on Rails</a></li>
 * * * * * * * * *<li><a href="#">SEO</a></li>
 * * * * * * * * *<li><a href="#">Web Design</a></li>
 * * * * * * * * *<li><a href="#">XML</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * </dl>
 * * * * <div id="rightcol"></div>
 * * *</div>
 * </body>
</html>
standard.css
Kod:
body {
 * margin: 0;
 * background: #F2F2F2;
}
 
/* Layout "frame" */
#layout {
 * width: 940px;
 * height: auto;
 * margin: auto;
}
 
/* Page content */
#content {
 * width: 676px;
 * height: 400px;
 * margin: 0;
 * padding: 20px 0 0 0;
 * float: left;
}
 
/* Page content gridbox */
#content dd {
 * width: 316px;
 * height: auto;
 * margin: 0 20px 20px 0;
 * background: #FFF;
 * border: 1px solid #DFDFDF;
 * border-bottom: 0px;
 * float: left;
}
 
/* Page item-list (list) */
#contentList {
 * margin: 0;
 * padding: 0;
 * float: left;
}
 
/* Page item-list (listitem) */
#contentList li {
 * list-style-type: none;
 * float: left;
}
 
/* Page item-list (link) */
#contentList a {
 * width: 306px;
 * height: 22px;
 * padding: 8px 0 0 10px;
 * border-bottom: 1px solid #DFDFDF;
 * text-decoration: none;
 * float: left;
}
 
.category {
 * font-size: 16px;
 * font-weight: bold;
 * padding: 10px 0 7px 10px;
}
 
#rightcol {
 * width: 262px;
 * height: 400px;
 * margin: 20px 0 0 0;
 * background: #FFF;
 * border: 1px solid #DFDFDF;
 * float: left;
}
naME är inte uppkopplad   Svara med citatSvara med citat