/    Sign up×
Community /Pin to ProfileBookmark

How do I inline which work in IE?

Copy linkTweet thisAlerts:
Mar 27.2007

Hello

I need to do some HTML with no tables.

The problem is that I need some picture which will be side by side.

For example:

[code=php]
<div>
<image src=”a.png” />
<image src=”b.png” />
<image src=”c.png” />
</div>
[/code]

The problem is that the last image down to new row.

I set in the css to div to be inline but it’s not work.

How do I do this?

For example, this menu:
[url]http://www.javascriptkit.com/script/script2/csstopmenu.shtml[/url]

*but* that the Resource menu will be in the same line and no in new line below the other menues.

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@AnnaccondMar 27.2007 — First of all there's no something like <image src="" /> tag but only <img scr="" /> ?

2nd is: did you choosed to images be display inline too?

3rd thing is that if you want to make such looking menu using DIVs than you should use list to it, like:

[CODE]<div>
<ul>
<li><img src="" border="0"></li>
<li><img src="" border="0"></li>
<li><img src="" border="0"></li>
</ul>
</div>[/CODE]

(with choosed values, float, alignment etc in CSS)

?
Copy linkTweet thisAlerts:
@WebJoelMar 27.2007 — First of all there's no something like <image src="" /> tag but only <img scr="" /> [/QUOTE] Huh?? "src"="[B]s[/B]ou[B]rc[/B]e". OP had it right. But this is one of the commonest mistakes. :o

While you CAN make a series of images be an [I]unordered list[/I], it is probably easier and more semantic to just float them, like this:

<div>

<img src="#" [B]style="float:left;"[/B]>

<img src="#" [B]style="float:left;"[/B]>

<img src="#" [B]style="float:left;"[/B]>

</div>

And as example shown in the URL is a list of links, yes, an <ul> is necessary. The DIV here would need some defining (width, etc).

<div id="nav">

<ul>

<li><a href="#"><img src=""></a></li>

<li><a href="#"><img src=""></a></li>

<li><a href="#"><img src=""></a></li>

</ul>

</div>[/QUOTE] with the CSS:
#nav {width:?px; etc.}

#nav ul {width:?px; etc.}

#nav ul li {[B]display:inline;[/B]}

#nav ul li a img {[B]border:0;[/B]}
[/QUOTE] Also makes a horizontal row (no need to "float:left;" the img), and removes the border from the anchor image.
Copy linkTweet thisAlerts:
@nadavvinauthorMar 27.2007 — Thanks ?
Copy linkTweet thisAlerts:
@nadavvinauthorMar 29.2007 — Why does HTML+CSS complicate???

I try to do sub menu, but the problem that it continue in the same line and not below the main menu.

[code=php]
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
body {
direction:rtl;
}

#topMenuTags
{
}

#topMenuTags img
{
border-width:0;
float:right;
}

#subMenus
{
width:100%;
height:20px;
background-color:#00ff00;
}
</style>
</head>
<body>
<div id="topMenuTags">
<img src="a.png" />
<img src="b.png" />
<img src="c.png" />
<img src="d.png" />
<img src="e.png" />
</div>
<div id="subMenus">
Hello World!
</div>
</body>
</html>

[/code]

The "Hello World is not shown at the sub menu but below the main menu (pictures) and not in green background.

There is green square left to the main menu.
Copy linkTweet thisAlerts:
@nadavvinauthorMar 29.2007 — I solved this with absolute positions.

Is there any better way to do it?
__________________________________

The solution wasn't good since it is not work good on IE










__________________________________________________
[CODE]

Quote:
<div id="nav">
<ul>
<li><a href="#"><img src=""></a></li>
<li><a href="#"><img src=""></a></li>
<li><a href="#"><img src=""></a></li>
</ul>
</div>
with the CSS:
Quote:
#nav {width:?px; etc.}
#nav ul {width:?px; etc.}
#nav ul li {display:inline;}
#nav ul li a img {border:0;}[/CODE]

This solution for the previous problem not work, the last image below of the rest.



_________________________________________________________________

I try:
[CODE]
body {
direction:rtl;
width:700px;
display:block;
}
[/CODE]

And I remove the absolute and top properties in the sub menu.

and change the width to 100% instead of specific pixels.

It is work well in IE but not in Firefox ?

In Firefox, The color isn't seen.

What should I do?
Copy linkTweet thisAlerts:
@nadavvinauthorMar 29.2007 — I give border to see what happen and in Firefox the sub menu div is in the same place of the top menu div behind it.

Why is it ignore from the display:block?
×

Success!

Help @nadavvin spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...