9 Replies - 2708 Views - Last Post: 24 May 2006 - 09:40 PM

#1 fhmtech  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-May 06

Requesting help of css and html

Posted 19 May 2006 - 01:22 AM

I have plenty of CSS codes to be used. The problem is i cant merge the css with my html code. I am confused. I cannot find a relation between them. If it is possible for any1 to provide me with a website design or a website structure with css and html together so that i can understand and learn wat code goes where.

Thanks
Is This A Good Question/Topic? 0
  • +

Replies To: Requesting help of css and html

#2 [email protected]  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 1
  • View blog
  • Posts: 309
  • Joined: 09-July 05

Re: Requesting help of css and html

Posted 19 May 2006 - 04:12 AM

<!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" xml:lang="en">
<head>
	<title> www.michelle-b.co.uk :: Home</title>
	<link rel="stylesheet" href="http://www.michelle-b.co.uk/Style sheet.css"/>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Michelle Bartholomew" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />

</head>

<body id="body">

<div id="container">

<div id="header"> </div>

<div id="content"> </div>

<div id="menu"> </div>

</div>

</body>

</html>



The line; <link rel="stylesheet" href="http://www.michelle-b.co.uk/Style sheet.css"/> found in the <head> is where you link your CSS to the html. After doing that you have to divide your html into divs which is what links the sections to your CSS. I haven't given you any of the content because it would be more complicated. These are the divs I used when creating my site

/* css for www.michelle-b.co.uk */

#body {
}

#container {
}

#header {
}

#content {
}

/* navigation menu*/

#menu {
}


Then you put your css into the relevant sections which are defined using:

# the name of your div in your html
{ put your styles in here;
seperated with a ;
and then closed at the end with;
}


Again I have stripped out the CSS just for demo purposes.

Hope this helps

Michelle B)

P.S. This is the way I did it, there are probably better more standard ways of doing it, but hey it worked for me :P

EDIT: General stupidity on my part :rolleyes:

This post has been edited by [email protected]: 19 May 2006 - 04:19 AM

Was This Post Helpful? 0
  • +
  • -

#3 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 207
  • View blog
  • Posts: 4,812
  • Joined: 23-December 05

Re: Requesting help of css and html

Posted 19 May 2006 - 04:35 AM

with my site still in the basic stages there are a few css bits on it just to get it up and going (please excuse the horribleness of it for now, lol)
It is an example of using css without divs as well.
Was This Post Helpful? 0
  • +
  • -

#4 fhmtech  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-May 06

Re: Requesting help of css and html

Posted 19 May 2006 - 04:58 AM

Thanks for the information however is it necessary to use
<link rel="stylesheet" href="http://www.michelle-b.co.uk/Style sheet.css"/>



cause in blogger templates i use style type="text/css">. then i type the css in the html document. After the css i use the div as [email protected] suggested . Everything works body,content,header however when i use a drop down menu it does not work. First there is a navigation bar then the drop-down menu i got also has a javascript. How do i link the jscript with the drop down menu and which part of the code do i insert in. When i use div for the

Thanks [email protected] however if u could give provide the entire code including css it would helpful. I have been using css a lot because of my blog

Bdpollution

i changed the template twice and i am not satisfied, i want a professional look.

This is code i am working on. cud any1 tell me wats wrong with it and where do i insert the jscript for drop down menu.

<!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>
  <title><Test></title>

  

<style type="text/css">


body
{
margin: 20px;
background: #000;
font-size: 11px; 
color: #000; 
line-height: 1.5em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

<!---Layout Divs--->

#content h1 {
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
color: #fff;
border-left: 24px solid #ffff;
border-bottom: 1px solid #ffff;
padding: 0px 0px 0px 10px;
}

#content h2 {
font-weight: bold;
font-size: 1em;
text-decoration: underline;
color: #ffff;
padding: 0px 0px 0px 10px;
font:Arial, Helvetica, sans-serif;
}

#content {
	width: 760px;
	text-align: left;
	margin: auto;
}


#content
{
	background:#FFFFF;
	float:left;
	padding:10px 10px;
	width:500px;
	font:14px trebuchet ms, arial, verdana, helvetica, sans-serif;
	border-right:1px solid #ffff;
	color:#FFFF;
}


#chromemenu{
width: 99%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background:url(file:///chromemenu/chrometheme/chromebg.gif)  center center repeat-x; /*Theme Change here*/
margin-left: 0;
padding-left: 0;
margin: 0;
float: left;
font: bold 12px Verdana;
}


#chromemenu ul li{
display: inline;
}


#chromemenu ul li a{
float: left;
color: #7F7F7F;
font-weight: bold;
padding: 6px 12px 6px 7px;
text-decoration: none;
background:url(file:///D|/FAHEEM FILES/chromemenu/chrometheme/divider.gif) center right no-repeat; /*Theme Change here*/
}

#chromemenu ul li a:hover{
color: #494949;
}

#chromemenu ul li a[onmouseover]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


<!---Html tags--->

a {
	font-weight: bold; 
	color: #555; 
	text-decoration: none;
	}
a:link {
	color: #FFF;
	text-decoration: none;
	}
	
a:visited {
	color: #555;
	text-decoration: none;
	}
	
a:active {
	color: #555;
	}
	
a:hover {
	color: #CCC; 
	text-decoration: underline;
	}
	
/* ######### Style for Drop Down Menu ######### */


.dropmenudiv {
	position:absolute;
	top: 37px;
	border: 1px solid #BBB;
	border-bottom-width: 0;
	font:normal 12px Verdana;
	line-height:18px;
	z-index:100;
	background-color: white;
	width: 200px;
	visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
	left: 82px;
	overflow: hidden;
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*Theme Change here*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*Theme Change here*/
background-color: #F0F0F0;
}

</style>
</head>

<body>


<div id="chromemenu">

<ul>
<li><a href="http://www.w3schools.com">Home</a></li>
<li><a href="#" onmouseover="cssdropdown.dropit(this,event,'dropmenu1')">Test</a></li>
<li><a href="#" onmouseover="cssdropdown.dropit(this,event,'dropmenu2')">Test2</a></li>
</ul>
</div>


<script type= "text/jscript"  src="file://// /chromemenu/chromejs/chrome.js"></script>

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.w3schools.com/">W3schools</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">Javascript Kit</a>
</div>

<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
</div>


<!---start content--->
<br>
<div id="content">

<div id="content h1">
<h1>Testing</h1>
</div>
<br>
</br>

<br>


<div id="content h2">

<h2>Testing1</h2>
</div>
<br><p>This is a test page.</p></br>

<li><a href="http://www.geocities.com/fhmtech/">My Homepage</a></li>

</div>
<!---end content--->

</body>
</html>



Thanks [email protected] again and william wilson
Was This Post Helpful? 0
  • +
  • -

#5 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 207
  • View blog
  • Posts: 4,812
  • Joined: 23-December 05

Re: Requesting help of css and html

Posted 19 May 2006 - 05:26 AM

you can do it the way you are doing that is just fine, the link method just allows you to place it in another file (not appropriate for blogger)
look on my site again (the top frame is a javascript list) :)
Was This Post Helpful? 0
  • +
  • -

#6 [email protected]  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 1
  • View blog
  • Posts: 309
  • Joined: 09-July 05

Re: Requesting help of css and html

Posted 19 May 2006 - 05:33 AM

My CSS is a seperate linked file called and external style sheet hence the line I gave you, looks like you are using embedded CSS, which unfortunately my only experience with this is using blogger.

Sorry

This post has been edited by [email protected]: 19 May 2006 - 05:38 AM

Was This Post Helpful? 0
  • +
  • -

#7 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Requesting help of css and html

Posted 19 May 2006 - 01:49 PM

Using embedded and external CSS works exactly the same. The only difference is that embedded CSS is actually contained within the page and external CSS is contained in some other (external) file which is linked to the page (with the *.css extension).

<style type="text/css">
/* CSS HERE (this is a CSS comment) */
</style>


You can call an external CSS file using the style tags too:

<style type="text/css">
@import url("style.css");
</style>


In fact you can use them together and call as many external files as you want.

<style type="text/css">
@import url("master.css");
@import url("style.css");
@import url("http://www.michelle-b.co.uk/Style sheet.css");
@import url("print.css") print;
/* CSS HERE (this is a CSS comment) */
</style>


Resource: The @import Rule

If you do use the link tag, you should specify the type like you would on the style tags as well:
<link rel="stylesheet" type="text/css" href="http://www.michelle-b.co.uk/Style sheet.css"/>

To your main question though, you can target areas using CSS by using selectors to select certain parts of the page. The most common are classes, IDs, and the descendent selectors (most of the rest aren't supported by Internet Explorer 6 but support will be added with IE7). Examples:

CSS: div.allaboutme {font-family: Georgia, Geneva, serif;}
Targets this HTML: <div class="allaboutme"></div>
Summary: changes the font for all div of the class allaboutme

CSS: div#allaboutme {font-family: Georgia, Geneva, serif;}
Targets this HTML: <div id="allaboutme"></div>
Summary: changes the font for the ONE div identified by (with the ID) allaboutme
Note: IDs are only used on ONE element and no more. Classes may be used on multiple elements.

CSS: div#allaboutme p {font-family: Georgia, Geneva, serif;}
Targets this HTML: <div id="allaboutme"><p></p></div>
Summary: changes the font for all paragraphs (p) contained within the div identified by allaboutme

Resource: CSS2 Selectors
Was This Post Helpful? 0
  • +
  • -

#8 fhmtech  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-May 06

Re: Requesting help of css and html

Posted 21 May 2006 - 02:31 AM

William Wilson: for my drop down menu where do i place the javascript.
do i use "text/javascript" and paste the code in the div of drop down as i did below. For instance if i use the same code in geocities wud it be appropriate to use the link.

[email protected]: thanks for the help. i prefer embedded css, easier for me to work with.

Arbitrator: thanks for clearing my confusion in the div section. for id use "#" , class "." and p.
Was This Post Helpful? 0
  • +
  • -

#9 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 207
  • View blog
  • Posts: 4,812
  • Joined: 23-December 05

Re: Requesting help of css and html

Posted 21 May 2006 - 07:45 AM

close, it is placed where ever you want the list to appear, and the code is of the following form (from my page):
<form name="list_items">
<select name="your_choice">
<option value="some_page.html" selected>HOME</option>
<option value="some_other_page.html">Dislpayed Caption</option>
</select>
<input type="button" value="Go" onclick="go_To(this.form)">
</form>


the word selected on the first option line determines that it will be automatically selected on any page showing this list, or upon a refresh.
the other 'names' are more easily described, buy showing how the operation is handled:
function go_To(form) {		
		 window.open(form.your_choice[form.your_choice.selectedIndex].value);
	form.your_choice.options[0].selected = true;
}


this code goes in your head section, the first line applies the choice upon pressing the button, and the second forces the reset of the menu to item # 1.
Was This Post Helpful? 0
  • +
  • -

#10 fhmtech  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-May 06

Re: Requesting help of css and html

Posted 24 May 2006 - 09:40 PM

thanks a lot i will work on it. If i have problems i will let u guys know. thanks again
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1