Nav bar taking up full width of page, centered to the right with content area

Question

Nav bar taking up full width of page, centered to the right with content area

I am facing an issue with aligning my full-width navbar with my fixed content area. The ul keeps changing based on the browser or resolution.

Check out this fiddle for reference:

http://jsfiddle.net/fwyNy/

subject site

CSS Code:

#topribbon{
width: 100%; 
height: 30px; 
background-color: #AA1119 ; 
margin: -11px 0px 1em 0px; 
position: fixed; 
z-index: 9999; 
}
#topribbon ul{
width:auto;
padding-top:5px;
margin:0px 385px 0px auto;
float:right;
}

#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}

#topribbon ul li:hover{
color:#5C8FA5;

}

Here is the corresponding HTML:

<div id="topribbon">  <ul>
        <li>Free Ground Shipping on all orders over $99!</li>
        <li>Why Us?</li>
        <li>Account</li>
        <li>Cart</li>
        <li>+1-800-555-5555</li>
    </ul>

html css nav menubar navbar

Answer 1

Answer №1

To center the inner ul, apply position:relative, set a width, and then use margin: 0 auto

position:relative;
margin:0 auto;
width:980px; (adjust as needed)

http://jsfiddle.net/fwyNy/2/ (try expanding the space of the 'result' section)

Answer 2

To center the inner ul, apply position:relative, set a width, and then use margin: 0 auto

position:relative;
margin:0 auto;
width:980px; (adjust as needed)

http://jsfiddle.net/fwyNy/2/ (try expanding the space of the 'result' section)

Answer 3

Answer №2

attempt

http://jsfiddle.net/Xxm76/34/

.lContent {width: 200px; border: 2px solid #000; border-right: none; float: right;   position: relative;}
.rContent {width: 300px; border: 2px solid #000; border-left: none; float:left; position: relative;}

would it remain consistent across different browsers?

Answer 4

attempt

http://jsfiddle.net/Xxm76/34/

.lContent {width: 200px; border: 2px solid #000; border-right: none; float: right;   position: relative;}
.rContent {width: 300px; border: 2px solid #000; border-left: none; float:left; position: relative;}

would it remain consistent across different browsers?

Answer 5

Answer №3

Below is a simple demonstration of how I would approach it:

<div id="container">
    <div id="wrapper">
        <div id="menu">
            <ul>
                <li>Home</li>
                <li>About Us</li>
                <li>Services</li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
</div>

Here's the corresponding CSS styling:

#container{
    height: 5em;
    background: #00204d;
    padding-top: 2em;
}
#wrapper{
    width: 100%;
    height: 3em;
    background: #000;
}
#menu{
    height: 3em;
    background: #999;
    width: 70%;
    margin: 0 auto;
    float: right;
}
#menu>ul>li{
     width: auto;
    list-style: none;
    display: inline-block;
    margin: 0 0 0 1em;
}

View this concept in action on http://jsfiddle.net/fqTwN/

Answer 6

Below is a simple demonstration of how I would approach it:

<div id="container">
    <div id="wrapper">
        <div id="menu">
            <ul>
                <li>Home</li>
                <li>About Us</li>
                <li>Services</li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
</div>

Here's the corresponding CSS styling:

#container{
    height: 5em;
    background: #00204d;
    padding-top: 2em;
}
#wrapper{
    width: 100%;
    height: 3em;
    background: #000;
}
#menu{
    height: 3em;
    background: #999;
    width: 70%;
    margin: 0 auto;
    float: right;
}
#menu>ul>li{
     width: auto;
    list-style: none;
    display: inline-block;
    margin: 0 0 0 1em;
}

View this concept in action on http://jsfiddle.net/fqTwN/

Nav bar taking up full width of page, centered to the right with content area

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to add multiple lines of text to a webpage using the span element?

Exploring z-indices in event bubbling

What is the best way to create a button with a background image that is also transparent?

What is the best way to protect old documents when selecting new files in a multi-file uploader?

Trouble with custom font updates in Hugo using Blogdown

Can the functionality of a button be disabled after being clicked a total of 5 times?

Issue with overflow-auto not displaying scroll bar

What is the best method for incorporating a YouTube embedded video into an image carousel using HTML and CSS?

Guide: "Changing an HTML element's class by utilizing its id attribute"

Implement a Bootstrap button that can efficiently collapse all elements in one click

How to locate every JavaScript event connected with an HTML element by utilizing Google Chrome

What is the best way to merge a card-deck with fixed-width cards?

Next.js optimizes the page loading process by preloading every function on the page as soon as it loads, rather than waiting for them to

Executing 'npm start' to launch an HTML file along with a CSS stylesheet - A step-by-step guide

Error occurs when resizing SVG icon

Having trouble with SVG background image not displaying properly and positioning correctly?

A step-by-step guide on leveraging useRef() to specifically target dynamic material-ui tabs

Is it possible to activate numerous hover effects on links by hovering over a div?

In my HTML document, I have three identical Id's and I need to figure out how to target the third one using CSS. Can you help

Adding a .PHP File to Two Separate DIVs