CSS Giving me trouble

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

This CSS bit is giving me trouble. This design isn't going to go into Wedevoy re-design, I'm just working on a side-project while I'm waiting for some reviews on my designs that are going to go into wedevoy.

Anyway, the design for this side project could be found here. I need help on it in following areas:
  • The Design
  • Look
What I'm basically asking on this is a review and some help.

Once you see the design, you will notice that the content part (The one with Lorem Ipsum) doesn't go to the very edge of the screen... I could do it, all I have to do is change the width of #body from 67.75 to about 80 or 75 (on my resolution)... the problem with that though, if you shrink the screen or use a smaller resolution you get an x-scroller (Scroll bar that scrolls from side to side).

This is becoming a bit frustrating... I'm thinking of going to tables right now :lol:

Another thing I need/want is a simple review on the site...
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • roje0913
  • Student
  • Student
  • roje0913
  • Posts: 78

Post 3+ Months Ago

I guess it kind of depends on what you are using the site for. It seems a bit dark but that may be okay if you are leaning to something more youthful or edgy. if you dont want to take the text all the way across, what about a subdued repeatable background on that side to not leave it looking like something is missing? Maybe a few icons for your 'posted by' and comments just to liven it up a bit. That and a nice logo and I think you have a winner. Please keep in mind that if you are making this for a customer, what he/she thinks is all that matters :-)
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Content Management System</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                background-color: #000000;
            }
            
            a {
                text-decoration: none;
                color: #ffcc00;
            }
            
            a:hover {
                text-decoration: underline;
            }
            
        p {
        padding: 0 10px 0 5px;
        text-align: justify;
        }

            #header {
                width: 98%;
                height: 100px;
                padding-left: 2%;
                background-color: #444444;
                background-image: url('header.png');
            }
            
            #tnav {
                width: 100%;
                height: 20px;
                text-align: center;
                background-color: #444444;
                border-top: 1px solid #000000;
                border-bottom: 1px solid #000000;
            }
            
            #tnav ul li {
                display: inline;
                list-style-type: none;
            }
            
            #tnav ul li a {
                height: 100%;
                color: #cccccc;
                padding-left: 10px;
                padding-right: 10px;
                background-color: #333333;
            }
            
            #tnav ul li a:hover {
                height: 100%;
                color: #bbbbbb;
                padding-left: 10px;
                padding-right: 10px;
                background-color: #222222;
            }
    
        #wrapper {
        width: 1000px;
        margin: 0 auto;
        }
            
            #container {
                width: 100%;
                height: 100%;
                background-color: #555555;
            }
            
            #body {
                width: 790px;
                float: left;    
        padding: 0 0 0 190px;
            }
            
            #body p {
                margin-bottom: 10px;
                margin-left: 5px;
            }
            
            .box_head {
                width: 100%;
                clear: right;
                color: #cecece;
                text-align: center;
                background-color: #666666;
                border-bottom: 1px dashed #222222;
            }
            
            .cfoot {
                float: right;
            }
            
            #rnav {
                width: 190px;
                height: 100%;
                color: #AAAAAA;
        position: absolute;
                background-color: #222222;
                background-position: right;
                background-image: url('right_back.png');
            }
            
            #footer {
                clear: both;
                color: #cecece;
                text-align: center;
                background-color: #333333;
                border-top: 1px dashed #000000;
            }
        </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
        <h1>My Site</h1>

        <p>Witty Textual Line Here</p>
    </div>
    <div id="tnav">
        <p><ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Blog</a></li>

                <li><a href="#">Profile</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact us</a></li>
            </ul></p>
    </div>
    <div id="container">

        <div id="body">
            <p class="box_head">Some Header Text 1</p>
            <p>Lorem ipsum ne ius alterum vivendum iracundia, ad eos graecis adipiscing. Dolorum repudiandae eam

ex, aeterno verterem usu ad, ne eos graeco deserunt. Nam te antiopam constituto, mea in affert suscipit

quaerendum, ex eam suas nobis recusabo. Altera fuisset temporibus ei pri, assum nonumy possim sit ne, usu vero

falli aeque an. Nec cu idque oporteat assueverit, prompta minimum consectetuer eam ea, tale tation repudiare vix

te. Eum audiam meliore adolescens no, cu eam takimata gloriatur, vidit ignota moderatius eum at.</p>
            <p>Nihil oratio conclusionemque at come, per choro minimum insolens ex. Nam ne audire labitur

placerat. Odio numquam suscipiantur ex has, pri ne everti insolens laboramus. Ea legere assueverit concludaturque

mea, quo ex patrioque gubergren sententiae. Fierent deleniti praesent ex pri, ludus inermis et mea.</p>
            <p>Ne vel alii solum accommodare, eam eu nominavi delicata mandamus, mea dicta latine no. Dicit

accusata definiebas no quo, in atqui discere repudiandae eos. Cu expetenda corrumpit rationibus quo, no pri

vidisse omnesque. Eu mea munere suscipit delicatissimi, in augue debet persius vim, graeco vivendum accommodare

sed an. Quodsi epicuri repudiandae ne quo, ei eos eros scaevola suavitate, sed scaevola appetere ad. Nostrud

civibus gubergren eos et, et eam simul nihil pericula. Vix an nibh aliquyam, munere option eam eu, in eum dicta

solet adversarium.</p>
            <p>Suas saepe ius et, ei prima posse eos. Ut postea tamquam minimum per, hinc omnesque repudiandae ne

eos. Qui rebum oporteat necessitatibus ad, audiam convenire prodesset pro te. Vim ne consul graecis reformidans,

come alienum dissentias eu, eu duo scripta legimus detraxit. Dico mazim timeam at eam, sit eu iriure aliquyam. Vis

omnium omittam efficiendi ea, porro mollis accommodare per eu.</p>

            <p>At augue nonumy consul mea, cu tale oratio comprehensam pro. Decore dolore nullam mel at, ad elit

semper iuvaret vel, mei at vide etiam pertinax. Ut ipsum tamquam suscipit eos, ea erat inciderint est. An est

solum voluptatum dissentiunt, putant aliquip facilis mea no. Quod magna interesset sea ea, ne mea sonet partem

prompta, eu mutat adhuc principes has.</p>
            <p>Meis iuvaret disputationi sed cu, facilisi corrumpit id come. An quem nullam adversarium per, his

ei nobis solet consequuntur. His ne vide vitae delectus, mei debet commodo ne. Eu dico iusto splendide mea, wisi

illum consul ei nec. Dicunt deleniti pro te, ne est quis sanctus sadipscing. Populo omnesque no pro, ipsum

aliquip torquatos an pro, ne enim inani mel.</p>
            <p class="cfoot">Posted By: <a href="#">Bogey</a> Comments: <a href="#">0</a></p>
            <p class="box_head">Some Header Text 2</p>
            <p>Iisque mentitum luptatum vix ea, has an possit verterem facilisis, ut usu veri iriure inciderint.

Cu utinam fabellas voluptatibus vix, ad sit tollit conclusionemque. Quod omnis suscipiantur nam eu, te luptatum

sententiae percipitur duo, id vocent inermis democritum come. No mucius ornatus perfecto come, ea mei antiopam

philosophia, vis cu adhuc expetendis mnesarchum. Luptatum scriptorem in his, te pri vidisse efficiantur

ullamcorper. Ne populo latine persecuti vix, eu eum rebum postea delenit, ut mei tamquam nonummy.</p>

            <p>Vim in dicta expetenda, et mei quem eirmod luptatum. Ea sint illum elitr eum, ea postea abhorreant

appellantur duo. Aperiam consulatu ut eam, veri vidisse facilisis ne usu. Per idque facete invenire id, quo porro

honestatis consequuntur in. Ne noster audire latine vis, dicit errem tincidunt ius id. Cu duo assentior

expetendis definiebas, novum legimus definitiones te vel.</p>
            <p>Eu come mollis noluisse scriptorem, dico brute disputando ut sed, nam quot eripuit quaerendum eu.

An pro quaeque saperet disputando, pri id ignota alienum disputationi, veritus quaestio nec id. Eos eius maiorum

sententiae no, sed nisl impedit nominati cu. Eos debet aliquam singulis eu, tale accusamus est te. Sit ne unum

quas dicta, pri in elitr aeterno pertinax. Vix quod tale disputando ad, nec quot congue appareat eu, vix vivendum

urbanitas et.</p>
            <p>Unum quas laoreet eos cu, vel id porro postea audire. Tempor probatus constituam vis te, eum eu

omnes dicant mediocrem. Id erat diceret ullamcorper vel. Cu consul dicunt est, zzril vitae euismod ea vix, an sea

apeirian takimata salutatus. Sed at audiam detraxit elaboraret.</p>
            <p class="cfoot">Posted By: <a href="#">Bogey</a> Comments: <a href="#">4</a></p>
        </div>


        <div id="rnav">
            <p>Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey

Hey Hey</p>
        </div>
        <div id="footer">
            <p>Copyright &copy; 2009-2010</p>
        </div>
    </div>
    </div>

    </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4.     <head>
  5.         <title>Content Management System</title>
  6.         <style type="text/css">
  7.             * {
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             
  12.             body {
  13.                 background-color: #000000;
  14.             }
  15.             
  16.             a {
  17.                 text-decoration: none;
  18.                 color: #ffcc00;
  19.             }
  20.             
  21.             a:hover {
  22.                 text-decoration: underline;
  23.             }
  24.             
  25.         p {
  26.         padding: 0 10px 0 5px;
  27.         text-align: justify;
  28.         }
  29.             #header {
  30.                 width: 98%;
  31.                 height: 100px;
  32.                 padding-left: 2%;
  33.                 background-color: #444444;
  34.                 background-image: url('header.png');
  35.             }
  36.             
  37.             #tnav {
  38.                 width: 100%;
  39.                 height: 20px;
  40.                 text-align: center;
  41.                 background-color: #444444;
  42.                 border-top: 1px solid #000000;
  43.                 border-bottom: 1px solid #000000;
  44.             }
  45.             
  46.             #tnav ul li {
  47.                 display: inline;
  48.                 list-style-type: none;
  49.             }
  50.             
  51.             #tnav ul li a {
  52.                 height: 100%;
  53.                 color: #cccccc;
  54.                 padding-left: 10px;
  55.                 padding-right: 10px;
  56.                 background-color: #333333;
  57.             }
  58.             
  59.             #tnav ul li a:hover {
  60.                 height: 100%;
  61.                 color: #bbbbbb;
  62.                 padding-left: 10px;
  63.                 padding-right: 10px;
  64.                 background-color: #222222;
  65.             }
  66.     
  67.         #wrapper {
  68.         width: 1000px;
  69.         margin: 0 auto;
  70.         }
  71.             
  72.             #container {
  73.                 width: 100%;
  74.                 height: 100%;
  75.                 background-color: #555555;
  76.             }
  77.             
  78.             #body {
  79.                 width: 790px;
  80.                 float: left;    
  81.         padding: 0 0 0 190px;
  82.             }
  83.             
  84.             #body p {
  85.                 margin-bottom: 10px;
  86.                 margin-left: 5px;
  87.             }
  88.             
  89.             .box_head {
  90.                 width: 100%;
  91.                 clear: right;
  92.                 color: #cecece;
  93.                 text-align: center;
  94.                 background-color: #666666;
  95.                 border-bottom: 1px dashed #222222;
  96.             }
  97.             
  98.             .cfoot {
  99.                 float: right;
  100.             }
  101.             
  102.             #rnav {
  103.                 width: 190px;
  104.                 height: 100%;
  105.                 color: #AAAAAA;
  106.         position: absolute;
  107.                 background-color: #222222;
  108.                 background-position: right;
  109.                 background-image: url('right_back.png');
  110.             }
  111.             
  112.             #footer {
  113.                 clear: both;
  114.                 color: #cecece;
  115.                 text-align: center;
  116.                 background-color: #333333;
  117.                 border-top: 1px dashed #000000;
  118.             }
  119.         </style>
  120.     </head>
  121.     <body>
  122.     <div id="wrapper">
  123.     <div id="header">
  124.         <h1>My Site</h1>
  125.         <p>Witty Textual Line Here</p>
  126.     </div>
  127.     <div id="tnav">
  128.         <p><ul>
  129.                 <li><a href="#">Home</a></li>
  130.                 <li><a href="#">Forum</a></li>
  131.                 <li><a href="#">Blog</a></li>
  132.                 <li><a href="#">Profile</a></li>
  133.                 <li><a href="#">Links</a></li>
  134.                 <li><a href="#">About Us</a></li>
  135.                 <li><a href="#">Contact us</a></li>
  136.             </ul></p>
  137.     </div>
  138.     <div id="container">
  139.         <div id="body">
  140.             <p class="box_head">Some Header Text 1</p>
  141.             <p>Lorem ipsum ne ius alterum vivendum iracundia, ad eos graecis adipiscing. Dolorum repudiandae eam
  142. ex, aeterno verterem usu ad, ne eos graeco deserunt. Nam te antiopam constituto, mea in affert suscipit
  143. quaerendum, ex eam suas nobis recusabo. Altera fuisset temporibus ei pri, assum nonumy possim sit ne, usu vero
  144. falli aeque an. Nec cu idque oporteat assueverit, prompta minimum consectetuer eam ea, tale tation repudiare vix
  145. te. Eum audiam meliore adolescens no, cu eam takimata gloriatur, vidit ignota moderatius eum at.</p>
  146.             <p>Nihil oratio conclusionemque at come, per choro minimum insolens ex. Nam ne audire labitur
  147. placerat. Odio numquam suscipiantur ex has, pri ne everti insolens laboramus. Ea legere assueverit concludaturque
  148. mea, quo ex patrioque gubergren sententiae. Fierent deleniti praesent ex pri, ludus inermis et mea.</p>
  149.             <p>Ne vel alii solum accommodare, eam eu nominavi delicata mandamus, mea dicta latine no. Dicit
  150. accusata definiebas no quo, in atqui discere repudiandae eos. Cu expetenda corrumpit rationibus quo, no pri
  151. vidisse omnesque. Eu mea munere suscipit delicatissimi, in augue debet persius vim, graeco vivendum accommodare
  152. sed an. Quodsi epicuri repudiandae ne quo, ei eos eros scaevola suavitate, sed scaevola appetere ad. Nostrud
  153. civibus gubergren eos et, et eam simul nihil pericula. Vix an nibh aliquyam, munere option eam eu, in eum dicta
  154. solet adversarium.</p>
  155.             <p>Suas saepe ius et, ei prima posse eos. Ut postea tamquam minimum per, hinc omnesque repudiandae ne
  156. eos. Qui rebum oporteat necessitatibus ad, audiam convenire prodesset pro te. Vim ne consul graecis reformidans,
  157. come alienum dissentias eu, eu duo scripta legimus detraxit. Dico mazim timeam at eam, sit eu iriure aliquyam. Vis
  158. omnium omittam efficiendi ea, porro mollis accommodare per eu.</p>
  159.             <p>At augue nonumy consul mea, cu tale oratio comprehensam pro. Decore dolore nullam mel at, ad elit
  160. semper iuvaret vel, mei at vide etiam pertinax. Ut ipsum tamquam suscipit eos, ea erat inciderint est. An est
  161. solum voluptatum dissentiunt, putant aliquip facilis mea no. Quod magna interesset sea ea, ne mea sonet partem
  162. prompta, eu mutat adhuc principes has.</p>
  163.             <p>Meis iuvaret disputationi sed cu, facilisi corrumpit id come. An quem nullam adversarium per, his
  164. ei nobis solet consequuntur. His ne vide vitae delectus, mei debet commodo ne. Eu dico iusto splendide mea, wisi
  165. illum consul ei nec. Dicunt deleniti pro te, ne est quis sanctus sadipscing. Populo omnesque no pro, ipsum
  166. aliquip torquatos an pro, ne enim inani mel.</p>
  167.             <p class="cfoot">Posted By: <a href="#">Bogey</a> Comments: <a href="#">0</a></p>
  168.             <p class="box_head">Some Header Text 2</p>
  169.             <p>Iisque mentitum luptatum vix ea, has an possit verterem facilisis, ut usu veri iriure inciderint.
  170. Cu utinam fabellas voluptatibus vix, ad sit tollit conclusionemque. Quod omnis suscipiantur nam eu, te luptatum
  171. sententiae percipitur duo, id vocent inermis democritum come. No mucius ornatus perfecto come, ea mei antiopam
  172. philosophia, vis cu adhuc expetendis mnesarchum. Luptatum scriptorem in his, te pri vidisse efficiantur
  173. ullamcorper. Ne populo latine persecuti vix, eu eum rebum postea delenit, ut mei tamquam nonummy.</p>
  174.             <p>Vim in dicta expetenda, et mei quem eirmod luptatum. Ea sint illum elitr eum, ea postea abhorreant
  175. appellantur duo. Aperiam consulatu ut eam, veri vidisse facilisis ne usu. Per idque facete invenire id, quo porro
  176. honestatis consequuntur in. Ne noster audire latine vis, dicit errem tincidunt ius id. Cu duo assentior
  177. expetendis definiebas, novum legimus definitiones te vel.</p>
  178.             <p>Eu come mollis noluisse scriptorem, dico brute disputando ut sed, nam quot eripuit quaerendum eu.
  179. An pro quaeque saperet disputando, pri id ignota alienum disputationi, veritus quaestio nec id. Eos eius maiorum
  180. sententiae no, sed nisl impedit nominati cu. Eos debet aliquam singulis eu, tale accusamus est te. Sit ne unum
  181. quas dicta, pri in elitr aeterno pertinax. Vix quod tale disputando ad, nec quot congue appareat eu, vix vivendum
  182. urbanitas et.</p>
  183.             <p>Unum quas laoreet eos cu, vel id porro postea audire. Tempor probatus constituam vis te, eum eu
  184. omnes dicant mediocrem. Id erat diceret ullamcorper vel. Cu consul dicunt est, zzril vitae euismod ea vix, an sea
  185. apeirian takimata salutatus. Sed at audiam detraxit elaboraret.</p>
  186.             <p class="cfoot">Posted By: <a href="#">Bogey</a> Comments: <a href="#">4</a></p>
  187.         </div>
  188.         <div id="rnav">
  189.             <p>Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey
  190. Hey Hey</p>
  191.         </div>
  192.         <div id="footer">
  193.             <p>Copyright &copy; 2009-2010</p>
  194.         </div>
  195.     </div>
  196.     </div>
  197.     </body>
  198. </html>


I put everything in a wrapper div and adjusted your columns a little. but I can't figure out why the "rnav" background doesn't continue all the way down. hmmm
Moderator Remark: Added [code] tags
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

roje0913 wrote:
I guess it kind of depends on what you are using the site for. It seems a bit dark but that may be okay if you are leaning to something more youthful or edgy. if you dont want to take the text all the way across, what about a subdued repeatable background on that side to not leave it looking like something is missing? Maybe a few icons for your 'posted by' and comments just to liven it up a bit. That and a nice logo and I think you have a winner. Please keep in mind that if you are making this for a customer, what he/she thinks is all that matters :-)

The reason the image thing doesn't really work because I need both sides to be flexible... if you look at this site, you will see that the left nav side is the same as the right content side and it doesn't use images... I made that site and I don't remember how i did :lol:

I guess I'm going to use the same HTML and CSS as that site but change it up a bit...
  • roje0913
  • Student
  • Student
  • roje0913
  • Posts: 78

Post 3+ Months Ago

even if you used a repeatable bg. like the pattern on the top of the link you just sent me. That texture really polishes the site up a lot.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 85 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.