My page is on crack..

DaLightz · Jun 7, 2013

Yeah um, This is starting to annoy me..

I highlighted "me" next to yes. It should be at the top of the content box, and the whole word it "Welcome!"
I'm also having issues with making the boxes stay next to eachother. This is my first scratch design so

Here's what I have:

style.css

PHP:

 body
 body
 {
background-image: url('bg.png');
margin: 0 auto;
 }
 
 div#banner 
 { 
background: #19A3D1 url('banner.png') no-repeat top left;
padding-top: 62px; 
 }
 
 /* Content boxes */
 
 #contentboxtitle
 {
 
    height: 20px;
    background: #19A3D1;
    border: 2px solid #19A3D1;
    border-bottom: none;
    margin: 30px 5px 0px 270px;
 
 }
 
 #contentboxtitle h1
 {
 
color: white;
font-weight: bold;
font-family: Helvetica;
font-size: 1em;
margin: 0;
padding: 0;
 
 }
 
 
 
 #contentbox
 {
background: #FFFFFF;
border-color: #19A3D1;
border-style: solid;
border-width: 2px;
margin-left: 270px;
margin-right: 5px;
 }
 
 
 /* Sidebar */
 
 #sidebartitle
 {
 
height: 20px;
background: #19A3D1;
border-color: #19A3D1;
border-style: solid;
border-width: 2px;
margin-top: 30px;
margin-left: 5px;
margin-right: 1100px;
 
 }
 
 #sidebartitle h1
 {
 
color: white;
font-weight: bold;
font-family: Helvetica;
font-size: 1em;
margin: 0;
padding: 0;
text-align: center;
 
 }
 
 
 
 #sidebar
 {
 
background: #FFFFFF;
border-bottom-color: #19A3D1;
border-color: #19A3D1;
border-style: solid;
border-width: 2px;
margin-left: 5px;
margin-right: 1100px;
 }

And now index.php

PHP:

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to LiquidCCMS!</title>
        <link href="{url}/templates/default/style.css" type="text/css" rel="stylesheet" />
        <div id="banner">
        </div>
    </head>
    <body>
        <!-- Sidebar starts here. -->
        <div id="sidebartitle" style="float: left; width: 18%;">
            <h1>Navigation</h1>
        </div>
        <div id="sidebar" style="float: left; width: 18%;">
            <p>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
 
 
 
 
 
          </p>
        </div>
 
        <!-- Content box starts here. -->
        <div id="contentboxtitle" style="width: 75%;">
            <h1 style="width: 70%">Welcome!</h1>
        </div>
        <div id="contentbox" style="width: 75%;">
            <p>Yes.</p>
        </div>
    </body>
</html>

Sean · Jun 7, 2013

Please fix your CSS structure.

Your #contentboxtitle

Code:

    height: 20px;
    background: #19A3D1;
    border-top-color: #19A3D1;
    border-left-color: #19A3D1;
    border-right-color: #19A3D1;
    border-top-style: solid;
    border-top-width: 2px;
    border-left-style: solid;
    border-left-width: 2px;
    border-right-style: solid;
    border-right-width: 2px;
    margin-top: 30px;
    margin-left: 270px;
    margin-right: 5px;

My version does the same thing:

Code:

    height: 20px;
    background: #19A3D1;
    border: 2px solid #19A3D1;
    border-bottom: none;
    margin: 30px 5px 0px 270px;

Please fix this so it's quicker and easier for me to read through your CSS and locate your problem Thanks

DaLightz · Jun 7, 2013

SeanDavies said:
Please fix your CSS structure.

Your #contentboxtitle

Code:

height: 20px; background: #19A3D1; border-top-color: #19A3D1; border-left-color: #19A3D1; border-right-color: #19A3D1; border-top-style: solid; border-top-width: 2px; border-left-style: solid; border-left-width: 2px; border-right-style: solid; border-right-width: 2px; margin-top: 30px; margin-left: 270px; margin-right: 5px;

My version does the same thing:

Code:

height: 20px; background: #19A3D1; border: 2px solid #19A3D1; border-bottom: none; margin: 30px 5px 0px 270px;

Please fix this so it's quicker and easier for me to read through your CSS and locate your problem Thanks

Updated OP

Sean · Jun 7, 2013

Fix all of it, It will take me 4 times as long to scroll through all that code to find your problem, and it's harder to read.

The above was just an example of what it should be like

DaLightz · Jun 7, 2013

Updated OP again.

Sean · Jun 7, 2013

That is a horrible, horrible, horrible structure and the CSS is terrible too.

Would you like me to re-do it in a way that works?

DaLightz · Jun 7, 2013

SeanDavies said:
That is a horrible, horrible, horrible structure and the CSS is terrible too.

Would you like me to re-do it in a way that works?

I suppose so. It's my first scratch css template, as I'm sure you know I rip other templates for my cms's. That would be great

Sean · Jun 7, 2013

HTML / PHP :

PHP:

<html>
    <head>
        <title>LiquidCCMS</title>
        <link href="{url}/templates/default/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div id="banner"> </div>
        <div id="wrapper">
          <!-- START SIDEBAR -->
            <div id="sidebar">
                <div class="title"> Navigation </div>
                <div class="content">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                    </ul>
                </div>
            </div>
            <!-- END SIDEBAR -->
         
            <!-- START MAIN CONTAINER -->
            <div id="container">
                <div class="title"> Welcome </div>
                <div class="content">
                    <p> Hello </p>
                </div>
            </div>
            <!-- END MAIN CONTAINER -->
        </div>
    </body>
</html>

CSS :

Code:

body {
    background-image: url('bg.png');
    margin: 0 auto;
}
 
#banner { 
    background: #19A3D1 url('banner.png') no-repeat top left;
    padding-top: 62px; 
}
 
#wrapper {
    width: 80%;
    height: auto;
    margin: 20px auto;
    min-width: 600px;
 
}
 
#sidebar {
    background: #FFFFFF;
    border: 2px solid #19A3D1;
    float: left;
    width: 20%;
}
 
#container {
    background: #FFFFFF;
    border: 2px solid #19A3D1;
    float: right;
    width: calc(80% - 20px);
}
 
.title {
    width: calc(100% - 18px);
    background: #19A3D1;
    font-family: Helvetica;
    color: #FFFFFF;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px 0px 10px;
}
 
.content {
    padding: 0px 10px 20px 10px;
}

DaLightz · Jun 7, 2013

SeanDavies said:

HTML / PHP :

PHP:

<html>
    <head>
        <title>LiquidCCMS</title>
        <link href="{url}/templates/default/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div id="banner"> </div>
        <div id="wrapper">
          <!-- START SIDEBAR -->
            <div id="sidebar">
                <div class="title"> Navigation </div>
                <div class="content">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                    </ul>
                </div>
            </div>
            <!-- END SIDEBAR -->
       
            <!-- START MAIN CONTAINER -->
            <div id="container">
                <div class="title"> Welcome </div>
                <div class="content">
                    <p> Hello </p>
                </div>
            </div>
            <!-- END MAIN CONTAINER -->
        </div>
    </body>
</html>

CSS :

Code:

body {
    background-image: url('bg.png');
    margin: 0 auto;
}
 
#banner {
    background: #19A3D1 url('banner.png') no-repeat top left;
    padding-top: 62px;
}
 
#wrapper {
    width: 80%;
    height: auto;
    margin: 20px auto;
    min-width: 600px;
 
}
 
#sidebar {
    background: #FFFFFF;
    border: 2px solid #19A3D1;
    float: left;
    width: 20%;
}
 
#container {
    background: #FFFFFF;
    border: 2px solid #19A3D1;
    float: right;
    width: calc(80% - 20px);
}
 
.title {
    width: calc(100% - 18px);
    background: #19A3D1;
    font-family: Helvetica;
    color: #FFFFFF;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px 0px 10px;
}
 
.content {
    padding: 0px 10px 20px 10px;
}

Ah, perfect as usual. Thanks Sean!

ying · Jun 15, 2013

SeanDavies said:

HTML / PHP :

PHP:

<html>
    <head>
        <title>LiquidCCMS</title>
        <link href="{url}/templates/default/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div id="banner"> </div>
        <div id="wrapper">
          <!-- START SIDEBAR -->
            <div id="sidebar">
                <div class="title"> Navigation </div>
                <div class="content">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                    </ul>
                </div>
            </div>
            <!-- END SIDEBAR -->
       
            <!-- START MAIN CONTAINER -->
            <div id="container">
                <div class="title"> Welcome </div>
                <div class="content">
                    <p> Hello </p>
                </div>
            </div>
            <!-- END MAIN CONTAINER -->
        </div>
    </body>
</html>

CSS :

Code:

body {
    background-image: url('bg.png');
    margin: 0 auto;
}
 
#banner {
    background: #19A3D1 url('banner.png') no-repeat top left;
    padding-top: 62px;
}
 
#wrapper {
    width: 80%;
    height: auto;
    margin: 20px auto;
    min-width: 600px;
 
}
 
#sidebar {
    background: #FFFFFF;
    border: 2px solid #19A3D1;
    float: left;
    width: 20%;
}
 
#container {
    background: #FFFFFF;
    border: 2px solid #19A3D1;
    float: right;
    width: calc(80% - 20px);
}
 
.title {
    width: calc(100% - 18px);
    background: #19A3D1;
    font-family: Helvetica;
    color: #FFFFFF;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px 0px 10px;
}
 
.content {
    padding: 0px 10px 20px 10px;
}

You should know better then that, spoon-feeding someone won't do any good.

DaLightz · Jun 17, 2013

ying said:
You should know better then that, spoon-feeding someone won't do any good.

Well reading through the code, I was able to pin-point allot of mistakes I had made on my original.

GarettM · Jun 20, 2013

Hey that looks my crappy template I gave up on XD ... Oh wait that IS MY crappy template -_- stop steeling credits dude

Sent from my SGH-T999 using Tapatalk 2

DaLightz · Jun 23, 2013

GarettMcCarty said:
Hey that looks my crappy template I gave up on XD ... Oh wait that IS MY crappy template -_- stop steeling credits dude

Sent from my SGH-T999 using Tapatalk 2

You sent me the image... And I coded it..

Sysode · Jun 23, 2013

DaLightz said:
You sent me the image... And I coded it..

Either way, it could be improved. Also, what is with the default text?! Typography BRO!

My page is on crack..

DaLightz

See ya'll in the afterlife.

Sean

‫‫‫‫‫‫ ‫ Don't Worry, Be Happy

DaLightz

See ya'll in the afterlife.

Sean

‫‫‫‫‫‫ ‫ Don't Worry, Be Happy

DaLightz

See ya'll in the afterlife.

Sean

‫‫‫‫‫‫ ‫ Don't Worry, Be Happy

DaLightz

See ya'll in the afterlife.

Sean

‫‫‫‫‫‫ ‫ Don't Worry, Be Happy

DaLightz

See ya'll in the afterlife.

ying

goddess

DaLightz

See ya'll in the afterlife.

GarettM

Posting Freak

DaLightz

See ya'll in the afterlife.

Sysode

Front-End Developer

Users who are viewing this thread

Latest posts

Connect with us

Newest members