css HELP!!!!!!!!

jackfusion · #1 (**permalink**) Apr 19th, 2006, 16:58

div#pullquote
{
    background: blue url(lefttopcorner.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;    
}

div#pullquotea
{
    background-image: url(righttopcorner.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

div#pullquoteb
{
    background-image: url(rightbottomcorner.jpg);
    background-position: bottom right;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

div#pullquotec
{
    background-image: url(leftbottomcorner.jpg);
    background-position: bottom left;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

#box 
{
    background-color: white;
    width: 94%;
    margin-top: 20px;
    margin-left: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*#header 
{
    background-color: white;
    border-bottom: 10px solid blue;
    margin: 0;
    padding: 0;
    width: 800px;
}

#left_col 
{
    float: left;
    background-color: white;
    width: 150px;
    text-align: left;
    margin: 0;
    padding: 0;
}

#right_col 
{
    background-color: white;
    width: 643px;
    border-left: 10px solid blue;
    margin-left: 150px;
    text-align: left;
}

body 
{
    padding: 1.5%;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#header h1 
{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    margin: 8px;
    text-align: center;
}
*/

Code: Select all

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="borders.css">
</head>
<body>
    <div id="pullquote">            
        <div id="pullquotea">
            <div id="pullquoteb">
                <div id="pullquotec">
                    <div id="box">    
                        <div id='header'>Ken's Comp. Repair</div>
                            <div id='body'>
                                <div id='left_col'>
                                    <p>Here is some basic text for the left column.</p>
                                    <p>Hi my name is Kenny Leitz</p>
                                    <p>And here is where the right column goes. Notice that this works well in both IE and FireFox, too.</p>
                                </div>
                                <div id='right_col'>
                                    <p>Hi my name is Kenny Leitz</p>
                                    <p>And here is where the right column goes. Notice that this works well in both IE and FireFox, too.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    
</body>
</html>

http://www.geocities.com/studentrrc/borders.htm
http://www.geocities.com/studentrrc/borders.css

Above are css and html code with the links to the websites to show how they look. The problem I am haviing is that top and bottom do not look like the sides. I am using % because I want it to expand with the users's resolution. So it can look the same on almost any resolution. It looks the same in ie as it dose in fire fox almost if I may get some help with this from you wonderful css pros. that would be great.

ukgeoff · #2 (**permalink**) Apr 21st, 2006, 16:21

Hi there,

In all honesty, the best thing yoy could do to start with is think about the layout you want and get rid of all those embedded divs.

No sure what the score is here but there are several chunks of code that have the comments;

HTML: Select all

<!-- following code added by server. PLEASE REMOVE -->

If you can, do what it says.

The page certainly does not resolve the same in IE 6 on XP and Firefox.

Get rid of the frames, you don't need them. Clean up the code. One of my developer plugins in Firefox is showing more warnings that you really want to know about.

Once you have done that, validate your code using the W3C validator at http://validator.w3.org/
and then repost and I and I'm sure others will be happy to help with any css issues you may have.

masonbarge · #3 (**permalink**) Apr 22nd, 2006, 13:13

I did a collapsing round-corner layout once just for practice (never put it online) but it worked nicely, although it had a min-width where it ceased to squeeze.

Here's the css for the four corners (tl is top left, etc.; graphics were about 20x20)

Code: Select all

#bl {position: absolute; 
left: 0%; 
top: 120px;
float: left;}

#tr {float: right;}

#br {position: absolute; 
right: 0%; 
top: 120px;}

Then I just popped them all in a div.

Hmm, I seem to be missing #tl. Well that's the easy one, probably I just floated it left.

I'm sorry, my files are a total mess for this since I was experimenting, and I can't tell at this point which css file I actually used. I may have put the top corners in a separate div at some time. The point is, I didn't nest divisions.

My last iteration of this had a head box with round corners and a separate text box with round top corner, with buttons in-between.

I think I had two columns of text, one at a % and one auto.

<-- no expert, but this worked for me.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css HELP!!!!!!!!