Cascading Style Sheets
This has to do with how to control the style and layout of multiple Web pages all at once.

Our reference will be based on: http://w3schools.com/css/default.asp

Please if you are new here: i think it will be a great idea to check the guideline before you continue reading this thread - to avoid confusion - https://www.nairaland.com/nigeria/topic-216485.0.html

I will be expecting your questions here - you will get your answers with source code when necessary - at other times i may just point you to
where you will get reliable answers online.

Dhtml thank you much.

I have a lot of question to ask as regards this new solution to our headaches.

NO 1. (Though funny and seemingly stupid but really bugging)

I am having problem linking my css file with my html file. I used the correct linking syntax as in <link rel="stylesheet"

href="mystyle.css" type="stylesheet">, but it is still not working unless I include my stylesheet in the head section of

the html document. I have tried this overtime on different computer systems and it still did not work. What could be the

problem ?

index.css

body {background:black;color:yellow;}

index.html

<link type="text/css" rel="stylesheet" href="index.css" />
Yo

Compare that, and also make sure you get the location right.
If you place your stylesheet in a style folder, dont forget to add the name of the folder

<link type="text/css" rel="stylesheet" href="style/index.css" />

I tried your suggestion exactly, but it is still not working.

The funny thing is some styles apply to the html page why some do not apply even when they are correctly typed and

arranged.

Please, can you paste the codes in here (".html" page and ".css page"). I think that will help us understand what is making things no work out for you.

The LINK tag goes in the HEAD section. Where does the CSS file reside? Maybe you should use absolute pathing (/css/stylesheet.css). Besides, if you are trying to use inline or page style sheets, you really shouldn't.

Post a link to the site in question. Also, if you haven't already, get the web developer toolkit plugin for firefox as well as firebug and believe me, your life will be much easier. I guarantee it, or your money back (even though you haven't paid me anything )

lol - i can now conclude that the problem is not the codes - but rather how they are being used - 'cos i usually test whatever code i paste - and to the eye - what i pasted is error-free - so i quite agree wit yawa that u should upload it and give us a link - and if we fail - u can hav double of ur money back

@yawa-ti-de & dhtml,

Thanks, I have rectified the problem.

Yet there is another problem.

I am planning on making my page and all its content fluid. As in, my entire layout should be fluid, infact all the elements

in the page should respond to change in browser size.

That is exactly what i am planning to do.

I succeded in making my layout fluid by making it's widht 100%. I did a little trick with my improvised background image

using absolute positioning. It worked and so i decided to continue my site using absolute positioning. However i got

a problem with my navigation bar. The texts that are supposed to be fluid in the navigation bar is not flowing with what

I want to do. The font-size is not responding to change in browser size.

Basically my problem is with the texts and its font-size.

Please take a look at the code and help me out here.


CSS Code:

/*********BODY*****************/

body		{
	width:100%;
	margin:0%;
	padding:0%;
	 scrollbar-base-color:#666666;
	 scrollbar-arrow-color:#ffcc00; 
	 scrollbar-darkshadow-color:#ffcc00; 
	 scrollbar-face-color:#666666; 
	 scrollbar-shadow-color:#009900;
}

/*********MAIN OVERALL PAGE DIV*****************/
#container {
	width: 100%;
	position: relative;
}

/*********DIV THAT ACTS AS A HACK FOR IMAGE SIZING*****************/
#background {
	width: 100%;
	margin-top: 0%;
	position: absolute;
	z-index:1;
}

#background img {
	width:100%;

}

/*********LOGO*****************/

#logo{
	position:absolute;
	width:40%;
	margin-top:2.4%;
	z-index:4;
}

#logo img {
	width:100%;
}

#topnav  {
	position:absolute;
	margin-top:0.5%;
	width:80%;
	z-index:100;
}

#topnav ul 
	{
	font-family: verdana, helvetica, arial, sans-serif;
	 font-size: 70%;
	 color: #666666;
	 white-space: nowrap;
	 padding-left: 0%;
	 text-transform: uppercase;
}
#topnav li 
	{
	  list-style-type: none;
	  display: inline;
	  padding: 0px 10px;
	 color: #999999;
}

#topnav li a
	{
	 padding: 0px 10px;
	 text-decoration: none;
	 color: #000000;
}

#topnav li a:hover
	{
	 text-decoration: underline;
	 color: #009900;
}

#searcharea {
	width:20%;
	float: right;
	z-index:101;
}

.searchbox1
	{
	 border-style: solid;
	 border-color: gold;
	 border-width: 1px;
	 height: 15px;
	 font-family: verdana, helvetica, arial, sans-serif;
	 font-size: 60%;
	 text-transform: uppercase;
	 color: #666666;
	}

#rightnav img {
	width:100%;
	height:100%;
}

HTML 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=iso-8859-1" />
<title>GOLDMART - Online Store, </title>
<link href="test_site.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

	<div id=background><img src=Cssback.png></img></div>
	<div id=logo><img src=Csslogo.png alt="GOLDMART LOGO"></img></div>
	<div id=topnav>
			<ul>
				<li>home</li>
				<li><a href="company.html">about us</a></li>
				<li><a href="services.html">products</a></li>
				<li><a href="portfolio.html">purchase</a></li>
				<li><a href="contact.html">contact</a></li>
			</ul>
	</div>
	
	<div id=searcharea><input type=text class=searchbox1></input></div>

</div>

</body>
</html>

Please help me out here.

My head is a little full right now - wat precisely do u mean by fluid - i will check your codes later

@yawa-ti-de
I will like to get your book on Css .check my profile for my mail. Pls

while u are at it - make sure u read my html book as well(if u need a brush up).

Efeboy,

Making a layout fluid (as in if you expand the window, the layout expands with it, etc) and making fonts fluid (as in if a user increases font or vice versa, the fonts increase with it or vice versa) are 2 different things.

For font fluidity, use "em" instead of "px" or %" for ur font-size properties.  Never use "pt" as this is print font and will only work out well on paper. 

Also, look to indent your code as it aids in readability and debugging.  Finally, if you haven't already, install firefox and its web developer toolkit.  This will enable you to, among otehrs, view and edit your css on the fly so you can see ho a change you make will affect your layout before uploading same to your server.  I hope I answered your question.

To CSS ebook requestee - sorry but I will get it to you soonest.  I have been both busy at work and under the weather - deadly combination

Thanks to You all. 

@yawa-ti-de,

yawa-ti-de:

making fonts fluid (as in if a user increases font or vice versa, the fonts increase with it or vice versa)

Thanks yawa-ti-de, however please don't get tired of me.

What I meant by making my fonts fluid was that the fonts should decrease if the user decreases the  browser

window size or vice-versa.

Cool, so I have answered ur question then - set your font sizes in "em" units.

Thanks ladie, you know, i had you in mind while creating this thread - afterall you are the author of a css book!

Sorry, but I used 'em' still the size of the font does not respond to the change in size of the browser's window size.

@yawa-ti-de,

Sorry, but I used 'em' still the size of the font does not respond to the change in size of the browser's window size.

Somehow i feel the solution to this lie in javascript - but i just wanted to see if there was an easy method with css that i dont know of - if u wish for a javascript solution, just say so - 'cos i hate posting codes unecessarily (and i guarantee that it will work 100% correctly or you can have your money back)

@dhtml,

Please I would appreciate any help at all.

Thanks in advance.

You don't have to use javascript. efeboy, using even the code you pasted above, I could see my fonts increase and decrease in size. If they aren't responding on your end, perhaps you have some inline css styles that are forcing the fonts to stay where they are.

Please repaste your code, this time, put ur css as a page style in your html file.

Again, you don't have to use javascript. Besides, you don't want to use javascript for a solution just because you can. What if (big "if" i know) someone has javascript turned off?

Come to think of it, the topic of discussion is cascading style sheet and not javascript, so i will let that slide.

Lost

Hello fellow Nairaland memebers, i am new to web designing and the truth is that i am still learning,i have successfully designed a website but my problem is that i want it to open in all resolutions so that when i finally host it,people with different resolutions can open it without it shifting to the right leaving enough blank space on the left,i know i am not a professional yet but it does not mean that i should design an unprofessional website. i tried using a css code i saw online but it is still the same, the moment i change my screen resolution to 800 x 600 it will no longer fit on the screen.Please please help a learning boy,abeg my naija people help me, i don google and i don try most of the stuffs i saw in forums to no avail,but i believe that my fellow naija people go fit help me,so i am back home to ask for ur favors.

Oga Efeboy abeg no vex ooo,doeas your own fit in to all screen resolution? if yes,abeg help a brother na,abeg.

dhtml and yawa-tide abeg make una help me ooooo

learnerboy:

Hello fellow Nairaland memebers, i am new to web designing and the truth is that i am still learning,i have successfully designed a website but my problem is that i want it to open in all resolutions so that when i finally host it,people with different resolutions can open it without it shifting to the right leaving enough blank space on the left,i know i am not a professional yet but it does not mean that i should design an unprofessional website. i tried using a css code i saw online but it is still the same, the moment i change my screen resolution to 800 x 600 it will no longer fit on the screen.Please please help a learning boy,abeg my naija people help me, i don google and i don try most of the stuffs i saw in forums to no avail,but i believe that my fellow naija people go fit help me,so i am back home to ask for your favors.

I have posted reply to your post on this issue here:
https://www.nairaland.com/nigeria/topic-599525.0.html

Check it out and let me know

thanks so so much, i will try it out later at night when i am sure of constant power supply,thank u very much for your assistance so far. i said it that nairaland is far better than most of all these yankee forums.

de nada learnerboy - thanks for the compliment

great topic! Pls am new to web design/development, so far, hav been able to attend an online class on html and css but I hav a problem, on a web page I code, all my ''navigation bar'' ar linking to each other, and if I try to click on eg ''Home'' the rest will become active as wel, pls some one help. I am 2 weeks old in this field pls help and guide also, I will lik to hav a frnd in this field I am jepsy50 on facebook thank in advance

a url, where we can see your code in action, would be very helpful here

True talk