keeping my header image in the header

i can spell html5! · August 30, 2020

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>

<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%;
}
}

dsonesuk · August 30, 2020

don't use positioning, it takes the elements out of the natural flow with other elements. Use float or display inline.

i can spell html5! · August 30, 2020

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

dsonesuk · August 30, 2020

Well give the image max height with width: auto; height: 100%;

Use display: inline-block; instead, using inline on its own, means it height, width is determined by content, not a set height or width.

Sign In

keeping my header image in the header

Recommended Posts

i can spell html5!

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

i can spell html5!

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity