Jump to content

Horizontal and Vertical Objects in a Header


j.silver
 Share

Recommended Posts

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>
<meta http-equiv="Content-Type" content = "text/html; charset=UTF-8" />
<meta name = "viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0,
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>
<link rel = "stylesheet" type="text/css" href="css/screen_layout_large.css" />
</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>
<iframe class = "mnvid" src="https://www.youtube-nocookie.com/embed/KSdk6poA4Ig?rel=0" frameborder="0" allowfullscreen></iframe>
</header>
<div>
</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;
}

 

Link to comment
Share on other sites

<!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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...