Member Avatar for 3825

I have an asp.net mvc web application. I have something like the following in my _Layout.cshtml I would love it if I could get rid of tables here but I could not make it look the same way without cell spacing. Help?

<td>
	<table cellpadding="0" cellspacing="0" style="height:32px;width:130px;border-right:1px solid #3a4044;">
		<tr>
			<td style="background:url(@Url.Content("~/Content/MenuButtonLeft.gif")) no-repeat top right;width:6px;">&nbsp;</td>
			<td class="Menu" id="orderMenuTd" style="background:url(@Url.Content("~/Content/MenuButtonMiddle.gif")) repeat-x;padding:0px 3px;" align="center">@Html.ActionLink("Order", "../Order/Index")</td>
			<td style="background:url(@Url.Content("~/Content/MenuButtonRight.gif")) no-repeat top right;width:6px">&nbsp;</td>																
		</tr>
	</table>
</td>
Edited by 3825 because: clarity
  • 5 Contributors
  • 4 Replies
  • 187 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by epicrevolt
Member Avatar for hericles

Unless I'm mistaken you are trying to get 3 images to appear side by side. This is easy enough to achieve with CSS. Have you had difficulty with lining them up using CSS?

Member Avatar for teedoff

Would be great if you could give us a link to your live test site. We dont have your images, so cant recreate your issue.

Member Avatar for mi.mac.rules

Each image could be an <li> within a <ul> and you can set the CSS "display" property to "inline-block"

Member Avatar for epicrevolt

You're probably going to want something along the lines of this. The :before and :after selectors may not work in all browsers and I believe it's CSS3.

The code below has not been tested, but I don't see why it shouldn't work.

<html>
<head>
<style type="text/css">
#menu {
	list-style:none;
	margin:0;
	padding:0;
}

#menu li {
	float:left;
}

#menu a:before {
	display:block;
	background:url(@Url.Content("~/Content/MenuButtonLeft.gif")) no-repeat top right;
	width:6px;
	height:32px;
}

#menu a {
	display:block;
	width:130px;
	line-height:32px;
}

#menu a:after {
	display:block;
	background:url(@Url.Content("~/Content/MenuButtonRight.gif")) no-repeat top right;
	width:6px;
	height:32px;
	border-right:1px solid #3a4044;
}
</style>
</head>
<body>
<ul id="menu">
	<li>@Html.ActionLink("Order", "../Order/Index")</li>
</ul>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.