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.

alltid lista tre objekt i bredden i en div

happyfejs

Startad av happyfejs,
i Webbutveckling

Rekommendera Poster

happyfejs

happyfejs

Postad
Postad

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

Länk till kommentar
Dela på andra webbplatser
happyfejs

happyfejs

Postad
  • Trådskapare
Postad

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

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

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>

Länk till kommentar
Dela på andra webbplatser
  • 2 veckor senare...
  • 1 year later...
Micke_skane

Micke_skane

Postad
Postad
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;

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...