Nu er jeg er ved at ændre et gammelt site med flere tusind
tables, der skal laves om til css.
Jeg har kigget masser af eksempler, - men det går ikke altid som
jeg kunne tænke mig.
Hvis du eksekverer nedenstående kode i din browser, så har jeg
følgende spørgsmål!
1. Jeg kunne tænke mig at Red og Blue box lines up under hhv.
Col1 og Col2. Hvordan styrer jeg flesibilitet som i en gammeldags
table. Tænker her på når browseren resizes eller når billedet
vises på skærme med forskellig størrelse!
2. Hvordan styres højden i div ccs'er som med align left/right i
tables? Altså at teksterne står i samme højde over for hinanden.
3. Hvordan lave konstanter i CSS. F.eks. en farve, som ændres et
sted og anvendes 20?
4. Hvordan styres minimums højden på en div "box"?
Det er vist det hele!!!
På forhånd tak!
Her kommer koden:
<html>
<head>
<title>Testing CSS</title>
<style type="text/css">
<!--
body {position: relative; background: #e6e8f6; margin: 0;
padding: 0;}
div#links {position: absolute; top: 50px; left: 0; width: 166px;
height: 700px; font: 13px Verdana, sans-serif; z-index: 100;}
div#content {position: absolute; top: 26px; left: 161px; right:
25px;
color: #283b99; background: #F1F2FC;
font: 13px Verdana, sans-serif; padding: 10px;
border: solid 5px #7989D4;}
div#content p {margin: 0 0,2em 1em;}
div#content h3 {margin-bottom: 0.25em;}
#con1
{
padding: 1px;
}
#box1 {
float: left;
margin-left: 10px;
padding: 10px;
border: 3px dashed red;
}
#box2 {
margin-left: 500px;
padding: 10px;
border: 3px dashed blue;
}
-->
</style>
</head>
<body>
<div id="content">
<h1>Test</h1>
<h3>What to Do?</h3>
<table border=2>
<tr>
<td width="59%" valign="top">Col1. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod.</td>
<td width="2%" valign="top"> </td>
<td width="39%" valign="top">Col2. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod.</td>
</tr>
<tr>
<td width="59%" valign="top" align="left">Align left.</td>
<td width="2%" valign="top"> </td>
<td width="39%" valign="top" align="right">Align right.</td>
</tr>
</table>
<br><br>
<div id="con1">
<div id="box1">
<p>Red box. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod.</p>
<p>Blue box. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
<div id="box2">
<p>Blue box. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
</div>
</body>
</html>
Tak igen!!!
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials