Jump to content

Adapting Template


Graeme

Recommended Posts

Hello All,

 

I came across a template and I'm busy trying to adapt it. I've basically altered most things to suit but there are some I just don't understand!

 

I can't seem to alter the text colour in div.story and there is a thick black line that shows up in img above the menu. I know the background of img is black but even if I alter the border it shows in Firefox but not in IE.

 

Other than that I'm really pleased. (just when you start to think you are getting to grips with CSS!).

 

Thank you as always,

 

Best wishes

Graeme

Link to comment
Share on other sites

Woops,

 

Temp URL is

 

http://www.btinternet.com/~gj.d/bits/index.html

 

Thank you

 

[#uote name=Graeme' date='14 August 2010 - 11:15 PM' timestamp='1281824125' post='18753]

Hello All,

 

I came across a template and I'm busy trying to adapt it. I've basically altered most things to suit but there are some I just don't understand!

 

I can't seem to alter the text colour in div.story and there is a thick black line that shows up in img above the menu. I know the background of img is black but even if I alter the border it shows in Firefox but not in IE.

 

Other than that I'm really pleased. (just when you start to think you are getting to grips with CSS!).

 

Thank you as always,

 

Best wishes

Graeme

Link to comment
Share on other sites

The text color is defined in the body element (not #body). Go ahead and add the color to your .story class and it will override the body color. Otherwise, just change the body element color.

 

As for the image, just give that image a display: block.

 

 

Then adjust your border for #menu.

 

border: 2px solid #000000;

border-top: 2px solid #000000;

border-bottom: 0px solid #000000;

Link to comment
Share on other sites

Always set your default font to the body element and then apply any styles to id's or classes that you desire to override the default.

 

As for the font size 13px, you have none in the css and so the size is probably being rendered by the browser's default font settings.

 

Update: default.css

I have attached a default.css file with all the default settings. You will also find this in the CSS forum which was originally submitted by John.

Edited by newseed
Link to comment
Share on other sites

Try both and see the results for each. Otherwise, just add the font size to the .story class.

 

Tip: You ought to make a backup copy of your css and then experiment...experiment...experiment with your css to see what it does. Trying things out may surprise you in what you might learn on your own.

Link to comment
Share on other sites

Hello,

 

Thank you for all this. I'm trying to experiment with the CSS as you suggest, it's a great way to learn.

 

I Validate the page and it's great to see only one error as I set it up, the only ting is I don't understand the error!

 

It reads

 

Line 32, Column 25: end tag for "br" omitted, but OMITTAG NO was specified

<h2>1st build</h2><br>✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Line 32, Column 21: start tag was here

<h2>1st build</h2><br>

Thank you,

 

Best wishes

Graeme

Link to comment
Share on other sites

some tags don't really have opening and closing tags - like <br>, <img>, etc. For those, when you use XHTML doctype, you have to build the closing slash right in: <br /> or <img src="whatever.jpg" />

Link to comment
Share on other sites

Hi Andrea,

 

So whre do I put the /> in

 

<div id="body">

 

<div class="story">

<h2>1st build</h2><br> <p>Every company requires to consistently attract new customers as well as new business in order to reach its ultimate potential. This is where a press ad design can help you. However with businesses frequently advertising within inches of each other in selected publications, it is quite possible that your ad may be easily overlooked. <br />

</div>

 

Thank you,

 

Best wishes

Graeme

Link to comment
Share on other sites

So whre do I put the /> in

 

 

<div id="body">

 

<div class="story">

<h2>1st build</h2><br /> <p>Every company requires to consistently attract new customers as well as new business in order to reach its ultimate potential. This is where a press ad design can help you. However with businesses frequently advertising within inches of each other in selected publications, it is quite possible that your ad may be easily overlooked. <br />

</div>

Link to comment
Share on other sites

I would, however, suggest this:

 

<div id="body">

 

<div class="story">

<h2>1st build</h2><br /> <p>Every company requires to consistently attract new customers as well as new business in order to reach its ultimate potential. This is where a press ad design can help you. However with businesses frequently advertising within inches of each other in selected publications, it is quite possible that your ad may be easily overlooked. <br /> </p>

</div> ]

 

(I'd think you'll need the closing p tag anyway to validate)

 

and CSS:

 

h2 {margin-bottom: 15px;}
p {margin-bottom: 10px;}

(# of pixels is random - just to whatever space you need)

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