Issues with Floating Menus

I attempt to outline my issue using visuals.

*This is what I desire

*However, this is what I am currently receiving:

HTML

<div class="header">
    <ul class="menu">
        <li>Home</li>
        <li>Content</li>
    </ul>
</div>
<div class="container>
    ....
</div>

CSS

    .header     {
        background: #77bbf5;
        width : 100px;
        height: 75px;
        line-height: 75px;
    }
    .menu   {
        float: left;
        list-style-type: none;
        background: #955d5d;
        position: absolute
    }
    .menu li    {
        display: inline;
        position: relative;
    }
    .menu li a {
        float: left;
        width: 35px;
        height: 35px;
        line-height: 35px;
        margin-left: 12px;
        margin-top: 50px;
        text-align: center;
        display: inline-block;
}

I have attempted multiple times without success, seeking assistance.

Any suggestions on how to resolve this issue?

htmlcsscss-float

Answer №1

give this a shot: 

<div class="nav">
    <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
    </ul>
</div>
<div class="content">
    ....
</div>

Styling: 

.nav     {
    background: #ff9933;
    width : 500px;
    height: 100px;
    line-height: 100px;
}
ul   {
    width:400px;
    height:50px;
    list-style-type: none;
    background: #66cc99;
margin-top:70px;
    position:absolute;
    margin-left:50px;
}
ul li    {
    width:90px;
    height:40px;
    margin:15px;
    float:left;
    background: #f2f2f2;
}
ul li a {
    float: left;
    width: 45px;
    height: 45px;
    line-height: 45px;
    margin-left: 15px;

    text-align: center;
    display: inline-block;

}    
.content{
    width:500px;
    height:600px;
    background:#666666;
}

view Here

Answer №2

Check out this solution:

HTML 
<div class="header">

    <ul class="menu">
        <li>Home</li>
        <li>Contant</li>
    </ul>
</div>
<div class="container">
...
</div>

CSS

.header{
    background: #77bbf5;
    width : 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
    position: relative;
}
.menu   {
    list-style-type: none;
    background: #955d5d;
    position: absolute;
    left: 100px;
    top: 20px;
    margin: 0;
    padding: 0 10px;

}
.menu li{
    display: inline;
}
.menu li a {
    width: 35px;
    height: 35px;
    line-height: 35px;
    padding: 20px;
    text-align: center;
}
.container{
    background: #dfd3d3;
    padding: 30px;
}

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 best way to determine if an image already exists in a database where the objects are spread across two distinct SQL tables?

Currently, I am working on a project using classic ASP and SQL. In this project, I have an input box where the image name is entered by the user after clicking the "Update" button. Upon clicking the update button, pre-existing images are displayed in a tab ...

htmlsql-serverasp-classic

Stopping the audio player in HTML5 and JavaScript when the next track starts playing

My webpage contains several audio players, and I've implemented this script to handle them. While the players are functioning correctly, the issue arises when a second player is clicked while the first one is still playing. I've searched for a so ...

javascripthtmlhtml5-audio

Combining days and months in a date time using PHP

I am looking to create a textBox where users can input a date and time, followed by selecting an option from a dropdown menu that triggers a calculation. For instance: if ($exampleMonth === 11 && $exampleDay > 30) { $exampleMonth = 12; ...

phphtmldropdown

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

Trying to extract values from a table with a horizontal header when checkboxes are selected. The goal is to retrieve the values of the selected column for all rows. Code snippet provided below. <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtml

Adjust the flexslider to transition to a new slide when hovering over the thumbnails

I have a flexslider with thumbnails like this ; https://i.stack.imgur.com/9bfC2.jpg I am looking to change the slide when the user hovers over the thumbnails. How can I achieve this functionality? Here is the jQuery code I am currently using to set up th ...

javascriptjqueryhtml

What steps should I take to successfully integrate my Dojo DataGrid into a Dojo ContentPane that is nested within a Dojo TabContainer?

It seems that the issue arises from having different settings for parseOnLoad in the separate widgets. I have experimented with both true and false values but without success. To troubleshoot, I created three web pages - two containing TabContainer and Dat ...

htmldojodojox.grid.datagrid

Jquery is not displaying the background color of the progress bar

Greetings to all! I am currently working on implementing a progress bar for my website, but I am encountering an issue where the background-color is not displaying correctly on scroll. I would greatly appreciate any assistance with this matter. Below you c ...

javascriptjqueryhtmlcss

Issue with applying Angular animation to child element

Here I have set up two different animations. animations: [ trigger('fadeIn', [ transition('void => *', [ style({opacity: 0}), animate(500), ]), ]), trigger('fallIn',[ transition ...

htmlangulartypescriptanimation

"Is there a way to reverse the action of $( "button" ).remove()

Currently, I have implemented JQuery's $( ".button" ).remove(); function to get rid of all the buttons on my webpage immediately after a user clicks the print PDF button that changes the HTML page into a PDF. Nevertheless, once this process is done ...

javascriptjquerycsshtml

Building and launching websites for both mobile and desktop platforms

What is the best approach for developing a website with unique designs optimized for both desktop and mobile users? ...

htmlcsswebmobileresponsive

Designing a dynamic class object for a material table

I am in need of assistance with creating an HTML table using data retrieved from an API. The structure of the data is as follows: { strTableName: "TestTable", strComment:"Approved", lstTableHeaders:[ {strFieldName : "Sl No.", strType:" ...

htmlangulardynamicangular8

Tips for navigating through lengthy webpages using the jQuery onepage-scroll plugin

I recently came across a fantastic plugin called onepage-scroll that almost perfectly fits my requirements. However, I have encountered an issue. Some of my pages, defined within <section> tags, are larger than a single screen. Is there a way to cust ...

javascriptjqueryhtmlcssscroll

The vanishing HTML Div with a fixed height

After implementing a navigation bar inside my header container, I noticed that the main_image div with a blue background color disappeared. Despite setting a height for it, the div was nowhere to be seen. Additionally, the welcome_text div seemed to lose i ...

csshtmlheight

After applying the cellClass in ng-grid, the row border mysteriously disappears

After applying cellClass to color an entire column, the row border disappears. Here is a link to the Plunker demonstration: http://plnkr.co/edit/4IeQQBTIe8sgHVEBUTAp?p=preview. Does anyone have a solution for this issue? ...

javascriptcssangularjsrowng-grid

Tips for exporting JSON-LD and embedding it into an HTML document

Can JSON-LD be stored externally and then linked to an HTML document like so? <script type="text/javascript" src="http://www.example.com/data123.jsonld"></script> I haven't been able to find any information about this online.... ...

htmljsonjson-ld

How can I make my slider perfectly accommodate the component inside?

I am working on developing a slider similar to the McDonald's one: The main goal for my slider is to adjust to the container element size, so that when the user clicks the left or right buttons, the slider smoothly moves to the corresponding directio ...

javascriptcssreactjs

The problem of a static click function not working when clicked on a link. What is the solution for this

Details I am currently using a flickity slideshow that automatically goes to the next picture on a click. Within the slideshow, I have placed a button with text and a link to an external website (e.g. ). My Problem: When I click on the link, my slidesho ...

javascriptjquerycssperformanceflickity

What could be causing html-webpack-inline-source-plugin to prevent the page from refreshing after editing CSS files?

Currently, I am utilizing a plugin that embeds all CSS within the final HTML file. This method prevents the application from refreshing in development mode. Whenever I make edits to the CSS, the build process completes normally, but the styles do not updat ...

javascriptcssreactjswebpack

What could be causing the malfunction of this form's submission request?

I'm encountering an issue with a simple login form I have that I want to post to ASP.Net MVC. It seems like when I set the action to /Login, it works perfectly fine. However, if I specify the action name as "/Login/Index", it fails. The server sends b ...

asp.nethtmlasp.net-mvc

What is the best way to choose a row from MYSQL database?

I am trying to access a user's information from my database using the following code: <?php $database="myweekdatabase"; $con = mysql_connect("localhost","root" ,"");//for wamp 3rd feild is balnk if (!$con) { die('Could not connect: ' . m ...

phphtmlmysql