Lista med float:left

naME · 2009-04-27, 16:20

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;
}

KarlRoos · 2009-04-27, 16:47

För det här så skulle jag rekommendera dig att ta en titt på något CSS ramverk.

Exempelvis 960.gs.

För 3 kolumner:

Kod:

<div class="container_12">
<div class="grid_4"><p>Första</p></div>
<div class="grid_4"><p>Andra</p></div>
<div class="grid_4"><p>Trejde</p></div>
</div>

Hoppas det kan vara till någon hjälp, annars kan jag ge dig mer kod. Men som sagt, 960.gs

naME · 2009-04-27, 18:31

Tack, det verkar intressant skall helt klart kika mer på det. Skulle dock gärna vilja veta hur man gör utan ett framework?

allstars · 2009-04-27, 19:14

Citat:

Originally posted by naME@Apr 27 2009, 17:31
Tack, det verkar intressant skall helt klart kika mer på det. Skulle dock gärna vilja veta hur man gör utan ett framework?

Du kan "inspireras" av det som rekommenderades

KarlRoos · 2009-04-27, 21:12

Problemet beror på hur float fungerar, den flyter mot den andra kanten. Som du ser så ligger den mot en kant alltså fastnar den där.

Jag tror det borde fungera om varannan lista flyter åt höger istället för vänster. Detta går att göra med hjälp av CSS selectorn :nth-child(odd).

Exempel: http://karlroos.se/blandat/list/
Har inte gjort allt för många tester med storlekar på listorna men det borde funka bättre i alla fall.

#list ul:nth-child(odd) har även fått en röd bakgrund för tydlighetens skull.

Hoppas det löser sig!

naME · 2009-04-27, 22:50

Det fungerade lite bättre men inte helt (http://getnet.se/lista/), var även ett varierat resultat i olika webbläsare men jag tror att jag gör det enkelt och ger upp nu.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Lista med float:left