Horizontal and Vertical Objects in a Header

j.silver · October 17, 2015

Dear all,

I have a code that is almost complete, but I am still struggling with header elements, and I am in desperate need for help.

The site is using the box model and is responsive;

Header area is 980px in width, 275px in height.

A YouTube video is linked, occupies 60% of the left width and takes the full height (275px)

I am struggling with the remaining 40%, in which I want:

At its bottom, a horizontal link box: height 75px, width 40% of the window, with 'Try the Offer' text.

Above the horizontal link two h1 lines on top of each other. Top h1 reads: Experience a Unique Offer.

Below h1 reads: Try it First.

At the top right corner, vertical flags for language links (e.g. US, France, Germany, etc.), all floating to the right.

I tried many attempts, but all failed. I would appreciate your help. Below html and css code.

<!DOCTYPE HTML>

<html>

<head>

initial-scale=1.0" />

<title><?php // Use a default page title if one wasn't provided...

if (isset($page_title)) {

echo $page_title;

} else {

echo 'Select From Our Amazing Producs!';

}

?></title>

</head>

<body>

</header>

<div>

</div>

</body>

</html>

@charset "UTF-8";

* {

margin: 0px;

padding: 0px;

}

body {

color: #575c7a;

line-height: 1.5em;

font-family: Arial;

font-size: 14px; /* base font*/

background: #515673 repeat-x 0px 0px;

}

.page {

max-width: 980px;

margin: 0px auto 0px auto;

position: relative;

background-color: #fff;

}

.home_page_header {

margin: 0px auto;

height: 275px;

}

header {

height: 275px;

background-size: 980px 275px;

background-color: #a6430a;

}

.mnvid { /*main video*/

width: 60%;

height: 275px;

margin: 0px;

display: inline;

vertical-align: middle;

}

dsonesuk · October 18, 2015

<!DOCTYPE html><html><head>  <title>Styling the article element</title>    <style>*{  margin: 0px;padding: 0px;}body {color: #575c7a;line-height: 1.5em;font-family: Arial;font-size: 14px;  /* base font*/background: #515673  repeat-x 0px 0px; } .page {max-width: 980px; margin: 0px auto 0px auto;  position: relative; background-color: #fff;} .home_page_header {margin: 0px auto;height: 275px;} header {height: 100%; /*275px;*/ background-size: 980px 275px; background-color: #a6430a;} .home_page_header aside { width: 40%; height: 100%; background-color: yellow; float: left;position:relative;}.home_page_header aside .bottom_link { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px;}.home_page_header aside h1 span {display: block;}.home_page_header aside .lang {float: right; padding: 0 10px;}.mnvid { /*main video*/width: 60%;height: 100%; /*275px;*/margin: 0px; float: right; vertical-align: middle; }   </style></head><body><!--Start of main page container-->     <div class="page">     <!--Start of main header-->    <div class="home_page_header"> <!--header of other pages is different -->        <header> <aside><div class="lang">flags here</div><h1>Experience a Unique Offer.<span>Try it First.</span></h1><div class="bottom_link">Try the Offer</div></aside>           <iframe class="mnvid" src="https://www.youtube-nocookie.com/embed/KSdk6poA4Ig?rel=0" frameborder="0" allowfullscreen></iframe>

Edited October 18, 2015 by dsonesuk

j.silver · October 19, 2015

Many thanks, dsonesuk, for your help. I learned a lot from it.

Sign In

Horizontal and Vertical Objects in a Header

Recommended Posts

j.silver

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

j.silver

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity