In HTML5 & CSS3, The logo needs to float to the left top corner & the list of items/menu need to float to the right top corner.
In the output here, the logo is not invisible for some reason. But "alt" was mentioned, "in place of the logo."
Here is the output is received from my side. I've marked it with white color on top of the webpage:
/*---------------------------------------------------------*/
/*Basic Setup*/
/*---------------------------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555555;
font-family: 'Lato', 'Arial', sans-serif;
color: #555555;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
/*---------------------------------------------------------*/
/*----------------REUSABLE COMPONENTS----------------------*/
/*---------------------------------------------------------*/
.row {
max-width: 110px;
margin: 0 auto;
}
/*-------------------------HEADINGS------------------------*/
h1 {
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-----------------BUTTONS---------------*/
.btn:link,
.btn:visited {
display: inline-block;
color: #fff;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
color: #e67e22;
border: 1px solid #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
}
.btn-ghost:hover,
.btn-ghost:active {
color: #fff;
border: 1px solid #cf6d17;
}
/*------------------------------------------------------------------------*/
/*----------------------------HEADER--------------------------------------*/
/*------------------------------------------------------------------------*/
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(Images/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-40%,-50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
}
My HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Vendors/CSS/normalize.css">
<link rel="stylesheet" type="text/css" href="Vendors/CSS/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/Style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400,400i" type="text/css" rel="stylesheet">
<title>Shyam Restaurant</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/Images/logo-white.png" alt="Shyam Restaurant Logo" class="logo">
<ul class="main-nav">
<li>Food Delivery</li>
<li>How It Works</li>
<li>Our Cities</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food. <br>Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4">
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4">
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4">
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4">
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
I can't find out why the logo is visible.
Your elements are floating correctly, however, the parent has a max width of 110px provided by the class row so, basically, they have no much room to position
Related
Project Link
I'm trying to get my background image to be visible but it doesn't appear, Also my css animations don't work as well any information on how to correct this?
.bg-image {
/* The image used */
background-image: url("https://i.postimg.cc/Hn0vxz91/Bridge.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: solid 1px red;
object-fit: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
body{
background-color:#28282B;
}
/* Style the links inside the pill navigation menu */
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
/* Change the color of links on mouse-over */
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
pulse a:hover{
animation: pulse 1s infinite;
animation-timing-function: linear;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1);
100% { transform: scale(1); }
}
}
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
border: 1px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
.container::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/* Increase the font-size of a span element */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
#media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
.checked {
color: orange;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: white;
}
#star{
background-color:#28282B;
}
.container{
background-color:#28282B;
}
.center {
background-color:white;
}
<header>
<title> Portfoilo</title>
<nav id="navbar">
<div class="pill-nav">
<div class="pulse">
<a class="active" href="#welcome-section">Home</a>
Projects
Certifications</nav> </div>
</div>
</header>
<main><section>
<div class="bg-image"></div>
<div class="bg-text">
<h1>I Am John Doe</h1>
<p>And I'm a Photographer</p>
</div>
</section>
<section id="welcome-section">
<h1 id="practice"> Welcome to My Practice Portfolio</h1></section>
<p>This is my practice portfolio to fune tune my skills when I am readyu to showcase my skills to the web I will link it to the actual one when it's ready and I am ready to share on the web thank you for reading this messgae.</p>
<section id="projects">
Tribute Page
Technical Documentation
</section>
<section id="Certifications">
Certifications</section>
</main>
<body>
<div class="container">
<img src="https://i.pinimg.com/originals/21/45/47/2145477174ea52cd79758af817b905b9.jpg" alt="Avatar" style="width:90px">
<p><span>Julie Jacobs.</span> CEO at Mighty Schools.</p>
<p>John Doe saved us from a web disaster.</p>
</div>
<div class="container">
<img src="https://www.byrdie.com/thmb/fLsxKLnkeZWgt54cWlUCw8ya1KE=/1716x1716/smart/filters:no_upscale()/Screen-Shot-2020-08-31-at-2.57.48-PM-ab7152b68d9042838d10c0ff58f8d3bf.jpg" alt="Avatar" style="width:90px">
<p><span >Rebecca Flex.</span> CEO at Company.</p>
<p>No one is better than John Doe</p>
<div id="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
</div>
</body>
<footer>
<!-- Add icon library -->
<div class="card">
<img src="https://i.guim.co.uk/img/media/9bb29e1304526b5aeb6378f485f16bd5310dff9e/0_236_4500_2700/master/4500.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=b87889efa83846281e306c50ef9370db" alt="John" style="width:100%">
<h1 class="contact">John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
<p><button>Contact</button></p>
</div>
</footer>
I'm trying to get my image to display while having a shade of the background color add effect to the image and I have css animations that don't work any information on how to fix all that? So they both could become visible also the card section how to make one portion of it white.
Your background image is working fine for me right now.
About the animation; You mean div class pulse right?
Put <nav> inside <body> and see if it works or not.
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.