Search the Community
Showing results for tags 'img in headers'.
Found 1 result
-
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; }
