Har nu gett mig på att göra om tidigare tabeller (använts för att disponera text) till CSS, och det fungerar inte bra *ler*. Känns enkelt i HTML, men hittar inte tråden/helheten i CSS trots alla goda tips under sök. Hur skulle t ex följande se ut?
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
\<title\>Hur blir detta i CSS?\</title\>
</head>
<body>
<table width="650"
height="150"
border="1"
align="center"
cellpadding="5"
summary="">
<tr>
<td width="300"
height="150"
align="justify"
valign="top"
rowspan="2">Lorem ipsum dolor sit amet, ipsum dol
orconsectetuer adipiscing elit. Lorem ipsum dolor
sit amet, onsec tetuer adipiscing elit.</td>
\<td width="150"
height="20"
align="center"
valign="top"\>Lorem\</td\>
\<td width="200"
height="150"
align="left"
valign="top"
rowspan="2"\>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.\</td\>
\</tr\>
\<tr\>
\<td width="150"
height="130"
align="center"
valign="top"\>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.\</td\>
\</tr\>
\</table\>
</body>
</html>
Skall jag se det som 4 separata boxar, som formerar helheten/tabellen? Några begränsningar om vad jag kan stoppa i boxarna?
Någon som känner sig manad? Tackar på förhand! biggles-1
Rackarns ingen som kände sig manad, ännu hm .... *ler*!
Har själv sökt vidare och hittar fortfarande inte det jag vill och kan få ihop, p g a mängden information. Många skriver om att de inte kan tänka sig tabell för layout, vilket jag nu försöker följa. Går inte detta, är jag ju tillbaka till tabeller igen.
Jag har text i den vänstra, rubrik i den övre mittersta, lista i den undre mittersta och bild i den högra cellen. Går detta att göra smidigt i CSS, och isåfall hur? Snälla!
mvh biggles-1
zcorpanMedlem sedan dec. 20042 245 inlägg Så här enkelt borde det vara:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="sv">
<head>
<title>Så här blir det med CSS!</title>
<style type="text/css">
body {
display:table;
border:1px outset;
border-spacing:2px;
padding:0;
width:650px;
height:150px;
max-width:99%;
margin:.5em auto;
}
body > * {
display:table-cell;
border:1px inset;
padding:3px;
}
</style>
</head>
<body lang="la">
<p>Lorem ipsum dolor sit amet, ipsum dol orconsectetuer adipiscing
elit. Lorem ipsum dolor sit amet, onsec tetuer adipiscing elit.</p>
<div>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
Dock kan man inte simulera colspan eller rowspan med CSS 2.1.
Hur som helst, om du vill ha en exakt ekvivalent i CSS så blir det svårt, speciellt om det ska fungera med IE. Om vi inte behöver ha borders eller bakgrundsfärger som sträcker sig ner hela vägen, kan vi göra såhär:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="sv">
<head>
<title>CSS med IE i åtanke</title>
<style type="text/css">
body {
width:650px;
max-width:99%;
min-width:30em;
margin:.5em auto;
}
#left {
float:left;
width:45%;
}
#right {
float:right;
width:23%;
}
#middle {
margin:0 23% 0 45%;
}
</style>
</head>
<body lang="la">
<p id="left">Lorem ipsum dolor sit amet, ipsum dol orconsectetuer adipiscing
elit. Lorem ipsum dolor sit amet, onsec tetuer adipiscing elit.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div id="middle">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>
</html>
:)
Tack Zcorpan för förslaget, uppskattat och gav nya tankar *ler*!
-
OK, att det inte går att ”simulera” colspan och rowspan. Innebär det automatiskt att det inte går att göra en ”tvåradig cell alt två separata celler”, motsvarande det som tidigare var en mittersta cell/kolumn i en traditionell tabell, med hjälp av CSS?
-
Om jag släpper ”tabell”-tanken, hur positionerar man i CSS då två separata småblock som ligger mellan två större block? Går det överhuvudtaget?
Jag är kanske ute och cyklar *ler*, men är fortfarande ute efter att kunna formattera/positionera den övre cellen/boxen om det går, på något sätt!
zcorpanMedlem sedan dec. 20042 245 inlägg Du har redan två block i den mittersta kolumnen - H1 och P. :)
Hm .... jo så kan man ju också se det *ler*.
Hur som helst så löser det du gett mig det jag hade för händerna just nu, så jag tackar och bugar.
Vad gäller # 1) så släpper jag det och njuter av helgen istället.
Trevlig helg! biggles-1
