Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

DIVar ställs horisontella

Admini

Startad av Admini,
i Webbutveckling

Rekommendera Poster

Admini

Admini

Postad
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
dune

dune

Postad
Postad
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. :-)"

 

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

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!

 

 

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

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

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

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]

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

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?

 

Länk till kommentar
Dela på andra webbplatser
lizardKng

lizardKng

Postad
Postad

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.

 

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

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]

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

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

Länk till kommentar
Dela på andra webbplatser
Admini

Admini

Postad
  • Trådskapare
Postad

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

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...