Multiple CSS one page :)

Discussion in 'CSS' started by dagankfi, Jul 7, 2006.

0
  1. #1
    Hello you CSS Guru,

    Can any of you instruct me on how to assign different CSS to different parts of a single webpage? I want to devide a single webpage (style aspect) by using two different style sheets.

    Thx, Kdagan
     
    dagankfi, Jul 7, 2006 IP
  2. mad4

    mad4 Peon

    Messages:
    6,986
    Likes Received:
    493
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can use 2 style sheets and just pick styles from each one as you wish.
     
    mad4, Jul 7, 2006 IP
  3. KLB

    KLB Peon

    Messages:
    1,167
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The way I do things like this is wrap different sections of a webpage in a <DIV> tag with a specific class assigned to each of the macro DIVs I then define specific style attributes within that class. For example:

    
<body>
	<div class="section1">...whole bunch of code</div>
	<div class="section2">....more code</div>
	<div class="section3">....yet more code</div>
</body>
    Code (markup):
    .section1 P {...CSS instructions..}
.section1 UL {...CSS instructions...}
.section1 H2 {...CSS instructions...}

.section2 P {...CSS instructions..}
.section2 UL {...CSS instructions...}
.section2 H2 {...CSS instructions...}

.section3 P {...CSS instructions..}
.section3 UL {...CSS instructions...}
.section3 H2 {...CSS instructions...}
    Code (CSS):
    This is the only real way you can define different CSS instructions for different sections of a webpage.
     
    KLB, Jul 7, 2006 IP
  4. dagankfi

    dagankfi Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thx KLB, I'll try to follow :)
     
    dagankfi, Jul 7, 2006 IP
  5. dagankfi

    dagankfi Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hello again,

    It seems my problem is not so simple after all.
    Let me elaborate a bit:
    I'm using an open source JavaScript in order to generate a drop down menu. The menu attributes (and meawhile, the whole page's) are set by a style.css file as can be seen in the following block:

    HTML
    <html>
<head>
<title>Drop-down menu Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="SeveralDDMs/style.css">

<!----------------------------------------------------------------------->
<!--------------------------------------  Drop Down Menu declaration  --->
<script language="JavaScript1.2" src="SeveralDDMs/DDMapi.js"></script>
<script language="JavaScript1.2" src="SeveralDDMs/menucode.js"></script>
<script language="JavaScript1.2" src="SeveralDDMs/DDM.js"></script>
<script language="JavaScript" src="SeveralDDMs/DDMsupp.js"></script>
<!--------------------------------------  End of Drop Down Menu block  -->
<!--------------------------------------------------------------->
    Code (markup):
    The menu call is made inside the body of the page:
    HTML 
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>[B]<script language="JavaScript1.2" type="text/javascript">
		<!-- DDM call myTest for Menu #1	
		myTest.writeMenuBar();
		//-->
	</script>[/B]</td>
  </tr>
    Code (markup):
    A glimpse of the .css file can be seen in the following block:
    BODY {	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
		
.leftMenu {	text-align: left; }
		
.centerMenu { text-align: center;}
		
.rightMenu { text-align: right;	}
		
/*	MenuBar style */
a.MenuLabelLink	{ COLOR: #e0e0e0;	FONT-SIZE: 13px;FONT-FAMILY: Arial, Helvetica, sans-serif; 
TEXT-DECORATION: None; margin: 0px; padding: 0px; font-weight: bold; }
a.MenuLabelLink:link { COLOR: #e0e0e0;	FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuLabelLink:visited	{ COLOR: #e0e0e0; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None;	}
a.MenuLabelLink:hover{ COLOR: #e0e0e0; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
		
/*	Hover MenuBar style  */   
a.MenuLabelLinkOn {	COLOR: #ffffff; FONT-SIZE: 13px; FONT-FAMILY: Arial, Helvetica, sans-serif; 
TEXT-DECORATION: None; margin: 0px; padding: 0px; font-weight: bold; }
a.MenuLabelLinkOn:link { COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuLabelLinkOn:visited { COLOR: #ffffff/*BG hover color*/; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuLabelLinkOn:hover { COLOR: #ffffff/*text hover color*/; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
    Code (markup):
    Again, I want to place two menus using these tools. How can I set one of the menus attributes different from the others.

    I tried your way KLB and didn't succeed.

    Any suggestions?

    Hope its not too tedious :) Kfir
     
    dagankfi, Jul 7, 2006 IP
  6. dagankfi

    dagankfi Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I tried your method and didn't succeed.
    I'm generating two Drop Down Menus using .js file and it's a bit more complicated. I've added threads of the .html and .css code, will you take a look?
    Thx, Kfir
     
    dagankfi, Jul 7, 2006 IP
  7. KLB

    KLB Peon

    Messages:
    1,167
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You should scrap the use of JavaScript dropdown menus and switch to straight DHTML dropdown menus and only use JavaScript to support MSIE6 as it doesn't properly handle the sudo class "hover". Really, JavaScript is like the really complicated and dirty way of handling dynamic menus.
     
    KLB, Jul 7, 2006 IP
  8. dagankfi

    dagankfi Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I'll give it a thought KLB. Meanwhile any other suggestions? Any one?
     
    dagankfi, Jul 8, 2006 IP
  9. Mystique

    Mystique Well-Known Member

    Messages:
    2,579
    Likes Received:
    94
    Best Answers:
    2
    Trophy Points:
    195
    #9
    Mystique, Jul 8, 2006 IP
  10. dagankfi

    dagankfi Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Awsome! Thx Mystique :)
     
    dagankfi, Jul 8, 2006 IP