The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> columns arent floats to the left.
michy
post Sep 27 2011, 08:32 PM
Post #1


Novice
**

Group: Members
Posts: 25
Joined: 17-September 11
Member No.: 15,423
Okay, I'm going to try to explain this the best I can.. i have 3 columns. and I floated the first one to the left, and when I went to float the other 2, they aren't going to the left. it is next to my h1, which is a banner. and wont go under it to the left. Idk what im doing wrong:/


this is what I have so far..



h1{
background-image: url(h1back.jpg);
background-repeat: repeat-x;
background-color: white;
border-bottom: 1px black; border-style: solid;
position:relative;
}

h2{
text-indent: 30px;
color: white;
background-color: rgb(108, 87, 12);
margin: 0px;
letter-spacing: 8pt;
font: normal small-caps;
}

h3{
margin-left: 10px;
}

p{
margin-top: 10px;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 20px;

}
body{
background-image: url(body.jpg);
background-repeat: repeat-y;
background-color: white;
font-family: Verdana,Helvetica, Sans-serif;
margin: 0px;
}

#column1{
float: left;
width: 140px;
padding-left: 10px;
padding-top: 20px;
}

#column2{
float: left;
width: 40%;
border-left: 1px black; border-style: solid;
border-right: 1px black; border-style: solid;
}

#column3{
float: left;
width:40%;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2011, 08:51 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
URL please, if possible. Otherwise post the whole shebang.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
michy
post Sep 27 2011, 08:55 PM
Post #3


Novice
**

Group: Members
Posts: 25
Joined: 17-September 11
Member No.: 15,423
They are floating to the left now, but they are overlapping the heading 1 which is the title. help?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
michy
post Sep 27 2011, 08:57 PM
Post #4


Novice
**

Group: Members
Posts: 25
Joined: 17-September 11
Member No.: 15,423
i don't have a url considering it is for school, and it goes through files on the computer. but... this is the whole thing..





/*
New Perspectives on HTML and XHTML 5th Edition
Tutorial 3
Case Problem 2

Mountain Wheels Style Sheet
Author: Michelle Primavera
Date: September 25, 2011

Filename: wheel.css
Supporting Files: body.jpg, block.jpg, h1back.jpg

*/

h1{
background-image: url(h1back.jpg);
background-repeat: repeat-x;
background-color: white;
border-bottom: 1px black; border-style: solid;
text-align: center;
margin: 0px;
height: 100px;

}

h2{
text-indent: 30px;
color: white;
background-color: rgb(108, 87, 12);
margin: 0px;
letter-spacing: 8pt;
font: normal small-caps;
}

h3{
margin-left: 10px;

}

p{
margin-top: 10px;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 20px;

}
body{
background-image: url(body.jpg);
background-repeat: repeat-y;
background-color: white;
font-family: Verdana,Helvetica, Sans-serif;
margin: 0px;
}

#column1{
float: left;
width: 140px;
padding-left: 10px;
padding-top: 20px;

}

#column2{
float: left;
width: 40%;
border-left: 1px black; border-style: solid;
border-right: 1px black; border-style: solid;
}

#column3{
float: left;
width:40%;



}





and the 2nd column is suppose to be under heading 1. but its just overlapping.



and i wanna thank you pandy, im probably driving you insane, haha.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2011, 08:57 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
QUOTE(pandy @ Sep 28 2011, 03:51 AM) *

URL please, if possible. Otherwise post the whole shebang.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
michy
post Sep 27 2011, 09:12 PM
Post #6


Novice
**

Group: Members
Posts: 25
Joined: 17-September 11
Member No.: 15,423
Okay, I sent it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2011, 10:53 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
What?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 28 2011, 01:43 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You only posted the CSS of a file that apparently is called wheel.css.
But we also need the HTML code of the page itself in which the CSS is used, so we can see how you structured it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
michy
post Sep 28 2011, 03:31 PM
Post #9


Novice
**

Group: Members
Posts: 25
Joined: 17-September 11
Member No.: 15,423
oh, that is...



<html>
<head>
<!--
New Perspectives on HTML and XHTML 5th Edition
Tutorial 3
Case Problem 2

Bike the Mountains Tour
Author: Michelle Primavera
Date: September 25, 2011

Filename: bmtour.htm
Supporting files: body.jpg, block.jpg, h1back.jpg, h1title.gif, wheels.css
-->

<title>Bike the Mountains Tour</title>
<link href="wheels.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="column1">
<h1><img src="h1title.gif"/></h1>
<div>
<a href="#">Home</a>
<a href="#">Learn More</a>
<a href="#">Testimonials</a>
<a href="#">Route Maps</a>
<a href="#">Register</a>
<a href="#">Lodging</a>
<a href="#">Meals</a>
<a href="#">Training</a>
<a href="#">Equipment</a>
<a href="#">Forums</a>
<a href="#">FAQs</a>
<a href="#">Contact Us</a>
</div>
</div>


<div id="column2">
<h2>Introduction</h2>
<p>The Bike the Mountains Tour rises from the town of Littleton, Colorado and
explores the Colorado Front Range. Our tour crosses the Continental Divide
twice, giving you the opportunity to bike the highest paved roads in the
United States. This tour is a classic showcase of Colorado's Rocky Mountain
scenery.</p>
<blockquote>
"The Bike the Mountains Tour is <i>amazing</i>. I highly recommend it
and would gladly return."
</blockquote>
<p>Not designed for the weekend cyclist, this tour is offered only for those
fit enough to ride high mountain passes. We provide sag wagons and
support. Your lodging and meals are also part of the registration fee.
We guarantee tough climbs, amazing sights, sweaty jerseys, and lots
of fun.</p>
<p>This is the seventh year we've offered the Bike the Mountains Tour. It is
our most popular tour and riders are returning again and again. Our experienced
tour leaders will be there to guide, help, encourage, draft, and lead you
every stroke of the way. Come join us!</p>
<h2>Itinerary</h2>
<h3>Day 1</h3>
<p>We start from the foothills above Littleton, Colorado, promptly at 9am. Be sure
to fuel up at Kate's House of Pancakes before starting your ride. The first
day is a chance to get your legs in shape, test your gearing, and prepare for
what's to come. Be aware that there are several steep grades as we climb out of
the valley into the Front Range. Optional side tours and shortcuts will be
provided.</p>
<h3>Day 2</h3>
<p>Day 2 starts with a climb up Bear Creek Canyon to Lookout Mountain, followed
by a swift and winding descent into the town of Golden. Refresh yourself at the
famous Coors Brewery. You'll need the break to get yourself ready for a great
climb through Golden Gate Canyon to the Peak to Peak Highway, ending in the
gambling town of Blackhawk. Try your hand at poker and blackjack, but watch
your wallet.</p>
</div>

<div id="column3">
<h3>Day 3</h3>
<p>Day 3 takes you along the Peak to Peak Highway. Established in 1918 this is
Colorado's oldest scenic byway. This 55-mile route showcases the mountains
of the Front Range, providing amazing vistas from Golden Gate Canyon State Park
to Rocky Mountain National Park. We'll stop at Estes Park for fun and
refreshment. Get a good night's sleep; you'll need it the next day.</p>
<h3>Day 4</h3>
<p>Now for the supreme challenge: Day 4 brings some real high-altitude cycling
through Rocky Mountain National Park and up Trail Ridge Road. It's an
amazing ride, high above timberline, topping out at over 11,000 feet. Stop and
rest at the Alpine Visitor's Center before all of that hard work is rewarded
with a fast and joyous descent into the town of Grand Lake.</p>
<h3>Day 5</h3>
<p>We start Day 5 on the west side of the Continental Divide. From Grand Lake,
you'll bike to Winter Park, a great ski town summer resort. From Winter Park it's
a steady and scenic climb over Berthoud Pass, and back to the eastern side of
the Continental Divide. We'll stay at Idaho Springs, where you can enjoy the
natural hot springs at the hotel.</p>
<h3>Day 6</h3>
<p>On Day 6 choose your pleasure or your poison. You can ride back to Littleton
over Squaw Pass and Bear Creek. The ride is beautiful and enjoyable in its
own right. However, if you're "up" to it, this is your opportunity to tackle
Mount Evans. The 7-mile side trip to the top of Mt Evans, at over 14,000 feet,
is something that can't be found anywhere else in the country. We'll provide
the sag wagon, you provide the legs and lungs.</p>
<p>Once you're back to Littleton, please join us for a celebratory dinner
as we share memories of an amazing 6 days of riding the Colorado mountains.</p>
</div>

<address>
Bike the Mountains Tour &nbsp;&bull;&nbsp;
Littleton, CO 80123 &nbsp;&bull;&nbsp;
(303) 555 - 5499
</address>

</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
michy
post Sep 28 2011, 03:37 PM
Post #10


Novice
**

Group: Members
Posts: 25
Joined: 17-September 11
Member No.: 15,423
and it is showing up like this.


IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 28 2011, 06:36 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
OK. I *think* you want the banner on top by itself and the floated columns under it, right?

Pick the H1 out from the narrow left column and place it on its own before all three floats in the HTML. I don't see why you've made it 'position: relative'. To make it be on top? You don't need that now, so you can remove that.

Also, if you don't use a doctype in the real document, you should. You don't want browsers to be in quirks mode.
http://hsivonen.iki.fi/doctype/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 28 2011, 06:41 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Maybe you've already fixed this yourself. I thought the bike tour sounded fun, googled and found you page. The online versions looks alright.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 05:49 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC