i can spell html5! Posted August 30, 2020 Share Posted 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> <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 More sharing options...
dsonesuk Posted August 30, 2020 Share Posted August 30, 2020 don't use positioning, it takes the elements out of the natural flow with other elements. Use float or display inline. Link to comment Share on other sites More sharing options...
i can spell html5! Posted August 30, 2020 Author Share Posted 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 30, 2020 Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now