Help with css 3 column layout with background

So I'm really not much of a web designer and usually deal in
print but a friend wanted help with her site so I'm taking a crash
course in css. so I was wondering if anyone a little more web savvy
than I can spot why my sites background Is sliding around.
this is the site as it
stands
this is the
main css i found a site to generate the codes to get around browser
specific glitches
what
I see in Safari
what
i see in firefox
what
background should look like
any help would be greatly appreciated thanks

Peter Llamas posted in macromedia.dreamweaver:
> So I'm really not much of a web designer and usually
deal in print
> but a friend wanted help with her site so I'm taking a
crash
> course in css. so I was wondering if anyone a little
more web
> savvy than I can spot why my sites background Is sliding
around.
>
http://whiskeylemonade.x10hosting.com
I have no idea what you mean by "sliding around", but could
it have
something to do with your missing old_break.css file?
http://whiskeylemonade.x10hosting.com/css/old_break.css
HTTP/1.x 404 Not Found
Mark A. Boyd
Keep-On-Learnin' :)

Similar Messages

Help with three column layout please

Hello All
I have been struggling with a three column layout to incorporate inserted images on the right. Please see http://www.greenpatchwebsites.com/ridgeway/index2.html
At the moment I have resorted to a background image but I am not happy with the quality and lack of positioning in relation to the text.
I have looked at lots of sites re faux / three columns etc but I can't make it work. As you will see from the attached css there are lot of divs because of the expanding box and I am getting in a muddle.
Expert help here would be very gratefully received and I thank you in advance.

Hi There,
You can refer to 3 column fixed template (with header and footer) provided by DW itself. For reference how to make a 3 column layout use following code. Just save the whole of this as .html file and preview. Go through the structure and css classes in the head to understand the layout.
<!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>
<style type="text/css">

</style></head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
    <h1>Header</h1>
</div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
    <p> </p>
</div>
<div id="sidebar2">
    <h3>Sidebar2 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
    <p> </p>
</div>
<div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
    <h2> </h2>
    </div>
     <br class="clearfloat" />
<div id="footer">
    <p>Footer</p>
</div>
</div>
</body>
</html>
Don't be overwhelmed as this is simple code only (much like your own page). You can then divide your background image and put one part in the center column (mainContent DIV) and the other in the right sidebar (sidebar2 DIV).
Hope this helps.
Regards,
Vinay

Minor help needed with four-column layout

Hello,
I took a three-column DW template and turned it into a
four-column layout, and I'm very proud to say that I've figured out
most of it myself. (CSS is NOT my strong point.) However, I'm
having some problems with the background in the fourth column.
http://www.patiastephens.com/new
How can I make the top of the fourth column/background level
with the other three columns?
And how can I get the background to repeat?
I plan to eventually put ads in the fourth column, and I may
or may not leave the background in, depending on how it looks.
Thanks much!

Hi, thank you, Bonnie.
I did mess with the repeat properties, but nothing helped.
However, I ended up moving the background image to the entire page;
I think it looks better. (See updated page if you're interested.)
Now I'm trying to figure out why I get float drop when I move
the main content column above columns 3 and 4 (so it loads first)
And why the text in columns 1 and 4 is pushed down ....
Aaargh.

Help with CSS Page Layout

I guess I am "old school" in that I have always used tables
to lay out my web pages. I decided I must learn to do it with CSS,
but I'm having a terrible time (and it shouldn't be so hard!). I
understand how to define the styles, add divs, etc. Here's what I'm
having trouble with:
How do I specify the normal page width to be 800 pixels,
however I want it to be relative to the browser (i.e., 100% of 800
pixels).
I understand the "float" tag, but if I have a right-hand
sidebar, I can't seem to get the text to the left (in a div called
"maincontent") to stop at the sidebar and wrap to the next line. I
tried specifying "Hidden" as my textbook suggests, but that has no
effect.
I can easily do all of this with tables, so do I really need
to abandon them?
Thanks!

Hi Jane,
I'll try to answer all your questions, then a tip or two to
stop the main
content from dropping when the browser window size is
reduced.
- " I didn't realize that
margin-top: 0px;
margin-right: auto;
is not the same as margin: 0px auto;
That's right.
margin: 0px auto; is actaully saying make the top margin 0,
the right margin
auto, the bottom margin 0 and the left margin auto.
It's just CSS shorthand.
For example, you might have:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left:15px;
You could just use margin: {10px 20px 5px 15px;}
Think of a clock to remember the directions.
12:00 top, 3:00 right, 6:00 bottom, 9:00 left.
If any of the values are the same, you can shorten it more.
For example, if top is 10, right is 20, bottom is 5 and left
is 20, it's
margin: {10px 20px 5px;}
If the 4th location (left) is missing a value, it makes it
the same as what
you have for right.
If top and bottom are 10px, and left and right are 20px,
it's:
margin {10px 20px;}
If the last two positions ( bottom and left vlaues ) are
missing, then it
will use the top value for the bottom, and the right value
for the left.
What auto right and left is doing is subtracting your content
width (the
container width) from the browser window width, and then
dividing the
remainder in 2 and applying each value to each side of the
container.
-"I found that they all took on the font of the maincontent
and I had to fix
them
individually. "
The only text that should be Time is the text in your main
content, where
you have that font defined. Everything else should be Arial
if you define
the body as such. I'll post a link at the end of this.
- "I put my bold sentence (Friendship, Fun, etc.) in h1, but
I had to change
the
color & size, so that added another style element. "
You don't need to give the h1 a class. You can actually just
style the h1
tag:
h1 {
margin: 10px 10px 2px;
font-size: larger;
color: #941238;
You can only use h1 once on a page.
You can use h2, h3, h4, etc, as many times as you would like,
and you can
style these just like the h1 style above.
- "I don't quite understand the .rightsidebar p { and
container p{
I am assigning the spacing to the <p> tag? What exactly
is that doing?"
That is saying, give all the <p> tags inside the
rightsidebar container the
follwing style.
So, in this example:
.rightsidebar p {
font-size: 18px;
margin: 2px 10px;
it's saying give all the <p> tags in this container a
size of 18 and margin
of 2px top and bottom, and 10px left and right.
It's a lot easier than giving a class to every <p> tag
- "I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div
class="footer">"
You could, if the footer was in the container. It just needs
to be the final
element before the close of a container that contains the
float(s).
-Do you use the <div class="container"> technique all
the time?
Yes, most of the time. I usually put everything in it, and
use the
margin:0px auto; to center it.
That way, I don't have to try to get a number of different
elements to align
with the right and left sides by applying values to all of
them, which can
get tricky quickly.
-"If you'll indulge me one more question, I wonder if it's
possible to put a
graphic (say, of a putting green) underneath my
rightsidebar? I would want
the sidebar to lay on top of the putting green for an
interesting artistic
touch.
Yes, you can give that div a background image. You just need
to make the div
the same size as the image so you see it all (or vice-versa).
Now, to make that maincontent not drop like it does you can
remove the width
in the CSS. Now it will expand over to the left edge of the
rightsidebar.
You can control how close it gets by giving the right sidebar
a bigger left
margin. The point is, with no width assigned, the maincontent
will shrink
down to the longest word in it before it drops.
Here's what it looks like:
http://tnsgraphics.com/test2.htm
Let me know if you have any questions.
Take care,
Tim
"janeinpa" <[email protected]> wrote in
message
news:[email protected]...
> Hi, Tim...
>
> You have been very kind to help me learn CSS! I very
much appreciate it
> and
> am really delighted to have gained a better
understanding of this. I
> studied
> all your suggestions and started the page from scratch.
Take a look here:
>
http://www.allisonwebcreations.com/ewga_site/good_page/indexgood.htm
I'm
> very
> pleased with it. I discovered a couple of things:
>
> I didn't realize that
> margin-top: 0px;
> margin-right: auto;
>
> is not the same as margin: 0px auto;
>
> are they two different codes? Anyway, it didn't center
until I fixed
> that.
>
> I understand what you're saying about the font codes
being redundant,
> however
> I found that they all took on the font of the
maincontent and I had to fix
> them
> individually. This must be an error in how I'm coding
it. Is the order
> in
> which I did them to blame? I put it in the order that
I'm reading it, but
> perhaps I should do it differently.
>
> I also couldn't get the footer to move left to the
margin. I'm not sure
> why,
> since I think I followed all your suggestions.
>
> I put my bold sentence (Friendship, Fun, etc.) in h1,
but I had to change
> the
> color & size, so that added another style element.
I'm afraid that
> probably
> isn't correct. I also couldn't have my normal content
text follow
> immediately
> on the same line. Maybe that isn't possible.
>
> I don't quite understand the .rightsidebar p { and
container p{
> I am assigning the spacing to the <p> tag? What
exactly is that doing?
>
> I also don't quite understand the .clear {
> Why not just choose clear:both on the next section
<div class="footer"> ?
>
> Do you use the <div class="container"> technique
all the time? How do you
> decide what goes in it -- just floating items or can I
think of it as a
> table
> that holds all my main blocks of info? Why not include
the footer in it?
>
> If you'll indulge me one more question, I wonder if it's
possible to put a
> graphic (say, of a putting green) underneath my
rightsidebar? I would
> want the
> sidebar to lay on top of the putting green for an
interesting artistic
> touch.
>
> Thank you, thank you, thank you again. Here are my css
codes (which I
> have in
> an external file. Is it better to import or link to the
file?)
>
> Have a wonderful New Year.
>
>
>
>
>
>
> .body {
> padding: 0px;
> margin-top: 0px;
> font-family: Arial, Helvetica, sans-serif;
> }
> .masthead {
> width: 780px;
> margin: 0px auto;
> padding-top: 10px;
> padding-right: 0px;
> }
> .maincontent {
> background-color: #FFFFFF;
> text-align: left;
> width: 60%;
> margin-top: 0px;
> padding-top: 10px;
> padding-right: 0px;
> font-family: "Times New Roman", Times, serif;
> font-size: medium;
> color: #000000;
> }
> .maincontent p{
> margin-top: 2px;
> margin-right: 10px;
>
> }
> .rightsidebar {
> font-size: small;
> background-color: #DEEBE4;
> text-align: center;
> float: right;
> width: 250px;
> margin-top: 10px;
> margin-left: 20px;
> border: thick solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
>
> }
> .leftbox {
> font-size: small;
> font-style: italic;
> color: #336600;
> background-color: #DEEBE4;
> text-align: center;
> clear: both;
> width: 300px;
> margin-top: 50px;
> border: thin solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
> }
> .footer {
> font-size: small;
> margin: 100px;
> font-family: Geneva, Arial, Helvetica, sans-serif;
> font-style: normal;
> }
> .container {
> width: 90%;
> margin: 0px auto;
> }
> .clear {
> font-size: 1px;
> line-height: 0px;
> clear: both;
> height: 0px;
> }
> .event {
> font-size: 24px;
> font-weight: bold;
> color: #00493E;
> }
> .upcomingdate {
> font-size: 20px;
> color: #990134;
> font-weight: bold;
> font-family: Arial, Helvetica, sans-serif;
> }
>
> .eventitem {
> font-size: 18px;
> color: #000000;
> font-weight: bold;
> margin: 0px;
> }
> .eventlink {
> font-size: 14px;
> font-style: italic;
> margin: 0px;
> }
> .smallboxhead {
> font-size: large;
> color: #00493E;
> font-style: normal;
> font-weight: bold;
> }
> .companyname {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: small;
> font-style: italic;
> color: 990134;
> }
>

2-column layout with correct page breaks

Hi there,
I am trying to produce a 2-column layout in my form.
The problem is: These columns stretch over more than one page and I just cannot get the page breaks right.
I have a flowed layout with two adjacent subforms which form my columns. In these column subforms I fill lots of data from XML.
Problem 1 is: At the end of the page I miss about 5 lines. They vanish in the page break.
Problem 2 is: My second column starts getting filled only on the second page (which happens to be the page where the first column ends).
I also tried this with one table with exactly one row. But there all lines after the first page disappear and I get empty pages instead.
Has anyone ever come across this problem?
What is a good safe way to build dynamic 2-column forms?
Ulrich

Hi Paul,
the former. It is NOT like in a newspaper where the content runs from left to right from one column into the next and finally into the leftmost column of the next page.
Im my case the content of the 2 columns is completly separat from each other: The data in the left column is distincly left-column-only data. As is the data in the right column distinctly right-column-only data.
Actually it is not even sure, that the left column is longer than the right.
It is absolutly o.k. to have 3 pages where the left column is empty and only the right column is filled.
An example would be: Technical data of two articles to be compared: Left is the Mercedes-data and right is the BMW-data.
Ulrich

Repeat "Detail a" section when using "Format with Multiple Columns" layout

I am using Crystal Reports for .NET (VS 2008) and I would like to get the "Detail a" section to repeat at top of a second column containing additional data in "Detail b" section. Please see below for example, specifically "Detail a (2)". Any tips or help much appreciated.
Detail a (1)_____Detail a (2)
Detail b (1-1)___Detail b (2-3)
Detail b (1-2)___Detail b (2-4)
--Detail b (1-3)___Detail a (3)
Detail a (2)______--Detail b (3-1)
--Detail b (2-1)
--Detail b (2-2)
Thx, Scott

the format with multiple columns i dont believe will show you the value 2x, but allows you to display the values across instead of down.
i think you may want to use a sub report

Report with multiplying columns and WITH clause

Hello
I saw sth strange in my report. I assume that it could happens very often.
I have report with few columns which two of them ar most complicated (many joins subqueries aggreagations on joined values etc.) These two columns (i.e C3,C4) should be multiplied (C3*C4).
When i do pure report without multiplying only columns C1,C2,C3,C4 everything is ok - duration about 15 sec. but... when I put next column on report which multiply these columns (in Answers C5=C3*C4)
I wait 3-4 minutes and my database hungs :(. After investigation I saw that in first case to databese goes pure "SELECT" statement it means:
"Select ... as C1, ... as C2, max(...) as C3, sum(xxx)... C4 from yyy,sss,ttt WHERE aaa"
but in second case BI uses WITH clause it means:
WITH SAWITH0 AS
( Select ... as C1, ... as C2, max(...) as C3, sum(xxx)... C4 from yyy,sss,ttt WHERE aaa )
SELECT SAWITH0.C1 as C1,
SAWITH0.C2 as C2,
     SAWITH0.C3 as C3,
     SAWITH0.C4 as C4,
     SAWITH0.C3*SAWITH0.C4 as C5 FROM SSS
and this statement is long runninq query and kills my database :(.
I checked that SQL like this:
Select ... as C1, ... as C2, max(...) as C3, sum(xxx)... C4, max(...)*sum(xxx)... As C5 from yyy,sss,ttt WHERE aaa" -
runs few times faster than that above
I know that I can do this multiply in business model layer but sometimes users can multiply(or other operations) on columns in reports without my knowledge and it kills my db :(. Where is bug? Why SQLs with WITH clause takes so much db time?
Thank you for each kind of help

WITH clause or Subquery Factoring allows the set of data to be reused multiple times within the SQL. Oracle will usually materialize the data into a temporary table (you will see it if you take an explain plan of the SQL).
I would be surprised if it was the actual WITH clause that was causing the performance issue, however you can test this by turning the WITH clause feature off. Go to the Physical model, right mouse click on your Database > Properties > Features Tab, scroll down to WITH_CLAUSE_SUPPORTED and switch it off.
I'd be interested to know if you do see actual improvement.
Good Luck.

Help with CSS column display

I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css.
The absolut wierdest thing just happened. After I uploaded it
for you to see, it seems to display correctly! However, inside DW8,
it still shows the sponsors div being pushed down below content.
I'm very confused now! Can anyone give me a hand? Thanks.
Mark

quote:
Originally posted by:
mlundy
I have beaten my brains trying to get a third column to
display correctly. After rereading several tutorials and helps in
Dev Center, I am still stumped! Can you take a look at my code here
http://www.mlundy.net/tigerswrestlingnew/lsTigersTemplate.html
- CSS file is
http://www.mlundy.net/tigerswrestlingnew/css/lsWrestling.css
The absolut wierdest thing just happened. After I uploaded it
for you to see, it seems to display correctly! However, inside DW8,
it still shows the sponsors div being pushed down below content.
I'm very confused now! Can anyone give me a hand? Thanks.
Mark
Actually, it still does not work correctly. Because I have
already applied a background image to the containing div, it
appears correct. The sponsors div content actually still falls
below the center, content div, instead of being top-aligned with
the headlines and content divs.

Help with 2 column layout

I can't seem to quite get the layout to work correctly on this.
http://www.openrangeimaging.com/Test/Gravity-Test/index.html
Problem -The Main Content column protrudes into the menu bar space and is not aligned with the top of the sidebar column. I'd like the MainContent and Sidebar columns to have their tops aligned with each other. I need to keep the Main Content column from protruding into the menu bar.
I inserted a spry menu bar and then modified the default styling quite a bit. It looks like it should. It is positioned where it should be. All of the css for it is stored in a separate folder that DW created when I add the spry menu. EXCEPT for one css rule, MenyBar1, that is in the other primary css folder. I don't think I added that but honestly I'm not sure. I don't know if the styling of the menu bar is responsible for the trouble. I've messed around with so much of the margin and etc on so many elements that I am now pretty confused.
I'm hoping someone can take a look at this and help me figure out what I have done incorrectly.
Thanks in advance for any reply.

markf12 wrote:
Hans thanks for your reply! Yes I want the tops of the Sidebar and Main content divs to be aligned. It's hard to tell form your screen grab but using the dashed line that's underneath the orange letter G as a reference it appears the yellow MainContent is lower than the white Sidebar. The tops are not aligned with each other.
I put the menu bar into a div and made sure it had 0 margin. I updated the file
http://www.openrangeimaging.com/Test/Gravity-Test/index.html
For some reason the Main content is allowed to move up farther than the sidebar. Also there is no top padding on the Main content but it appears the upper most heading is being held away from the top edge of the main content as if there is top padding. Something is not right here and I just can't seem to figure it out.
I'm afraid I'm starting to get frustrated and somewhat desperate <g>
Please Help!!!!!!!!!!
Amend your #nav-menu css selector to as shown below:
#nav-menu {
width: 960px;
overflow: hidden;
You'll also then need to adjust the margin and padding of the <h1> tag (Main Content). So introduce another css rule for the h1 as shown below:
#mainContent h1 {
padding: 15px 0 0 0;
margin: 0;

Help with checkbox column layout

Here is the what I need to accomplish:
I need to display a long list(50-200) of checkboxes w/ labels in a multi column format. They need to be sorted alphabetically downward and accross all columns. If scrolling is needed, then it should only scroll vertically. Something like the image below.
What I have tried was to use a TileList with a checkbox itemRenderer. It works great for 1 column and scrolls vertically just fine. It works great for 3 columns, however when it scrolls it scrolls horizontally and I need it to scroll vertically. I have attached my code.
One thing I have noticed is when you set 'direction = vertical' for a TileList the list sorts vertically but scrolls horizontally. If you leave it as default (direction = horizontal), then it sorts horizontally, but scrolls vertically. I need it to sort vertically and scroll vertically. I have tried setting the VerticallyScollPolicy and HorizontalScrollPolicy but that just cut off the data instead of changing the scroll direction.
I guess my second question is if this functionality is impossible with a TileList then what component would be a better option.
Thanks in advance for taking the time to answer my questions.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:csc="com.facl.uaf.common.shared.widget.*"
                layout="vertical"
                verticalAlign="top"
                horizontalAlign="center"
                backgroundGradientColors="[0x000000,0x323232]"
                paddingTop="20"
                paddingBottom="20">
    <mx:ArrayCollection id="collection">
        <mx:Object label="Alameda"/>
        <mx:Object label="Alpine"/>
        <mx:Object label="Amador"/>
        <mx:Object label="Butte"/>
        <mx:Object label="Calaveras"/>
        <mx:Object label="Del Norte"/>
        <mx:Object label="El Dorado"/>
        <mx:Object label="Fresno"/>
        <mx:Object label="Kern"/>
        <mx:Object label="Los Angeles"/>
        <mx:Object label="Orange"/>
        <mx:Object label="Placer"/>
        <mx:Object label="Plumas"/>
        <mx:Object label="Riverside"/>
        <mx:Object label="Sacramento"/>
        <mx:Object label="San Diego"/>
        <mx:Object label="San Francisco"/>
        <mx:Object label="Santa Barbara"/>
        <mx:Object label="Santa Clara"/>
        <mx:Object label="Santa Cruz"/>
    </mx:ArrayCollection>
    <mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml"
                 color="#323232"
                 textAlign="left"
                 paddingLeft="20"
                 itemRenderer="mx.controls.CheckBox"
                 verticalScrollPolicy="auto"
                 themeColor="#FFFFFF"
                 dataProvider="{collection}"
                 columnCount="3"
                 width="500"
                 height="100"
                 direction="vertical">
    </mx:TileList>
</mx:Application>

A List class like TileList does a couple of important things. It only creates enough renderers to fill the viewable portion so you don't end up allocating tons of memory for 1000's of data items, and it has a selection model where you can select one or more data items and it draws a rollover and selection colored backgrounds over the entire renderer.
Do you need that? If not, a VBox with 3 HBoxes with 1/3 of the checkboxes in each HBox is all you need. You can use a Repeater to generate the checkboxes or just add them in a loop.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Help with CSS beginner layout problem?

Making my first CSS website. See http://www.capeannphysicaltherapy.com/index-test.html
The DIV layout held up fine even after I copied text into the #main_text DIV. But when I turn it into html the #main_content DIV jumps down even though the text stays in place. I'd appreciate any help.
Thanks

Increase text size in browser (Ctrl+++) Zoom, text only - to test your pages.
Get rid of DIV container HEIGHT-itis:
#container {
width: 812px;
background: #FFFFFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 566px; **remove me, no height is needed here**/
#left_container {
width: 222px;
float: left;
background-image: url(images/banner_left.gif);
height: 566px; /**remove me**/
min-height: 566px /**for non-IE browsers only**/
#main_content {
background-image: url(images/content_area.gif);
height: 370px; /**remove me**/
min-height: 370px; /**for non-IE browsers only**/
width: 590px;
Web pages need to be flexible. Do a Google search for "CSS Min- & Max width" and "CSS Min- & Max heights."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

Help with css float layout

Hi I am having problems with a page http://beermattonline.co.uk/manuscript_doctor/fees_submissions1.html half way down after the fees sub heading I can't get the next line to appear underneath it instead of to the right. Any suggestions? Here is my CSS.
Thanks in advance, Matt.
.banner {
.line {
   margin-top: 5px;
   margin-bottom: 5px;
   .small_line {
   margin-top: 5px;
   margin-bottom: 5px;
    .long_line {
   margin-top: 50px;
   margin-bottom: 5px;
   margin-left:55px;
   marging-right:55px;
   .footer {
   font-size: small;
   text-align: center;
.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;
background-color:#fff8e8;
border-style:solid;
border-width:0px;
height: 1000px;
.sub_heading {
float:right;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:530px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.sub_sub_heading {
float:left;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:250px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.text_centre {
float:right;
border-style:solid;
border-width:0px;
margin-top:5px;
border-color:#473d33;
position: relative;
width:543px;
background-color:#fff8e8;
.links {
border-style:solid;
border-width:0px;
margin-top:4px;
margin-bottom:4px;
border-color:#473d33;
background-color:#fff8e8;
font-size: small;
text-align:center;
A:link {text-decoration: none; color: #26221e; }
A:visited {text-decoration: none; color: #26221e; }
A:active {text-decoration: none; color: #ffffff; }
A:hover {text-decoration: underline; color: #ff7d3e; }
.float_left {
float:left;
width: 140px;
border-style:solid;
border-width:2px;
margin-top:20px;
margin-right:10px;
margin-bottom:20px;
padding: 5px;
border-color:#ffedc7;
background-color:#fff2d6;
body {
font-family: Georgia, "Lucida Sans Unicode", lucida, Verdana, sans-serif;
bont-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
background-color:#fff8e8;
letter-spacing: 1px;
color: #4c443c;
h1 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h2 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h3 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h4 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h6 { color: #26221e; margin-bottom:0px; margin-top: 5px;}

If you change the next to last style definition in your CSS file "manuscriptdoctor.css" from
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; }
to:
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; clear: both; }
everything should be fine.

Problem with two-column layout

Hello,
I've done table-based layouts for several years, but I'm
trying to switch to CSS. I still have a lot to learn...
I'm trying to create a web site as a favor for a friend. She
hasn't figured out what she wants yet, so I've just been creating
some pages using canned designs. I created one using "Two-column
left nav" under Dreamweaver's "Page designs (CSS)":
http://www.alcie.org/demo2/
I want a fixed-width left navigation column and a fluid
content column.
I ran into several problems with the original design. The
most notible was that if I changed the browser window width, both
the content and nav columns would resize. I didn't want that, so I
set "navBar" width: 150px. That worked, but if I make the window
too narrow, the content starts to overlap the navigation column in
Firefox 1.5.0.6, and the navigation DIV drops to below the content
in IE 7 rc (I think) 3 and IE6. I tried removing the width
altogether, but that made things worse.
What is wrong with this picture? Is there a cleaner way to
solve my problem?
Thanks.

> Is there a cleaner way to solve my problem?
Yes - dump that layout. It's too quirky. Go here and grab one
http://www.maxdesign.com.au/presentation/page_layouts/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Clean & Sober" <[email protected]>
wrote in message
news:edgvl4$akl$[email protected]..
> Hello,
>
> I've done table-based layouts for several years, but I'm
trying to switch
> to
> CSS. I still have a lot to learn...
>
> I'm trying to create a web site as a favor for a friend.
She hasn't
> figured
> out what she wants yet, so I've just been creating some
pages using canned
> designs. I created one using "Two-column left nav" under
Dreamweaver's
> "Page
> designs (CSS)":
>
>
http://www.alcie.org/demo2/
>
> I want a fixed-width left navigation column and a fluid
content column.
>
> I ran into several problems with the original design.
The most notible
> was
> that if I changed the browser window width, both the
content and nav
> columns
> would resize. I didn't want that, so I set "navBar"
width: 150px. That
> worked, but if I make the window too narrow, the content
starts to overlap
> the
> navigation column in Firefox 1.5.0.6, and the navigation
DIV drops to
> below the
> content in IE 7 rc (I think) 3 and IE6. I tried removing
the width
> altogether,
> but that made things worse.
>
> What is wrong with this picture? Is there a cleaner way
to solve my
> problem?
>
> Thanks.
>

Need Help Starting CSS Page Layout

Hi, I need a little help getting started in creating a CSS
layout page in Dreamweaver CS4. I am following a tutorial online
but I have run into a problem. What I am trying to do is get a
simple CSS layout started. Below I have listed my steps.
1) First I created a new .html page and named it "index.html"
2) Next, in the "Properties" panel I clicked the "CSS" button
3) I then selected the "Edit Rule" button and a window opened
called "New CSS Rule"
4) I then left all default settings and in the window where
it asked me for a name for my selector I typed in:
main_layout.css
Then I got this message below.
"Class names must start with an alphabetical character
preceded by an optional period. There should be no
spaces or additional punctuation."
What am I doing wrong? Can someone please tell me the correct
steps to start a CSS layout in DW CS4?
Thanks

Undescore are Ok in CSS, your problem is the starting. When
you define a
class in CSS you have to start the calss name with a period.
Plus they
cannot be a period after so...
If you want to define a class.
main_layout.css is not OK
.main_layout is OK
main_layout is not OK
Putting a ".css" a the end is for a file name not a selector
So with my example .main_layout you would then applie this
class to a tag
like this
<p class=" main_layout">Put text here</p>
Now if you want to define a ID selector then you start tou
selector eith "#"
no quotation mark
so
#container {
position:relative;
background-color: #fff;
width: 800px;
margin: 0 auto;
top: 20px;
border-top: 0;
border-right: 1px solid #b7b7b7;
border-bottom: 0;
border-left: 1px solid #b7b7b7;
And then you apply this as an id
<div id="container">Put content here</div>
Do you get it. If not then go get a good book on CSS.
aka Frenchy ASP
"tweened" <[email protected]> wrote in
message
news:ge27el$a8i$[email protected]..
> I'm still learning CSS myself. But I have never seen a
style sheet name
> with an
> underscore in it or any punctuation for that matter. If
you look at the
> last
> sentence in the error message you got, It tells you that
no additional
> punctuation can be used. Try using "style" as your css
name. the same
> would go
> for the property tags within the style sheet, don't use
any punctuation in
> the
> names.
>

Setting a minimum column height with CSS?

I'm working on a website with two column layout. The left
column contains a list of site navigation links, the right column
contains actual content for any given page. I'm using CSS to set a
left-hand rule that runs the height of the right-hand column. On
some pages, there's a lot of content; on others, very little. When
there's little content, my rule doesn't run as long as the links
list, because the rule is applied to the right column.
So, I want this rule to run at least as long as that left
column, but run as long as the content in the right column when
needed. Here are links to a couple of pages, so you can see what's
going on:
Good:
http://www.hillphoenix.com/web_redesign/techInfo/techInfo.html
Not so good:
http://www.hillphoenix.com/web_redesign/communications/whatsNew.html
Thanks for your help, in advance!

graylensman wrote:
|| I'm working on a website with two column layout. The left
column
|| contains a list of site navigation links, the right column
contains
|| actual content for any given page. I'm using CSS to set a
left-hand
|| rule that runs the height of the right-hand column. On
some pages,
|| there's a lot of content; on others, very little. When
there's
|| little content, my rule doesn't run as long as the links
list,
|| because the rule is applied to the right column.
||
|| So, I want this rule to run at least as long as that left
column,
|| but run as long as the content in the right column when
needed. Here
|| are links to a couple of pages, so you can see what's
going on:
||
|| Good:
||
http://www.hillphoenix.com/web_redesign/techInfo/techInfo.html
||
|| Not so good:
||
http://www.hillphoenix.com/web_redesign/communications/whatsNew.html
||
||
|| Thanks for your help, in advance!
hello,
apply this to your right column div and change 430px to
whatever you want
min-height: 430px;
height:auto;
_height: 430px;
regards
bretz

Help with css 3 column layout with background

Similar Messages

Maybe you are looking for