I am new to this so. It is probably the basic stuff...I have problem with IE, it does not render web page as chrome and FF does. Those three boxes, boxleft, boxcenter and boxright odes not appear in line. last one, box out seems like drops down just beneath boxcenter. I try to find the answer but no luck. here is the html and css. any kind of help are very welcome. Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstyle.css" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="header" class="container">
<div id="logo">
<img src="layout/img.png" width="415" height="90" alt="img" />
</div>
<!--END LOGO-->
<div id="mainmenu">
<ul>
<li>item 4</li>
<li>item 3</li>
<li>item 2</li>
<li>item 1</li>
<ul>
</div>
<!--END MAIN MENU-->
</div>
<!--END HEADER-->
<div id="mainmiddle" class="container"></div>
<!--END MAIN-MIDDLE SECTION-->
<div id="bottomsection" class="container">
<div id="bottomsectionName">
<p>PRODUCTS:</p>
</div>
<!-- END BOTTOM SECTION NAME-->
<div id="boxholder">
<div id="boxLeft">
<div class="label">
<p>
<a href="#">text
<a>
</p>
</div>
<!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div>
<!--END BOX LEFT-->
<div id="boxRight">
<div class="label">
<p>exclusive</p>
</div><!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div><!--END BOX RIGHT-->
<div id="boxCenter">
<div class="label">
<p>frost</p>
</div>
<!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div>
<!--END BOX CENTER-->
</div>
<!--END BOX HOLDER-->
</div>
<!-- END BOTTOM SECTION-->
<div id="info" class="container">
<div id="infoboxLeft" class="infotext"></div>
<!-- END INFO BOX LEFT-->
<div id="infoboxRight" class="infotext">
<p>info:<br />Address: </p>
</div>
<!-- END INFO BOX RIGHT-->
</div>
<!--END INFO SECTION-->
<div id="footer">
<p>Copyright: </p>
</div>
<!--END FOOTER-->
</body>
</html>
CSS
html, body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
}
.container
{
margin: 0 auto;
width: 960px;
}
#header
{
background-color: #ffffff;
height: 180px;
overflow: hidden;
}
#logo
{
height: 100px;
margin: 0px, 0px, 0px, 0px;
}
#logo img
{
padding-top: 10px;
}
#mainmenu
{
height: 24px;
margin-top: 60px;
}
#mainmenu ul
{
list-style: none;
}
#mainmenu ul li
{
display: inline;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-top: -2px;
padding-left: 10px;
text-transform: uppercase;
}
#mainmenu ul li a
{
color: #c93159;
text-decoration: none;
}
#mainmenu ul li a:hover
{
text-decoration: none;
}
#mainmiddle
{
background: url(layout/norway.jpg) no-repeat;
height: 400px;
}
#bottomsection
{
height: 185px;
margin-top: 0px;
padding-top: 0px;
}
#bottomsectionName
{
height: 28px;
overflow: hidden;
}
#bottomsectionName p
{
color: 000000;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-top: 3px;
}
#boxholder
{
height: 157px;
}
.label
{
background-color: #c93159;
height: 24px;
margin-left: 104px;
margin-top: 109px;
position: absolute;
width: 208px;
z-index: 10;
}
.label p
{
color: #ffffff;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-right: 7px;
margin-top: 0px;
}
.label p a
{
color: #ffffff;
text-decoration: none;
text-transform: lowercase;
}
#boxLeft
{
float: left;
height: 157px;
width: 312px;
}
#boxCenter
{
height: 157px;
margin-left: 324px;
width: 312px;
}
#boxRight
{
float: right;
height: 157px;
width: 312px;
}
.infotext
{
font-family: Verdana;
font-size: 0.667em;
}
#info
{
height: 150px;
margin: 0px, 0px,0px,0px;
overflow: hidden;
}
#infoboxLeft
{
float: left;
height: 150px;
width: 480px;
}
#infoboxRight
{
float: right;
height: 150px;
width: 480px;
}
#infoboxRight p
{
float: right;
margin-right: 5px;
margin-top: 110px;
text-align: right;
}
#footer
{
overflow: hidden;
padding: 0px 0px 10px 0px;
}
#footer p
{
font-family: Verdana;
font-size: 0.667em;
text-align: center;
}
Your going to have to write IE specific CSS. My suggestion would be to do it using conditional comments like this:
<!--[if IE]>
.container
{
margin: 0 auto;
width: 960px;
}
#header
{
background-color: #ffffff;
height: 180px;
overflow: hidden;
}
<![endif]-->
<!--[if IE 6]>
My page's CSS goes here
<![endif]-->
<!--[if gte IE 8]>
My page's CSS goes here
<![endif]-->
<!--[if lt IE 9]>
My page's CSS goes here
<![endif]-->
You can use these types of if statements to set your CSS for specific versions of IE. You'll have to adjust the values in each one and test in IE to get it to look how you want it. This will not affect how it appears in other browsers. Also you don't have to put all of your page's CSS inside these comments, just what isn't displaying correctly in IE.
Related
I'm trying to get my Nav menu text to sit beside one another beside the logo like a real website would have.
I made a mockup of the side for reference linked below for viewing purposes.
I've been literally stressing myself out over this simply mundane task, messing with margins, padding, floating, etc and no matter what I do to any of my elements either NOTHING happens or a whole bunch of shit will start flying all over the place and I can't even understand why.
My mockup Preview
How mine looks at present
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike{
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float:left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu{
margin-top:15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.search{
float: left;
}
.SearchGlass{
margin: 30px 900px;
float: left;
}
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
padding-bottom: 42px;
float:left;
text-align: left;
}
h1{
}
/* Class For Articles*/
.article{
float: left;
width: 100%;
margin-bottom: 72px
}
.article img{
width: 400px;
height: 225px;
margin-right: 1%
}
.article h1{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 22.5px;
}
.article p{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 12px;
}
footer{
display: block;
width: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Display your list items inline block.
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike {
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float: left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu {
margin-top: 15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.navmenu li {
display: inline-block;
}
.search {
float: left;
}
.SearchGlass {
margin: 30px 900px;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Either you're not posting the needed code for the solution or you have some indentation erros in your html.
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike"> <--- open never closed
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</header> <--- this was after div that goes next
</div>
A simple way to do this would be to split your header into 3 columns and then place your logo, navigation and search fields into each of those sections.
I have included an example below:
.clearfix {
overflow: auto;
}
.header__section {
float: left;
width: 30%;
margin-right: 5%;
}
.header__section:last-child {
margin-right: 0;
}
<header class="header clearfix">
<section class="header__section">
Logo
</section>
<section class="header__section">
Nav
</section>
<section class="header__section">
Search
</section>
</header>
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
I face the problem that when I put float to my #middle-content. The float doesn't display. Moreover, this removes its background too. I want the middle-content to be at the right of #leftcontent. Help please!!
<body>
<div id="page">
<div id="banner">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" /> </div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div> <!--banner-->
<div id="maincontent">
<div id="leftcontent">
<div class="navigation">
Home
</div><!--navigation-->
<div class="navigation">
About Us
</div><!--navigation-->
<div class="navigation">
Products
</div><!--navigation-->
<div class="navigation">
Contact
</div><!--navigation-->
<div class="navigation">
ABOUT US
</div><!--navigation-->
</div> <!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div> <!--middle-content-->
</div> <!--maincontent-->
</div> <!--page-->
</body>
And this is my CSS
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align:center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
#leftcontent {
width: 150px;
display: table;
}
#middle-content {
width: 400px;
float: left;
}
You need to float the #leftcontent, and to fix the background, add a clear fix
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align: center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
.clear:after {
content: '';
display: block;
clear: left;
height: 0;
}
#leftcontent {
width: 150px;
display: table;
float: left;
}
#middle-content {
padding-top: 1px;
width: 400px;
float: left;
}
<div id="page">
<div id="banner" class="clear">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
<div id="maincontent" class="clear">
<div id="leftcontent">
<div class="navigation">
Home
</div>
<!--navigation-->
<div class="navigation">
About Us
</div>
<!--navigation-->
<div class="navigation">
Products
</div>
<!--navigation-->
<div class="navigation">
Contact
</div>
<!--navigation-->
<div class="navigation">
ABOUT US
</div>
<!--navigation-->
</div>
<!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div>
<!--middle-content-->
</div>
<!--maincontent-->
</div>
<!--page-->
I have also added 1px top padding to middle-content to stop the h2 margin causing a gap above maincontent
Update
Sounds like your dreamweaver does not support pseudo elements, see if this fixes your clear problem:
change css .clear:after to:
.clear {
display:block;
height:0;
overflow:hidden;
clear:both;
}
and then in the html above, find the divs with the clear class and remove the class, then at the end of those divs, add a physical div to see if it fixes your problem:
<div class="clear"></div>
try this
#leftcontent {
width: 150px;
float:left;
}
#middle-content {
width: 400px;
float: left;
}
also I have added
#maincontent:before,
#maincontent:after{
clear:both;
display:table;
content:"";
}
to fix the background color
working code is here
For your problems, i have the following solutions:
#maincontent can't show its background because its height is 0. You can fix it :
#maincontent {
background-color: #A6D2FF;
height:250px;
}
#leftcontent must have float:left so the middle-content to be at the right of #leftcontent
#leftcontent {
width: 150px;
display: table;
float: left;
}
I've been racking my brains to to figure out where I went wrong. The bottom div stretches all the way right will everything stays center page but the left side won't stretch full. Also when I resize the window smaller all the sub-divs collapse. Ideas???
https://jsfiddle.net/g506gk51/
Thank you in advance!
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
width: 100%;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
position:absolute;
margin-top: 10%;
margin-bottom: 10%;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#Header {
float:left;
padding-left: 75px;
}
.circlefooter {
width: 50px;
height: 50px;
float: left;
margin: 25px 25px 0 175px;
}
.circlefooter p {
padding-left: 75px;
width: 150px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
</style>
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="Header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
I try to understand what you meant, I got this from your code.
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
html{
height: 100%;
}
body {
position: relative;
min-height: 100%;
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
display: block;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#topcontainer:after {
content: "";
clear: both;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
margin-top: 10%;
margin-bottom: 10%;
display: table;
table-layout: fixed;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
display: block;
float: left;
}
.circlefooter {
display: table-cell;
padding: 15px;
vertical-align: middle;
}
.circlefooter p {
margin: 0;
padding-left: 75px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
I've done some searching and I just can't seem to find out what's wrong. My main content keeps overlapping the banner. I tried using the position and overflow hidden and auto but I still can't seem to get it right.
Here's the html
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
</div></div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer"></div>
</p>
</body>
Here's the CSS:
body {
background: #F9F9F9; margin: 0 auto; padding: 0; font: color: #FFFFFF; text-align: center}
a {
color: #2b2bf6;}
#header {
float: left;
position: fixed;
Align: left;
clear: both;
width: 0x;
max-width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background:
#FFFFFF;
z-index: 2;}
#Navigation {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
background: #000000;
Font-size: 18px;
float: right;
position: fixed;
z-index: 1;
display: incline-block;
}
#Navigation Container {
WIDTH: 100%;
float: right;
background: #282828;
position: fixed;
z-index: 0;}
#Banner {
height: 100%;
width: 100%;
margin: auto;
padding-top: 70px}
#wrapper {
width: 100%;
overflow: hidden; }
#container {
width: 100%;
margin: 0 auto; }
#banner-img {
width: 100%;}
#dropdown {
position: relative;
overflow: hidden; }
#MainContent {
margin-top: -270px;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 100px;
text-align: left;}
#footer {
width: 100%;
height: 120px;
background: #282828;
padding: 0px; }
#navwrap {
width: 160px;
height: 70px;
Float: right;
display: incline-block;
z-index: 4; }
#Searchbar {
float: left;
padding: 20px;
}
ul{
padding: 0;
list-style: none;
height: 70px;
}
ul li{
float: right;
width: 110px;
text-align: center;
line-height: 21px;
}
ul li a{
display: block;
height: px;
padding: 5px 10px;
color: #333;
background: #282828;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #3d3d3d;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
}
Please help.
There are a few discrepancies in the HTML posted by you.
I have corrected the same. Can you please reuse the HTML and check.
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer">
</div>
</p>
</body>
</html>