webForumDet fria alternativet
Logga in

Flytta boxens position med css

7 svar · 757 visningar · startad av Ann-Sofie

Ann-SofieMedlem sedan mars 2003136 inlägg
#1

Nu har jag ändrat och trixat och grejat med dessa boxar och float:left så det snart blir värre än när jag började!

Jag vill helt enkelt det här:
Överst ligger en topp.
Därefter kommer två kolumner kan man säga där det i den första är en box (box 1) som sträcker sig över hela kolumnen, bredvid är då den andra kolumnen där det ska ligga 5 bilder under varandra (box 2).
Under box 1 vill jag ha två lika stora boxar (box 3A och 3B) och underst vill jag ha en box (box 4) likt den första.

Jag skickar med min css kod och en mall över index-sidan där jag färgar de olika boxarna med olika färger för att tydligt se vad som händer.

I detta läge ligger alla boxar som dom ska utom box 2 = de fem bilderna under varandra som ska ligga till höger om de andra boxarna. Nu ligger dom bredvid den sista boxern men jag vill få upp direkt under toppen.

nån vänlig själ som ser var felet ligger?

Tack!
Fia.

	
#platta
{
	width: 731px;
	background-color:none;
	border:0px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	}
		
#toppenstor
{
	background-color:#FF3399;
	height: 144px;
	width: 525px;
	border:none;
	float:left;
	}
	
	#toppenliten
{
	background-color:#FF3399;
	height: 144px;
	width: 206px;
	border:none;
	float:left;
	}

	
	#box1 {
	background-color:#33FF00;
	width:502px;
	height:250px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin-left:30px;
	border-right:3px solid #999999;
	border-bottom:1px solid #999999;
	float:left;
	}
	
	#box2 {
	background-color:#CC00FF;
	width:196px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8px;
	float:left;
	}
		
	#box3A {
	background-color:#00FFCC;
	width:251px;
	height:150px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin-left:30px;
	border-bottom:1px solid #999999;
	float:left;
	
	}
	
	#box3B {
	background-color:#FFCC00;
	width:251px;
	height:150px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	border-right:3px solid #999999;
	border-bottom:1px solid #999999;
	float:left;
	}
	
	
	#box4 {
	background-color:#33FF00;
	width:502px;
	height:250px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin-left:30px;
	border-right:3px solid #999999;
	border-bottom:1px solid #999999;
	float:left;
	}

<body >
<div id="platta">

<div id="toppenstor"></div>
<div id="toppenliten"></div>
<div id="box1" >      </div>
<div id="box3A">	</div> 
<div id="box3B"> </div> 
  <div id="box4">  </div>
     <div id="box2">
  <div align="center">
      <img src="bild1.gif"><br><br>
      <img src="bild2.gif"><br><br>
      <img src="bild3.gif"><br><br>
      <img src="bild4.gif"><br><br>
      <img src="bild5.gif">
	  </div>     </div>

  </div>
</body>
tantenMedlem sedan nov. 20051 596 inlägg
#2

Ett sätt skulle kunna vara att du lägger treorna i en egen div.

<div id="content">
<div id="box3A"></div>
<div id="box3B"></div></div>

Tar bort float och margin i dessa boxar och i stället sätter dessa värden på den nya diven.

#content{
		width: 256px;
		float: left;
		margin-left: 30px;
	}

Kanske?
Måste nog flytta på box4 till sist också

Ann-SofieMedlem sedan mars 2003136 inlägg
#3

Jag testade att lägga 3A och 3B i div content men då hamnade dessa under varandra istället för bredvid varandra.

Jag ändrade width till 502px för att båda skulle få plats och tog bort margin och float men det hjälpte inte.

Fler idéer nån? Känns ju snart som jag måste ta till en tabell fast jag inte vill... envis envis och vill göra detta med css.

tantenMedlem sedan nov. 20051 596 inlägg
#4

Ah... då missförstod jag dig hur du ville de skulle ligga... Jag fattar nog inte vart du vill ha bildboxen...

tantenMedlem sedan nov. 20051 596 inlägg
#5

Nytt försök.
Flytta upp hela bild diven box 2 till under toppenliten och sätt float:right på den, men du lär få ändra någon bredd för din Box1 och box2 kommer inte få plats bredvid varandra... om det nu var rätt så...:-)

headbugMedlem sedan sep. 2006867 inlägg
#6

Eftersom det är hierarkiskt med html/css får man tänka som att man bygger avdelningar underifrån och upp. Så brukar jag se det och det hjälper mig att göra rätt, oftast.

Uppifrån och ner verkar du vilja ha en topdiv och sedan en maincontent-div.

Sedan vill du ha saker bredvid varandra, i top-diven, då floatar du dom. Sen vill du ha saker bredvid varandra i mancontent, då får du uppfinna två hjälp-divvar som reder ut floatandet: en vänsterdiv och en högerdiv.

Mitt förslag på css och html:

#platta
{
	width: 731px;
	background-color:none;
	border:0px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	}
		
#toppenstor
{
	background-color:#FF3399;
	height: 144px;
	width: 525px;
	border:none;
	float:left;
	}
	
	#toppenliten
{
	background-color:#FF3399;
	height: 144px;
	width: 206px;
	border:none;
	float:left;
	}

	
	#box1 {
	background-color:#33FF00;
	width:502px;
	height:250px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin-left:30px;
	border-right:3px solid #999999;
	border-bottom:1px solid #999999;
	float:left;
	}
	
	#box2 {
	background-color:#CC00FF;
	width:196px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8px;
	float:left;
	}
		
	#box3A {
	background-color:#00FFCC;
	width:251px;
	height:150px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin-left:30px;
	border-bottom:1px solid #999999;
	float:left;
	
	}
	
	#box3B {
	background-color:#FFCC00;
	width:251px;
	height:150px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	border-right:3px solid #999999;
	border-bottom:1px solid #999999;
	float:left;
	}
	
	
	#box4 {
	background-color:#33FF00;
	width:502px;
	height:250px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin-left:30px;
	border-right:3px solid #999999;
	border-bottom:1px solid #999999;
	float:left;
	}
	#right {
	float: left;
	}
	#left {
	float: left;
	}

och

<link href="c/ts.css" rel="stylesheet" type="text/css">
<body>
<div id="platta">

<div id="toppenstor"></div>
<div id="toppenliten"></div>
<div id="left">
<div id="box1" >      </div>
<div id="box3A">	</div> 
<div id="box3B"> </div> 
<div id="box4">  </div>
</div>

<div id="right">
     	<div id="box2">
  		<div align="center">
          <img src="bild1.gif"><br><br>
          <img src="bild2.gif"><br><br>
          <img src="bild3.gif"><br><br>
          <img src="bild4.gif"><br><br>
          <img src="bild5.gif">
	  	</div>
        </div>
</div>

  </div>
</body>

Det är lite som med parenteser när man räknar matte, ibland måste man ha några för att ordningen ska bli rätt. Men det är inte lätt alltid :)

MVH

Ann-SofieMedlem sedan mars 2003136 inlägg
#7

Nej men vet du vad? Nu när jag fnurlade lite till så börjar det lösa sig! Tjoho! Nu ligger box två högst upp i en kolumn bredvid de andra boxarna. Jag gjorde som du skrev men jag la allt från box 1 under content.

Jag har till och med lyckats få in en footer - tack för hjälpen!!

Du fick mig att tänka om med just content-divven!

Jag lägger upp koden om nån mer är intresserad:

#platta
{
	width: 731px;
	background-color:none;
	border:0px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;

	}
	
		
#toppenstor
{
	background-color:#FF3399;
	height: 144px;
	width: 525px;
	border:none;
	float:left;
	}
	
	#toppenliten
{
	background-color:#FF3399;
	height: 144px;
	width: 206px;
	border:none;
	float:left;
	}

#content{
		width: 502px;
		float: left;
		margin-left: 30px;
		border-right:3px solid #999999;
	}

	
	#box1 {
	background-color:#33FF00;
	width:502px;
	height:250px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	}
	
	#box2 {
	background-color:#CC00FF;
	width:196px;
	height:500px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8px;
	float:right;
	}
		
	#box3A {
	background-color:#00FFCC;
	width:250px;
	height:150px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	float:left;
	}
	
	#box3B {
	background-color:#FFCC00;
	width:249px;
	height:150px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	float:right;
	}
	
	
	#box4 {
	background-color:#33FF00;
	width:502px;
	height:250px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	}
	

#footer{
background-color:#cccccc;
width:700;
margin-left:30px;
}

<body >
<div id="platta">

<div id="toppenstor"></div>
<div id="toppenliten"></div>

<div id="content">

<div id="box1" >

	       </div>
  
    <div id="box3A">
   
	</div>
	  
  
		
	
	 <div id="box3B">
   </div> 
 
  
	
	  <div id="box4">
	 
  </div>
 </div>
 
    
     

   
   <div id="box2">
  <div align="center">
      <img src="bild1.gif"><br><br>
      <img src="bild2.gif"><br><br>
      <img src="bild3.gif"><br><br>
      <img src="bild4.gif"><br><br>
      <img src="bild5.gif"><br>
	  </div>
	  </div>
<div id="footer"><br>här är footer</div>
    
	 
  
</div>
</body>
</html>
Ann-SofieMedlem sedan mars 2003136 inlägg
#8

Tusen tack både headbug och tanten!

Vilken skön fredag att äntligen detta löste sig!!! :L

143 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
141 ms — hämta tråd, inlägg och bilagor (db)