Jump to content

Help With A Css Format Issue


hotbotz

Recommended Posts

I am using an HTML Template and CSS Stylesheet that I downloaded from a free template collection. I have then customized much of the content to fit the style of the site I'm trying to design for my High School Robotics Team. Most of the code and formatting I have figured out rather easily, but there are some items I just can't seem to change. I have some text at the bottom of my site that is a light gray color on a pink background. I'd like to change it to a darker color (or perhaps even white) but nothing seems to work. I've gone through both the css file and the html file and changed every font color I can find to white, and the text in question stays gray. Is there any kind of search I can do in my code to find where the formatting is coming from?

 

Here's the link: http://hotbotz2640.org/ The css page is "style.css" (just add the file name after the homepage to see it's code.)

Link to comment
Share on other sites

the section you're having problems with is inclosed inside a div id="three-column"

So if you address the color of the font inside this division AND the color of any link font by adding this towards the end of your stylesheet, you can change the color:

 

#three-column, #three-column a {
	color: white;
}

 

I see several mistakes and bad practices in your code - are you interested in learning how to do it right, or are you ok as long as things work? Either one is ok, people have different motivations. I am only asking so I don't waste my time pointing stuff out if you're not interested in that.

Link to comment
Share on other sites

the section you're having problems with is inclosed inside a div id="three-column"

So if you address the color of the font inside this division AND the color of any link font by adding this towards the end of your stylesheet, you can change the color:

 

#three-column, #three-column a {
	color: white;
}

 

I see several mistakes and bad practices in your code - are you interested in learning how to do it right, or are you ok as long as things work? Either one is ok, people have different motivations. I am only asking so I don't waste my time pointing stuff out if you're not interested in that.

 

Thanks for the above fix - I've already implemented that code and it looks very nice. Yes - I would actually like to know how to do it properly...the project should ideally be done by the students on the team, but this year I'm trying to learn how it works then next year I'll turn it over to a student webmaster. That being said, the more I can learn, the better!

Link to comment
Share on other sites

I have a bit of time - so here's a start. I'm looking through your HTML top to bottom and note the following:


<title>Home</title>

 

What's inside this tag helps search engines, if you use it well. For example:

 


<title>Reidsville High School Robotics Team - Hotbotz FIRST FRC Team 2640</title>


<h1><img src="index_files/dancingsantachili.gif" title="" alt="" height="80" width="120" />
<img src="index_files/hotbotztitle.png" title="" alt="" height="73" width="500" />
<br />
</h1>

 

See the <br> tag? That should only be used for line breaks. If you need more space under this H1 div, just add a margin-bottom to the relevant CSS.

 


<h1></h1>

<pre></pre>

 

Same here - space should be created with margins or padding, not empty place holders.


<iframe src="http://player.vimeo.com/video/51313786?title=1&byline=1&portrait=1" 
webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0" height="281" width="500" 
ALIGN="TOP"></iframe>
   
<img src="images/dominos.jpg" width="233" height="281" alt="Dominos Pizza Card" />

Same here - instead of nbsp's use right/left margin or padding.

 

I see this issue several more times, but won't address is any more - it's always the same.

 


<p>The Hotbotz are FIRST FRC Team 2640 - the High School Robotics Team from Reidsville High School and the Rockingham County
Early College.  

 

On the web, there is only ONE space after a period. Actually, on paper, that's the new right way to do things, too. So skip the nbsp and just make a normal

 

space via your spacebar.

 


<center><font size="5"><strong>
Only<size="6">
.
.
.
</font></font></strong></font></center>


 

The center and the font tag tag are deprecated and should not be used. Instead, use CSS to place things and apply fonts.

 

That's all I have time for at the moment - a good way to find some errors is to run your page through a validator. For example:

 

http://www.w3schools.com/web/web_validate.asp

 

Let me know if you have any questions about any of these points, I'll be happy to elaborate.

Link to comment
Share on other sites

  • 2 weeks later...

OK, based on the feedback above, I did fix a bunch of the issues, and I learned how to use padding. I still have tons of questions, but I'll limit to a few biggies:

 

First, I have run the main page through a web validator...it found 21 errors, but I can't figure out what the explanations mean. I have a pretty decent book on webpage design, but it still seems like there is a whole language that I don't understand when reading these forums, tutorials, etc. Any suggestions?

 

Next - how do I put the code for the parts of each page that stay the same in one place only so I don't need to maintain the common areas on each separate page?

 

I'd like to align the logo artwork and the menu better in my header. Currently, when I make the logo image bigger, the menu text moves down...I guess it is actually "below" the logo, not "beside" the logo like I think it should be.

 

Finally, the template that I used has a main page area that is intended to fill about 2/3 of the page and a sidebar area for the other 1/3. On some of the pages, I'd like the main page to reach completely across...further, I'd like to create a "grid" of pictures that link to other sites with a brief text passage attached to each picture. Currently I can only make them as a vertical list. (Specifically on the pages http://hotbotz2640.org/pinkalliance.html and http://hotbotz2640.org/williepage.html)

 

Thanks in advance for any help...this continues to be quite a learning experience. I hope to get to a point where I feel comfortable to "teach" the basics to one of the students in the group, then have them take over.

Link to comment
Share on other sites

First, I have run the main page through a web validator...it found 21 errors, but I can't figure out what the explanations mean. I have a pretty decent book on webpage design, but it still seems like there is a whole language that I don't understand when reading these forums, tutorials, etc. Any suggestions?

Most the explanations are pretty self-explanatory - for example:

error.pngLine 32, Column 137: there is no attribute "ALIGN" …er="0" height="281" width="500" ALIGN="TOP"></iframe><img src="images/dominos.…Try changing 'align' to 'vertical-align' - that should do it.

 

error.pngLine 32, Column 241: required attribute "alt" not specified …s/dominos.jpg" width="233" height="281" style="padding:0px 0px 0px 5px;" /></p>The 'alt' tag is required for every image. You use it to briefly describe the image for text readers or wherever the image is not displayed. In case of a purely decorative image, where an explanation really isn't needed, the alt tag is still required, but can be left empty - like so:

alt="";

 

error.pngLine 39, Column 10: element "size" undefined Only<size="6">

 

This is simply invalid / non-existent coding.

 

error.pngLine 40, Column 30: required attribute "type" not specified <script language="JavaScript">

 

Here, you're missing a 'type="text/javascript' - like so:

<script language="JavaScript" type="text/javascript">

error.pngLine 48, Column 16: end tag for "br" omitted, but OMITTAG NO was specified days until<br>

 

You are using XHTML doctype, and that requires that all tags are closed, even those that do

not require a closing tag like img, br, meta tags. Change <br> to <br /> and you're all set.

 

error.pngLine 49, Column 26: end tag for "size" omitted, but OMITTAG NO was specified FRC Kickoff!</font></font></strong></font></center>

Here, you have two font closing tags, but only one font opening tag.

 

Also, the <center> tag is deprecated and should not be used.

 

If you look at the explanations again, you'll see that they usually do provide the info you need to fix your errors. And sometimes, just fixing one mistake, corrects several others. It's always good to make one change then re-validate. The above should get you started, let me know if you have more questions about the remaining errors.

 

Next - how do I put the code for the parts of each page that stay the same in one place only so I don't need to maintain the common areas on each separate page?

 

http://www.killerphp.com/videos/02_php_includes/02_php_includes.html

 

I'd like to align the logo artwork and the menu better in my header. Currently, when I make the logo image bigger, the menu text moves down...I guess it is actually "below" the logo, not "beside" the logo like I think it should be.

 

I'm not sure what you mean here - yes, the navigation is below the logo, so if you increase the height of your image, of course the navigation would move down to make room for it. Right now, there is not enough room for the logo and the navigation to fit side by side, but you could add a negative margin-top to your navigation and force it to move over the logo - but that probably wouldn't look right.

 

 

Finally, the template that I used has a main page area that is intended to fill about 2/3 of the page and a sidebar area for the other 1/3. On some of the pages, I'd like the main page to reach completely across..

 

You can just change the layout for some pages and add different classes or IDs so you can apply different styles via CSS.

 

..further, I'd like to create a "grid" of pictures that link to other sites with a brief text passage attached to each picture. Currently I can only make them as a vertical list. (Specifically on the pages http://hotbotz2640.o...nkalliance.html and http://hotbotz2640.o...illiepage.html)

 

You are using the h3 tag for your photo titles. The h tag is a block level tag, which will automatically starts a new 'section'. Put each of the images with the title into a division, give that division a width, and float them.

<div class="grid">
<h3><a href="[url="view-source:http://thehitchhikers.org/index.php"]http://thehitchhikers.org/index.php[/url]" accesskey="[url=""]1[/url]" title="">The Hitchhikers - Team 2059 - Cary, NC</a></h3><img src="[url="view-source:http://hotbotz2640.org/images/2059.jpg"]images/2059.jpg[/url]" title="" alt="" height="[url=""]200[/url]" width="[url=""]280[/url]" />
</div>

<div class="grid">
<h3><a href="[url="view-source:http://www.lospolloslocos.com/"]http://www.lospolloslocos.com/[/url]" accesskey="[url=""]1[/url]" title="">Los Pollos Locos - Team 2815 - Columbia, SC</a></h3><img src="[url="view-source:http://hotbotz2640.org/images/2815.jpg"]images/2815.jpg[/url]" title="" alt="" height="[url=""]200[/url]" width="[url=""]280[/url]" />
</div>


<div class="grid>
<h3><a href="[url="view-source:http://www.team587.org/index.html"]http://www.team587.org/index.html[/url]" accesskey="[url=""]1[/url]" title="">The Hedgehogs - Team 587 - Hillsborough, NC</a></h3><img src="[url="view-source:http://hotbotz2640.org/images/587.jpg"]images/587.jpg[/url]" title="" alt="" height="[url=""]200[/url]" width="[url=""]280[/url]" />
</div>

 

And the CSS could be:

 

.grid { 
	width: 300px;
	float: left;
}

 

You'll have to play with margins and/or padding to get things to line up, but this should get you to where you want to be.

 

Let me know if you need additional info on any of this.

Link to comment
Share on other sites

Finally, the template that I used has a main page area that is intended to fill about 2/3 of the page and a sidebar area for the other 1/3. On some of the pages, I'd like the main page to reach completely across...further, I'd like to create a "grid" of pictures that link to other sites with a brief text passage attached to each picture. Currently I can only make them as a vertical list. (Specifically on the pages http://hotbotz2640.o...nkalliance.html and http://hotbotz2640.o...illiepage.html)

 

Hey,

I'm only learning too so don't rely too much on my advice. But I think this is one of many possible solutions to the above problem: (Also, it will need to be tweaked a bit to your liking)

I have no time to add fancy css or double check it or anything but others can look into it and check for mistakes if they want.

 

Happy new year!

Relevant css:

 

 

#content {

float: left;

width: 1100px;

min-height:650px;

}

 

#content .images1, .images2 {

width:1000px;

height:250px;

}

.images2 {

margin-top:30px;

}

 

#content .images1 .img1, .img2, .img3 {

display:inline-block;

width:33%;

}

#content .images2 .img4, .img5, .img6 {

display:inline-block;

width:33%;

}

 

Relevant HTML:

 

 

<div id="page">

 

<div id="content">

<h2>The PINK ALLIANCE</h2>

<p>Some of our Favorite Teams from across the FRC Community</p>

 

<div class="images1">

<div class="img1">

<h3><a href="http://thehitchhikers.org/index.php"'>http://thehitchhikers.org/index.php" accesskey="1" title="">The Hitchhikers - Team 2059 - Cary, NC</a></h3>

<img src="images/2059.jpg" title="" alt="" height="200" width="280" />

</div>

<div class="img2">

<h3><a href="http://www.lospolloslocos.com/"'>http://www.lospolloslocos.com/" accesskey="1" title="">Los Pollos Locos - Team 2815 - Columbia, SC</a></h3>

<img src="images/2815.jpg" title="" alt="" height="200" width="280" />

</div>

<div class="img3">

<h3><a href="http://www.team587.org/index.html"'>http://www.team587.org/index.html" accesskey="1" title="">The Hedgehogs - Team 587 - Hillsborough, NC</a></h3>

<img src="images/587.jpg" title="" alt="" height="200" width="280" />

</div>

</div> <!-- end of images1 -->

 

<div class="images2">

<div class="img4">

<h3><a href="http://thehitchhikers.org/index.php" accesskey="1" title="">The Hitchhikers - Team 2059 - Cary, NC</a></h3>

<img src="images/2059.jpg" title="" alt="" height="200" width="280" />

</div>

<div class="img5">

<h3><a href="http://www.lospolloslocos.com/" accesskey="1" title="">Los Pollos Locos - Team 2815 - Columbia, SC</a></h3>

<img src="images/2815.jpg" title="" alt="" height="200" width="280" />

</div>

<div class="img6">

<h3><a href="http://www.team587.org/index.html" accesskey="1" title="">The Hedgehogs - Team 587 - Hillsborough, NC</a></h3>

<img src="images/587.jpg" title="" alt="" height="200" width="280" />

</div>

</div> <!-- end of images2 -->

 

</div> <!-- content -->

 

</div> <!-- page -->

Link to comment
Share on other sites

That works, too, Stephenius, but could be simplified. You don't need images1 and 2, and also no need to add a different img# class to each image. Actually, you don't need any at all. To style those, you could just:

.images1 img {
	display:inline-block;
	width:33%;
}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
×
×
  • Create New...