Jump to content

basic layout help needed

boo_lolly

By boo_lolly
in CSS Help

 Share

Recommended Posts

boo_lolly Regular Member

boo_lolly

Posted
Posted

i am new to css and am trying to figure out the best way to control templates so they will be as dynamic and configurable with the least amount of work. that is, i want to do the work once, and if i have to, very little after that to change things. mainly i'd like to be able to change nothing but the stylesheet and create several templates without touching the xhtml. anyway, this template i'm working on has  4 corners that don't repeat. all sides do repeat. and a middle (content) that repeats. i've got an image for each corner, and an image for each side, and an image for the content. how would i do this? here's what i've got so far and it doesn't seem to be working out so great.

 

stylesheet.css

body,
html {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 125px;
    padding: 0px;
    background: #decbbc;
    color: #000;
}


#container {
    width: 754px;
    background-image: url('bgbgbg.jpg');
    border: 1px solid blue;
}

#top {
    width: 100%;
    height: 71px;
    background-image: url('top.jpg');
    background-repeat: repeat-x;
    border: 1px solid green;
}

#topright {
    float: right;
    width: 54px;
    height: 71px;
    background-image: url('topright.jpg');
    background-repeat: no-repeat;
    border: 1px solid green;
}

#topleft {
    float: left;
    width: 54px;
    height: 71px;
    background-image: url('topleft.jpg');
    background-repeat: no-repeat;
    border: 1px solid green;
}
#left {
    float: left;
    width: 100%;
    height: 100%;
    background-image: url('left.jpg');
    background-repeat: repeat-y;
    border: 1px solid red;
}

#right {
    float: right;
    width: 100%;
    height: 100%;
    background-image: url('right.jpg');
    background-repeat: repeat-y;
    border: 1px solid red;
}

#content {
    color: #000;
    font-family: arial;
    font-size: 13px;
}

#bottom {
    clear: both;
    width: 100%;
    height: 71px;
    background-image: url('bottom.jpg');
    background-repeat: repeat-x;
    border: 1px solid green;
}

#bottomright {
    float: right;
    width: 54px;
    height: 71px;
    background-image: url('bottomright.jpg');
    background-repeat: no-repeat;
    border: 1px solid green;
}

#bottomleft {
    float: left;
    width: 54px;
    height: 71px;
    background-image: url('bottomleft.jpg');
    background-repeat: no-repeat;
    border: 1px solid green;
}

 

index.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" lang="en" xml:lang="en">
    <head>
        <title>www.witnessingheadlines.com</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />

<body>
<div id="container">
    <div id="left">
    <div id="right">
    <div id="top">
        <div id="topleft">
        </div> <!-- topleft -->
        <div id="topright">
        </div> <!-- topright -->
    </div> <!-- top -->

        <div id="content">
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        </div> <!-- content -->

    <div id="bottom">
        <div id="bottomleft">
        </div> <!-- topleft -->
        <div id="bottomright">
        </div> <!-- topright -->
    </div> <!-- bottom -->
    </div> <!-- right -->
    </div> <!-- left -->
</div> <!-- container -->

 

the borders are just there to help me see what's going on. the address is http://98.199.114.128/test

 

what's going on here?

 

(i know the images are not flush and seamless, but it's the structure of the layout i'm worried about now.)

Link to comment
https://forums.phpfreaks.com/topic/80243-basic-layout-help-needed/
Share on other sites
boo_lolly Regular Member

boo_lolly

Posted
  • Author
Posted

i've made some adjustments and i'm still having problems. here's what i've got now:

 

stylesheet.css

body,
html {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5%;
    margin-right: 5%;
    padding: 0px;
    background: #decbbc;
    color: #000;
}

#container {
    width: 100%;
    border: 1px solid blue;
}

#top {
    width: 100%;
    height: 71px;
    background-image: url('top.jpg');
    background-repeat: repeat-x;
    border: 1px solid green;
}

#topright {
    float: right;
    width: 54px;
    height: 71px;
    background-image: url('topright.jpg');
    background-repeat: no-repeat;
    border: 1px solid green;
}

#topleft {
    float: left;
    width: 54px;
    height: 71px;
    background-image: url('topleft.jpg');
    background-repeat: no-repeat;
    border: 1px solid green;
}

#middle {
    background-image: url('bgbgbg.jpg');
    background-repeat: repeat;
    border: 1px solid green
}

#left {
    width: 51px;
    height: 100%;
    background-image: url('left.jpg');
    background-repeat: repeat-y;
    border: 1px solid red;
}

#right {
    width: 51px;
    height: 100%;
    background-image: url('right.jpg');
    background-repeat: repeat-y;
    border: 1px solid red;
}

#content {
    margin-left: 51px;
    margin-right: 51px;
    width: 90%;
    color: #000;
    font-family: arial;
    font-size: 13px;
    background-image: url'bgbgbg.jpg');
    border: 2px dotted black;
}

#bottom {
    clear: both;
    width: 100%;
    height: 71px;
    background-image: url('bottom.jpg');
    background-repeat: repeat-x;
    border: 1px solid green;
}

#bottomright {
    float: right;
    width: 54px;
    height: 71px;
    background-image: url('bottomright.jpg');
    background-repeat: no-repeat;
    border: 1px solid green;
}

#bottomleft {
    float: left;
    width: 54px;
    height: 71px;
    background-image: url('bottomleft.jpg');
    background-repeat: no-repeat;
    border: 1px solid green;
}

 

index.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" lang="en" xml:lang="en">
    <head>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />

<body>

<div id="container">

    <div id="top">
        <div id="topleft">
        </div> <!-- topleft -->
        <div id="topright">
        </div> <!-- topright -->
    </div> <!-- top -->
    
    <div id="middle">
        
        <div id="left">
        something in the left
        </div> <!-- left -->
        
        <div id="content">
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        </div> <!-- content -->
        
        <div id="right">
        something in the right
        </div> <!-- right -->

    </div> <!-- middle -->

    <div id="bottom">
        <div id="bottomleft">
        </div> <!-- bottomleft -->
        <div id="bottomright">
        </div> <!-- bottomright -->
    </div> <!-- bottom -->
</div> <!-- container -->

</body>
</html>

 

what's going on here? why can't i get left, content, and right to display next to eachother? and the link is: [ http://98.199.114.128/test ]

scottybwoy Advanced Member

scottybwoy

Posted
Posted

For left middle and right, try adding display:inline; and float:left; to all of them.

 

Note how that works and work around that.  You can then play around using that same style to the top and bottom one since the way you are making your grid.

 

Good Luck

boo_lolly Regular Member

boo_lolly

Posted
  • Author
Posted

thanks for the advice scotty. i changed the xhtml a little. at first i separated the site into 3 rows. now, it's in 3 columns. the left, right and middle are positioned correctly, but the corners are not. i'm still not sure what's going on here. i want to avoid making 2 stylesheets for cross-browser compatibility, and as far as i know, IE has issues with float. but anyway. here's the code.

 

stylesheet

body,
html {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5%;
    margin-right: 5%;
    padding: 0px;
    background: #decbbc;
    color: #000;
}


#container {
    width: 100%;
    border: 1px solid blue;
}

#top {
    width: 100%;
    height: 71px;
    background-image: url('top.jpg');
    background-repeat: repeat-x;
    border: 1px solid green;
}

#topright {
    float: right;
    width: 54px;
    height: 71px;
    background-image: url('topright.jpg');
    background-position: top;
    background-repeat: no-repeat;
    border: 1px solid green;
}

#topleft {
    float: left;
    width: 54px;
    height: 71px;
    background-image: url('topleft.jpg');
    background-position: top;
    background-repeat: no-repeat;
    border: 1px solid green;
}

#middle {
    display: inline;
    float: left;
    background-image: url('bgbgbg.jpg');
    background-repeat: repeat;
    border: 1px solid green
}

#left {
    display: inline;
    float: left;
    width: 51px;
    height: 100%;
    background-image: url('left.jpg');
    background-repeat: repeat-y;
    border: 1px solid red;
}

#right {
    display: inline;
    float: left;
    width: 51px;
    height: 100%;
    background-image: url('right.jpg');
    background-repeat: repeat-y;
    border: 1px solid red;
}

#content {
    margin-left: 51px;
    margin-right: 51px;
    width: 90%;
    color: #000;
    font-family: arial;
    font-size: 13px;
    background-image: url'bgbgbg.jpg');
    border: 2px dotted black;
}

#bottom {
    clear: both;
    width: 100%;
    height: 71px;
    background-image: url('bottom.jpg');
    background-repeat: repeat-x;
    border: 1px solid green;
}

#bottomright {
    float: right;
    width: 54px;
    height: 71px;
    background-image: url('bottomright.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    border: 1px solid green;
}

#bottomleft {
    float: left;
    width: 54px;
    height: 71px;
    background-image: url('bottomleft.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    border: 1px solid green;
}

 

index.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" lang="en" xml:lang="en">
    <head>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />

<body>

<div id="container">
<div id="left">
    <div id="topleft"></div>
    dirka dirka
    <div id="bottomleft"></div>
</div> <!-- left -->
<div id="middle">
    <div id="top"></div>
    <div id="content">
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
        content<br /><br />
    </div> <!-- content -->
    <div id="bottom"></div>
</div> <!-- middle -->
<div id="right">
    <div id="topright"></div>
    <div id="bottomright"></div>
</div> <!-- right -->
</div> <!-- container -->

</body>
</html>

 

and as always. the address is http://98.199.114.128/test

 

help me figure this thing out

dbrimlow Member

dbrimlow

Posted
Posted

Without looking at anything else, yet, the one thing I noticed was that you are missing the mime type (which is essential in xhtml).

 

Add this to your head tag:

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

Since you are not parsing actual XML, my advice is lose the XHTML doctype altogether and use HTML 4.01 Strict. When xhtml is served as "text/html" it really just presents it as HTML anyway so there is no point in using an xhtml doctype. Besides, xhtml is way too unforgiving for beginners to css and ends up causing them frustration.

 

Transition to HTML 4.01 is simple.

 

Simply replace your closing tags by removing the slash - and go back to 

<br>

instead of 

<br />

 

The layout will work exactly the same, but it will be easier for you to de-bug.

 

Your test link is timing out, so I don't know how it is supposed to look. But based on your sample code here, it has no layout at all.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.