Currently, I am working on a project using ASP.NET MVC 4. In terms of the user interface, particularly in relation to the _Layout, it is a very basic setup that will be consistent across all pages. While utilizing bootstrap 3, the website is primarily designed for large display devices and may involve other tools as needed.
Although I am incorporating styled elements from bootstrap 3 for the foundational layout, these elements have already been customized. Therefore, my inquiry leans more towards general CSS/JS principles rather than focusing on specific frameworks or libraries. By seeking assistance here, I hope to find the optimal solution for the following issue:
To aid in clarity due to my limited experience, I have utilized distinct colors to explain what I aim to achieve. Within the
<div id="top-nav-wrapper">970px layout. The styling for this wrapper div is relatively straightforward:
#top-nav-wrapper {
background-image:url('/Content/images/navbar-stripe.png');
background-repeat:repeat-x;
}
Contained within the #top-nav-wrapper are three additional div tags. The first one features a dark blue background -
<div class="container">bootstrap 3 class .container, its style has been customized to include:
.container {
max-width: none !important;
width: 970px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Following this div is another one housing navigation buttons against a dark yellow background -
<div class="container" style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important;">
This div also utilizes the .container class but incorporates additional styling elements as shown.
The final div represents a grey line -
<div class="container" style="background-color: grey; height: 50px;">.container class with some modifications.
The highlighted red box in the diagram indicates what needs to be introduced next. Looking to insert a vertical menu under the dark yellow div, maintaining alignment with its bottom-left corner. The "Home" link within the menu should be displayed in blue to demonstrate this positioning. Additionally, the menu should overlay the grey div similar to the illustration provided above. Essentially, the goal is to ensure the vertical menu always matches the width of the "Home" menu link, a task I feel can be achieved with minor adjustments using jQuery. As such, my main question revolves around the proper method of positioning the div in the desired manner?