Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 862 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

My First Complete CSS Site

Thread title: My First Complete CSS Site
Closed Thread  
Page 2 of 2 < 1 2
    Thread tools Search this thread Display Modes  
08-07-2004, 01:54 PM
#11
Salathe is offline Salathe
Salathe's Avatar
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
 
Posts: 3,820
iTrader: 25 / 100%
 

Salathe will become famous soon enough

Send a message via MSN to Salathe

  Old

Inline styling is simply using the <tag style="some: css here"> method of applying CSS, rather than purely using the separate CSS file.

And yes, rather than using repeated <tag class="text"> you can just specify styles for the tags themselves. Eg. p, span, div { text-size: 1em; }

As for some other suggestions, you could replace the items below (just a start, the whole file could be restructured.

Your Original
HTML Code:
	<div id="menu_container">
		<div id="menu_left"></div>

		<div id="menu_middle">
			<div class="menu_links" ><a href="#">Home</a>&nbsp;|&nbsp;<a href="#">About</a>&nbsp;|&nbsp;<a href="#">Services</a>&nbsp;|&nbsp;<a href="#">Products</a>&nbsp;|&nbsp;<a href="#">Contact</a></div>

		</div>

		<div id="menu_right"></div>
	</div>
My Alteration
HTML Code:
<!-- menu : removed left and right unnecessary divs -->
<div id="menu">
	<!-- menu links : changed to a list and added titles to hyperlinks -->
	<ul class="menu_links" >
		<li><a href="#" title="Visit the main home page.">Home</a></li>
		<li><a href="#" title="A brief introduction to YourSite.">About</a></li>
		<li><a href="#" title="Overviewing the services which we offer.">Services</a></li>
		<li><a href="#" title="A catalog of our products.">Products</a></li>
		<li class="last"><a href="#" title="A list of ways you can get in touch with us.">Contact</a></li>
	</ul>
</div>
and the CSS to "fix" the above
Code:
/* NEW ADDITIONS BY PETER COWBURN <peter@cowburn.info> */
#wrap {
	width: 740px;
	margin: 0 auto;
	}
.menu_links {
	list-style: none inside none;
	padding: 0;
	margin: 9px 0 0 7px;
	}
.menu_links li {
	display: inline;
	padding: 0 8px 0 2px;
	margin: 0;
	background:
		url(menu_sep.gif)
		no-repeat center right;
	}
.menu_links li.last {
	background: none;
	}
#menu {
	border: solid 1px #790000;
	background:
		#b60000 
		url(menu_bg.gif)
		repeat-x
		top
		left;
	height: 33px;
	width: 738px;
}
The two tiny images used in the above CSS have been attached to this post.

- Salathe

P.S. Sorry for tinkering with your code, I just like to help.

08-07-2004, 11:34 PM
#12
karl472001 is offline karl472001
Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:
 
Posts: 226
iTrader: 0 / 0%
 

karl472001 is on a distinguished road

Send a message via MSN to karl472001

  Old


P.S. Sorry for tinkering with your code, I just like to help.
Heh..no problem.

I will look into it and see what I can learn.

Thanks
-Karl

Closed Thread  
Page 2 of 2 < 1 2


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed