Can the menu be aligned to the bottom of the page next to

I'm a beginner in the world of web development and currently working on my very first website utilizing HTML and CSS. I have encountered an issue with my menu placement. Ideally, I would like it to be aligned horizontally at the bottom along with my logo, but it seems to be displaying at the top instead.

Below is the code that I am using, could you please provide some guidance on how to resolve this problem?

HTML: 

<hgroup>
    <div id="Head">
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</hgroup>

CSS: 

#Head {
    float:left;
    margin-left:120px;
    margin-right:150px;
    width:200px;
    height:150px;
}
/*------------------------*/
 #navcontainer {
    margin-top: 50px;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color:#000;
    font-size:18px;
}
#navcontainer ul li a:hover {
    color:#008c00;
}
htmlcss

Answer №1

If you're looking to create a nice layout, consider the following structure:

<div class="main_container">
  <div id="Header"> 
    <img src="images/logo.png" width="380" height="100" alt="Company Logo" /> 
   </div> 
   <div class="menu_container">
      <div id="menu">
        <ul> 
           <li><a href="#">HOME</a></li> 
           <li><a href="#">SERVICES</a></li> 
           <li><a href="#">PORTFOLIO</a></li> 
           <li><a href="#">CONTACT</a></li> 
        <ul> 
      </div> 
    </div>
</div>

Here's some CSS styling for the structure above:

.main_container {
    position:relative;
}
#Header 
{ 
   margin-left:120px; 
   margin-right:150px; 
   width:200px; 
   height:150px; 
   background: blue;
   float:left;
} 

.menu_container {
    position: relative;
    height:150px;
    float: left;
}
#menu { 
    background: orange;
    position:absolute;
    bottom: 0;
    height: auto;
    width: 600px;
} 

#menu ul{ 
   margin: auto 0; 
   padding: 0; 
   list-style-type: none; 
   text-align: center;
   position: relative;
} 
#menu ul li { 
    position: relative;
    display: inline; 
    height: auto;
    bottom: 0;
    margin: auto 0;
} 
#menu ul li a{ 
    text-decoration: none; 
    padding: .2em 1em; 
    color:#000; 
    font-size:18px; 
} 
#menu ul li a:hover{ 
    color:#cc6600; 
}

For an easier and better design process, I recommend using Bootstrap framework. It can enhance your CSS without much hassle.

Answer №2

Considering the information provided is quite limited and there aren't any visuals to aid in understanding your desired outcome, I've created a sample solution that doesn't rely on floats or hard-coded dimensions. The key aspect of this example is using display: table-cell; on the two div elements as shown below:

#Header
{ 
  display: table-cell;
  height:150px; 
} 

#navigation{
  display: table-cell;
}

You can see a functioning demonstration here: http://plnkr.co/edit/ABCD123XYZ?preview

To enable smoother progress, providing clearer goals and objectives will greatly assist you.

Answer №3

Does this meet your expectations?

Visit this link

Give it a go!

<style>
hgroup{
    text-align:center;  
}

/*------------------------*/
 #navcontainer {
    margin-top: 50px;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;    
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color:#000;
    font-size:18px;
}
#navcontainer ul li a:hover {
    color:#008c00;
}</style>
<hgroup>
    <div id="Head" >
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>  
</hgroup>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method to extract mimeType from an HTMLImageElement?

After researching the MDN documentation on HTMLImageElement, I found no mention of the mimeType. I did come across some resources explaining how to retrieve the mimeType from a File Object. However, my specific requirement is to extract the mimeType from ...

javascripthtmlimage

Identify Horizontal Swipe Gestures on Page-level

I am currently focused on ensuring accessibility for users utilizing voiceover technology. While navigating their phone, these individuals rely on right and left swipes to interact with elements on a page. I am seeking to implement swipe detection at the ...

javascripthtmlreactjsaccessibilitywai-aria

The filter designed for rearranging elements will not function

let wrap = document.querySelector(".wrap"); let temp = document.querySelector(".temp"); temp.addEventListener("click", (event) => { // grabs the first paragraph child element, which is working correctly console.log(wrap.children[0].firstElementChild ...

javascripthtmlarraysfilterelement

When a specific item is selected from a drop-down menu, text boxes and drop-downs will dynamically appear and change

In the current version of my code, there is a single drop-down menu with three options for the user to select from. If "Complete" is chosen, a text box should appear. If "Abandon" or "Transfer" is selected, a separate drop-down menu needs to be displayed. ...

javascripthtmldrop-down-menudom-events

What is the best way to determine the width of a CSS-styled div element?

Is there a way to retrieve the width of a div element that is specified by the developer? For example, using $('body').width() in jQuery will provide the width in pixels, even if it was not explicitly set. I specifically need to access the width ...

javascriptjqueryhtml

Arranging Elements Individually Using Bootstrap 4 in a Row or Column

Utilizing Bootstrap 4, I am designing a row with two items placed in a column. The first item should always be aligned to the left of the row, while the second item is centered within the row. I have successfully achieved this layout using custom CSS. Is i ...

htmlcssbootstrap-4

The functionality of Skrollr on mobile is currently not working properly due to the inability to prevent default actions

Encountering the following error on all chromium browsers while using the Skrollr library and accessing the website through mobile: "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See < ...

javascripthtmlmobileinterventionskrollr

What is causing the container to overlap with my sidebar-like <nav>?

Why is the fluid-container overlapping in this way, while others are not? Does this look correct to you, or am I overlooking something? It seems incorrect to me. <nav class="nav flex-column float-left"> {links} </nav> <div class="conta ...

htmlcsstwitter-bootstrapbootstrap-4

Ways to design a vertical tab using CSS and JavaScript

I am currently working on creating a Vertical tab element using CSS and jQuery. However, I am facing an issue where I need to display the content of the first tab upon page load. I have tried using the following line of code but it does not seem to be work ...

javascriptjqueryhtmlcsstabs

Guide on creating a donut visualization with canvas?

I am in need of assistance, as I am trying to create a donut chart using canvas and JavaScript. Here is the code I have so far, but I am unsure how to complete it: <body> <canvas id="chart" width="500" height="500" style="background-color:bl ...

javascripthtmlcanvas

Show stored procedure query results in ASP.NET MVC

After spending over 8 hours attempting this task, I seek assistance. Please take note of the edit at the bottom. Implementation of Stored Procedure CREATE PROCEDURE SIX6 (@YEAR INT) AS BEGIN SELECT * FROM (SELECT Song ...

c#htmlsqlasp.net-mvcstored-procedures

What could be causing my bootstrap carousel slider to stay stuck in place?

Hey everyone, I'm having trouble getting the carousel from Bootstrap to work properly. I copied the code without making any changes, but for some reason, the carousel is not functioning (can't move to the next slide). Does anyone have a solution ...

htmlcssbootstrap-4

Query inputting time displaying additional numerical values beyond just minutes

I am adding a time field to a table with a length of 6 in the database. Utilizing the Tempos Dominus Bootstrap library for the time within the form HTML Form <div class="form-group"> <label for="time">Hora</label> ...

htmlsql

Floating with Bootstrap Utility

Have you ever wondered about the proper usage of bootstrap float utility? Check out this example: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class=" ...

htmlcssbootstrap-4

Issue with Tailwind and MUI integration causing unanticipated error with white buttons in NextJS Project

I'm in the process of developing a project using NextJS, TailwindCSS, and MUI React UI library. While integrating an MUI Button into my project, I noticed that the button's color remains white despite styling changes. https://i.stack.imgur.com/ ...

cssreactjsmaterial-uinext.jstailwind-css

Transforming PHP Variable Using Ajax

I have a variable called $type and I need it to be either month or year. This change should occur when a div is clicked. I attempted to use an onclick event with an ajax call. The ajax call and the variable are both in the same script (index.php). Within ...

javascriptphpjqueryhtmlajax

Expanding Bootstrap 5 navbar-nav to occupy entire screen space in collapsed state

Hello everyone, I hope you are doing well! I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler. While the toggler is functioning properly, I am having trouble making it fill the full width o ...

javascripthtmlcssnavbarbootstrap-5

Problem with jQuery's .prepend method being called twice on list items

Looking to enhance the appearance of a list by adding some icons before the anchor links within each list item. <ul class="submenu-children"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> ...

javascriptjqueryhtmlappend

The CSS styling for changing the color of a button in React JS is not

Creating a custom css style in mypagestyle.styl with the following properties: :local .mybutton border-radius: 1px; padding: 2px; margin: 2px; font-size: 14px; text-align: center; background-color: #4582ec; color: #fff; All styles are being ...

cssreactjsbootstrap-4react-bootstrap

What is the best way to interpret HTML special characters (such as those with accents) in a Facebook share post?

<meta property="og:title" content="<?php echo $title; /> where $title is retrieved from a database. The title should display as blácv with the character a accented, but when sharing the post on Facebook, it appears as bl&aacutecv. T ...

phphtmlfacebookmeta-tagshtml-entities