CSS link element problems [HELP!]

[1089]

Hi,I'm learning HTML and CSS bit by bit, but now I'm stuck.I have styled links at the top left of my page beneath the header.I also have links at the bottom of the page.The problem is that I do not want the bottom ones styled. Unfortunately the CSS code used to alter the top links affect all links on the page and not only those within the element.I have a 'Menu' element I wish to put the styled links into, and they are so defined in the HTMl, but it seems the styling I copied from the W3S examples ignore the "confines" of that element. When I look at the code this seems obvious since the {} brackets close after the 'menu' element.How can I contain the styling inside an element?I'll post the code so you know what I'm talking about:

.twoColLiqLtHdr #Menu {	ist-style-type:none;	margin:0;	padding:0;	float:left;}a:link,a:visited {	display:block;	font-weight:bold;	color:#000;	background-color:#FFFFFF;	width:120px;	text-align:center;	font-size: 90%;	padding:4px;	text-decoration:none;	text-transform:uppercase;}a:hover,a:active {background-color:#CCC;}

PS.I have another question. Why can't I change this ".twoColLiqLtHdr" - as soon as I alter it, it stops working.Whats weird is that ".fltlft" is allowed. but I don't now how to use it.EDIT. Ok I figured this out. Seems classes start with .'s and id start with #'s The id's are placed after the classes - used only once per page. Classes can be used multiple times. Am I right?What is the difference except their usage amount?Also, why can't I place borders around headers, footers or the main content eg -

.twoColLiqLtHdr #footer { 	padding: 0 10px;	background:#DDDDDD;}

if I place

border: 1px #CCC;

or similar inside this… no idea what you call it… nothing happens.Thanks,hope you can help!

[dsonesuk]

a:link,a:visited {display:block;font-weight:bold;color:#000;background-color:#FFFFFF;width:120px;text-align:center;font-size: 90%;padding:4px;text-decoration:none;text-transform:uppercase;}a:hover,a:active {background-color:#CCC;}only give styling of:display:block;font-weight:bold;color:#000;background-color:#FFFFFF;width:120px;text-align:center;font-size: 90%;padding:4px;text-decoration:none;text-transform:uppercase;to anchor link, or anchor visited. hover, and active won't be assigned these styling.to fix: if these anchors are within #Menu container#Menu a {display:block;font-weight:bold;color:#000;width:120px;text-align:center;font-size: 90%;padding:4px;text-decoration:none;text-transform:uppercase;}#Menu a:link, #Menu a:visited {background-color:#FFFFFF;}#Menu a:hover, #Menua:active {background-color:#CCC;}border problem: border style is a required value ie border: 1px solid #000000; where solid can be dashed, dotted etc

[real_illusions]

Hi,I'm learning HTML and CSS bit by bit, but now I'm stuck.I have styled links at the top left of my page beneath the header.I also have links at the bottom of the page.The problem is that I do not want the bottom ones styled. Unfortunately the CSS code used to alter the top links affect all links on the page and not only those within the element.I have a 'Menu' element I wish to put the styled links into, and they are so defined in the HTMl, but it seems the styling I copied from the W3S examples ignore the "confines" of that element. When I look at the code this seems obvious since the {} brackets close after the 'menu' element.How can I contain the styling inside an element?

You can target the <a> tags within the div. If the div has a class of 'menu', then your code will look like this:I'll post the code so you know what I'm talking about:

.twoColLiqLtHdr #Menu {	list-style-type:none;	margin:0;	padding:0;	float:left;}.menu a:link, .menu a:visited {	display:block;	font-weight:bold;	color:#000;	background-color:#FFFFFF;	width:120px;	text-align:center;	font-size: 90%;	padding:4px;	text-decoration:none;	text-transform:uppercase;}.menu a:hover, .menu a:active {background-color:#CCC;}

PS.I have another question. Why can't I change this ".twoColLiqLtHdr" - as soon as I alter it, it stops working.Whats weird is that ".fltlft" is allowed. but I don't now how to use it.

Depends what your changing.

EDIT. Ok I figured this out. Seems classes start with .'s and id start with #'s The id's are placed after the classes - used only once per page. Classes can be used multiple times. Am I right?What is the difference except their usage amount?

Yep, thats the only difference.

Also, why can't I place borders around headers, footers or the main content eg -

.twoColLiqLtHdr #footer { 	padding: 0 10px;	background:#DDDDDD;}

if I place

border: 1px #CCC;

or similar inside this… no idea what you call it… nothing happens.

Anything with a border on it needs a height and a width, or some content to make it visible.Hope that helps

[1089]

Wow thanks!!! Everthing works now! Well almost.I have a question about <div> vs. <span>Div is to devide content? Span is for formatting?Where my problem comes in is with images.

<div class="Center">	<img src="Biomed_heart.jpg" alt="Biomedical heart" width="500" height="371">	</div>

Works Fine,

<span class="Center">	<img src="Biomed_heart.jpg" alt="Biomedical heart" width="500" height="371">	</span>

Does nothing.Which is weird since:

<span class="Title"> 	  Biomedical Engineering - The Heart of Science	</span>

works. [EDIT] Seems my cache wasn't updated yet or something... this isn't working. The text is placed right instead of being centered. Which leads me to conclude <span> is not for alignments etc?The CSS for Center:

.Center {	text-align:center;}

Title:

.Title {	font-size:24px;	text-align:center;	font-weight:bold;}

Is there another way to position pictures?Also, float, how exactly does it work? Does it just push the element to the side specified? Or does it affect the overall alignment of the entire page?Since I was used to graphical arrangement of elements, arranging with code is a bit daunting.I have too many questions...If I want to create a seperate CSS for photo galleries, how do I do it? I'm setting up a site that others will maintain. They want columbs and rows of images, with minimal fuss. Is this possible? Thanks again!

[dsonesuk]

div stretches 100% across, until forced different, so center causes to content within it to be centered.span stretches only around its content, so centering won't make any difference.

[real_illusions]

Wow thanks!!! Everthing works now! Well almost.I have a question about <div> vs. <span>Div is to devide content? Span is for formatting?

Div is to divide content, or sections of content. Span is not for formatting, CSS is. Spans tend to be used for small adjustments within text. Such as:<div class="sometext"><p>Some text <span>blah blah</span> etc..heres some boring words</p></div>And you need the 'blah blah' in blue, where the rest of the text is default black:.sometext p span{color:#ff0000;}

Where my problem comes in is with images.

<div class="Center">	<img src="Biomed_heart.jpg" alt="Biomedical heart" width="500" height="371">	</div>

Works Fine,

<span class="Center">	<img src="Biomed_heart.jpg" alt="Biomedical heart" width="500" height="371">	</span>

Does nothing.Which is weird since:

<span class="Title"> 	  Biomedical Engineering - The Heart of Science	</span>

works. [EDIT] Seems my cache wasn't updated yet or something... this isn't working. The text is placed right instead of being centered. Which leads me to conclude <span> is not for alignments etc?The CSS for Center:

.Center {	text-align:center;}

Title:

.Title {	font-size:24px;	text-align:center;	font-weight:bold;}

Is there another way to position pictures?

Span is an inline element, Div is a block element, which is why your getting the results you have seen.

Also, float, how exactly does it work? Does it just push the element to the side specified? Or does it affect the overall alignment of the entire page?Since I was used to graphical arrangement of elements, arranging with code is a bit daunting.I have too many questions...If I want to create a seperate CSS for photo galleries, how do I do it? I'm setting up a site that others will maintain. They want columbs and rows of images, with minimal fuss. Is this possible? Thanks again!

Floats work by floating the element over to the left or right. It can affect the overall alignment of the entire page when done wrongly. When done correctly, its a very powerful technique - with everything really.If you want, take a look at my site (siggie link to surrealillusions) and take a look at the galleries. All done with CSS and floats to get the rows/columns of images. Best seeing a live demo of it rather than explaining it.

[1089]

Thanks, that explains it.Ok, so there is no way to center images except with <div>? Using Dreamweaver CS4 btw.I looked at your site, love the layout.By looking at the source code, you devide the images into two columbs? I assume... you (float?) <div class="columnone gallinks"> to the left and the <div class="columntwo gallinks"> right? I can't see your css so I've no idea how from where you get the images, but I assume it might be from within the class, "a1gp" for example?Lastly, why is everything in PHP? What benifits does it hold?

[thescientist]

to align inline elements (like images) use text-align: center on the images parent element.as for PHP, it could be for a number of reasons. Dynamically changing content, forms to be handled by the server, using include(), lots of things.

[real_illusions]

Thanks, that explains it.Ok, so there is no way to center images except with <div>? Using Dreamweaver CS4 btw.I looked at your site, love the layout.By looking at the source code, you devide the images into two columbs? I assume... you (float?) <div class="columnone gallinks"> to the left and the <div class="columntwo gallinks"> right? I can't see your css so I've no idea how from where you get the images, but I assume it might be from within the class, "a1gp" for example?Lastly, why is everything in PHP? What benifits does it hold?

I meant the actual galleries, like this page http://www.surrealillusions.co.uk/gallery/...OP2010-GTRace1/It might be more complicated than you need for various reasons, but hopefully you're able to see whats what. You see the CSS by following the links to it in the source code. (if you use Firefox to view the source, you can click on the CSS links in the head to view the contents).And everything is PHP as the site uses PHP to generate some content, such as includes, contact forms and of course the galleries.And as thescientist points out, use text-align:center; to center content within any block element, such as a div.

[1089]

I saw it thanks, just struggling to make sense of it. I need something similar to this, http://academic.sun.ac.za/berg/members/berg_members.htm. The images have to be grouped by category and each needs a description and a link to a CV. I've looked at that page's CSS and source, but as you can see:

	<div id="content" style="width: 768px">		<center>		<h2>Members</h2>		<p> </p>		</center>		<p class="style8"><strong><span class="style9">			              University Staff</span></strong>		<span class="style10"><br />		   _________________________________________________________________________</span></p>		<table style="width: 100%">			<tr>			<td style="height: 121px" class="style16">		<p align="" style="width: 200px" class="style35">		    		<img src="../images/thumbnails/cornie.jpg" border="0" ALT="Prof. Cornie Scheffer"		align="top" class="style5" width="141" height="200" /><br />		</p>		<p align="" style="width: 200px" class="style35">		Prof. Cornie Scheffer<br/>		Division Head: Biomedical Engineering<br />		Click <a href="http://www.mecheng.sun.ac.za/AboutUs/personnel/cs.html">here</a> for Curriculum Vitae<br /> 		</p>			</td>

it is not formatted with CSS.I have freedom to do what I want with the formatting, but I'm struggling to find a good way to present the images with the information.

[1089]

This is kinda how I want it to look.

[real_illusions]

I think your best bet is just to try to play around with the CSS and HTML to get what you would like to do.Draw out on a bit of paper with a pencil (if those things still exist in a dusty cupboard in this modern techno world), and then aim to get what you have on screen to match what the design is on the bit of paper.Might find it useful to write out the HTML first, and then style it. You can always move things around in the HTML. That way you can see each change and modification you do, how it affects stuff etc...Just try it, trial and error. All of us do that, even the professionals.

[1089]

I figured it out! Combination of CSS and HTML.Take a look:http://diagnostix.co.za/BERG/Members.htmlThanks for the advice, I had an idea in my head that there are shortcuts for everything.

[real_illusions]

You can target the <p> inside the <div class="Members"> without resorting to an extra class:div.Members p { height:100px; width:200px; float:left; margin: 10px 0 0 2%; padding:100px 0 0 0;}Same with <h1> and <h4> tags, you dont need a class on everything to style it

[1089]

You can target the <p> inside the <div class="Members"> without resorting to an extra class:div.Members p { height:100px; width:200px; float:left; margin: 10px 0 0 2%; padding:100px 0 0 0;}Same with <h1> and <h4> tags, you dont need a class on everything to style it

I just put it in thanks.I did the same with the images and it works!div.gallerydiscriptframe img { height:200px; width:140px; float:left; border: solid #000 2px; margin: 10px 0 0 3%;}<h4> improvement:.Berg #gallerydiscript H4 { border-bottom:1px solid #000; padding:0 0 10px 5px; width:788px;}gallerydiscript now 'covers' everything underneath the Title.The "Members" 'frames' are replaced with.gallerydiscriptframe { height:220px; width:788px;}So that I can use it in the Alumni page as well.<h1> was also betterrified.... (I know it's not a word... but it should be)#mainContent H1 { font-size:24px; text-align:center;}[EDIT] Replaced gallerydiscriptframe with galDframe ...it was too long.How important is it to have code that is clean? Does it speed things up?[EDIT]I should probaly do this, no?<h1> was also betterrified.... (I know it's not a word... but it should be)#mainContent H1 {font-size:24px;text-align:center;}

[real_illusions]

How important is it to have code that is clean? Does it speed things up?

Easier to maintain and read when editing, smaller file sizes (therefore quicker to load, less bandwidth) and just good coding practise

[1089]

Easier to maintain and read when editing, smaller file sizes (therefore quicker to load, less bandwidth) and just good coding practise

I'll keep that in mind Part of why I'm so particular in the way I want to code the site is so that others will be able to easily make new pages using templates I'll set up for them. So CSS is doing all the hard work (What? No evil laugh emoticon??? lol)Question? I've seen on some sites that when you click a link, only a certain portion of the page loads the new content. In my site's case it would be the Maincontent <div>. Is this possible? Does it benifit speed?

[real_illusions]

Question? I've seen on some sites that when you click a link, only a certain portion of the page loads the new content. In my site's case it would be the Maincontent <div>. Is this possible? Does it benifit speed?

Thats called AJAX. Certainly quicker than loading up a whole new page, but it has downsides - namely from an accessibility and SEO point of view. However, if the AJAX is implemented correctly (i.e non-obtrusive javascript), then the site will function and work properly without the extra AJAX effects. So its best not to build a complete site out of, but yet to change content on the page where you cant fit everything in or keep a minimalist look in parts.