Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Problem with PHP or CSS


  • Please log in to reply

#1
Alex_McIntosh

Alex_McIntosh

    Member

  • Member
  • PipPipPip
  • 277 posts
Basically i got uptight about validating my site so i validated CSS to start off with and then i changed it all and now it is 100% compliant... WIth this outcome somehow my sidebar (right) wont display properly...

The header is ment to be at the top of the sidebar (Latest news/entries) but there is a gap, whats with that?

CSS
body {
margin: 0;
background: #43464D;
font-family: "Trebuchet MS", Arial, Helvetica;
font-size: 13px;
color: #58AFFF;
}
h1 {
font-size: 1.8em;
color: #FFFFFF;
text-align: justify;
text-transform: uppercase;
}
h2 {
font-size: 1.4em;
color: #FFFFFF;
}
h3 {
font-size: 1em;
color: #FFFFFF;
}
h1 a{
color: #FFFFFF;
text-align: justify;
text-transform: uppercase;
}
h2 a{
color: #FFFFFF;
}
h3 a{
color: #FFFFFF;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #52AF35;
}
a:hover {
background: none;
text-decoration: underline;
}
/* Header */
#header {
width: 940px;
height: 160px;
margin: 0 auto;
background: #48577D;
width: 100%;
}
/* Logo */
#logo {
float: left;
}
#logo h1 {
float: left;
margin-left: 40px;
padding-top: 60px;
text-transform: uppercase;
font-size: 2.6em;
}
#logo p {
float: left;
margin: 0;
padding: 102px 0 0 2px;
text-transform: lowercase;
letter-spacing: .2em;
font: bold 1.2em Arial, Helvetica, sans-serif;
}
#logo a {
background: #48577D;
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 940px;
height: 60px;
margin: 0 auto;
}
#menu ul {
margin: 0;
margin-left: 30px;
padding: 16px 0 0 10px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
margin-right: 3px;
padding: 5px 20px;
background: #48577D;
text-transform: lowercase;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
}
#menu a:hover, #menu .navigation a {
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/* Page */
#page {
width: 860px;
margin: 0 auto;
padding: 40px 0;
}
/* Flash */
#flash {
position: absolute;
left: 530px;
top: 50px;
height: 50px;
width: 500px;
}
/* Content */
#content {
float: left;
width: 560px;
height: 500px;
overflow: auto

}
.csoon {
text-align: center;
text-decoration: blink;
}
.post {
}
.post .title {
padding: 5px 0;
text-align: justify;
color: #FFFFFF;
text-transform: uppercase;
}
.post .title a {
background: none;
text-align: justify;
color: #FFFFFF;
text-transform: uppercase;
}
.post .meta {
padding: 2px 10px;
background: #48577D;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
text-transform: uppercase;
text-align: left;
font-size: 9px;
color: #7690CF;
}
.post .entry {
padding: 20px 0;
text-align: justify;
font-size: 1.2em;
}

/* Sidebar */
#sidebar {
float: right;
width: 258px;
background: #43464d;
border: 1px solid #D3D3D3;
border-color: #48577D;
}
#sidebar ul {
margin: 0;
padding: 0px;
list-style: none;
}

#sidebar li ul {
padding: 10px;
}

#sidebar h2 {
padding: 5px 10px;
background: #48577D;
font-size: 1.2em;
}
#sidebar p {
padding: 10px;
}
/* Footer */
#footer {
width: 940px;
margin: 0 auto;
padding: 20px 0;
background: #48577D;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #000000;
width: 100%;
}
#footer p {
margin: 0;
line-height: normal;
font-size: 12px;
text-transform: uppercase;
text-align: center;
color: #58AFFF;
}

PHP
<!-- start #sidebar -->
<div id="sidebar">
<ul>
<li>
<h2>Latest Entries/news</h2>
<ul>
<li><a href="news_php.php">PHP Update!...</a><br /></li>
<li><a href="news_blog.php">Blog is now functional...</a></li>
<li><a href="news_welcome.php">WELCOME! First bit of news...</a><br /></li>
</ul>
</li>

<li>
<h2>Gallery Archives</h2>
<ul>
<li><a href="#">None Yet (0)</a></li>
</ul>
</li>

<li>
<h2>Links</h2>
</li>
</ul>
<a href="http://www.geekstogo.com"><img src="images/GTG.png" width="250" height="75"></a>
</div>
<!-- end #sidebar -->

  • 0

Advertisements


#2
Alex_McIntosh

Alex_McIntosh

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 277 posts
Please help!

=]
  • 0

#3
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Got a link to site? Without images, it's not going to be the same.

Ron

Edited by Major Payne, 08 June 2008 - 11:15 PM.

  • 0

#4
Alex_McIntosh

Alex_McIntosh

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 277 posts
Sorry i completely forgot about that

Here it is
  • 0

#5
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
At the very top of your CSS, add:

* { margin: 0; padding: 0; border: 0; }

If that doesn't work, this did:

/* Sidebar */
  * { margin:0; padding:0; border:0; }
#sidebar {
float: right;
width: 258px;
background: #43464d;
border: 1px solid #D3D3D3;
border-color: #48577D;
}
#sidebar ul {
margin: 0;
padding: 0px;
list-style: none;
}

#sidebar li ul {
padding: 10px;
}
  #sidebar h2 {
padding: 5px 10px;
background: #48577D;
font-size: 1.2em;
}
#sidebar p {
padding: 10px;
}

Ron
  • 0

#6
Alex_McIntosh

Alex_McIntosh

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 277 posts
Ah wow, thanks mate, what does the "*" do?
  • 0

#7
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
I take it that it worked for you. The "*" is used to make sure everything between the "{ ... }"s are applied to reset margins, paddings and borders to zero. Levels the "playing field" before your own styling takes control. It's known as the Universal Selector.

BTW, Firefox actually was displaying your code correctly and IE was getting it wrong. :) Firefox gets the blame for wrong displays a lot, but it is the only browser so far that almost meets all of CSS2 standards.

Ron

Edited by Major Payne, 09 June 2008 - 02:05 PM.

  • 0

#8
Alex_McIntosh

Alex_McIntosh

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 277 posts
Oh right thanks :) That s a good link :) and yeah, i sue firefox to lol :)

Thanks for the help, have a good day!
  • 0

#9
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
You're welcome and glad it all worked out for you.

Ron
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP