Omslutning?

5 svar · 401 visningar · startad av Okkido 19 jan. 2006

OkkidoMedlem sedan maj 20007 492 inlägg

Trådstart19 jan. 2006 06:23#1

Tja
Sitter och har en definitionslista med ett visst antal rader.
Jag vill att DD:en ska flyta upp till hoger om DT:en och anvander darfor float:left;.
Jag vill sen ha en border runt om det hela och det ar har jag far problem.

Hur ska jag gora (validerbar) for att fa denna ram runt om det hela?

Jag har nog testat det mesta utan nagot resultat.

<dl class="mc">
	<dt>Motor</dt>
	<dd>4-takt, luftkyld</dd>
	<dt>Cylinderarrangemang</dt>
	<dd>Rad 4</dd>
	<dt>Ventiler per cylinder</dt>
	<dd>4</dd>
</dl>

dl.mc{
	border: 1px;
	width: 500px;
}
.mc dt{
	width: 250px;
	float:left;
}
.mc dd{
	width: 250px;
	float:left;
}

For att vara lite hemlighetsfull sa for ni inte komma med forslag dar ni pillat nagot med dd:en eller dt:en.

Jag vill ha en losning som ger bordern antingen genom en border pa dl:en eller med en div runt om.

InsiderMedlem sedan jan. 2000978 inlägg

19 jan. 2006 10:29#2

Det här funkar hos mig. Du kan ju lägga den IE-specifika koden i en villkorlig kommentar istället.

* {margin:0;padding:0;}
dl.mc{
	border: 1px solid #000;
	width: 500px;
}
.mc dt{
	width: 250px;
	float:left;
}
.mc dd{
	width: 250px;
	float:left;
}

/*Easy clearing of floats [url]http://www.positioniseverything.net/easyclearing.html[/url]*/
dl.mc:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

dl.mc {display: inline-table;}

/* Hides from IE-mac \*/
* html dl.mc {height: 1%;}
dl.mc {display: block;}
/* End hide from IE-mac */
/*Easy clearing of floats End*/

GislavedMedlem sedan nov. 20041 740 inlägg

19 jan. 2006 10:48#3

	dl.mc{
		border: 1px #000 solid;
		width: 500px;
		overflow: auto;
	}

zcorpanMedlem sedan dec. 20042 245 inlägg

19 jan. 2006 10:55#4

dl.mc{
	border: 1px solid;
	width: 500px;
}
.mc dt{
	width: 250px;
	float:left;
}

OkkidoMedlem sedan maj 20007 492 inlägg

19 jan. 2006 19:04#5

Gislaved skrev:

	dl.mc{
		border: 1px #000 solid;
		width: 500px;
		overflow: auto;
	}

Tack, att det var sa fruktansvart enkelt. Har satt jag och testade alla olika losnignar jag kunde komma pa, clear:ade, clear:ade och clear:ade, lite white-space, display:inline osv osv. Bah, tack.

zcorpan skrev:

dl.mc{
	border: 1px solid;
	width: 500px;
}
.mc dt{
	width: 250px;
	float:left;
}

Va?Vad skulle det hjalpa?

zcorpanMedlem sedan dec. 20042 245 inlägg

19 jan. 2006 19:40#6

Om du låter bli att floata DD så kommer de dels att hamna på rätt plats, samt att DL kommer att sträcka sig ända ner utan att behöva cleara.

[ins]
Jag kanske borde skrivit såhär istället...

dl.mc{
	border: 1px solid;
	width: 500px;
}
.mc dt{
	width: 250px;
	float:left;
}
/* bort...
.mc dd{
	width: 250px;
	float:left;
}
*/

[/ins]