CODEWITHSUNDEEP
htmlcss
user3234242
user3234242

Reputation:

Cannot Create Header On Website?

This might seem like a bad question, but I'm a bit of an HTML noob. Alright, so I'm trying to create an HTML topbar to my site. Here's the code I have:

CSS:

* html #top-bar {
  position: absolute;
}

#topbar-inner {
  height: 23px;
  background: #000000;
}

* html #topbar-inner {
  margin-right: 17px;
}
* html #topbar-right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}

HTML:

#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 40px;
  color: white;
}

* html #top-bar {
  position: absolute;
}

#topbar-inner {
  height: 23px;
  background: #000000;
}

* html #topbar-inner {
  margin-right: 17px;
}
* html #topbar-right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
<div id="top-bar"> 
  <center><font size="4"><div id="topbar-inner">FREE SHIPPING ON ALL ORDERS OVER $39!</div></font></center>
</div>
<br></br>
I'm trying to add text to the right of the screen while having the free shipping thing in the middle. Everytime I add to my site, the text doesn't go next to it. What do I do to align it correctly?

THANKS

Upvotes: 0

Views: 55

Answers (2)

Andi North
Andi North

Reputation: 897

Here's a JSFiddle that I believe solves your issue.

The text in the bar is center aligned and there is some text to the right, which is right aligned.

What's more, it's uses classes instead of ID's (as I mentioned in the comment above).

CSS is as follows (I'm also referencing normalise.css in the Fiddle to reset browser quirks).

.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 23px; /* Vertically align the text middle */
    background: #000;
    color: #FFF;
    text-align: center; /* Instead of <centre> */
    text-transform: uppercase; /* Capitalise the text in CSS */
}

.top-bar p {
    margin: 0;
}

.top-bar__right {
    position: absolute;
    right: 0;
    background: red; /* Just to make it stand out in this example */
    top: 0;
}

HTML is as follows:

<div class="top-bar">
    <p class="top-bar__middle">Free shipping on all orders over $39!</p>
    <p class="top-bar__right">This is some text.</p>
</div>

Upvotes: 1

Claudiu Creanga
Claudiu Creanga

Reputation: 8366

Something like this? 

#top-bar {
  position: absolute;
  width:100%;
  top:0;
  left:0;
}

#topbar-inner {
  height: 23px;
  background: blue;
  float:left;
   width:50%;
}

#topbar-inner {
 
  float:left;
}
#topbar-right {
position: relative;
float:right;
width: 300px;
background-color: #fff555;
 width:50%;
}
<div id="top-bar"> 
<center>
  <div id="topbar-inner">FREE SHIPPING ON ALL ORDERS OVER $39!</div> 
  <div id="topbar-right">this is for the right topbar</div>   
</center>
</div>

Upvotes: 0

Related Questions