Just nu i M3-nätverket
Jump to content

DIVar ställs horisontella


Admini

Recommended Posts

Hej

Jag försöker forma lite DIV-boxar för att se på lite olika sätt.

 

Men nu har jag upptäckt att dem ställs ALLTID horisontella på varandra.

Jag skulle vilja ställa dem bredvidd varandra.

 

Vad är det som styr hur de ska staplas på?

 

Här är min kod:

<style type="text/css">
.r1{margin: 0 0 50 0px; width: 10px; background: #000000; }
.r2{margin: 0 0 30 0px; width: 10px; background: #99cc33; }
</style>
<div class="roundtop" dir="rtl">
<div class="r1"></div>
<div class="r2"></div>
</div>

 

Tack på förhand

 

Link to comment
Share on other sites

Jag skulle vilja ställa dem bredvidd varandra.

 

<div style="float: left">vänster</div><div style="float: left">Höger</div>

 

Undrar om det är något sånt här du vill ha :)

 

 

.dune.

----------------------------------------------

- "I find this a nice feature but it is not according to the documentation.

Or is it a BUG?"

- "Let´s call it an accidental feature. :-)"

 

Link to comment
Share on other sites

Nja, de ställs bredvidd nu, MEN grejen är att längden måste anges och jag vill att längden är fritt varierande beroende på innehållet.

 

Det uppnås lätt när man har dem horisontellt, de tar alltid HELA bredden av sidan. Men inte när man vill ha dem vertikalt!

 

 

Link to comment
Share on other sites

Jag bifogar en bild.

Den översta delen klarar jag fint, men den nedersta följer inte innehållet utan WIDTH måste anges för varje "rad".

 

[bild bifogad 2006-11-08 13:42:32 av Admini]

[bild bifogad 2006-11-08 13:43:52 av Admini]

883456_thumb.jpg

Link to comment
Share on other sites

Då behöver du iaf 4 divvar.

TOP, content, LEFT och RIGHT

<style type="text/css">
#header {margin: 0 0 50 0px; width: 600px; background: #000000; }
#container {margin: 0 0 50 0px; width: 600px; background: #000000; float:left; }
#content-left {margin: 0 0 30 0px; width: 400px; background: #99cc33; float:left; }
#content-right {margin: 0 0 30 0px; width: 150px; background: #99cc33; float:right; }
div.spacer {  
 clear: both;
 margin: 0 ;
 padding: 0 ;
 }
</style>

<DIV Id="header"> </div>
<DIV Id="container">
<DIV class="spacer"></div>
<DIV Id="content-left"></div>
<DIV Id="content-right"></div>
</div>

Så kanske?!

 

[inlägget ändrat 2006-11-08 13:51:28 av Jonas_Bo]

Link to comment
Share on other sites

Har provat din, men det ger inte det jag vill ha.

 

Vad jag behöver är att de här boxarna sträcker sig vertikalt neråt till slutet av sidan.

Jag kan inte använda height: 100% för då övertar den även margin: 5px

 

Finns float:down eller nåt?

 

Link to comment
Share on other sites

Men hur ska webläsaren veta hur bred den ska vara om du inte vill tala om det? Löpande text har ju ingen bredd i sig, till skillnad från t ex en bild.

 

Link to comment
Share on other sites

jodå, bredden är bestämd, men det är höjden som ska vara flexibel.

Texten fyller på och ökar höjden neråt om man säger så.

 

EDIT: småfel

 

[inlägget ändrat 2006-11-08 14:21:40 av Admini]

Link to comment
Share on other sites

Följande kod ger bilden :

<style type="text/css">
<!--
body {margin: 20px 50px; font: 75% Verdana, Arial, Helvetica, sans-serif;}
#container {background: #ffffff;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #666666; border-left: 1px solid #666666; border-right: 1px solid #cccc99; }
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #ffffff; border-left: 1px solid #666666; border-right: 1px solid #666666; border-width:0 2px;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #ffffff; border-left: 1px solid #666666; border-right: 1px solid #666666;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #ffffff; border-left: 1px solid #666666; border-right: 1px solid #666666;}

.content {padding: 0px;width:50;height;50; border-left: 1px solid #666666; border-right: 1px solid #666666; width:310px; height:150px;}
-->
</style>
</head>
<body>
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td>
<div id="container">
<div class="roundtop">
	<div class="r1"></div>
	<div class="r2"></div>
	<div class="r3"></div>
	<div class="r4"></div>
</div>
	<div class="content">hejhej</div>

<div class="roundbottom">

	<div class="r4"></div>
	<div class="r3"></div>
	<div class="r2"></div>
	<div class="r1"></div>
</div>
</div>


	</td>
</tr>
</table>

 

Men boxarna fylls på HORISONTELLT.

Jag vill ha dem VERTIKALT

 

 

[bild bifogad 2006-11-08 14:27:14 av Admini]

883477_thumb.jpg

Link to comment
Share on other sites

Följande kod ger den vänstra grafen i bilden men jag vill ha dem som den högra.

 

<style type="text/css">
.r1{margin: 0 0 11 0px;width: 10px; background: #99cc33; border:1px solid black}
.r2{margin: 0 0 5 0px; width: 10px; background: #99cc33; border:1px solid black}
.r3{margin: 0 0 3 0px;  width: 10px; background: #99cc33; border:1px solid black}
.r4{margin: 0 0 1 0px;  width: 10px; background: #99cc33; border:1px solid black}
</style>
</head>
<body>
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>

 

[bild bifogad 2006-11-08 14:46:08 av Admini]

 

[inlägget ändrat 2006-11-08 14:47:25 av Admini]

883492_thumb.jpg

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...