Just nu i M3-nätverket
Gå till innehåll
happyfejs

alltid lista tre objekt i bredden i en div

Rekommendera Poster

Hallå allsammans, gör min första sida med javascript inkluderat nu, har stött på ett problem jag hoppas kunna få hjälp med.

På denna sidan http://www.happyfejs.se/63n/index.php?page=clients, så är clienterna listade och klickbara, då expanderas de ut åt höger.

 

Det som är mitt problem är att jag alltid endast vill lista tre stycken i bredd. Sänker jag bredden på diven de ligger i så listas de tre, men klickar jag på en bild så expanderas de ju och de två andra clienterna till höger trillar ner på raden nedanför?

 

Några ideér?

 

tack på förhand

Redigerad av mrsebastian

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag har löst det med en fulinglösning, men funkis är funkis. Jag gjorde en if sats, med en uträkning om i=3 så ska den lägga till en placeHolder, placeHoldern förminskar jag samtidigt som jag utökar clienten. Har ni nån bättre lösning får ni gärna hojta den också, som sagt, antar att detta är en fulinglösning :S

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Här har du ett exempel(som jag tror du menar) du kan kolla på och utveckla så det passar dig.

Hur du skriver dem tre objekten löser du kanske med serverspråk...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="sv" />
<title>Untitled</title>
<style type="text/css">
#PH1,#PH2
{
width:300px;
height:100px;
clear:both;
background:red;
margin-bottom:10px;
}
.PHSub
{
width:100px;
height:100px;
float:left;
background:yellow;
}
</style>
<script type="text/javascript">
function TogglePHSub(strSubId) {
var oPHSub=document.getElementById(strSubId);
var oPHParent=document.getElementById(oPHSub.parentNode.id);
var intSubsWidth=0;
oPHSub.style.width=(oPHSub.style.width=="200px")?"100px":"200px";
oPHSub.style.backgroundColor=(oPHSub.style.backgroundColor=="pink")?"yellow":"pink";
for (i=0;i<oPHParent.childNodes.length;i++) {
intSubsWidth+=parseInt(oPHParent.childNodes[i].offsetWidth);
}
oPHParent.style.width=intSubsWidth+"px";
}
</script>
</head>

<body>
<div id="PH1">
<div id="PH1_sub1" onclick="TogglePHSub(this.id);" class="PHSub">h</div>
<div id="PH1_sub2" onclick="TogglePHSub(this.id);" class="PHSub">h</div>
<div id="PH1_sub3" onclick="TogglePHSub(this.id);" class="PHSub">h</div>
</div>
<div id="PH2">
<div id="PH2_sub1" onclick="TogglePHSub(this.id);" class="PHSub">h</div>
<div id="PH2_sub2" onclick="TogglePHSub(this.id);" class="PHSub">h</div>
<div id="PH2_sub3" onclick="TogglePHSub(this.id);" class="PHSub">h</div>
</div>
</body>
</html>

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Visst är det margin-bottom som gör att de blir i olika rader?

Nej, det gör att där är en marginal(avstånd) emellan dem.

 

Det är:

<div id="PH1"> 
       <div id="PH1_sub1" onclick="TogglePHSub(this.id);" class="PHSub">h</div> 
       <div id="PH1_sub2" onclick="TogglePHSub(this.id);" class="PHSub">h</div> 
       <div id="PH1_sub3" onclick="TogglePHSub(this.id);" class="PHSub">h</div> 
</div> 
<div id="PH2"> 
       <div id="PH2_sub1" onclick="TogglePHSub(this.id);" class="PHSub">h</div> 
       <div id="PH2_sub2" onclick="TogglePHSub(this.id);" class="PHSub">h</div> 
       <div id="PH2_sub3" onclick="TogglePHSub(this.id);" class="PHSub">h</div> 
</div> 

som gör att det blir i olika rader.

 

Eftersom raderna är 300px breda och varje element däri är 100px får det enbart plats 3 st/rad.

Att dem lägger sig fint sidan om varandra beror på float:left;

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...