Jump to content

keeping my header image in the header


i can spell html5!
 Share

Recommended Posts

I’m trying to place an image in the header of my site on the left side but it keeps colliding with my header <h1> and <p>. 

Basically i want to keep this img to the left side and within the header height wise as well but be responsive. when i put a div around it the image becomes to big. how do i get the img to stay in one specific place(left side of header) and still be responsive

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>inahurry</title>
 <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="main.css">
<body>

<header id="header">


<div class=”container”>

<div id=”branding”>
<IMG STYLE="position:absolute; TOP:0px; LEFT:194px; WIDTH:300px; HEIGHT:125px  "SRC="favorite.jpg">
  </div>
  
<div class=”container”>
<h1> Nerdypoker.com</h1>
  </div>
  <div class=”container”>
<p>Your good kid, real good.<br>But as long as I'm alive</br> you're second best.</p>
</div>
 <div class=”container”>
    <IMG STYLE="position:absolute; TOP:93px; right:414px;    WIDTH:30px; HEIGHT:30px  "SRC="facebook.png">
    <IMG STYLE="position:absolute; TOP:93px;  right:305px;     WIDTH:30px; HEIGHT:30px   "SRC="youtube.png">
    <IMG STYLE="position:absolute; TOP:93px;  right:208px;    WIDTH:30px; HEIGHT:30px    "SRC="twitter.png">
 </div>
   </header>

 </div>

</body>
</html>

 

and css:

 

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#FDFEFE ;
}

/* Global */
.container{
  width:80%;
  margin:auto;
  overflow:hidden;
}

/* Header **/
header{
  width:80%;
  margin:auto;
  overflow:hidden;
  background:   #F2F4F4;;
  color:#ffffff;
  padding-top:55px;
  min-height:70px;

}

header  #branding {
  float:right;
  }


header  h1{
    float:right;
    color:red;
    margin-right:650px;
    margin-top:-50px;
}

header  p{
     position: relative;
     float:left;
     padding: 0 20px 0 320px;
     color:black;
     margin:0;
}

/* Media Queries */
@media(max-width: 768px){
    header #branding, header  h1, header  h2{
    float:none;
    text-align:center;
    width:100%;
  }
}

 

 

Link to comment
Share on other sites

i changed css to 

header  #branding {   float:left;
 display: inline;
  } and its not leaving the header area as before  but i have the same issue as before. the image is to large

so i guess my question should have been

how do i style my image to a certain sive and posistion it correctly in the div id "branding "id? thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...