I am trying to get this webpage to show with navigation buttons on the left side of the page. My webpage works great from the previous homework assignment but since I have updated my css sheet now the page displays all messed up. Any help would be awesome!
* {
box-sizing: border-box;
}
body {
background-color: #3f2860;
color: #3f2860;
font-family: Veranda, Arial, sans-serif;
}
header {
background-color: #9bc1c2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
float: left;
width: 160px;
padding: 1em;
}
nav a {
text-decoration: none;
font-weight: bold;
padding: 1em;
display: block;
text-align: center;
border: 3px outset #CCCCCC;
margin-bottom: 1em;
}
nav a:link {
color: #3F2860;
}
nav a:visited {
color: #497777;
}
nav a:hover {
color: #A26100;
border: 3px inset #333333;
}
nav ul {
list-style-type: none;
padding-left: 0
}
main {
margin-left: 170px;
padding-top: 1em;
padding: 2em;
display: block;
}
floatleft {
float: left;
margin-right: 4em;
}
.studio {
font-style: italic;
}
.company {
font-style: italic;
}
footer {
background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
clear {
clear: both;
}
#wrapper {
background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px;
width: 80%;
margin-right: auto;
margin-left: auto;
}
header,
nav,
main,
footer {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
<!-- [if it IE 9]>
<script src="html5shiv.js>
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li>Home</li>;
<li>Classes</li>;
<li>Schedule</li>;
<li>Contact</li>;
</ul>
</nav>
<main>
<img class="floatleft" src="yogadoor2.jpg" alt="Door to yoga studio" width="220" height="370">
<h2>Find Your Inner Light</h2>
<p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicated instructions can develop a practice to meet
your needs. Let your inner light shine at the <span class="company">Path Of Light Yoga Studio</span>.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class="clear">
<span class="company">Path of Light Yoga Studio</span><br> 612 Serenity Way<br> El Dorado, CA 96162<br><br> 888-555-5555
<br><br>
</div>
</main>
<footer>
Copyright © 2016 Path of Light Yoga<br>
Brittany#tracy.com<br><br>
</footer>
</div>
</body>
</html>
Link to what the page is supposed to look like
Related
I'm writing a simple code to design a plain header with a logo and navigation menu inside it. I want my logo to be on left and navigation menu to be on right side. It looks like a child problem but I am unable to resolve this issue.
I have tried to make all possible tweaking in my IDE as well as Chrome Inspection but couldn't figure it out.
My Index.html code is :
<!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>PSD to Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- body content -->
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<a href="#" class="logo">
<img src="img/logo.png" alt="logo" />
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- javascript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
and style.css is
header {
color: #fff;
height: 100px;
line-height: 100px;
}
header a.logo{
float: left;
margin-right:10px;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
I have a reset.css also
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1
{
font-size: 36px;
color: #555;
font-weight: bold;
}
h2
{
font-size: 30px;
color: #555;
font-weight: bold;
}
h3
{
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary{
color: #e74c3c;
}
.primary-bg{
background-color: #e74c3c;
}
.secondary-dark-blue
{
color: #34495e;
}
.secondary-dark-blue-bg
{
background-color: #34495e;
}
.secondary-sky-blue
{
color: #2d82d8;
}
.secondary-sky-blue-bg
{
background-color: #2d82d8;
}
ul{
list-style: none;
}
ul li {
display: inline-block;
}
I am expecting the nav menu to float on right but it is not working.
You don't have a menu class defined. Are you trying to use nav if so it should be
nav {float:right;}
I can see in your code that you are defining class .menu in your css but you are not using it anywhere in your html.
And you can do it in better way by using flexbox.
.row{
display: flex;
justify-content: between;
}
It not that much heard as i have review your code you have to add simple one class to your nav tag and that is nav class="pull-right" use class pull-right, it is default bootstrap class.
I am here to answer my own question. I found this piece of code in default bootstrap file
.row {
display: flex;}
I changed it to display:block and it is solved.
I respect all the answers but if you using Bootstrap 4 just give ml-auto class to nav it will solve the issue.
You must use col-md-12 inside the row. I have used flex property for nav and margin-left:auto to align the menu right side.
Optionally you can use floating method with clearfix to align the menu right side.
* {
box-sizing: border-box;
position: relative;
}
header {
color: #fff;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
header a.logo {
display: inline-block;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
/** second css **/
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1 {
font-size: 36px;
color: #555;
font-weight: bold;
}
h2 {
font-size: 30px;
color: #555;
font-weight: bold;
}
h3 {
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary {
color: #e74c3c;
}
.primary-bg {
background-color: #e74c3c;
}
.secondary-dark-blue {
color: #34495e;
}
.secondary-dark-blue-bg {
background-color: #34495e;
}
.secondary-sky-blue {
color: #2d82d8;
}
.secondary-sky-blue-bg {
background-color: #2d82d8;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
.nav-wrapper {
margin-left: auto;
}
nav {
display: flex !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav>
<a href="#" class="logo">
<img src="https://via.placeholder.com/250x150" alt="logo" />
</a>
<div class="nav-wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
Either
.row {
display: block;
justify-content: between;
}
in your reset.css or style.css
or
<nav class="ml-auto">
in your index.html will work fine.
I am having a problem getting the text on my page to start next to a picture but it just keeps displaying underneath of it. I am not sure where I have gone wrong. I know you will not be able to load the image since its on my computer but it is located where it says yoga door and I need my text to start right next to it. Anything would be helpful. I will include a screen shot of what my page is supposed to look like.
header, nav, main, footer { display: block; }
* { box-sizing: border-box; }
body { background-color: #3f2860;
color: #3f2860;
font-family: Veranda, Arial, sans-serif; }
header { background-color: #9bc1c2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px; }
h1 { padding-top: 50px;
padding-left: 2em; }
nav { font-weight: bold;
float: left;
width: 160px;
padding: 1em; }
nav a { text-decoration: none;
font-weight: bold;
padding: 1em;
display: block;
text-align: center;
border: 3px outset #CCCCCC;
margin-botton: 1em;}
nav a:link { color: #497777; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100;
border: 3px inset #333333; }
nav ul { list-style-type: none;
padding-left: 0; }
main { padding-right: 2em;
margin-left: 170px;
padding-top: 1em;
display: block; }
floatleft { float: left;
margin-right: 4em; }
.studio { font-style: italic; }
.company{ font-style: italic; }
footer { background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em; }
clear { clear: both; }
#wrapper { background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px;
width: 80%;
margin-right: auto;
margin-left: auto; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
<!-- [if it IE 9]>
<script src="html5shiv.js>
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<main>
<img class="floatleft" src="yogadoor.jpg" alt="yoga door" width="225" height="300">
<h2>Find Your Inner Light</h2>
<p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice
in a tranquil, peaceful environment. Whether you are new to
yoga or an experienced practitioner, our dedicated instructions
can develop a practice to meet your needs. Let your inner light
shine at the <span class="company">Path Of Light Yoga Studio</span>.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div>
<span class="company">Path of Light Yoga Studio</span><br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br>
</div>
</main>
<footer>
Copyright © 2016 Path of Light Yoga<br>
Brittany#tracy.com<br><br>
</footer>
</div>
</body>
</html>
I believe you were just missing a "." for your floatleft class. So, your CSS would look like:
header, nav, main, footer { display: block; }
* { box-sizing: border-box; }
body { background-color: #3f2860;
color: #3f2860;
font-family: Veranda, Arial, sans-serif; }
header { background-color: #9bc1c2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px; }
h1 { padding-top: 50px;
padding-left: 2em; }
nav { font-weight: bold;
float: left;
width: 160px;
padding: 1em; }
nav a { text-decoration: none;
font-weight: bold;
padding: 1em;
display: block;
text-align: center;
border: 3px outset #CCCCCC;
margin-botton: 1em;}
nav a:link { color: #497777; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100;
border: 3px inset #333333; }
nav ul { list-style-type: none;
padding-left: 0; }
main { padding-right: 2em;
margin-left: 170px;
padding-top: 1em;
display: block; }
/*This was missing -->*/ .floatleft { float: left;
margin-right: 4em; }
.studio { font-style: italic; }
.company{ font-style: italic; }
footer { background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em; }
clear { clear: both; }
#wrapper { background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px;
width: 80%;
margin-right: auto;
margin-left: auto; }
You're using block level elements (p and h*), just change it or add display:inline to them, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
<!-- [if it IE 9]>
<script src="html5shiv.js>
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<main>
<img class="floatleft" src="yogadoor.jpg" alt="yoga door" width="225" height="300">
<h2 style="display:inline">Find Your Inner Light</h2>
<p style="display:inline"><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice
in a tranquil, peaceful environment. Whether you are new to
yoga or an experienced practitioner, our dedicated instructions
can develop a practice to meet your needs. Let your inner light
shine at the <span class="company">Path Of Light Yoga Studio</span>.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div>
<span class="company">Path of Light Yoga Studio</span><br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br>
</div>
</main>
<footer>
Copyright © 2016 Path of Light Yoga<br>
Brittany#tracy.com<br><br>
</footer>
</div>
</body>
</html>
Yes, you were missing a dot(.) in floatleft class.
And also I have added space for your Address.
header,
nav,
main,
footer {
display: block;
}
* {
box-sizing: border-box;
}
body {
background-color: #3f2860;
color: #3f2860;
font-family: Veranda, Arial, sans-serif;
}
header {
background-color: #9bc1c2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
float: left;
width: 160px;
padding: 1em;
}
nav a {
text-decoration: none;
font-weight: bold;
padding: 1em;
display: block;
text-align: center;
border: 3px outset #CCCCCC;
margin-botton: 1em;
}
nav a:link {
color: #497777;
}
nav a:visited {
color: #497777;
}
nav a:hover {
color: #A26100;
border: 3px inset #333333;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
main {
padding-right: 2em;
margin-left: 170px;
padding-top: 1em;
display: block;
}
.floatleft {
float: left;
margin-right: 4em;
}
.studio {
font-style: italic;
}
.company {
font-style: italic;
}
footer {
background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
clear {
clear: both;
}
#wrapper {
background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px;
width: 80%;
margin-right: auto;
margin-left: auto;
}
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<main>
<img class="floatleft" src="https://img00.deviantart.net/acf3/i/2013/125/7/7/tegoshi_yuuya___portray_by_lightkataomi-d648nyj.jpg" alt="yoga door" width="225" height="300">
<h2>Find Your Inner Light</h2>
<p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicated instructions can develop a practice to meet
your needs. Let your inner light shine at the <span class="company">Path Of Light Yoga Studio</span>.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<br><br><br><br><br>
<div class='address'>
<span class="company">Path of Light Yoga Studio</span><br> 612 Serenity Way<br> El Dorado, CA 96162<br><br> 888-555-5555
<br><br>
</div>
</main>
<footer>
Copyright © 2016 Path of Light Yoga<br>
Brittany#tracy.com<br><br>
</footer>
</div>
</body>
I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!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="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" 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>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_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_t{
/* Add something here */
}
.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;
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, img{
display: block;
width: 100%;
}
/* 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;
}
Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
You need to add margin:0px and padding:0px to your body CSS
so:
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin:0px;
padding:0px;
}
Here's my issue and I'll do my best to be clear here--
I have a simple website laid out in complete CSS using an external stylesheet.
I have a main container holding all of the elements for the website content; however, they all seem to be working except for the one that holds the actual page text and the businessbox. Right now, it's show the main containers background color (green) instead of what it should be (white). I'm positive it is something simple that I overlooked and will probably kick myself later, but thought I'd ask for a second pair of eyes.
Here is what I'm getting and what it should look like. If I'm having problems with this one container, hopefully programming the 3 vertical columns won't be an issue!
SCREENSHOT:
My stylesheet (style.css):
#charset "UTF-8";
/* CSS Document */
body {
background: #88b488;
margin: 3%;
font-family: Arial, Helvetica, sans-serif;
}
#container {
background: #006200;
width: 1020px;
margin: 0 auto;
}
#header {
background-image: url(img/BS_header.jpg);
background-repeat: no-repeat;
background-position:center;
width: 1020px;
height: 322px;
}
<!-- MENU ITEMS -->
#menu {
background: #25235b;
width: 100%;
z-index: 2;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
margin-top: 15px;
margin-right: 5px;
}
#menu ul li{
padding: 5px;
position: relative;
float: left;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #006100;
}
#menu ul ul {
position: absolute;
margin-top: -1px;
right: 0px;
white-space: nowrap;
visibility: hidden;
}
#menu ul li:hover ul li{
visibility: visible;
color: #ffffff;
background-color: #afafaf;
padding: 0px;
}
<!-- CONTENT -->
#cbox{
width: 1020px;
background-color: #ffffff;
background-image:url(img/content_grad.jpg);
background-repeat: repeat-x;
}
#businessbox {
background-color: #006200;
width: 620px;
height: auto;
border-top: 3px solid #afafaf;
margin-top: 30px;
padding: 10px;
margin: 30px auto 0px;
}
.businesstitle {
text-align:center;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
font-style:italic;
}
.businesstext {
color: #ffffff;
font-size: 14px;
}
#footer {
font-size: 10px;
text-transform: uppercase;
color: #fff;
text-align: center;
padding: 10px;
background: #006100;
}
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Buy Local</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Hot Deals</li>
<li>Sign Up!</li>
<li>Resources
<ul>
<li>Events</li>
</ul>
</li>
</ul>
</div> <!--end of menu-->
</div> <!--end of header-->
<div id="cbox">
<div id="businessbox">
<div class="businesstitle">Our BUSINESS OF THE MONTH:</div><br />
<img src="#" width="150" height="90" style="float: left; padding-right: 10px;"/>
<div class="businesstext">You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.</div>
</div> <!--end of businessbox-->
</div> <!--end of cbox-->
<div id="footer">
2013 © Buy Local
</div><!--end of footer-->
</div><!--end of container-->
</body>
</html>
You've got HTML comments in your CSS. The browser is skipping rendering the line next to it so your #cbox and #menu styles are never applied. Remove the <!-- MENU ITEMS --> and <!-- CONTENT --> comments and this should work fine.
See this fiddle for that in action.
OP,
Why are you doing this: <img src="#" ... ?
Also, are any of your background-image urls resolving?
Like I said, it was the obvious--used the wrong commenting format and it caused the #cbox attribute to not function correctly.
Thanks for taking your time to help me with my silly problem!
Where you use image or background-image there use overflow: hidden; height: 1%; i think will solve your problem.
I'm having trouble with a background div cutting off randomly in Internet explorer...
Here is how it should look like, taken from a webkit/chromium browser..
Here is how Internet Explorer thinks it should look like...
The web page can be found at http://beta.surrealholidays.com.
any feedback on how to fix this would be appreciated.
HTML Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="/css/alt.css" rel="stylesheet" type="text/css">
<meta name="robots" content="all">
<meta name="author" content="surrealholidays.com">
<meta name="robots" content="index,follow">
<meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<link rel="shortcut icon" href="http://www.surrealholidays.com/images/logo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script src="/js/flash.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
<title>Welcome to Surreal Holidays</title>
</head>
<body class="oneColFixCtr">
<div id="bannerph">
<div id="bannerint">
<div id="logoph" align="left">
<p><img src="/images/logos/newlogo.png" width="204" height="99" alt="Site Logo"></p>
</div>
<div id="callus" align="right">
<p><br>
Call Us:</p>
<h1>0845 003 5043</h1></div>
<p> </p>
</div>
</div>
<div id="page">
<div id="links">
Homepage Luxury Destinations Private Tours Terms & Conditions Enquire News Contact Us</div>
<div id="ct">
<div id="navig">
<div class="c2 c1" id="navi_direc">
<div align="left">Homepage ></div>
</div>
<div id="navi_newsl"> Subscribe to our Latest Offers</div>
</div>
<div id="img">
<p><img src="/images/mainstory.jpg" width="995" height="400"> </p>
</div>
<div id="content">
<div id="hp_welcome">
<h2 align="left">Private Luxury Escorted Tours in Thailand </h2>
<p align="left"> </p>
<p align="left" class="c2"><strong>At Surreal Holidays, you can really feel the passion for Thailand. From the first moment you contact our experienced team, you will be amazed by the in-depth local knowledge and deep love of the country and its people that you encounter. Not surprising! Some of us were born and raised in Thailand before moving to the UK. You will find we have a unique ability to understand how travellers from the UK can experience the best Thailand has to offer. No ordinary travel company, Surreal Holidays can tailor a holiday especially for you. Along the way, your experience will be enhanced by our high levels of customer service and thoughtful personal touches.</strong></p>
<p class="c2"> </p>
<h2 align="left" class="c3"><strong>Bespoke Holidays to Thailand</strong></h2>
<p align="left" class="c2"></p>
<p align="left" class="c2"><strong>Our founder's inspiration: "..like you, when I travel, I use all my senses to enhance the experience. This often leads to a "surreal" feeling, as though the holiday is a dream like state where the strange and bizarre juxtaposition with the calm and beautiful. Nowhere epitomises this more than Thailand, my homeland. Whether you are looking for an inspirational island hopping itinerary or romantic wedding and honeymoon locations, soft adventure activities or cultural experiences, you need look no further. Thailand offers much more than just a place to relax on a beach. You can discover unique flora and fauna, stunning marine parks, and breathtaking scenery at every turn. Indeed, there really is something for everyone in our Amazing Thailand."... Runci Weeden</strong></p>
<p align="left" class="c2"> </p>
<h2 align="left" class="c3"><strong>Unique Holidays to Thailand</strong></h2>
<p align="left" class="c2"></p>
<p align="left" class="c2"><strong>To find out more information on our Escorted Tour Holidays, including Nature Tours, Cultural Tours or Adventure Tours to Thailand, call 0845 003 5043 and speak to our friendly team.</strong></p>
<p align="left" class="c2"> </p>
</div>
<div id="col2">
<div id="hp_ftcol2off">
<h3 align="center"><strong>Our Latest Offers</strong></h3>
<p align="center"> </p>
<p align="center">
<h3>Offers Coming Soon!</h3>
</p>
<p align="center"> </p>
<h3 align="center">Layana Resort and Spa<br>
From £89 pppn
</h3>
<p> </p>
</div>
<div id="hp_ftcol2foll">
<h3>Follow Us</h3>
<p align="center" class="c2"><img src="/images/social_icons/facebook.png" alt="Find us on Facebook" width="64" height="64" border="0"><img src="/images/social_icons/twitter.png" alt="Follow us on Twitter" width="64" height="64" border="0"><img src="/images/social_icons/google.png" alt="Find us on Google Plus" width="64" height="64" border="0"><img src="/images/social_icons/youtube.png" alt="Watch us on Youtube" width="64" height="64" border="0"><img src="/images/social_icons/vimeo.png" alt="Watch us on Vimeo" width="64" height="64" border="0"><br>
<br>
</p>
</div>
<div id="hp_ftcol2news">
<h3><strong>Latest News</strong></h3>
<h3>20 March 2012</h3>
<h3><u><strong>Welcome To Our New Website!</strong></u>
<br>
We have now launched our brand new website, for an improved compatability for Tablet Devices, as well as a much faster loading speed for a enhanced browsing experience. For more information about this update, <br>
<u>Click Here</u>.</h3>
<p> </p>
<p align="center" class="c2"><br>
<br>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="f_tr">
<br>
Tel: 0845 003 5043 (Local Rates from a BT Landline) , 01628 685 550<br>
<strong>© Surreal Holidays Ltd. 2009-2012 All Rights Reserved.</strong><br>
<div id="f_php">
<div id="f_ph1"><img src="/images/logos/logo-amazing.png" width="145" height="45" alt="Thailand"></div>
<div id="f_ph2">
<p>Surreal Holidays is the Trading Name of Surreal Holidays Ltd. Company Number: 06690344<br>
Disclaimer | Privacy Policy | Copyright</p>
</div>
<div id="f_ph3">
<img src="/images/logos/logo-atol.png" width="45" height="45" alt="A"><img src="/images/logos/logo-atta.png" width="45" height="45" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</div>
</div>
</div> <!-- Closing Tags For #Footer -->
</div>
</body>
</html>
And here is the stylesheet:
#charset "utf-8";
/* CSS Document */
a:link {
color: #fff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
color: #fff;
}
a:active {
text-decoration: none;
color: #fff;
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background: url(/images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page {
width:995px;
margin: 0 auto;
padding: 0px;
}
#ct {
background-image:url(/images/bg.png);
overflow:visible;
}
#bannerph {
width: 100%;
background-image:url(/images/banner.png)
}
#bannerint {
width: 995px;
height: 140px;
padding: 10px;
margin: 0 auto;
}
#logoph {
width: 300px;
float: left;
padding: 10px;
}
#callus {
width: 500px;
float: right;
}
#links {
background-image: url(/images/logos/li.jpg);
background-repeat: repeat-x;
color: #fff;
vertical-align: middle;
padding: 10px;
margin-bottom: -2px;
}
#linkblock{
padding: 10px;
}
#navig {
height: 30px;
width: 995px;
padding: 10px;
}
#navi_direc{
float:left;
width: 500px;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
}
#navi_direc a {
color: #000
}
#navi_newsl{
float: right;
width: 449px;
font-size: 12px;
}
#content {
height: auto;
background-image: url(/images/mainbggrad.jpg)
font-size: 12px;
overflow:hidden;
}
#content h2 {
font-size: 18px;
color: #7d6543;
font-weight: bold;
line-height: 22px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
}
#content h3 {
font-size: 14px;
font-weight: normal;
color: #fff;
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#content h4 {
font-size: 13px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#content h5 {
margin: 0px;
font-size: 12px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
padding-left: 10px;
padding-right: 10px;
}
#col2 {
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 5px;
font-size: 12px;
color: #FFF;
}
#content p {
line-height: normal;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
font-size: 12px;
color: #000;
}
#hp_welcome{
width: 550px;
float:left;
padding: 10 px;
color: #7d6543;
}
#hp_ftcol2off {
width:380px;
float:right;
margin: 10px 10px 0 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
}
#hp_ftcol2news {
width:380px;
float:right;
margin: 10px 10px 10px 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
color: #FFF;
}
#hp_ftcol2foll {
width:380px;
float:right;
margin: 10px 10px 10px 10px;
background-image: url(/images/logos/news.jpg);
background-repeat: repeat-y;
border-radius: 10px;
color: #FFF;
}
#hp_ftcol2off table tr td {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
#container_hp{
width: 995px;
height: auto;
overflow:auto;
}
#f_tr{
height:auto;
}
#f_php{
width: 995px;
height: 60px;
}
#f_ph1{
width:325px;
float:left;
}
#f_ph2{
width:340px;
float:left;
}
#f_ph3{
width:325px;
float:left;
}
#footer {
font-size: 12px;
color: #fff;
background-image: url(/images/logos/ftr.jpg);
background-repeat: repeat-x;
height: 150px;
padding-bottom: -5px;
}
#callus {
padding-right: 30px;
}
#navi_newsl a:link {
color: #000;
text-decoration: none;
}
#navi_newsl a:visited {
text-decoration: none;
color: #000;
}
#navi_newsl a:hover {
text-decoration: underline;
color: #000;
}
#navi_newsl a:active {
text-decoration: none;
color: #000;
}
.oneColFixCtr #bannerint #callus h1 {
color: #7d6543;
}
.oneColFixCtr #bannerint #callus p {
color: #7d6543;
}
#warning {
background-image:url(/images/warning%20bar.png);
height: 50px;
background-repeat:no-repeat;
}
#intwarn {
margin: 13px;
}
#intwarn p {
color: #fff
}
#warning #intwarn p {
font-size: 20px;
}
.oneColFixCtr #page #content table {
text-align: left;
font-size: 12px;
}
.oneColFixCtr #page #content #col2 #hp_ftcol2news {
color: #FFF;
}
.oneColFixCtr #page #content #col2 #hp_ftcol2news p b {
color: #FFF;
text-decoration: underline;
}
If anyone has suggestions on how I can stop these divs cutting off prematurely (bannerph and ct) I would be extremely thankful.
The default value for a div overflow is visible so declaring this in the CSS wouldn't have any effect unless you were overriding it from elsewhere.
Try using overflow: hidden; on #ct and #col2 as this should clear the floating column on the right.
It would help to know the exact version of the ie browser that is showing this issue. I tested the site in ie 7 and firefox and could not replicate the issue. in ie7 the div is not cut off, but you also do not have opacity on it as well. I would suggest elaborating on the details a little bit, because it could be a number of compatibility issues you are having. All the comments and answers so far have been guesses since we do not have all the information needed to determine the root cause.