0

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: clarity

5
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by epicrevolt
0

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?

0

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.

0

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

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.