I have a webpage and files that show up fine in the latest version of IE. Need it to show up the same in the latest version of Firefox and Safari.
The webpage and supporting files are archived for review. I'll paste the page below followed by the CSS. It is easier to see with images.
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>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
<div id="left">
<div id="left_top">
<div id="left_grey">
<h1 class="lb_blk_hdr">Water. Pure and Simple</h1>
<p class="text">United Distributors, Inc. is the region’s top provider of Water Treatment Solutions and Supplies. For over 30 years, you have trusted us to provide the latest in water treatment technology and related products. We have met your needs through a broad range of products that provide you the purest of water for use in your Home, Office, Restaurant /Food Service and Medical Facilities and Commercial/Industrial facilities. </p>
<p class="text">Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p>
<p class="text">Let us help you enjoy the healthy benefits of safe, pure water.</p>
<h1 class="lb_blk_hdr">Our Promise to You...</h1>
<p class="text">We are committed to market innovative and creative water treatment and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p>
</div>
</div>
<div id="left_bot">
<p><span class="lg_blue_hdr">Our Guarantee</span></p>
<p class="text"> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p>
</div>
</div>
<div id="right">
<div id="fla"><img src="fla.gif" width="430" height="380" /></div>
<div id="right_bot"><img src="bbb_logos.gif" width="430" height="160" vspace="50" /></div>
</div>
<div id="bottom">Content for id "bottom" Goes HereHereContent for id "left_bot" Goes HereContent for id "left_bot" Goes HereContent for id "left_bot" Goes Here </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
body {
background: #EEEEE4;
}
.lg_blue_hdr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000066;
line-height: 10px;
}
.lb_blk_hdr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
line-height: 10px;
}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #000000;
}
a.text:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a.text:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #009900;
text-decoration: underline;
}
#wrap {
background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
margin: 0px auto auto;
padding: 0px;
width: 800px;
}
#top {
margin: 0px auto;
padding: 0px;
width: 800px;
}
#left {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
background: url(none);
}
#left_top {
background: D9DAD5 repeat-y 50% 0%;
margin: 0px;
padding: 0px;
width: 370px;
}
#left_grey {
background: #D9DAD5;
margin: 0px;
padding: 15px;
width: 340px;
}
#left_bot {
margin: 0px;
padding: 15px;
width: 340px;
}
#right {
margin: 0px;
padding: 0px;
float: right;
width: 430px;
}
#bottom {
background: #000000;
float: left;
width: 770px;
margin: 0px;
padding: 15px;
}
It would help greatly if you could point us to a live version of the page. There's a lot of things that can affect the display of pages in browsers (standards or quirks rendering mode, doctypes, valid/invalid HTML and CSS, etc.)
As it stands, there's not enough information in your question to let people accurately pinpoint the source of your problem.
Also, keep in mind that Firefox and Safari are most likely rendering your page "correctly". But because you've been coding it for IE, you've probably coded your CSS to make it look good in IE at the expense of standards-compliant browsers.
EDIT: With the properly formatted code above, I refactored your code a bit. When writing HTML, it's a considered a best-practice to use class and id attributes that describe what it's content is, not what it looks like. So "header" instead of "top" and "content" instead of left.
This simpler code should also make it easier to debug.
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>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
<div id="content">
<div id="left_top">
<h2>Water. Pure and Simple</h2>
<p>United Distributors, Inc. is the region’s top provider of Water Treatment Solutions and Supplies. For over 30 years, you have trusted us to provide the latest in water treatment technology and related products. We have met your needs through a broad range of products that provide you the purest of water for use in your Home, Office, Restaurant /Food Service and Medical Facilities and Commercial/Industrial facilities. </p>
<p>Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p>
<p>Let us help you enjoy the healthy benefits of safe, pure water.</p>
<h2>Our Promise to You...</h2>
<p>We are committed to market innovative and creative water treatment and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p>
</div>
<div id="left_bot">
<h2 class="blue">Our Guarantee</h2>
<p> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p>
</div>
</div>
<div id="images">
<img src="fla.gif" width="430" height="380" />
<img src="bbb_logos.gif" width="430" height="160" vspace="50" />
</div>
<div id="footer">Content for id "bottom" Goes HereHereContent for id "left_bot" Goes HereContent for id "left_bot" Goes HereContent for id "left_bot" Goes Here </div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
body {
background-color: #EEEEE4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #000000;
}
h2 {
font-size: 15px;
line-height: 10px;
}
h2.blue {
color: #000066;
}
a:link {
font-size: 12px;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a:hover {
font-size: 12px;
font-weight: bold;
color: #009900;
text-decoration: underline;
}
#wrap {
background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
margin: 0px auto;
padding: 0px;
width: 800px;
}
#header {
margin: 0px auto;
padding: 0px;
width: 800px;
}
#content {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
background: url(none);
}
#left_top {
background: #D9DAD5;
margin: 0px;
padding: 15px;
width: 340px;
}
#left_bot {
margin: 0px;
padding: 15px;
width: 340px;
}
#right {
margin: 0px;
padding: 0px;
float: right;
width: 430px;
}
#footer {
clear: both;
background: #000000;
width: 770px;
margin: 0px;
padding: 15px;
color: white;
}
I created an HTML file, added the CSS, and created dummy images to replace the ones that should be there. Here's a screenshot of the Mac Firefox 3.0.6 overlaid on the IE 7:
http://s622.photobucket.com/albums/tt302/ellen898945/?action=view¤t=Firefox_IE.png
The file looks almost exactly the same to me, using the code that you sent, minus some text rendering differences. Can you provide a better description of the problem you're having, or provide visual examples? You're not using any CSS that's particularly tricky, or which is poorly-supported on any of the major browsers; it's hard for me to understand what your concern is.
Generally you have to accept that you don't have full control over the pages that you're sending out. You could have a user who sets their text size larger or smaller than the default, or who always sets the page background to white and ignores your colors. If the rendering is off by a couple of pixels in different browsers on different operating systems, it's not a big deal. And realistically, no users are going to (a) open the same page in two different web browsers side by side (b) notice that they're a tiny bit different and (c) care.
Related
I am looking a way to center my texts.
I just have a problem with my texts for now. How to align correctly my texts please? The solution exists sur stackoverflow but I don't get the desired result.
I would like to use a simple way beacause I am a beginner.
Here is my codes below, I hope my code is correct overall.
Thank you very much for your help.
.wrapper {
display:flex;
flex-wrap: nowrap;
}
.image-wrapper{
margin: 10px;
text-align: center;
width: 90%;
}
/* All of these styles are shared by the .img element */
.img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-top: 50px;
border: 3px solid red;
height: 197px;
width: 90%;
}
.img.img-01 {
background-image: url("https://zupimages.net/up/19/51/vn88.jpg");
}
.img.img-02 {
background-image: url("https://zupimages.net/up/19/51/9fik.jpg");
}
.img.img-03 {
background-image: url("https://zupimages.net/up/19/51/dwq9.jpg");
}
.img-title{
font-size: 20px;
line-height: 1.4;
color: #cd2122;
margin-top: 10px;
margin-left: 20px;
float: left;
font-weight: 700;
font-family: Open Sans;
}
.img-text{
font-family: Open Sans;
font-size: 13px;
line-height: 19px;
color: #535353;
margin-bottom: 20px;
margin-left: 20px;
float: left;
}
<div class="wrapper">
<div class="image-wrapper">
<img class="img-01 img">
<div class="img-title">Trust Management</div>
<div class="img-text">Assets trust management represents one of the most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust management we may mention many.</div>
</div>
<div class="image-wrapper">
<img class="img-02 img">
<div class="img-title">Well Documented</div>
<div class="img-text">Assets trust management represents one of the most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust management we may mention many.</div>
</div>
<div class="image-wrapper">
<img class="img-03 img">
<div class="img-title">Great Support</div>
<div class="img-text">Assets trust management represents one of the most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust management we may mention many.</div>
</div>
</div>
I'm not the best at CSS and cannot figure out what's wrong. Think it might be the tags I'm using in my sidebar. I would like the nav element with the "vert" id and the div element with the "text-container" id to be NEXT to each other, but the way it is going, it's sending my stuff in the "text-container" into the footer, which is unacceptable.
I'm baffled as to how to get them next to each other. I know elements can be next to each other as it worked in my nav element with the "hor" id with all the a elements next to each other with no problem.
I think it might be the tags, but don't know what I can do about it. I could just axe the navbar as I already have that in the header, but I just spent a lot of time on the navbar to now have to kill it and wish I could keep it.
<html>
<head>
<title> The Resorts </title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<style>
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 40px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
#text-container
{
width: 1045px;
height: 690px; */
zoom: 1;
margin: 0;
display: inline-block
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
</style>
<div id="content">
<div id="logo">
<img src="./logo.png"></img>
</div>
<div id="container">
<nav id="hor">
<div> Home </div>
<div> The Mountains </div>
<div> The Resorts </div>
<div> Snow Reports </div>
<div> Events & Activities </div>
<div> Plan A Trip </div>
</nav>
<div id="middle">
<nav id="vert">
Home <br/>
The Mountains <br/>
The Resorts <br/>
Snow Reports <br/>
Events & Activities <br/>
Plan A Trip
</nav>
<div id="text-container">
<h1> The Resorts </h1>
<h2> The West Resort </h2>
<p>
The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways. It has a young, energetic feel, but there's more to it than just jumps and jibs. West is
home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.
</p>
<h2> The East Resort </h2>
<p>
The East Resort boasts the longest trails in the region serviced by a single high-speed quad. Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the longest,
steepest bump run in the region. After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top. With 1,600 vertical feet of uninterrupted corduroy, the East
Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.
</p>
<h2> The North Resort </h2>
<p>
The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring. It is big enough to offer a true winter experience but small
enough to maintain its historical warmth and charm. Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge. It is one of the region’s oldest
base lodges with ties that go back to the Big Pines ski clubs of the 1940s.
</p>
</div>
</div>
</div>
<div id="footercontainer">
<footer>
© 2016
</footer>
</div>
</div>
</body>
</html>
==main.css==
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 500;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
nav#vert
{
width: 220;;
height: 540;
margin: 0;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./image8.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1045px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 690px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
}
nav#hor > div > a
{
color: #ccccff;
}
nav#hor>div:hover
{
background-color: #01ff02;
}
Here you go...
https://jsfiddle.net/og9wpLmw/
I coloured the two blocks green and red to make them obvious
I fixed & amp; by putting ; on the ends
I fixed by making it
I made boxes next to each other using display:table-cell;
I put all the CSS into the css file
I fixed the widths in nav#vert by including px in the measurement.
Here is the css that makes the difference:
#text-container {
width: 1045px;
height: 690px;
*/ zoom: 1;
margin: 0;
display: table-cell;
background-color:red;
}
nav#vert {
background-color:green;
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
it might be because your "vert" and/or your "text-container" have too big of widths.
You have a fixed width nav - the width is set to 220px, but then you've got padding / margin etc. so it ends up being 270px wide (nb. If you're not familiar, right click on an element in a modern web browser and select "inspect" you can easily measure elements and check out their properties in CSS).
So to fit your other text-container to the right of it you need to reduce it's width to allow for the width of your nav. This can be achieved easily by using calc
width: calc(100% - 270px);
Add that CSS to your text-container (and remove other width declarations) and it'll work. It's not best practice, but you can enforce this declaration to take precedence by adding !important giving you:
#text-container {
width: calc(100% - 270px) !important;
}
You just need to add that in, or amend your existing CSS and you're good to go.
That works, but the problem I noticed later down the line is that if I have an iframe as the first element in "text-container" and don't have something before that iframe, then the nav bar is messed up again.
Is there another display thing I could use?
This book is so confusing... I'm back with yet another question.
The book shows a picture of the chapters final look, and obviously I'm having problems with it.
Issue 1: I need to center a picture (I know how to do this) but what I don't know is how to left align a sentence after the picture. By after, I mean it would look like this picture:
But the centered text needs to be left aligned to the image, and when it reaches the end of the page, it starts the text under the picture instead of centered.
I'm pretty sure this has something to do with my wrapper, but I'm not 100% sure on what it is.
CSS file that controls most of the visual things below:
header {
background-color: #ccaa66;
color: #000000;
text-align: center;
}
h1 {
line-height: 200%;
}
body {
background-color: #ffffaa;
color: #330000;
font-family: Verdana;
background: url(background.gif);
padding: 25px;
}
nav {
text-align: center;
}
footer {
background-color: #ccaa66;
color: #000000;
font-size: 0.60em;
font-style: italic;
text-align: center;
padding: 5px;
}
#wrapper {
background-color: #ffffaa;
margin-right: auto;
margin-left: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
}
h2 {
background-color: #ccaa66;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
.details {
padding-left: 20%;
padding-right: 20%;
}
img {
border: 0px solid;
}
Now, the html page I'm loading that is having issues, is a "music" page, and since I can't really upload all of the necessary items you would need to fully construct the page, I'm going to have to go by word of wise.
The music.html page is coded like this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="javajam.css">
<header>
<title> JavaJam Coffee House Music</title>
<meta charset="utf-8">
<h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1>
</header>
<nav>
Home
Menu
Music
Jobs
</nav>
<body>
<div id="wrapper">
<p> The first Friday night each month at JavaJam is a special night. Join us from 8pm to 11pm for some music you won't want to miss! </p>
<h2> January </h2>
<p align="center"><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p>
<h2> February </h2>
<p align="center"><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p>
</div>
</body>
<footer>
<em>Copyright © 2014 JavaJam Coffee House</em> <br>
Johnathon#Olivas.com
</footer>
</html>
What I'm really looking for is just a way to make the picture show up have the text follow the bottom right of the picture, and when it reaches the "end" of the page, it wraps back and stars under the picture instead of being center aligned. Namely where that <br> is, would be nice to have the text star back under the picture again.
If you need more info I'll try my best to provide it, but as I said earlier, I'm unable to give the actual pictures in the assignment.
I found some errors in the markup of the Web page.
This is the correction of your HTML.
I added a div tag with content class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title> JavaJam Coffee House Music</title>
</head>
<body>
<header>
<h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1>
</header>
<nav>
Home
Menu
Music
Jobs
</nav>
<div id="wrapper">
<p>
The first Friday night each month at JavaJam is a special night. Join us from
8pm to 11pm for some music you won't want to miss!
</p>
<h2> January </h2>
<div class="content">
<p><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p>
</div>
<h2> February </h2>
<div class="content">
<p><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p>
</div>
</div>
<footer>
<em>Copyright © 2014 JavaJam Coffee House</em> <br>
Johnathon#Olivas.com
</footer>
</body>
</html>
I've added a css class «.content» to center the content.
header {
background-color: #ccaa66;
color: #000000;
text-align: center;
}
h1 {
line-height: 200%;
}
body {
background-color: #ffffaa;
color: #330000;
font-family: Verdana, sans-serif;
background: url(background.gif);
padding: 25px;
}
nav {
text-align: center;
}
footer {
background-color: #ccaa66;
color: #000000;
font-size: 0.60em;
font-style: italic;
text-align: center;
padding: 5px;
}
#wrapper {
background-color: #ffffaa;
color: inherit;
margin-right: auto;
margin-left: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
}
h2 {
background-color: #ccaa66;
color: inherit;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
.details {
padding-left: 20%;
padding-right: 20%;
}
img {
border: 0px solid;
}
.content {
margin: 0 auto;
width: 600px;
}
I hope this helps you.
This should help you out. http://codepen.io/anon/pen/wKKLjG. the image is marked as display:inline-block and float:left. Refer more on cssfloat property. http://www.w3schools.com/css/css_float.asp.
I'm building a webpage using DreamWeaver from scratch (no template). It's for a school project.
My DIV formatting was fine until I tried to embed the YouTube video. Why is my YouTube video stuck directly beneath the header? Also, the DIV/Table on the right side of the page is also out of whack. It just want the YT video on the left and the table on the right, and I want them to line up horizontally.
Thanks for any assistance. Click to view the Webpage, with obvious errors.
CODE:
HTML-
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="FamilyBookMain.css">
</head>
<title>FamilyBook.com</title>
<body>
<div id="top">
</div>
<div class="video-container">
<iframe width="560" height="315" src="//www.youtube.com/embed/MQgdE1_lHnA?rel=0" allowfullscreen></iframe>
<div class="famtree">
<img src="images/fambooktree.png" width="705" height="221"/>
</div>
</div>
<div id="body">
<table style="border-collapse:collapse;">
<thead>
<h1>Your Ancestors Are Dead.</h1>
<h1>But Here, They're Still Alive.</h1>
<br>
</thead>
<tbody>
<tr>
<td style="padding:10px">
<p class="table"><br>Welcome to the world's <strong>largest</strong> online resource for social media profiles and data from the twenty-first century. FamilyBook.com is home to billions of profiles from MySpace, FaceBook, Twitter, Instagram, and more. <br> <br>
We are the <strong>leading provider of social media data</strong> from the early 2000s, including searchable image tags, status updates, relationship histories, friendships and family networks. Our mission is to link people to the personal histories of their ancestors- one social media profile at a time.</p></td> </tr>
<tr><td style="padding:10px">
<p class="table">
Imagine the stories that you'll uncover as you explore your loved one's Facebook timeline and likes, private messages and chat logs, Twitter conversations, and Instagram uploads. The <strong>secrets</strong> that you uncover may even surprise you.<br>
<br> Simply start with a name and <strong>we'll do the rest.
</strong> Discover your ancestor's past. Learn where you came from. <br>
</p></td>
</tr>
</tbody>
<thead>
<tr>
<th class="head" colspan="2">
<strong>Our services are coming soon!</strong><br><br>
</tr>
</thead>
</table>
</div>
<div class="footer">
<p id="footer"><img src="http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png" width="139" height="25"/>
<br>Jessica E. Tompkins 2014 | About
</p>
</div>
</body>
</html>
CSS-
#charset "UTF-8";
/* CSS Document */
body {
background-color:#EEEEEE;
position: fixed;
}
#top {
width: 100%;
height: 60px;
background- image:url('http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png');
background-color:#FFF;
background-repeat:no-repeat;
background-position:60px bottom;
border-bottom-width:thin;
border-bottom-color: #333;
border-bottom-style:solid;
position: fixed;
top: 0px;
}
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: relative;
left: 650px;
bottom: 215px;
}
h1 {
color: #333;
font-family: Arial, Verdana, sans-serif;
text-align: center;
margin: 0px;
top: 10px;
position: relative;
}
.video {
position: relative;
left:170px;
top: 170px;
}
ul.crap {
color: #333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
}
#video {
color: #99aacc;
font-family: Arial, Verdana, sans-serif;
text-align: center;
height: 200;
width: 450;
margin: 350px 0px 0px;
position: absolute;
}
.table {
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:14px;
color: white;
}
.head {
color: #333;
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
padding: 15px;
font-weight:100;
}
.footer{
width: 100%;
height: 60px;
background-color: #99aacc;
border:1px solid #333;
position:fixed;
bottom:0px;
}
#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
padding:5px;
color: white;
text-align:center;
}
a {
text-decoration:none;
}
First of all, welcome to StackOverflow. I only spent about a minute looking over and editing your code, but I think I get the gist of what you want to do. Please see the code below:
Change your #body element to match the code below: (I positioned the div absolutely.)
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: absolute;
left: 650px;
top:65px
}
Paste this into your CSS:
.video-container{
width:auto;
height:auto;
margin-top:75px;
}
Now, let me just say that your HTML kind of messy and could be streamlined quite a bit. As #Havard Brynjulfsen pointed out, there are a few IDs and classes that remain unused. In any case, the code above, should yield the desired results, but what you are trying to do could be accomplished much more elegantly if you are willing to change up your HTML structure.
Also, there are some bugs in your HTML. I would highly suggest validating your code with the official W3C validator.
There are too many issues for me to list here without going off-topic, but here are the biggies:
Your doctype declaration is incorrect, it should be <!DOCTYPE html>.
Your <title> should be in the <head> of your document.
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}