The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

What is the code for getting images in one line

5 posters

Go down

What is the code for getting images in one line Empty What is the code for getting images in one line

Post by Diana 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

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

Post by Sanket 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
Sanket
ForumGuru

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

Back to top Go down

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

Post by Diana 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

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

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

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

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

http://www.webdesignz.createforum.eu

Back to top Go down

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

Post by RoNo 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
What is the code for getting images in one line Ban-fm-1What is the code for getting images in one line Ban-fm-2What is the code for getting images in one line Ban-fm-3
What is the code for getting images in one line Ban-fm-4What is the code for getting images in one line Ban-fm-5What is the code for getting images in one line Ban-fm-6
Code:
[table][tr]
[td][img]http://2img.net/i/fa/shop/en/ban-fm-1.png[/img][/td]
[td][img]http://2img.net/i/fa/shop/en/ban-fm-2.png[/img][/td]
[td][img]http://2img.net/i/fa/shop/en/ban-fm-3.png[/img][/td]
[/tr][tr]
[td][img]http://2img.net/i/fa/shop/en/ban-fm-4.png[/img][/td]
[td][img]http://2img.net/i/fa/shop/en/ban-fm-5.png[/img][/td]
[td][img]http://2img.net/i/fa/shop/en/ban-fm-6.png[/img][/td]
[/tr][/table]

Html
Code:
<table><tr>
<td><img src="http://2img.net/i/fa/shop/en/ban-fm-1.png"></td>
<td><img src="http://2img.net/i/fa/shop/en/ban-fm-2.png"></td>
<td><img src="http://2img.net/i/fa/shop/en/ban-fm-3.png"></td>
</tr><tr>
<td><img src="http://2img.net/i/fa/shop/en/ban-fm-4.png"></td>
<td><img src="http://2img.net/i/fa/shop/en/ban-fm-5.png"></td>
<td><img src="http://2img.net/i/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
RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

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

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

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

What is the code for getting images in one line Ban-fm-1What is the code for getting images in one line Ban-fm-2What is the code for getting images in one line Ban-fm-3

What is the code for getting images in one line Ban-fm-4What is the code for getting images in one line Ban-fm-5What is the code for getting images in one line Ban-fm-6

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

[img]http://2img.net/i/fa/shop/en/ban-fm-4.png[/img][img]http://2img.net/i/fa/shop/en/ban-fm-5.png[/img][img]http://2img.net/i/fa/shop/en/ban-fm-6.png[/img]
avatar
Guest
Guest


Back to top Go down

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

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

Hm, doesn't seem to work.
Okay I've got this contractible menu script.
It looks like this:
What is the code for getting images in one line Ytyty10
What is the code for getting images in one line Tyh10

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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

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

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

Where are you putting these at?
MrMario
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1839
Language : test

Back to top Go down

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

Post by Diana 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

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

Post by Guest 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:
What is the code for getting images in one line Nouvea19What is the code for getting images in one line Repond12What is the code for getting images in one line Nouvea19
avatar
Guest
Guest


Back to top Go down

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

Post by Diana 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:
What is the code for getting images in one line Nouvea19What is the code for getting images in one line Repond12What is the code for getting images in one line Nouvea19

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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

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

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

Can we see the code you use?
Sanket
Sanket
ForumGuru

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

Back to top Go down

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

Post by MrMario 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
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1839
Language : test

Back to top Go down

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

Post by Diana 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

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

Post by Guest 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
avatar
Guest
Guest


Back to top Go down

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

Post by Diana 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

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

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

Well well.
I tried the code and now the menu looks like this:
What is the code for getting images in one line Ghhg10

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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

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

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

rhe wrote:Well well.
I tried the code and now the menu looks like this:
What is the code for getting images in one line Ghhg10

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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Back to top

- Similar topics

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