Jump to content

Search the Community

Showing results for tags 'auto height'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 1 result

  1. 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>
  • Create New...