MVC Main Menu, (2 column), what CSS to use for iPhone and iPad?

LordNorbury

Hi folks,

I've developed a main menu on my mobile site which I've started building using .NET in MVC4. Previously I developed my desktop website using Webforms but have decided to go at any future development using MVC.

For my mobile site main page, and for other pages, I've put together a 2 column menu system using some CSS code, which gives me the exact layout I am looking for, once the iPhone is being held vertically.



The problem is that once the iPhone is rotated 90 degrees to landscape view, the icons are not appearing properly on the page, (see below). I understand that the buttons are rendering exactly how I have coded them to appear, (see code below).

<div class="menu">

<a href="@Url.Action("Page1", "Account")" class="mylink1" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img1.jpg")" /></a>
<a href="@Url.Action("Page2", "Home")" class="mylink2" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img2.jpg")" /></a>
<a href="@Url.Action("Page3", "Home")" class="mylink3" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img3.jpg")" /></a>          
<a href="@Url.Action("Page4", "Home")" class="mylink4" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img4.jpg")" /></a>   
<a href="@Url.Action("page5", "Home")" class="mylink5" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img5.jpg")" /></a> 
<a href="@Url.Action("Page6", "Home")" class="mylink6" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img6.jpg")" /></a>
<a href="@Url.Action("page7", "Home")" class="mylink7" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img7.jpg")" /></a>     
<a href="@Url.Action("Page8", "Home")" class="mylink8" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img8.jpg")" /></a> 
<a href="@Url.Action("Page9", "Home")" class="mylink9" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img9.jpg")" /></a> 
<a href="@Url.Action("page10", "Home")" class="mylink10" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img10.jpg")" /></a>  

</div>

CSS...

.mylink1 {
    background: url('../images/img1.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:smaller;
    position:absolute;
    top: 110px;
    left:10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}

.mylink2 {
    background: url('../images/img2.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:smaller;
    position:absolute;
    top: 110px;
    right: 10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}

.mylink3 {
    background: url('../images/img3.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:x-small;
    position:absolute;
    top: 245px;
    left:10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}
.mylink4 {
    background: url('../images/img4.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:x-small;
    position:absolute;
    top: 245px;
    right: 10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}

.mylink5 {
    background: url('../images/img5.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:x-small;
    position:absolute;
    top: 380px;
    left:10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}
.mylink6 {
    background: url('../images/img6.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:x-small;
    position:absolute;
    top: 380px;
    right: 10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}

.mylink7 {
    background: url('../images/img7.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:x-small;
    position:absolute;
    top: 515px;
    left:10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}
.mylink8 {
    background: url('../images/img8.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:x-small;
    position:absolute;
    top: 515px;
    right: 10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}

.mylink9 {
    background: url('../images/img9.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:x-small;
    position:absolute;
    top: 650px;
    left:10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}
.mylink10 {
    background: url('../images/img10.jpg') no-repeat center; 
    display:inline-block;
    font-family:Verdana;
    font-size:x-small;
    position:absolute;
    top: 650px;
    right: 10px;
    height: 100px; 
    width: 120px;
    color:#00ff00;
    vertical-align:bottom;
    font-family:Verdana;


}

I know the code above is not correct for the result I am looking for, but the question I'm asking is what is the best approach for me to use for the effect I am trying to achieve here? Should I use a table or use CSS? Any help hugely appreciated!

Talisman

You want a responsive design. Have you looked at Responsive MVC?

LordNorbury

Talisman wrote: »

You want a responsive design. Have you looked at Responsive MVC?

Haven't even heard of it before, will have to jump into this, thanks for putting me wide that such a thing existed!

Aswerty

Just in case you are not familiar with front end technologies, Responsive MVC isn't a technology in itself. It is just a resource for telling you how to build responsive user interfaces into your MVC application by implementing 3rd party tools. Saying that some of these third party tools are a life saver if you are weak on front end development. Personally I've used Bootstrap to great success in a few projects, albeit they weren't mobile applications (that shouldn't make a difference though).

As to your original question. You should use CSS to get the page displaying the way you want it. If you end up using one of the tools you find on the Responsive MVC website to develop your UI then you are effectively just using someone elses CSS to solve your problem (which is certainly not a bad thing). The current CSS you are using is very naive in that it should really only work for a specific screen size/orientation. Use of the CSS float: left property might be better suited to this situation. Using float you should be able to get the buttons lining up in a single row and moving to the next row when there is no more room. Alterantively if you only want two buttons per row you probably can avoid using float and maybe just use "display: inline" (or something like that) on every second button.

If you end up using Bootstrap the aspect of that you may be interesed in is the scaffolding. Bootstrap and Foundation do a hell of a lot more that creating responsive layouts but for many it is one of the most useful aspects of such frameworks.

Saying all that introducing one of these front end frameworks adds another layer of complexity to the application from the developers point of view.

LordNorbury

Aswerty wrote: »

Just in case you are not familiar with front end technologies, Responsive MVC isn't a technology in itself. It is just a resource for telling you how to build responsive user interfaces into your MVC application by implementing 3rd party tools. Saying that some of these third party tools are a life saver if you are weak on front end development. Personally I've used Bootstrap to great success in a few projects, albeit they weren't mobile applications (that shouldn't make a difference though).

As to your original question. You should use CSS to get the page displaying the way you want it. If you end up using one of the tools you find on the Responsive MVC website to develop your UI then you are effectively just using someone elses CSS to solve your problem (which is certainly not a bad thing). The current CSS you are using is very naive in that it should really only work for a specific screen size/orientation. Use of the CSS float: left property might be better suited to this situation. Using float you should be able to get the buttons lining up in a single row and moving to the next row when there is no more room. Alterantively if you only want two buttons per row you probably can avoid using float and maybe just use "display: inline" (or something like that) on every second button.

If you end up using Bootstrap the aspect of that you may be interesed in is the scaffolding. Bootstrap and Foundation do a hell of a lot more that creating responsive layouts but for many it is one of the most useful aspects of such frameworks.

Saying all that introducing one of these front end frameworks adds another layer of complexity to the application from the developers point of view.

This is exactly my problem, I started developing using Webforms and was always more C#/backend than front end, so stuff like CSS/HTML, I've kind of picked up on the fly and wouldn't be anything more than somewhere just beyond basic with CSS. This always got me sorted using Webforms and when developing for desktop, however that is the old way and this Bootstrap seems to be the new way, which I don't mind wading into at some stage in the near future but as you said it adds an additional layer of complexity to what I cam trying to get in motion right now!

I want to learn bootstrap but is there any way a bit of simple CSS code would give me the result I need or there abouts for the mo? I don't want to get bogged down in CSS and Boostrap right now, need to get this site operational for the mo and have a lot of backend stuff to do. Was hoping to get a quick fix for this on here...

Aswerty

Quickly did up some snippets using the CSS you provided. You might find them useful for figuring out your problem.

The first one shows how you might allow the divs to expand when the phone goes from horizontal to vertial and back. Play with the body width to see how smaller and larger width cause the divs to wrap around in different ways. As mentioned in my previous post the float property is used for doing this. This property is one of the most useful for creating reponsive interfaces.

The second one shows how you might keep the two buttons per row but keep the divs beside each other. As with the first you'll see that changing body widths doesn't cause the number of columns to increase or decrease. Though in this example the row class causes the columns to be centered by having both "margin-left: auto" and "margin-right: auto" so the browser knows to center the div.

To ensure you have a responsive interface you should use % instead of px when it is both possible and makes sense. For example the <body> of the page might have a width of 90%. If you gave it a 900px width then on different width screens it would either be too small or too big. On the other hand the button sizes probably should change so it would make sense to keep them as px.

Hopefully this is of some help.

As another backend dev I'm not that strong on the front end. I think CSS is the most complex aspect of UI development. At least JavaScript is a sane programming language (to some people at least!) as opposed to the insane cascading logic of CSS. In case you get frustrated just know millions of other have torn their hair out over trying to get their CSS just right.

I think the Mozilla Developer Network is one of the best resources for figuring out CSS.

Edit: Actually just also wanted to say that in your CSS it would make sense to have your <a> elements have the same class (e.g. mylink) then on the id you can call them link1, link2, link3, etc. In this way you can apply CSS to all the links by using the class selector (i.e. .mylink) and then apply individual CSS to each link using the specific
selector for that link (e.g. #link1). The class property is typically common across a number of similar elements and the id property is individual to a single element.

LordNorbury

Aswerty wrote: »

Quickly did up some snippets using the CSS you provided. You might find them useful for figuring out your problem.

The first one shows how you might allow the divs to expand when the phone goes from horizontal to vertial and back. Play with the body width to see how smaller and larger width cause the divs to wrap around in different ways. As mentioned in my previous post the float property is used for doing this. This property is one of the most useful for creating reponsive interfaces.

The second one shows how you might keep the two buttons per row but keep the divs beside each other. As with the first you'll see that changing body widths doesn't cause the number of columns to increase or decrease. Though in this example the row class causes the columns to be centered by having both "margin-left: auto" and "margin-right: auto" so the browser knows to center the div.

To ensure you have a responsive interface you should use % instead of px when it is both possible and makes sense. For example the <body> of the page might have a width of 90%. If you gave it a 900px width then on different width screens it would either be too small or too big. On the other hand the button sizes probably should change so it would make sense to keep them as px.

Hopefully this is of some help.

As another backend dev the front end I'm not that strong on the front end. I think CSS is the most complex aspect of UI development. At least JavaScript is a sane programming language (to some people at least!) as opposed to the insane cascading logic of CSS. In case you get frustrated just know millions of other have torn their hair out over trying to get their CSS just right.

I think the Mozilla Developer Network is one of the best resources for figuring out CSS.

Edit: Actually just also wanted to say that in your CSS it would make sense to have your <a> elements have the same class (e.g. mylink) then on the id you can call them link1, link2, link3, etc. In this way you can apply CSS to all the links by using the class selector (i.e. .mylink) and the apply individual CSS to each link using the specific
selector for that link (e.g. #link1). The class property is typically common across a number of similar elements and the id property is individual to a single element.

Thanks so much for knocking that together for me, gonna give it a shot here now. Have installed bootstrap which I'd prefer to use if I wasn't already pretty much completely swamped at the mo trying to transition from .NET Webforms to MVC!

LordNorbury

I'm gonna have to use bootstrap, that CSS design isn't working out for me, I am not a fan of CSS at all, necessary and all as I know that it is, but it is mindboggling to get your head around at times!

LordNorbury

I've managed to get Bootstrap to organise my menu items, in a 2 column way as I wanted it above! Only question is, say I want this to change to 3 or possibly 4 columns if a much wider device is used, (say a tablet), what would I need to do to the code below? What is below is working fine for a smartphone but still isn't looking exactly right for a tablet or a desktop? Not a bad start I guess!

<div class="row">
    <div class="col-xs-6">
        <div class="menu">
        <a href="@Url.Action("Login", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/login.jpg")" /></a>
        </div>
        </div>

        <div class="col-xs-6">
            <div class ="menu">
        <a href="@Url.Action("Logout", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/logout.jpg")" /></a>
        </div>
        </div>

        </div>

Graham

Try changing

[HTML]<div class="col-xs-6">[/HTML]

to

[HTML]<div class="col-xs-6 col-md-4">[/HTML]

Correction, tablets may need

[HTML]<div class="col-xs-6 col-sm-4">[/HTML]

Talisman

The key thing to remember is that the classes scale up. If you intend to use the same widths for tablets and desktops, you only need to specify for tablets.

As Graham has pointed out, the following code gives you 2 columns on the smallest devices (xs) and 3 columns on anything larger (sm).
[HTML]<div class="col-xs-6 col-sm-4">[/HTML]

If you're having issues with the grid system then take a look at the Bootstrap grid examples page.

LordNorbury

Talisman wrote: »

The key thing to remember is that the classes scale up. If you intend to use the same widths for tablets and desktops, you only need to specify for tablets.

As Graham has pointed out, the following code gives you 2 columns on the smallest devices (xs) and 3 columns on anything larger (sm).
[HTML]<div class="col-xs-6 col-sm-4">[/HTML]If you're having issues with the grid system then take a look at the Bootstrap grid examples page.

The only problem I've noticed is that I'm using a row type solution, which I have used to manage the two columns.

[B]<div class="row">[/B]     <div class="col-xs-6">         <div class="menu">         <a href="@Url.Action("Login", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/login.jpg")" /></a>         </div>         </div>          <div class="col-xs-6">             <div class ="menu">         <a href="@Url.Action("Logout", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/logout.jpg")" /></a>         </div>         </div>          [B]</div>[/B]

Does this solution not force me to use 2 columns regardless of what device the code is then rendered on and should I not use this <div class = "row"> part of my code?

I want 2 columns on a smartphone but on a tablet I want this to change to 3 columns.

Graham

Something like this:

[HTML]
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="menu">
<a href="@Url.Action("Login", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/login.jpg")" /></a>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class ="menu">
<a href="@Url.Action("Logout", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/logout.jpg")" /></a>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="menu">
<a href="@Url.Action("Login", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/login.jpg")" /></a>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class ="menu">
<a href="@Url.Action("Logout", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/logout.jpg")" /></a>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="menu">
<a href="@Url.Action("Login", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/login.jpg")" /></a>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class ="menu">
<a href="@Url.Action("Logout", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/logout.jpg")" /></a>
</div>
</div>
</div>
[/HTML]

Bootstrap is based on a 12 column grid. On xs devices (mobile phones) your menu is 6 columns, on sm devices (e.g. tablets) your menu is 4 columns.

From the Bootstrap documentation:

[HTML]
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
[/HTML]

LordNorbury

Huge thanks to the folks on thread who have helped me out here, it has let me get on with a project here that I badly need to get moved on without getting bogged down on front end stuff that I'm not particularly strong at, while giving me an insight into a new bit of functionality that I would not have tried before I was pointed towards it on thread...

LordNorbury

I've propagated Bootstrap around my mobile site now onto any pages that have a 2 columns menu like above, it all looks fantastic, only problem now is that none of my ahref links on those pages are working, they will only work if I rightclick and open a new tab (on Firefox). Obviously rightclicking isn't an option on a smartphone so when I try to open any page that has bootstrap code on it, the page just hands and won't open. This is on my local dev environment. I'm sure these links worked fine earlier... When I hardtype in the URL into the brower the page I'm looking for will load, I just can't use the ahref button to open it?!?

LordNorbury

It seems that where you put this line of code will effect how everything hangs together... I had it at the bottom of my view and it seemed to be causing the issue above.

@Scripts.Render("~/bundles/bootstrap")

I moved it into the master layout page and it is working now. :cool: