The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> padding problem
klarko4444
post Jul 4 2012, 06:51 PM
Post #1


Member
***

Group: Members
Posts: 49
Joined: 24-November 10
Member No.: 13,231
HI there,

This is probably a simple question but I am still learning here....how can I apply different padding options to the same div on 2 different pages? So how can I over-rule the CSS in one specific page?

Thanks! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 4 2012, 06:54 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,723
Joined: 9-August 06
Member No.: 6
You can give the BODY tag of the page you want to be different an id. Then it's easy to target anything on that page specifically by using that id in the selector.


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post Jul 5 2012, 08:24 PM
Post #3


Member
***

Group: Members
Posts: 49
Joined: 24-November 10
Member No.: 13,231
I'm not sure I follow...if i want the maincontent div in my index.html document to have 0 padding all round, where do I write the code?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 5 2012, 11:24 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,723
Joined: 9-August 06
Member No.: 6
In your style sheet.

Assuming you now have a DIV with the id 'maincontent' and in your style sheet you have a rule that may look like the below...

CODE
#maincontent   { / *whatever padding declarations */ }


You give BODY of the page you want to look different an id like so...

HTML
<body id="oddpage">


Then you create a CSS rule something like this...

CODE
#oddpage #maincontent  { padding: 0 }


That rule will match only an element with the id 'maincontent' inside another element with the id 'oddpage'. Since the new rule has higher specificity it will overrule the old one no matter where you place it.


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 6 2012, 07:17 AM
Post #5


.
********

Group: WDG Moderators
Posts: 4,750
Joined: 10-August 06
Member No.: 7
What pandy says applies when you use an external stylesheet for all HTML pages.

Another way to do it is to put "page-specific" CSS in embedded style blocks on the individual pages, and only keep the "default/global" CSS in the external stylesheet.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 6 2012, 07:54 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,723
Joined: 9-August 06
Member No.: 6
Or the same style block in all pages. tongue.gif

Yeah, of course. You can also use style attributes. I felt avoiding splitting things up was implied, but maybe I was wrong there.


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post Jul 7 2012, 12:34 PM
Post #7


Member
***

Group: Members
Posts: 49
Joined: 24-November 10
Member No.: 13,231
Thanks so much for the help!!!

Ok I've tried this but it is not working, I've probably done it wrong. Where in the html of my page do I add <body id="oddpage">

<!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=UTF-8" />
<title>| The Fastline Bikademy Mountain Bike Skills Clinics, Coaching and Instruction |</title>
<meta name="keywords" content="mountain bike camp, bike camps, australia,freeride, downhill, DH, gravity, mtb, mtn, biking, cross country, all mountain, camps, clinics, instruction, technical, skills clinic, mountain bike instruction" />
<link href="TFB.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-size: 10pt
}td img {display: block;}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body class="oneColFixCtrHdr" onload="MM_preloadImages('indexmaincontent images/indexmaincontent_r2_c2_f2.gif')">
<div id="container">
<div id="header">
<h1><img src="TFBlogo.png" width="340" height="154" /></h1>
<!-- end #header --></div>
<div id="slideshow">
</div>
<img name="slideshow" src="slideshow images/slideshow.gif" width="900" height="250" border="0" id="slideshow2" alt="" />
<div id="mainContent">
<table border="0" cellpadding="0" cellspacing="0" width="900">
<!-- fwtable fwsrc="indexmaincontent.png" fwpage="Page 1" fwbase="indexmaincontent.gif" fwstyle="Dreamweaver" fwdocid = "409628013" fwnested="0" -->
<tr>
<td><img src="indexmaincontent images/spacer.gif" alt="" name="undefined_2" width="127" height="1" border="0" id="undefined_2" /></td>
<td><img src="indexmaincontent images/spacer.gif" alt="" name="undefined_2" width="206" height="1" border="0" id="undefined_2" /></td>
<td><img src="indexmaincontent images/spacer.gif" alt="" name="undefined_2" width="567" height="1" border="0" id="undefined_2" /></td>
<td><img src="indexmaincontent images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td colspan="3"><img name="indexmaincontent_r1_c1" src="indexmaincontent images/indexmaincontent_r1_c1.jpg" width="900" height="146" border="0" id="indexmaincontent_r1_c1" alt="" /></td>
<td><img src="indexmaincontent images/spacer.gif" alt="" name="undefined_2" width="1" height="146" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td rowspan="2"><img name="indexmaincontent_r2_c1" src="indexmaincontent images/indexmaincontent_r2_c1.jpg" width="127" height="254" border="0" id="indexmaincontent_r2_c1" alt="" /></td>
<td><a href="tfbskillscourses.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('indexmaincontent_r2_c2','','indexmaincontent images/indexmaincontent_r2_c2_f2.gif',1);"><img name="indexmaincontent_r2_c2" src="indexmaincontent images/indexmaincontent_r2_c2.gif" width="206" height="30" border="0" id="indexmaincontent_r2_c2" alt="" /></a></td>
<td rowspan="2"><img name="indexmaincontent_r2_c3" src="indexmaincontent images/indexmaincontent_r2_c3.jpg" width="567" height="254" border="0" id="indexmaincontent_r2_c3" alt="" /></td>
<td><img src="indexmaincontent images/spacer.gif" alt="" name="undefined_2" width="1" height="30" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td><img name="indexmaincontent_r3_c2" src="indexmaincontent images/indexmaincontent_r3_c2.jpg" width="206" height="224" border="0" id="indexmaincontent_r3_c2" alt="" /></td>
<td><img src="indexmaincontent images/spacer.gif" alt="" name="undefined_2" width="1" height="224" border="0" id="undefined_2" /></td>
</tr>
</table>
<!-- end #mainContent -->
</div>
<div id="footer">
<p align="center" class="style1">&copy; 2012 The Fastline Bikademy | site by <a href="http://www.clairebuchar.com" target="_blank">Claire Buchar</a></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 7 2012, 01:00 PM
Post #8


.
********

Group: WDG Moderators
Posts: 4,750
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Jul 6 2012, 02:54 PM) *

Or the same style block in all pages. tongue.gif

Yes but that wouldn't be practical, unlike my method. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 7 2012, 01:01 PM
Post #9


.
********

Group: WDG Moderators
Posts: 4,750
Joined: 10-August 06
Member No.: 7
QUOTE(klarko4444 @ Jul 7 2012, 07:34 PM) *

Where in the html of my page do I add <body id="oddpage">

Add the ID to the existing BODY start tag.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 7 2012, 01:02 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,723
Joined: 9-August 06
Member No.: 6
QUOTE(klarko4444 @ Jul 7 2012, 07:34 PM) *

Where in the html of my page do I add <body id="oddpage">


Well, you don't, not all of it. You already have a BODY tag and you can only have one. So just find it and add the the id to the other attributes. BTW you can call it anything you want, it doesn't need to be "oddpage".


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post Jul 7 2012, 02:01 PM
Post #11


Member
***

Group: Members
Posts: 49
Joined: 24-November 10
Member No.: 13,231
I was going to call it "indexpage" but I still don't fully understand. HOW do I add the id to the body tag?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 7 2012, 02:32 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,723
Joined: 9-August 06
Member No.: 6
Type it. smile.gif

It's like this.

<tag attribute1="value1" attribute2="value2" attribute3="value3">...</tag>

There's a start tag and a closing tag. The start tag can mostly have a bunch of attributes. You just list them with space between.

Your start tag for BODY looks like this.

HTML
<body class="oneColFixCtrHdr" onload="MM_preloadImages('indexmaincontent images/indexmaincontent_r2_c2_f2.gif')">


It already has two attributes, class and onload, with their values. Just add the id and its value the same way.

No, I'm not going to type it for you. It's better in the long run if you figure it out yourself. wink.gif


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post Jul 7 2012, 06:14 PM
Post #13


Member
***

Group: Members
Posts: 49
Joined: 24-November 10
Member No.: 13,231
Of course, I appreciate you taking the time to help me learn, thanks so much! Awesome, I'll give it a try now....smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klarko4444
post Jul 7 2012, 06:25 PM
Post #14


Member
***

Group: Members
Posts: 49
Joined: 24-November 10
Member No.: 13,231
Thanks again, I got it woohoo! smile.gif smile.gif smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 7 2012, 06:41 PM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,723
Joined: 9-August 06
Member No.: 6
Good for you! And now you will remember how to do it, right? happy.gif


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · General Web Design · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th May 2013 - 04:33 PM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC