CODEWITHSUNDEEP
htmlcssmenunavigation
JonnyNich
JonnyNich

Reputation: 1281

CSS Stretching div so that it stretch across screen

I'm making a website and for the website, i'm using a navigation bar which is at the top. What I want is for the bar to be at the top of the page and it to be a separate color to the main page. Here's my current code:

body {
  font-family: "Baloo Bhaina";
}

h1 {
  margin-top: 250px;
  font-size: 75px;
  text-align: center;
}

a {
  text-decoration: none;
  color: white;
  margin-left: 10px;
  font-size: 20px;
}

#header {
  background-color: DeepSkyBlue;
  color: white;
  display: inline;
  padding-left: 100%;
  padding-right: 100%;
  padding-top: 20px;
}
<div id="header">
  <a href="">Home</a>
  <a href="">Products</a>
  <a href="">Who we are</a>
  <a href="">Contact Us</a>
</div>

Some of the elements referenced in CSS are slightly irrelevant to the HTML, appoligies. Thanks!

Upvotes: 1

Views: 1076

Answers (6)

Qamar
Qamar

Reputation: 1

body {
    font-family: "Baloo Bhaina";
    margin: 0;
    padding: 0;
    background: #000;
}
#header {
background-color: DeepSkyBlue;
    color: white;
    padding: 20px;
}

don't use position absolute, there is no need of #header { display: inline; width: 100%; }. remove these line also form code

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105883

to illustrate my comment :

a {
  text-decoration: none;
  color: white;
  margin-left: 10px;
  font-size: 20px;
}

#header {
  background-color: DeepSkyBlue;
  color: white;
  padding-top: 20px;
  text-align:center
}
<div id="header">
  <a href="">Home</a>
  <a href="">Products</a>
  <a href="">Who we are</a>
  <a href="">Contact Us</a>
</div>

Upvotes: 0

LKG
LKG

Reputation: 4192

This is the fix nav part and content part is below with different background-color. 

body {
    font-family: "Baloo Bhaina";
}

h1 {
    margin-top: 250px;
    font-size: 75px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #333;
    margin: 5px;
    font-size: 20px;
}

#header {
    background-color: DeepSkyBlue;
    display: inline-block;
    padding: 10px;
    width:100%;
    text-align:right;
    position:fixed;
    z-index:99;
    left:0px;
    top:0px;
}

#content {
   width:100%;
   background:tomato;
   margin-top:45px;
   padding:5px;
}
<div id="header">
    <a href="">Home</a>
    <a href="">Products</a>
    <a href="">Who we are</a>
    <a href="">Contact Us</a>
</div>
<div id="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
<br><br>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
 <br><br>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
  <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
     <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
     <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
     <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
     <br><br>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus porro cupiditate aperiam esse eos ducimus consequatur labore magnam rerum. Ipsum eos corporis quo architecto voluptatum veniam, quas omnis modi ex!
</p>
</div>

Upvotes: 1

LKG
LKG

Reputation: 4192

Use css code only

If you want to fix it at the top use position:fixed and left and right properties 0px.

body {
    font-family: "Baloo Bhaina";
}

h1 {
    margin-top: 250px;
    font-size: 75px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #333;
    margin: 5px;
    font-size: 20px;
}

#header {
    background-color: DeepSkyBlue;
    display: inline-block;
    padding: 10px;
    width:100%;
    text-align:right;
}
<div id="header">
    <a href="">Home</a>
    <a href="">Products</a>
    <a href="">Who we are</a>
    <a href="">Contact Us</a>
</div>

Upvotes: 0

Wep0n
Wep0n

Reputation: 402

This answer doesn't really deserve it's own post but since I can't comment, here I go:

First off, it's always helpful to have a resource at hand to aid you in your endeavors. In this case, I'd suggest something like this site to help you out.

As for your example:

#header {
    background-color: DeepSkyBlue;
    color: white;
    display: inline; /* if you're trying to get your <a> tags aligned, it's probably better to do it another way. */
    width: 100%; /* done */
    /*padding-left: 100%;
    padding-right: 100%; why would you even do this*/
    padding-top: 20px;
}

Upvotes: 0

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

For the header do

width:100%;
position:relative;

if it should always stay sticky on top

width:100%;
position:fixed;

also the header element shouldn't be display inline as mentioned in the comments. Paddings with 100% seems strange to me aswell

Upvotes: 0

Related Questions