The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

What is the code for getting images in one line

View previous topic View next topic Go down

What is the code for getting images in one line

Post by Diana on September 21st 2010, 11:52 am

What is the code for getting images next to each other - in one line - rather than on top of each other? And vice versa?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: What is the code for getting images in one line

Post by Sanket on September 21st 2010, 6:56 pm

Hi rhe,

what exactly are you looking for? Just don't leave spaces they will appear in a line then.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: What is the code for getting images in one line

Post by Diana on September 21st 2010, 9:17 pm

If it was that easy I wouldn t be asking for help.
It doesn't matter if there is a space or not between them, they still appear the same.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: What is the code for getting images in one line

Post by Rubber Ducky on September 21st 2010, 9:27 pm

CAn you give an example pic so we can see what your talking about?

Rubber Ducky
Forumember

Male Posts : 245
Reputation : 6
Language : English
Location : England

http://www.webdesignz.createforum.eu

Back to top Go down

Re: What is the code for getting images in one line

Post by RoNo on September 21st 2010, 9:46 pm

rhe wrote:What is the code for getting images next to each other - in one line - rather than on top of each other? And vice versa?
You can do it with a table...
Use [/tr][tr] to move down & start a new row
Code:
[table][tr]
[td][img]http://illiweb.com/fa/shop/en/ban-fm-1.png[/img][/td]
[td][img]http://illiweb.com/fa/shop/en/ban-fm-2.png[/img][/td]
[td][img]http://illiweb.com/fa/shop/en/ban-fm-3.png[/img][/td]
[/tr][tr]
[td][img]http://illiweb.com/fa/shop/en/ban-fm-4.png[/img][/td]
[td][img]http://illiweb.com/fa/shop/en/ban-fm-5.png[/img][/td]
[td][img]http://illiweb.com/fa/shop/en/ban-fm-6.png[/img][/td]
[/tr][/table]

Html
Code:
<table><tr>
<td><img src="http://illiweb.com/fa/shop/en/ban-fm-1.png"></td>
<td><img src="http://illiweb.com/fa/shop/en/ban-fm-2.png"></td>
<td><img src="http://illiweb.com/fa/shop/en/ban-fm-3.png"></td>
</tr><tr>
<td><img src="http://illiweb.com/fa/shop/en/ban-fm-4.png"></td>
<td><img src="http://illiweb.com/fa/shop/en/ban-fm-5.png"></td>
<td><img src="http://illiweb.com/fa/shop/en/ban-fm-6.png"></td>
</tr></table>


Last edited by RoNo on September 21st 2010, 10:16 pm; edited 1 time in total (Reason for editing : added Html code)

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Re: What is the code for getting images in one line

Post by Guest on September 21st 2010, 10:03 pm

Or since images display as inline elements, just put them together on the same line:





Code:
[img]http://illiweb.com/fa/shop/en/ban-fm-1.png[/img][img]http://illiweb.com/fa/shop/en/ban-fm-2.png[/img][img]http://illiweb.com/fa/shop/en/ban-fm-3.png[/img]

[img]http://illiweb.com/fa/shop/en/ban-fm-4.png[/img][img]http://illiweb.com/fa/shop/en/ban-fm-5.png[/img][img]http://illiweb.com/fa/shop/en/ban-fm-6.png[/img]

Guest
Guest


Back to top Go down

Re: What is the code for getting images in one line

Post by Diana on September 22nd 2010, 1:07 pm

Hm, doesn't seem to work.
Okay I've got this contractible menu script.
It looks like this:



And I want to get the buttons in one line. The dark brown ones.
The table code doesn't seem to make a difference.
Confused

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: What is the code for getting images in one line

Post by MrMario on September 22nd 2010, 2:56 pm

Where are you putting these at?

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Re: What is the code for getting images in one line

Post by Diana on September 22nd 2010, 4:11 pm

I have the menu in a widget at the minute, cause the images appear on top of each other.
But I want them side by side so I can place them in display - homepage generalities - homepage message cause it's handier when the menu is on top of the page.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: What is the code for getting images in one line

Post by Guest on September 22nd 2010, 5:17 pm

HTML:
Code:

<img src="URL"> <img src="URL"> <img src="URL">

BBCODE:
Code:

[img]URL[/img] [img]URL[/img] [img]URL[/img]
Result:

Guest
Guest


Back to top Go down

Re: What is the code for getting images in one line

Post by Diana on September 22nd 2010, 6:04 pm

@Gangstar15 wrote:HTML:
Code:

<img src="URL"> <img src="URL"> <img src="URL">

BBCODE:
Code:

[img]URL[/img] [img]URL[/img] [img]URL[/img]
Result:

Nope, this doesn't work. I've got a loooong code full of these image codes and all the images stay on top of each other.


Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: What is the code for getting images in one line

Post by Sanket on September 22nd 2010, 7:23 pm

Can we see the code you use?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: What is the code for getting images in one line

Post by MrMario on September 22nd 2010, 9:01 pm

Looks like the widget is to small to make images go next to each other. Make the widget area bigger Wink

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Re: What is the code for getting images in one line

Post by Diana on September 23rd 2010, 10:14 am

@Sanket wrote:Can we see the code you use?
Code:
<a href="URL"><img src="URL" alt="HOME"></a>
<script type="text/javascript">

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document·cookie.length > 0) {
offset = document·cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document·cookie.indexOf(";", offset);
if (end == -1) end = document·cookie.length;
returnvalue=unescape(document·cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document·cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document·cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script><h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer"><img src="URL" alt="MESSAGES"></p></h3><div id="sc1" class="switchcontent">
<a href="URL"><img src="URL" alt="INBOX"></a>
<a href="URL"><img src="URL" alt="WRITE A NEW MESSAGE"></a>
<a href="URL"><img src="URL" alt="SAVED"></a>
<a href="URL">><img src="URL" alt="OUTBOX"></a>
<a href="URL"><img src="URL" alt="SENTBOX"></a>
</div>
<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">
<img src="URL" alt="PROFILE"></h3><div id="sc2" class="switchcontent">
<a href="URL"><img src="URL" alt="INFORMATIONS"></a>
<a href="URL"><img src="URL" alt="PREFERENCES"></a>
<a href="URL"><img src="URL" alt="SIGNATURE"></a>
<a href="URL"><img src="URL" alt="AVATARS"></a>
<a href="URL"><img src="URL" alt="FRIENDS"></a>
</div>

<h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer"><img src="URL" alt="OTHER"></h3><div id="sc3" class="switchcontent">
<a href="URL"><img src="URL" alt="FAQ"></a>
<h3 onClick="expandcontent('sc4')" style="cursor:hand; cursor:pointer"><img src="URL" alt="POSTS"></h3><div id="sc4" class="switchcontent">
<a href="URL"><img src="URL" alt="SEARCH"></a>
<a href="URL"><img src="URL" alt="EGOSEARCH"></a>
<a href="URL"><img src="URL" alt="NEWPOSTS"></a>
<a href="URL"><img src="URL" alt="UNANSWERED"></a>
<a href="URL"><img src="URL" alt="ACTIVETOPICS"></a>
<a href="URL"><img src="URL" alt="FAVOURITESEARCH"></a>
<a href="URL"><img src="URL" alt="WATCHSEARCH"></a>
</div>
<h3 onClick="expandcontent('sc5')" style="cursor:hand; cursor:pointer"><img src="URL" alt="POSTERS"></h3><div id="sc5" class="switchcontent">
<a href="URL"><img src="URL" alt="MEMBERLIST"></a>
<a href="URL"><img src="URL" alt="TODAYPOSTERS"></a>
<a href="URL"><img src="URL" alt="OVERALLPOSTERS"></a>
</div></div>
</div>
<a href="URL"><img src="URL" alt="LOGOUT"></a>

@MrMario wrote:Looks like the widget is to small to make images go next to each other. Make the widget area bigger Wink
I'm not trying to get the images next to each other in the widget. I'm trying to do that in display - homepage generalities - homepage message. In the widget they appear on top of each other and it's fine for the widget, but as I said I want to change it.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: What is the code for getting images in one line

Post by Guest on September 23rd 2010, 6:24 pm

You need to add a class to your <h3> tags, then define the <h3> tags to display as inline element. To each of the <h3> tags, start them like this:
Code:
<h3 class="inline-display" (rest of tag goes here)
Now, add this to your CSS:
Code:
h3.inline-display {display:inline;}
As long as the div.switchcontent elements are defined as position:absolute (and they should be for a menu such as this), the images should then display as you want.

And FYI, you have an extra </p> tag in your first (sc1) menu. You might want to remove it. Very Happy

Guest
Guest


Back to top Go down

Re: What is the code for getting images in one line

Post by Diana on September 23rd 2010, 7:55 pm

Thanks, I will try out the codes.

I have the images centred in the widget and when I posted the code here, I removed those bits in the code, I must have missed the </p>. Smile

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: What is the code for getting images in one line

Post by Diana on September 24th 2010, 10:39 am

Well well.
I tried the code and now the menu looks like this:


Now, I want the dark buttons to be in one line and the lighter ones to go straight down.
What am I doing wrong?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: What is the code for getting images in one line

Post by Diana on September 25th 2010, 1:09 pm

rhe wrote:Well well.
I tried the code and now the menu looks like this:


Now, I want the dark buttons to be in one line and the lighter ones to go straight down.
What am I doing wrong?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum