SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS font style family color align, etc. H O W ?

    I'm pulling my hair our.

    Too much information to sort out.

    This isn't working to well in CS4 which I have little understanding.

    EVERYONE SAYS IT'S SO EASY. HA!

    CSS File . . .

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PWS_CSS</title>
    </head>

    <body>
    {
    background-color:#000000;
    background-image: url('BambooTabu.jpg'); background-attachment: fixed;
    }

    NONE OF THIS BACKGROUND STUFF WORKS?


    p {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; color:#099 (I don't know what #099 means?)
    {


    h1,h2,h3,h4 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif: font-size:30px: font-color:cyan: text-shadow: 4px 4px 8px gray;
    }

    The different sizes h1 through h 4 work but no color or shadows?

    </body>
    </html>

    Thanks - Rick

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You can't use CSS like that. CSS styles either need to go in a separate file that is linked to the page in the <head> of the page (preferable) or embedded in the head of the page inside <style> tags, like so:

    Code:
    <style type="text/css" media="all">
    body {
    background-color:#000000;
    background-image: url('BambooTabu.jpg'); background-attachment: fixed;
    }
    
    p {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; color:#099}
    
    h1,h2,h3,h4 {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif: font-size:30px: font-color:cyan: text-shadow: 4px 4px 8px gray;}
    </style>
    Then of course there needs to be some HTML between the <body> tags that these styles apply to. At the moment there isn't anything there.

    There are various ways to set a color. A simple way would be:

    Code:
    color: blue;
    But there are not many words like that recognized in CSS. So another way is to use "hex" values, meaning 6 digits and/or letters preceded by a #.

    Code:
    color: #0000ff;
    Each color has a hex value like that, and it allows for a lot of colors and shades. They work in groups of two, so if you have a color like blue that has three pairs like 0000ff, you can simplify it to 00f.

    So 099 is properly #009999, which is a very dark blue color.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Ah, looking again at your code above, I maybe see the confusion. You don't use all this stuff in a CSS file:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PWS_CSS</title>
    </head>
    
    <body>
    
    </body>
    </html>
    That code is for an HTML file.

    In a CSS file, you just place the actual CSS styles:

    Code:
    body {
    background-color:#000000;
    background-image: url('BambooTabu.jpg'); background-attachment: fixed;
    }
    
    p {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; color:#099}
    
    h1,h2,h3,h4 {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif: font-size:30px: font-color:cyan: text-shadow: 4px 4px 8px gray;}
    Then you save this as a text file ending in .css.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    To clarify what ralph said, a rewrite. Basically you're putting it in the wrong place. Style as a tag does NOT go in the BODY tag... (in fact it NEVER should). Likewise

    Of course, is this a new page you're working on, if so what's with the Tranny doctype? Transitional is for old/outdated/half-assed 1997 style coding, not for building new websites.

    So, what you are TRYING to do should go something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <title>
    	PWS_CSS
    </title>
    
    <style type="text/css">
    body {
    	/*
    		since P are content, you should NEVER declare them in PX, 
    		much less an absurdly undersized 12px. I'd also NOT delcare that
    		on P, but on BODY so all elements inherit.
    	*/
    	font:normal 100%/140% "Palatino Linotype","Book Antiqua",Palatino,serif;
    	background:#000 url('BambooTabu.jpg') fixed;
    	/* condensed property, faster to use just one line to say it */
    }
    
    p {
    	color:#099; /* RGB in Hex */ 
    }
    
    
    h1,h2,h3,h4 { 
    	/* family set on body, don't need to restate it now */
    	/* 
    		don't make them all the same size unless you REALLY mean it.
    		IF you are going to change the size, change the line-height too 
    		as it can't be trusted.
    	*/
    	/* there is no such attribute as font-color -- did you mean color? */
    	color:#0FF: /* 0 red, 15 green, 15 blue == cyan */
    	/* 
    		text-shadow is not only annoyingly illegible in most cases,
    		it's a CSS3 property meaning it has no business on a production site!
    	*/
    } 
    </style>
    
    </head><body>
    	<h1>Site title</h1>
    	<p>Some test content</p>
    </body></html>
    STYLE has to go inside a STYLE tag, or be LINKed from an extrernal file. For large amounts of static CSS like above, it would probably be better to move it all to it's own file and link it in thus:
    Code:
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    the media part tells it those devices are what should receive that CSS -- that way you aren't wasting time sending color or fancy layout to print, or can make customized print/handheld/etc...

    Ralph started to explain the color codes, but you were also confused by the three digit ones?

    #00F == #0000FF == 100% blue
    #804 == #880044 == Purplish-blue.

    hexadecimal -- each row is 0..15, with A-F representing 10 through 15. Red, green, blue -- standard color mixing. If you're not familiar with RGB... aka additive light:

    red + blue == magenta
    red + green == yellow
    blue + green == cyan

    Also, read the comments I put into that CSS -- a lot of 'issues' there.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand the external style sheet and how it's linked to an HTML page.

    What goes on the VERY FIRST line in the style sheet?
    The SECOND line . . . etc?

    When do I start with the <body> tag in a CSS style sheet?

    then . . . the order of.

    backgroung-image:url etc .
    p{ }
    a{ }

    text styles
    font family
    h1,h2,h3, etc.
    margin-left:auto
    margin-right:auto
    max-width: 960px
    navigation

    What is the proper order of these items in a CSS stylesheet?

    I can find examples off most of these items on the net but not the logical order and placement for them.

    I know so little it's dangerous

    Thanks Rick

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    There is no proper order, you put them in however you want... Though <BODY> does not go in CSS as that's not CSS, that's HTML. Do you mean "body {}"?

    I LIKE to keep them in the order of a reset, followed by any global tag settings, followed by the source order of the base template, followed by the stuff that's unique to specific pages.

    Some people like to group their attributes alphabetically, others (like myself) like to put them in by "category" -- positioning, formatting, padding/margin, text properties then colors/background/borders in that order.

    But really it's up to you. Just remember that order DOES matter for "specificity" -- which is to say later declarations will override previous ones.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,729
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Ok.. clear your head there... lol

    1) all style-'sheets' rules must be stated within <style> tag
    or
    2) linked to an external file using <link href="stylesheetURL" rel="stylesheet" type="text/css" media="targetmedia..I recomen you use ALL">

    either way, <style> or <link> it must be WITHIN the <head> tag of your HTML doc and not within the <body> tag as you have it.


    if you have an external(separate) stylesheet you DO NOT need to use <style> in THAT ( the external style sheet)file.

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks DEATHSHADOW60 (that name almost scare me)

    This is my complete main.css stylesheet

    {
    background-color:#000000;
    background-image: url('../Images/Blinds1.png'); background-attachment: fixed;
    }

    {
    margin-left:auto;
    margin-right:auto;
    max-width: 950px;
    }

    p {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:100%/140%; color:#CCC;
    }

    h1,h2,h3,h4 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:100%/140%; color:#CCC;
    }

    Here is my link in the HTML page

    <link type="text/css" rel="stylesheet" href="src/main.css">

    Doesn't work at all!

    What about folder order?

  9. #9
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your first CSS statements aren't going to do anything:

    Code:
    {
    background-color:#000000;
    background-image: url('../Images/Blinds1.png'); background-attachment: fixed;
    }
    
    {
    margin-left:auto;
    margin-right:auto;
    max-width: 950px;
    }
    They have to apply to something: the body, a div class, something.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do I rap them with body

    how?

  11. #11
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're not "wrapping" anything - that's something you do in HTML, not in CSS. In CSS, you're just telling the browser what style to apply to what objects. So, if you wanted your background-color and margins to apply to the entire body, you'd use:

    Code:
    body {
        background-color:#000000;
        background-image: url('../Images/Blinds1.png');
        background-attachment: fixed;
        margin-left:auto;
        margin-right:auto;
        max-width: 950px;
    }
    If you wanted them to apply only to the "something" div, it would be:

    Code:
    .something {
        background-color:#000000;
        background-image: url('../Images/Blinds1.png');
        background-attachment: fixed;
        margin-left:auto;
        margin-right:auto;
        max-width: 950px;
    }

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    A single CSS rule (or 'declaration') has this basic structure:

    Code:
    h2 {color: red; background: blue;}
    So, first you have an element selector. In the example above, it's h2. The whole point of CSS is to choose HTML elements to style. (Some of the rules you posted had no element selector, such as

    Code:
    {
    background-color:#000000;
    background-image: url('../Images/Blinds1.png'); background-attachment: fixed;
    }
    … so those rules can't apply to anything.)

    After the element selector, you have a bunch of 'declarations', all of which are wrapped in { ... }.

    Each declaration cites a 'property' (e.g. 'background'), followed by a colon and then a 'value', such as 'blue'.

    You can apply the rules to more than one element at a time like this:

    Code:
    h2, h3 {color: red; background: blue;}
    Here, both h2s and h2s will receive those styles. (Note there's no comma after the last item).

    If you want to target only certain h2s, you have a few options. You could apply a class to the h2 (e.g. <h2 class="special">), and then target it like so:

    Code:
    h2.special {color: red; background: blue;}
    Often a better way to target certain h2s would be to look at the container they are in. Say you want to target all the h2s in the #main div. Do it like so:

    Code:
    #main h2 {color: red; background: blue;}
    Hopefully that all makes some kind of sense.

  13. #13
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked!

    So now I set

    p {
    a {
    h1,h2,h3 {

    . . . etc . . ?

  14. #14
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I actually have it working now.

    Thank you all very much.

    Tomorrow I'll be at it again.

  15. #15
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It is easy, the same way the game Go is easy: an hour to learn, a lifetime to master.

    Deathshadow is correct that there's no right or wrong way to order a stylesheet, but when you start doing them, you'll find you do better by coming up with an order that makes sense to you. I'll be a big dog and link to my own site, mostly because I put some time into finding out how people who code better than me organize their stylesheets. I came up with an adaptation based on several sources, but you may want to do something different. Whatever works for you.

    Order sometimes DOES matter within a particular selector, such as using shorthand in border properties:

    Code CSS:
    border: 1px solid #000;

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by R Schreiber View Post
    (that name almost scare me)
    Scary part is I've been using that name over the computer since I was logging onto a PDP-11 thirty years ago from my Trash-80 model 1... I've been deathshadow in one form or another on fidonet, genie, compuserve, and then the web...

    <peter>yes, compuserve</peter>

    Great when a nickname you chose when you were 12 sticks with you for 30 years. From 150 baud to 22mbps...

  17. #17
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Compuserve. Genie. Prodigy. Wow. The Wild West days of the Internet. I remember them well, though I actually started on, uh, AOL. Sue me, I didn't know any better.

  18. #18
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NEW html page . . .

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Coto De Caza Real Estate</title>
    </head>
    <link rel="stylesheet" type="text/css" href="chartpages.css" />
    <body>
    <h2> Coto de Caza Snapshot</h2>
    <p>Thirteen year average sale price chart and a linear pricing chart for Coto de Caza</p>

    <img src="Images/12yr_cdc_det.jpg" width="920" height="698" alt="CDC-Detached" />
    <img src="Images/12yr_cdc_att.jpg" width="920" height="698" alt="CDC attached" />

    THESE jpeg's do not align between the margins as instructed in the css page below?

    </body>
    </html>


    New CSS Page

    chartpages.css

    body {
    background-color:#000000;
    background-image: url('../Images/Blinds1.png'));
    background-attachment: fixed;
    margin-left:20%;
    margin-right:20%;
    max-width: 960px;
    }


    p {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFF; text-align:left; font-size:1em;}

    h1,h2,h3,h4 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #F1D32E; text-align:center;} DOES NOT ALIGN CENTER!

  19. #19
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    h1,h2,h3,h4 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #F1D32E; text-align:center;} DOES NOT ALIGN CENTER!
    text-align:center centers the text within the width of the block containing it. It only centers text and only within the width of the block containing it.

    In your case since you have set max-width:960px on the body the web content will never go wider than that and will remain to the left when the browser window is wider with the text centered within that 960px width.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  20. #20
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a .pdf file attached depicting what I'm thinking for my web site design.

    Each one of these pages could have 4 charts max but mostly three.

    Page width is 960px.

    I would like all of the display, positioning, style, etc., to be in the css file.

    This seems pretty basic. How is it that it's is so difficult to understand?

    Thanks. Rick
    Attached Files Attached Files

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    This seems pretty basic. How is it that it's is so difficult to understand?
    I think you're just missing a few basic concepts of making HTML and CSS... of course that you have a picture in mind BEFORE you have the content on the page usually means (to me at least) your development process is BACKWARDS.

    You're also doing a number of things that from a compatibility standpoint and/or accessibility standpoint are bad practice. These include:

    1) having the first heading on a page being a h2 -- first heading should be a h1, all other level headings being by definition SUBSECTIONS of that h1.

    2) You're building a new site, there's no reason for the loose tranny -- transitional is for supporting old/outdated/half-assed coding techniques circa 1998, not building new sites.

    3) You aren't grasping how nesting works, or the difference between block-level and inline-level (and the default display states therein).

    4) A media type on that CSS link wouldn't hurt, since it's doubtful you want to send this styling to print or other media types.

    5) It's generally bad practice to set a width on BODY since it's not well supported cross-browser. This is why MOST developers add a DIV around everything to set the width AND centering.

    6) You've got your LINK for the CSS AFTER </HEAD> and before </body> -- in STRICT that would be invalid markup... generally LINK has NO business being used outside of <head></head>

    7) It's generally a bad idea to change font-size without explicitly stating a new line-height... and as a rule I avoid setting the font-size on paragraphs and instead set a condensed font-rule on body -- that way all 'default text' is set up once instead of having to restate it on EVERYTHING. Case in point, if you said font-family on body, you wouldn't have to say it again on the numbered headings.

    So, with that in mind....

    The images will not center using MARGIN, because they are a special version of inline-level, which defaults to display:inline-block (or something similar). Inline-level elements do not obey margin, but do obey text-align. You want the behavior on those of block to use margin to center them -- so display:block; will fix it.

    As fellgall said, text-align only centers the content of the element within said element, and NOT in relation to the screen.

    A quick fix would be to put margin:0 auto; on body and lose the two margins you have, but again I would avoid using body in that manner and instead add a DIV, set the width on the DIV and center that.

    So first, let's clean up the markup and modernize.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Coto De Caza Real Estate
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>Coto de Caza Snapshot</h1>
     	<p>
     		Thirteen year average sale price chart and a linear pricing chart for Coto de Caza
     	</p>
    	
    	 <img src="Images/12yr_cdc_det.jpg" width="920" height="698" alt="CDC-Detached" /> 
    	 <img src="Images/12yr_cdc_att.jpg" width="920" height="698" alt="CDC attached" />
    
    <!-- #pageWrapper --></div>
    
    </body></html>
    #pageWrapper being where we'll set the master width and centering.

    In CSS, I also advise using a short reset -- there are longer and shorter ones than the one I use, this one is the most reliable. Simple fact is not all browsers start out with the same default paddings/margins/borders and setting them all the same at the start simplifies things. Just avoid "resets" that are actually frameworks, wasting time setting things that are the same cross-browser just to some user preference. (See Reset Reloaded for an example of your typical bloated code that gives resets a bad name)

    I'm also not clear exactly what you want that blinds image on -- the center 960px wide content area (#pagewrapper) or the whole page? I'm leaving it on body for now... I'm also pulling the 'fixed' part as that not only makes scrolling painful for many users, it's also unreliable cross-browser.

    Also, if you have to resort to "../" in your CSS url, there's probably something wrong with how you are laying out your directory structure.

    So the CSS I'd be using would probably end up like this:

    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    
    body {
    	/* 
    		This text-align is to center #pagewrapper in IE 5.x, 
    		which incorrectly ignores margin:auto
    		
    		If you don't care about IE 5.x anymore, you can pull it.
    	*/
    	text-align:center; 
    	
    	font:normal 85%/140% "trebuchet ms",arial,helvetica,sans-serif;
    	background:#000 url(images/blinds1.png) top center;
    }
    
    #pageWrapper {
    	width:95%;
    	max-width:976px;
    	min-width:752px;
    	margin:0 auto;
    }
    
    * html #pageWrapper {
    	/*
    		IE6/earlier knows not the min/max-width,
    		but we can fake it with an expression. First
    		we declare a fixed width for when scripting
    		is disabled/unavailable.
    	*/
    	width:752px;
    	/*
    		Then our expression
    	*/
    	width:expression(
    		(document.body.clientWidth>1024) ? "976px"
    			: ((document.body.clientWidth>800) ? "95%" : "752px")
    	);
    }
    
    p {
    	padding-bottom:1em;
    	color:#FFF;
    }
    
    h1,h2,h3,h4 {
    	color:#F1D32E;
    	text-align:center;
    }
    
    img {
    	display:block;
    	margin:0 auto 1em;
    }
    ... and yes, that's a lot to take in all at once. Don't get discouraged there's a LOT to learn, and there is a LOT of work involved in even the simplest of layouts.

    Which unfortunately is why it's called work, and not "happy happy fun-time"

  22. #22
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ...there is a LOT of work involved in even the simplest of layouts.
    A very succinct statement, and one that's undeniably true, that illustrates just how bad the available tools are. Damn it, people, there shouldn't be a lot of work involved in producing a fairly straighforward layout.

  23. #23
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Error when looking at html page.

    chartpages.css cannot be found.

    Root Folder: D:/PWSInternetSite
    Folder From Root: CSS
    Folder From Root: Images

    All html pages are in the root folder.
    All css files are in the CSS folder.
    All Images are in the Images folder.

    I've used DW CS4's "Site" "ManageSite"

    All I can select is the root folder and the images folder. The CSS folder doesn't appear to allow for verification that's it's there and in the root folder hierarchy.

    Any ideas ?

    Thanks Rick

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    What does your link to the CSS file look like? If your folder is called "CSS" (capitals) and you reference it with

    Code:
    <link type="text/css" media="all" rel="stylesheet" href="css/chartpages.css">
    (that is, "css" in lower case) the link won't work.

    Other than that, we are shooting blind here unless you show the code you are using.

  25. #25
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And I still can't determine how to center small paragraphs!

    One step at a time please.

    In css how do I align all of the text paragraphs on a page to center/justified, and how do I flag the paragraphs in the html file.

    Just one item at a time.

    Thanks. Rick


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •