I have an H2 (id=cover) which I'd like to stay centered and higher up in a background image, but as the page size shrinks it eventually drops to the bottom of the image, then falls off of it on my mobile android phone. Any help would be appreciated. Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Johnson Landscaping</title>
<link rel="stylesheet" href="style.css">
</head>
<div id="container">
<header>
<h1>Johnson Landscaping</h1>
<nav>
<ul class="menu">
<li>home</li>
<li>contact us</li>
</ul>
</nav>
</header>
<div>
<div class="image">
<img src="images/background-backlight-blur-color-262713.jpg" alt="" />
<h2 id="cover"><span>Quality Garden Care on the North Shore</span></h2>
</div>
<h2>Services</h2>
<div class="Services">
<h4>Garden Maintenance</h4>
<img src="images/person-holding-a-green-plant-1072824.jpg" alt="person holding green
plant">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Garden Design</h4>
<img src="images/blade-of-grass-depth-of-field-environment-garden-580900.jpg" alt="blades of
grass">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Tree and Shrub Pruning</h4>
<img src="images/apple-tree-6035.jpg" alt="apple tree">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Pressure Washing</h4>
<img src="images/photography-of-bricks-covered-with-moss-1089280.jpg" alt="bricks
covered in moss">
<p>Enter Details</p>
</div>
</main>
</div>
<footer>
<nav>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</nav>
</footer>
</body>
</html>
and css to go with it
html {
background: #f7f7f7;
color: #7cae49;
font-family: 'garamond', sans-serif;
}
body {
background: white;
margin: 0 auto;
font-family: 'garamond', sans-serif;
color: rgb(49, 46, 46);
text-align: center;
}
h1 {
float: none;
display: inline-block;
color: #5c7e3a;
width: 100%;
font-size: 50px;
text-align: center;
}
nav, li {
display: inline-block;
}
header, footer {
background: #DAF7A6;
color: #7cae49;
border-radius: 10px;
}
footer {
text-align: center;
padding: 30px 20px;
}
li {
list-style: none;
line-height: 20px;
font-size: 40px;
padding-right: 20px;
padding-top: 5px;
}
.image {
position: relative;
height: 60;
width: 100%;
margin: 0 auto;
border-radius: 10px;
}
#cover {
position: absolute;
top: 200px;
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
display: flex, inline-block;
font-size: 20px;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #0e69e9;
}
h2 {
color: #7cae49;
text-align: center;
font-size: 30px;
}
.Services {
box-sizing: border-box;
width: 90%;
margin: 5px;
padding: 5px;
vertical-align: top;
text-align: center;
display: inline-block;
color: #7cae49;
}
img {
max-height: 60%;
max-width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
Thanks for looking. Cheers!
Try this.
inside your style.css in #cover, change the top value to 0px;
#cover {
position: absolute;
top: 0px;
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
display: flex, inline-block;
font-size: 20px;
}
Related
I'm not able to figure out how to "hide" the main body content behind my header on this site. It's still a work-in-progress. The header appears to be transparent, even when I set it to z-index:10 and position:fixed. Any help would be greatly appreciated.
https://gbears96.github.io/bigStart/
Here's the code:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Default value of background-color is transparent, it just wasn't noticeable until it overlaps with other elements, you have to give it another value if you want it not to be (i.e. add background-color: #fff on your header). See the snippet below:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fff;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Reference from w3schools.
I think it is very important to add to #Yong's answer that background-color does not inherit. Therefore the default background-color value for ALL elements is transparent regardless of parent background-color.
So setting your HTML element background-color to
html {
:
background-color: #fffcf6;
}
does not then set the body and all other enclosing elements to this color, they will all remain transparent.
The way to solve your problem is to change the value of the header background-color; as #Yong said it is defaulting to transparent when you run your code. Giving it any other value will solve it. E.g to have it same color as the rest of the page:
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fffcf6;
}
Here are some useful references from developer.mozilla and w3schools about the background-color property.
I have a little problem with my header i want this:
search bar to be flexible, and this means that if that orange buttons text becomes larger the search bar must resize so that buttonsdont go down who knows how to do it can you share your experience, and sorry form my English
HTML
<div class="navigation-holder">
<div id="top-navbar">
<div class="container">
<div class="col-lg-9 no-padding">
<input type="text" name="" class="top-navbar-search" placeholder="Поиск по предметам или по именам">
</div>
<div class="col-lg-3 no-padding">
<div class="top-navbar-links">
#if(Auth::check())
{{ Auth::user()->first_name }}
Выйти
#else
aefaefaefaefaefaefaefe
Зарегистрироваться
#endif
</div>
</div>
</div>
</div>
<nav id="navbar">
<div class="container">
<button class="navbar-toggle">
<span></span>
</button>
<ul class="navbar-nav">
<li>Обратная связь</li>
<li>О проекте</li>
<li>Рус</li>
<li>Узб</li>
<li>Eng</li>
</ul>
</div>
</nav>
</div>
#top-navbar{
min-height: 50px;
width: 100%;
background-color: #brand-blue;
.top-navbar-search{
width: 100%;
min-height: 50px;
padding: 0 70px 0 20px;
color: #fff;
background: #339dd1 url(../img/search.svg) no-repeat 97% 48%;
background-size: 22px;
font-size: 18px;
font-family: 'Light';
.placeholder({
color: #fff;
});
}
.top-navbar-links{
width: 100%;
text-align: center;
display: table-cell;
a{
padding: 0 10px;
font-family: 'Light';
color: #fff;
display: inline-block;
line-height: 50px;
font-size: 18px;
min-height: 50px;
float: left;
background-color: #brand-yellow;
.transition(background, 200ms, linear);
&:hover{
background-color: #d17a45;
}
}
}
}
#navbar{
background-color: #fff;
min-height: 70px;
width: 100%;
border-bottom: 1px solid #cbcbcb;
.navbar-brand{
width: 160px;
height: 41px;
background: url(../img/brand.svg) no-repeat center;
background-size: 100%;
display: inline-block;
margin-top: 16px;
}
.navbar-toggle{
width: 70px;
height: 70px;
float: right;
position: relative;
display: none;
span{
display: block;
width: 35px;
margin: 0 auto;
height: 4px;
background-color: #393939;
.transition(all, 200ms, linear);
&:before{
content: '';
top: 23px;
.bar;
}
&:after{
content: '';
bottom: 23px;
.bar;
}
}
&:hover{
span{
background-color: #brand-blue;
&:before, &:after{
background-color: #brand-blue;
}
}
}
}
.navbar-nav{
float: right;
display: inline-block;
line-height: 70px;
li{
display: inline-block;
&:first-child{
margin-right: 20px;
}
&:nth-child(3){
margin-left: 30px;
}
}
a{
display: block;
line-height: 70px;
color: #brand-black;
.transition(color, 100ms, linear);
&:hover{
color: #brand-blue;
}
}
}
}
Use bootstrap grid, an example:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:blue;"></div>
<div class="col-sm-7" style="background-color:lavenderblush;">Search</div>
<div class="col-sm-1" style="background-color:lavenderblush;">Button</div>
<div class="col-sm-2" style="background-color:blue;"></div>
</div>
</div>
</body>
</html>
P.S: below I have an answer with code how I would like to have it look like, but I do not think this is valid code?
I would like to have an interface(HTML5/CSS) that looks like MIRC fullscreen(see image below) and have searched all day even at stackoverflow
What I want is that the interface(GUI only) is fullscreen and that user(right) and chat window(left) have a scrollbar, but that the bottom bar where you type your message stays at the bottom.
Preferable it would only use CSS(but if javascript is needed I will allow it, but rather not) and it does not have to support any old browsers. I think this should be possible because mibbit
also has something that looks a lot like this.
I am wondering if there is any framework/library to help me create these kind of apps.
I have been toying around all day with CSS but can not get it to work and I think it is very easy for a CSS guru.
It was a lot of work(because I am junior CSS level), but this is what I could came up with:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
list-style-type: none;
}
#users li {
padding: 5px 10px;
height: 16px;
font-size: 16px;
cursor: pointer;
}
#messages li {
padding: 5px 10px;
height: auto;
font-size: 16px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
#message {
border-top: 1px inset;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="navigation">
<li>
<img class="img" src="" />
<span class="selected">
#Main
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Linus Torvalds
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Bill Gates
</span>
</li>
</div>
<div id="messages"></div>
</div>
<div id="users">
Alfred<br />
Linus Torvald<br />
Bill Gates<br />
Steve Jobs<br />
</div>
<div id="bottom">
<form action="">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</body>
</html>
Jsfiddle:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
list-style-type: none;
}
#users li {
padding: 5px 10px;
height: 16px;
font-size: 16px;
cursor: pointer;
}
#messages li {
padding: 5px 10px;
height: auto;
font-size: 16px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
#message {
border-top: 1px inset;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="navigation">
<li>
<img class="img" src="" />
<span class="selected">
#Main
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Linus Torvalds
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Bill Gates
</span>
</li>
</div>
<div id="messages"></div>
</div>
<div id="users">
Alfred<br />
Linus Torvald<br />
Bill Gates<br />
Steve Jobs<br />
</div>
<div id="bottom">
<form action="">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</body>
</html>
Also available on jsfiddle
P.S: Only tested thoroughly tested on Google Chrome(Version 47.0.2526.106 (64-bit Linux))
I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.
http://i.imgur.com/mFtXm.jpg here is a screenshot.
The areas marked in red are where the problems are. When I view the page in firefox it looks fine, in chrome there are tiny gaps, I don't deal with ie.
What is the correct way to size these divs such that each div will "connect" with other divs without leaving any gaps whenever the browser changes? something with jquery or js?
html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="header">
<h1>New York Tech Map</h1>
</div>
<div id="navlinks">
<div class="topnav">
About Us
</div>
<div class="topnav">
Contact Us
</div>
<div class="topnav">
Sign Up
</div>
<div class="topnav">
Help
</div>
</div>
<div id="sidebar">
</div>
<div id="map">
</div>
<div id="footer">
© 2012 NYC Tech Map
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F0F0F0;
}
a { text-decoration: none; color: grey; }
a:hover{ color: red; }
#header {
width: 100%;
height: 75px;
background: red;
margin-top: -21px;
}
#navlinks { float: right; width: 80%;}
.topnav {
width: 25%;
height: 25px;
float: left;
padding-top: 5px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-size: 15px;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 500px;
float: left;
background: blue;
}
#map {
height: 80.8%;
width: 80%;
float: right;
}
.
.popa:hover {
background: #D6D6D6;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-weight: bold;
padding-top: 5px;
color: grey;
}
it is better just resize dynamically, use js to get the window size then have that element adjust accordingly.