Making banner above nav bar using CSS and HTML with logo/icon floated left of text

Question

I'm having issues trying to create a "banner" above the navigation bar on my website using CSS/HTML.

I can't get a background color to display in the banner, and I also can't manage to get the header text to float to the right of the banner logo/icon. Here is my code so far for both HTML header and CSS.

HTML:



     


    
    Header info 1
    Header info 2
    Header info 3

Here is the CSS:

.header img{
   float: left;
}
.header .banner{
   display:inline-block;
   *display:inline;
   padding: 20px;
   background-color: #5C5F58;
   margin:10px;

}
.header .banner .title{
   display:inline-block;
   *display:inline;
   font-family: 'Bebas Neue', sans-serif; 
   color: #ffffff; 
   text-transform: uppercase;
}

So a summary of the problems I'm having:

I can't get the logo to float to the left of the title headings (they appear underneath the logo)
I can't get the background color of the banner to change
I can't get the font style or font color to change

I know it's probably the way I'm referring to these elements in the CSS, but I can't figure out how to refer to them properly.

Thanks in advance for your help

user_6803592 · Answer

I can't get the logo to float to the left of the title headings (they appear underneath the logo)

You give 1 sibling inside .banner float and the other one is not floating. This will make them overlap. Give either none or both of them float.

I can't get the background color of the banner to change

Use the background-color css-property.

I can't get the font style or font color to change

Change the .header into header in your css. The first one is targeting the class header and the latter one targets the header html-tag.

Pro tip: try using an online code editor with HTML and CSS like Codepen to ask your questions. This will make it easier for people to try and answer your questions resulting in faster and more elaborate answers.

user_4605915 · Answer

Your specificity in your CSS is wrong. If you amend these to the code below you'll get the behaviour you're looking for.

.banner img{
  float: left;
}

.banner {
  display:inline-block;
  *display:inline;
  padding: 20px;
  background-color: #5C5F58;
  margin:10px;

}

.title {
  display:inline-block;
  *display:inline;
  font-family: 'Bebas Neue', sans-serif; 
  color: #ffffff; 
  text-transform: uppercase;
}

user_4799887 · Answer

I have replaced the css class to inline css checkit out if it can help


    
    Header info 1
    Header info 2
    Header info 3

Making banner above nav bar using CSS and HTML with logo/icon floated left of text

3 Answers