Welcome Guest ( Log In | Register )

      
Discover the best free computer help!
Learn more about Geeks to Go by taking the tour. Spyware, virus, trojan, fake security or privacy alerts? Read the malware cleaning guide.
 
Reply to this topicStart new topic
Problem with PHP or CSS
Alex_McIntosh
post Jun 8 2008, 04:08 PM
Post #1


Member
***
Posts: 221
OS: XP Home Edition/ Professional



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
CODE
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
CODE
<!-- 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 -->
Go to the top of the page
 
+Quote Post
Alex_McIntosh
post Jun 8 2008, 04:08 PM
Post #2


Member
***
Posts: 221
OS: XP Home Edition/ Professional



Please help!

=]
Go to the top of the page
 
+Quote Post
Major Payne
post Jun 8 2008, 11:14 PM
Post #3


Trusted Techie
Group Icon
Posts: 4,451
From: FEMA took "Tin Can" away!
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



Got a link to site? Without images, it's not going to be the same.

Ron

This post has been edited by Major Payne: Jun 8 2008, 11:15 PM
Go to the top of the page
 
+Quote Post
Alex_McIntosh
post Jun 9 2008, 12:35 AM
Post #4


Member
***
Posts: 221
OS: XP Home Edition/ Professional



Sorry i completely forgot about that

Here it is
Go to the top of the page
 
+Quote Post
Major Payne
post Jun 9 2008, 01:23 AM
Post #5


Trusted Techie
Group Icon
Posts: 4,451
From: FEMA took "Tin Can" away!
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



At the very top of your CSS, add:

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

If that doesn't work, this did:

CODE
/* 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
Go to the top of the page
 
+Quote Post
Alex_McIntosh
post Jun 9 2008, 10:52 AM
Post #6


Member
***
Posts: 221
OS: XP Home Edition/ Professional



Ah wow, thanks mate, what does the "*" do?
Go to the top of the page
 
+Quote Post
Major Payne
post Jun 9 2008, 02:03 PM
Post #7


Trusted Techie
Group Icon
Posts: 4,451
From: FEMA took "Tin Can" away!
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



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. tongue.gif 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

This post has been edited by Major Payne: Jun 9 2008, 02:05 PM
Go to the top of the page
 
+Quote Post
Alex_McIntosh
post Jun 10 2008, 03:18 AM
Post #8


Member
***
Posts: 221
OS: XP Home Edition/ Professional



Oh right thanks smile.gif That s a good link smile.gif and yeah, i sue firefox to lol tongue.gif

Thanks for the help, have a good day!
Go to the top of the page
 
+Quote Post
Major Payne
post Jun 10 2008, 12:20 PM
Post #9


Trusted Techie
Group Icon
Posts: 4,451
From: FEMA took "Tin Can" away!
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



You're welcome and glad it all worked out for you.

Ron
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies / Views Topic Information
No New Posts   6 / 470 5th December 2005 - 02:53 PM
Dragon started - last by Dragon
No New Posts   3 / 247 26th June 2006 - 03:20 PM
Craigypoos started - last by Major Payne
No New Posts   7 / 388 3rd July 2008 - 07:52 PM
evidux started - last by Major Payne
No New Posts   1 / 98 23rd October 2008 - 06:44 AM
philshantz started - last by philshantz

RSS Time is now: 22nd November 2008 - 11:22 AM
Advertisements do not imply our endorsement of that product or service. The forum is run by volunteers who donate their time and expertise. We make every attempt to ensure that the help and advice posted is accurate and will not cause harm to your computer. However, we do not guarantee that they are accurate and they are to be used at your own risk.