j.silver Posted October 26, 2015 Share Posted October 26, 2015 Dear all: Below code is for the header part of a responsive page. The header, 275px high, is divided into a video on the left and an aside section on the right. The video takes 60% width, the remaining 40% is occupied by the aside section. The aside comprises from top to bottom: flags area with 15% height, bottom link with 25% height, and an h1 in between, set to auto height to take the remaining height. I set the h1 area to begin at 15% height (height of the flags section) and 28% from the bottom (height of the bottom link plus 3% padding). When I checked the height of h1 using a dashed box, I have noticed that it does not begin from 28px as it should. Would you pls. help me with: [*]making h1 auto area starts from where it should;[*]checking all the CSS styles and fix wherever necessary to accomplish a more sound and professional code that would serve in a responsive page. <!DOCTYPE html><html><head><style>@charset "UTF-8";/******************** Layout (global rules for all sizes) ******************************/body {margin: 0; padding: 0;}.home_page_header header a.bottom_link {display: block; position: absolute; background-position: 0px 0px; background-repeat: no repeat;}body {color: #575c7a; line-height: 1.5em; font-family: Arial; font-size: 14px; /* base font*/background: grey repeat-x 0px 0px;}.page {max-width: 980px; margin: 0px auto 0px auto; position: relative; background-color: #fff;}/************************ Layout Large Screen (default for older browsers) ****************//*************************Start Main Header ***********************/.home_page_header {height: 275px; margin: 0px auto;}.home_page_header header {height: 100%; background-size: 980px 275px; background-color: white;}/**********************************Video *************************************************/.mnvid {float: left; width: 60%; height: 100%; margin: 0px; vertical-align: middle;}/********************************Aside Formating***************************/.home_page_header aside {width: 40%; height: 100%; background-color: white; float: left; position:relative;}/******************Aside Language***********************************/.home_page_header aside .lang {display: block; position: absolute; left: 0; right: 0; top: 0; height: 15%; padding: 0px;}/**********************************Aside h1*****************************************/.home_page_header aside h1 {display: block; position: absolute; left: 0; right: 0; top: 15%; bottom: 28%; height: auto; padding: 5% 0 0 0; line-height: 150%; text-align: center; font-size: 2em; font-style: italic;color: #000; border: 1px dashed orange;}/********************Aside Bottom Link**********************************************/.home_page_header aside .bottom_link { position: absolute; left: 0; right: 0; bottom: 0; height: 25%;padding: 3%; font-size: 2em; font-weight: bold; background-color: grey;border-radius: 10px; /*to make rounded corner*/-moz-border-radius: 10px; /*to make rounded corner visible in Mozilla*/-webkit-border-radius: 10px;}/*to make rounded corner visible in browsers supporting webkit*/ .home_page_header aside .bottom_link p {position: absolute; /*to vertically and horizontally center the text*/ top: 50%; /*to vertically and horizontally center the text*/left: 50%; /*to vertically and horizontally center the text*/ margin-right: -50%; /*to vertically and horizontally center the text*/transform: translate(-50%, -50%); /*to vertically and horizontally center the text*/}.home_page_header aside .bottom_link p a {text-decoration: none; text-align: center;color: #FFF;padding: 20px; /*allows activating the link even when the cursor is far from the text. Not affecting total height of aside, so not counted. */}.home_page_header aside .bottom_link p a:hover {color: #FFB280;}</style></head><body><!--Start of main page container--><div class = "page"> <!--Start of main header--><div class = "home_page_header"> <header> <iframe class="mnvid" src="[url=https://www.youtube-nocookie.com/embed/Wc8tidOjhUY?rel=0]https://www.youtube-nocookie.com/embed/Wc8tidOjhUY?rel=0[/url]" frameborder="0" allowfullscreen></iframe><aside><div class="lang">flags here</div><h1>Our Unique Product <span><!--<p><br>-->Tastes Differently</span></h1><div class="bottom_link"><p><a href="#">Free Trial</a></p></div></aside></header></div></div></body></html> Link to comment Share on other sites More sharing options...
funbinod Posted October 28, 2015 Share Posted October 28, 2015 why r u using <h1> tag? it is said to be deprecated. use <span> in stead and style it with the default elements of <h1> then remove the <span> tag that is inside the <h1> tag. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 28, 2015 Share Posted October 28, 2015 why r u using <h1> tag? it is said to be deprecated Since when? Link to comment Share on other sites More sharing options...
funbinod Posted October 28, 2015 Share Posted October 28, 2015 (edited) Since when? i dont know. but in one of d books i read, it was said styling with css is better than using h tags.. and j.silver's prolem will be solved using span tag in stead of h tag Edited October 28, 2015 by funbinod Link to comment Share on other sites More sharing options...
dsonesuk Posted October 28, 2015 Share Posted October 28, 2015 Header tags, are very important for SEO as they should contain keywords that search bots would look for to help ranking, they distinguish title importance from H1 being high importance to H6 being the lowest importance. So i very much doubt it is these elements that are deprecated, and there nothing stopping you styling header tag with css, the span i suspect was originally used in this instance to force the text within the span to a new line, which was originally achieved by commented out <p> and <br> tags. Link to comment Share on other sites More sharing options...
j.silver Posted October 28, 2015 Author Share Posted October 28, 2015 So kindly advise what would the proper coding for my header Link to comment Share on other sites More sharing options...
dsonesuk Posted October 28, 2015 Share Posted October 28, 2015 You seem to be under the impression that height: auto; adjusts to available height, it does not! it adjusts to height of content that includes margins and padding. Also you have to remember most elements have default settings for margins and padding, which can be different in all browsers, you have not allowed for this, and that is why you are not getting the required result, all these extra padding/margin values are added to your overall total percentage values. Also using dashed border increases height/ width of element which can throw out you percentage calculations, its best to use background-color: instead. Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2015 Share Posted October 28, 2015 i dont know. but in one of d books i read, it was said styling with css is better than using h tags.. and j.silver's prolem will be solved using span tag in stead of h tag What the book meant was not to use the <h1> - <h6> tags just to make the text bigger. But you should use it to properly indicate the headings of each section on the page. 1 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