CODEWITHSUNDEEP
htmlcssheaderpositioninline
Tacoma
Tacoma

Reputation: 89

Logo in the header

I'm currently trying to get a logo to appear side by side with my header, I can target the logo background just fine however when I try to change the header color it doesn't allow me to. I have tried changing the float to left right and center, center is the best to me personally. Any idea as to why I can change the header color? I posted the code below.

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <div class="header">
  <img src="logo.png" alt="logo"/>
</div>
    <style type="text/css">

        body {
            min-width: 630px;
        }

        #container {
            padding-left: 200px;
            padding-right: 190px;
        }

        #container .column {
            position: relative;
            float: left;
        }

        #center {
            padding: 10px 20px;
            width: 100%;
        }

        #left {
            width: 180px;
            padding: 0 10px;
            right: 240px;
            margin-left: -100%;
        }

        #right {
            width: 130px;
            padding: 0 10px;
            margin-right: -100%;
        }

        #footer {
            clear: both;
        }

        * html #left {
            left: 150px;
        }

        #container {
            overflow: hidden;
        }

        #container .column {
            padding-bottom: 1001em;
            margin-bottom: -1000em;
        }


        * html body {
            overflow: hidden;
        }

        * html #footer-wrapper {
            float: left;
            position: relative;
            width: 100%;
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            background: #fff;
        }


        body {
            margin: 0;
            padding: 0;
            font-family:Sans-serif;
            line-height: 2.24em;
        }

        p {
            color: #000000
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul a {
            color: white;
            text-decoration: none;
        }

        #header {
            font-size: large;
            padding: 0.3em;
            background: #000000;
        }

        #footer {
            font-size: large;
            padding: 0.3em;
            background: #e4e2e2;
        }

        #left {
            background: #d3d2d2;
        }

        #right {
            background: #d3d2d2;
        }

        #center {
            background: #e4e2e2;
        }

        #container .column {
            padding-top: 1em;
        }
    .header img {
  width: 250px;
  height: 80px;
  float: center;
  background: #ffffff;
}

    .header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

    </style>

Upvotes: 2

Views: 14248

Answers (5)

Tacoma
Tacoma

Reputation: 89

Here is what I had to do to get the proper results. Both @freginold and @edomingo1 helped resolve the issue. I had to move the div and img to the body from the head, then had to add a id="header" as well to my div which allowed me to make the proper change. Thanks for all the feedback appreciate it :)!

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Title</title>
        <style type="text/css">

            body {
                min-width: 630px;
            }

            #container {
                padding-left: 200px;
                padding-right: 190px;
            }

            #container .column {
                position: relative;
                float: left;
            }

            #center {
                padding: 10px 20px;
                width: 100%;
            }

            #left {
                width: 180px;
                padding: 0 10px;
                right: 240px;
                margin-left: -100%;
            }

            #right {
                width: 130px;
                padding: 0 10px;
                margin-right: -100%;
            }

            #footer {
                clear: both;
            }

            * html #left {
                left: 150px;
            }

            #container {
                overflow: hidden;
            }

            #container .column {
                padding-bottom: 1001em;
                margin-bottom: -1000em;
            }


            * html body {
                overflow: hidden;
            }

            * html #footer-wrapper {
                float: left;
                position: relative;
                width: 100%;
                padding-bottom: 10010px;
                margin-bottom: -10000px;
                background: #fff;
            }


            body {
                margin: 0;
                padding: 0;
                font-family:Sans-serif;
                line-height: 2.24em;
            }

            p {
                color: #000000
            }

            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            nav ul a {
                color: white;
                text-decoration: none;
            }

            #header {
                font-size: large;
               padding: 0em;
               margin:  0em;
                background: #000000;
            }

            #footer {
                font-size: large;
                padding: 0.3em;
                background: #e4e2e2;
            }

            #left {
                background: #d3d2d2;
            }

            #right {
                background: #d3d2d2;
            }

            #center {
                background: #e4e2e2;
            }

            #container .column {
                padding-top: 1em;
            }
        .header img {
      width: 250px;
      height: 80px;
      float: top;
      background: #000000;
    }

        .header h1 {
      position: relative;
      top: 18px;
      left: 10px;
    }


        </style>
    </head>
    <body>

    <div class="header" id="header">
      <img src="logo.png" alt="logo"/>
    </div>

Upvotes: 1

mymiracl
mymiracl

Reputation: 579

U can't use float for center. If u wanna side-by-side sorting, u use float. But u must use align or text-align for placement to center. Add this code:

.header{
text-align: center;
}

If you want add another logo or text and you want they don't see this you can use div and use this code:

.logo{
width: 250px;
height: 80px;
text-align: center;
background: #ffffff;
}
</style>
</head>
<body>
<div class="logo">
    <img src="logo.png"/>
</div>

Upvotes: 0

freginold
freginold

Reputation: 3956

You've included your div and img in the head of the document, rather than the body. See the example below. I moved your header into the body, and changed the color to yellow just to show that it can be targeted. (Obviously, the image doesn't load here.)

.header {
  color: yellow;
}
    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <style type="text/css">

        body {
            min-width: 630px;
        }

        #container {
            padding-left: 200px;
            padding-right: 190px;
        }

        #container .column {
            position: relative;
            float: left;
        }

        #center {
            padding: 10px 20px;
            width: 100%;
        }

        #left {
            width: 180px;
            padding: 0 10px;
            right: 240px;
            margin-left: -100%;
        }

        #right {
            width: 130px;
            padding: 0 10px;
            margin-right: -100%;
        }

        #footer {
            clear: both;
        }

        * html #left {
            left: 150px;
        }

        #container {
            overflow: hidden;
        }

        #container .column {
            padding-bottom: 1001em;
            margin-bottom: -1000em;
        }


        * html body {
            overflow: hidden;
        }

        * html #footer-wrapper {
            float: left;
            position: relative;
            width: 100%;
            padding-bottom: 10010px;
            margin-bottom: -10000px;
            background: #fff;
        }


        body {
            margin: 0;
            padding: 0;
            font-family:Sans-serif;
            line-height: 2.24em;
        }

        p {
            color: #000000
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul a {
            color: white;
            text-decoration: none;
        }

        #header {
            font-size: large;
            padding: 0.3em;
            background: #000000;
        }

        #footer {
            font-size: large;
            padding: 0.3em;
            background: #e4e2e2;
        }

        #left {
            background: #d3d2d2;
        }

        #right {
            background: #d3d2d2;
        }

        #center {
            background: #e4e2e2;
        }

        #container .column {
            padding-top: 1em;
        }
    .header img {
  width: 250px;
  height: 80px;
  float: center;
  background: #ffffff;
}

    .header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

   </style>
</head>
   
<body>

<div class="header">
  <img src="logo.png" alt="logo"/>
</div>

</body>
</html>

Upvotes: 0

edomingo1
edomingo1

Reputation: 1

You are using a class selector in your HTML markup, but an ID selector in your CSS. Try replacing div class="header" with div id="header" to see the expected results.

Upvotes: 0

Adnan Ahmed
Adnan Ahmed

Reputation: 35

What are you trying to get the colour on its in its own braces, look at the braces around colour.

Upvotes: 0

Related Questions