CSS font properties are causing trouble

7 replies [Last post]

Tue, 2010-09-07 05:52

itstabish

Offline

Regular

Timezone: GMT-4

Joined: 2009-02-23

Posts: 20

Points: 8

Hello.

I'm working on my site, www.milestonesevents.ca

I want the title to be a different size and color, and I'm having trouble with this. It won't work.

I'm on Firefox

Here's the style sheet:

/*
Theme Name: Milestones Montréal
Theme URI: <a href="http://www.milestonesevents.ca/
Description:" rel="nofollow">http://www.milestonesevents.ca/
Description:</a> Milestones Montreal, Wedding planners in Montreal, Canada.
Author: Tabish Bhimani
Version: 1.0 (optional)
Tags: milestones montreal
*/
 
body {
background-color: black;
text-align: centre;
margin: 0px;
padding: 0px;
font-size: 3em;
font-family: optima; 
}
 
a {
border: none;
text-decoration: none;
color: pink;
}
 
a:visited {
border; none;
text-decoration: none;
color: pink;
}
 
#masthead {
width:100%
padding: 0px;
margin: 0px;
}
 
#wrap {
max-width: 901px;
height: 100%;
text-align: center;
float: center;
padding: 0px;
margin: 0 auto;
}
 
#header {
float: left;
text-align: center;
width: 900px;
padding: 0px;
margin: 0px;
min-height: 132px;
font-size: 20px;
}
 
#header .links {
		float: left;
		font-size: 0.7em;
		color: #252525;
		padding: 0px;
		width: 900px;
	}
		#header .links a {
			margin-left: 14px;
				}
	#header ol {
		list-style-type: none;
		height: 20px;
		background-color: #CC33CC;
	}
		#header ol li {
			float: left;
		}
		#header ol li a {
			color: #ffffff;
 
		}
		#header ol li a:hover {
			font: #FFFFFF;
		}
 
 
#pages {
float: right;
display: block;
width: 900px;
paddig: 0px;
margin: 0px;
}
 
#main {
color: #ffffff;
font-size: 0.3em;
width: 600px;
height: 100%;
padding: 0px;
float: left;
margin: 0px;
text-align: left;
 
#h1 {
font-color: #FFFF7E;	
font-size: 130%;
}
 
#widget {
color: #ffffff;
font-size: 3em;
width: 300px;
height: 100%;
pading: 0px;
float: left;
margin-left: 10px;
text-align: left;
 
}
 
img {
border: none;
}
 
li {
display: inline;
}

Here's the index.php

<?php get_header(); ?>
 
<!-- BEGIN content -->
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="main">
	<div id="h1"><?php the_title(); ?></div><br />
	<?php the_content(); ?>
 
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

I'm specifically referring to the div id h1 part.

Please, and thank you

Tags:

Tue, 2010-09-07 06:30

Ed Seedhouse

Offline

Guru

Timezone: GMT-7

Joined: 2005-12-14

Posts: 3544

Points: 643

Both your html and your CSS

Both your html and your CSS have many errors in them. You need to fix them all before you go further. Please read the messages in our "How to" forum that will tell you how to do this if you don't know.

Once you've validated both your html and your CSS, if the problems still persist, come on back and ask again.

The color scheme on your site is horrible and burns my eyes. Are you deliberately trying to drive people away? If you are, a colour scheme like that is certainly a great way to do it!

There is no need to post your code when you've provided a link, as you have. If you are going to show your code the php backend code is useless. It gets converted to html before any browser sees it. What counts is the html that is sent out on the web, not the backend code that creates it, which is irrelevant to solving such problems.

Ed Seedhouse

Posting Guidelines

High on a hill, in Wrangellia.

Tue, 2010-09-07 07:29

Stomme poes

Offline

Elder

Timezone: GMT+2

Joined: 2008-02-04

Posts: 1854

Points: 378

I gotta second that

Frankly, once you get the validators (both HTML and CSS) to tell you where the errors are and you fix them, the code will indeed work.

However instead of a div with an id of "h1", use an h1. They exist for a reason, with the added value of being actually usable by the blind. A div is just a wrapper around General Stuff. An h1 is a Main Page Header, and I can skip all your goofy navigation or anything else you place before the h1 tag by hitting the "h" key, instead of tabbing tabbing tabbing slowly through everything.

Of course, if it's in the middle of the page, it's probably not an h1 but may still be a (lesser) header. Use it!

And if it's definitely not really a header but just needs to look like one for some weird reason, I'd still make that div a <p> element anyway. It's a single line of text, not a whole box filled with all sorts of weird stuff.

Re your colour scheme: only thing really wrong with it is the contrast is actually too much. If one doesn't have perfect young eyes, the text dances everywhere. If either the black isn't really quite so dark a black, OR if the white were toned down to something less... white... then it would actually be a little easier to read.
Some people with vision problems need very high contrast, but for instance dyslexics do much better with slightly lower contrast. Yeah, can't please absolutely everyone, but there are online tools that can make sure your contrast is good enough without being too much. Beyond that, you should be able to keep your general colour scheme... it may depend on what kind of site it's going to be and what kinds of people you want to attract.

I'm no expert, but I fake one on teh Internets

Tue, 2010-09-07 07:34

itstabish

Offline

Regular

Timezone: GMT-4

Joined: 2009-02-23

Posts: 20

Points: 8

Thanks

Gentlemen,

Thank you for your very helpful feedback, much appreciated.

I'll take a look at the validation, and do as you said, Stomme and Ed. The color scheme is supposed to change slightly, i.e. the contrast reduction.

Thanks both of you, once again.

Tue, 2010-09-07 21:51

Hugo

Offline

Moderator

Timezone: GMT+1

Joined: 2004-06-06

Posts: 15197

Points: 2300

Stomme Poes is no gentleman

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Wed, 2010-09-08 10:30

Stomme poes

Offline

Elder

Timezone: GMT+2

Joined: 2008-02-04

Posts: 1854

Points: 378

pff

I put on my monocle and adjust my top hat... but I can't quite call myself a lady.

I'm no expert, but I fake one on teh Internets

Fri, 2010-09-24 20:54

itstabish

Offline

Regular

Timezone: GMT-4

Joined: 2009-02-23

Posts: 20

Points: 8

haha! thanks so much

haha! thanks so much everyone!

Okay, so I've done a little editing and checking my CSS.

CSS seems to be fine, but I'm having trouble with my HTML which seems to not recognize <? ?> in the HTML validator and calls its an error.

Either way, I was hoping someone could check this for me, and tell me what I need to fix (because those validator instructions are pretty cryptic).

Also, I wanted to align the video you see on the page next to the text, but it doesnt seem to come up there, it just goes below the text. Pweez help?

the site is: www.milestonesevents.ca

Sun, 2010-09-26 14:21

Stomme poes

Offline

Elder

Timezone: GMT+2

Joined: 2008-02-04

Posts: 1854

Points: 378

<? is not HTML

You shouldn't have any <? in your HTML. That's not HTML.

However, I didn't see any on your main page.

Instead, the validator doesn't like where you places li tags (list item tags must be in a list).
Here is the problem:

<ol><li>
<li class="page_item page-item-4">... etc

ol's and ul's may only have li's as direct children (you're ok there) and li's may contain just about anything but they can't hold other li's directly. You're nesting your li's.
You'll have to remove that first opening <li> tag you've got in there.

I'm no expert, but I fake one on teh Internets

CSS font properties are causing trouble

Both your html and your CSS

I gotta second that

Thanks

Stomme Poes is no gentleman

pff

haha! thanks so much

<? is not HTML

New forum topics

User login

Navigation