[RESOLVED] Styles within a div

[Nightwalker83]

Hi,

I know I can move a element in a div for example a paragraph by putting:

div.main p {
	margin-left: 215px;
}

In a css file an referencing the css within the html file! However, how would I do this say with a selection of elements like headers?

I tried:

div.main h {
	margin-left: 215px;
}

But that didn't work because of the number of the particular header say "3" wasn't being referred to.

TIA

Nightwalker

[sparbag]

Hello Nightwalker,

I may have confused what you're asking to what 'I think' you're asking so please bare with me.

I have used in the past a method of creating differing H1 headers for opposite sides of a page by adapting a css file from styleshout.

#header {
	position: relative;
	height: 85px;	
	background: #000 url(headerbg.gif) repeat-x 0% 100%;	
}
#header h1#logo {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	text-transform: lowercase;
	top: 0; left: 5px;	
}
#header h1#phone  {
    position:absolute;
	top:15px; right:5px;
	font: bolder 3.1em, Arial, sans-serif;
	letter-spacing:0px;
	text-transform:lowercase;
	margin:0; padding:0;
}

This can then be used in any html document as:

<div id="header">				
			
		<h1 id="logo">Any <span class="green">Buildings</span><span class="gray"> Ltd.</span></h1>

<h1 id="phone">01234<span class="green"> 567890</span></h1>
</div>

By using hashes you can create many different styles for the same inner html by use of id="", whilst still calling classes as you have already created them.

I hope this is what you wanted but if not my apologies for any time wasted.

Kind regards
Steve

[Nightwalker83]

Hi Steve,

Yes, you are abit confused! What I am looking for is a way to apply styles to element of the same type only once.

Example:

Say I have:

<h1>some</h1> <h2>text</h2> <h3>here</h3>

So I don't have to repeat the style code like:

div.main h1 {
	margin-left: 215px;
}
div.main h2 {
	margin-left: 215px;
}
div.main h3 {
	margin-left: 215px;
}

I could just put something like:

div.main h {
	margin-left: 215px;
}

It would apply the changes to the element regardless of what size/number the element was. Is this possible?

Thanks

[coothead]

Hi there Nightwalker83

you have two choices.

1. Give the the header elements a class name - ( say class="h" ) - and the use this code...

div.main .h {
	margin-left: 215px;
 }

2. Use this code...

div.main h1,div.main h2,div.main h3 {
	margin-left: 215px;
}

[Nightwalker83]

Thanks coothead! That works a treat although the second code still allows me to control the elements individually if needed.

Edit:

(Flash) objects don't seem to want to work with the above code.

If I have:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="320" height="75" tabindex="14" title="Alpha">
    <param name="movie" value="alpha.swf" />
    <param name="quality" value="high" />
  </object>

How would I apply the settings? I have tried:

div.main#object{
	margin-left: 215px;
}

As well as class code but neither worked!

Edit:

I have been wrapping some elements in the <p></p> tags to position them so that layouts such as:

http://www.vbforums.com/showthread.php?t=550218

wont be affected.

The <p></p> tags don't work surrounding an object <object></object>.

[coothead]

Hi there Nightwalker83,

this code...

div.main#object{
	margin-left: 215px;
 }

...requires a space between 'main' and the '#' or the '#' being removed altogether.

However, this code...

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="320" height="75" tabindex="14" title="Alpha">
    <param name="movie" value="alpha.swf" />
    <param name="quality" value="high" />
  </object>

...has not been given an id or class at all.
If this object element is unique within the div element class="main" use...

div.main object{
	margin-left: 215px;
 }

..and if there are more than one then give them a class - (say class="myflash" ) - and use...

div.main .myflash {
	margin-left: 215px;
 }

[Nightwalker83]

Thanks, do you know the fire fox equivalent of that code? The code you just posted doesn't in FF.

[coothead]

Hi there Nightwalker83,

the code will work in Firefox, as this example will show..

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
body {
    margin:0;
 }
div.main .myflash {
    margin-left:215px;
}
</style>

</head>
<body>

<h3><---  215px  ---></h3>

<div class="main">
<object class="myflash" type="application/x-shockwave-flash" data="http://www.coothead.co.uk/images/smiles.swf" width="400" height="300">
<param name="movie" value="http://www.coothead.co.uk/images/smiles.swf">
</object>
</div>

</body>
</html>

[Nightwalker83]

@ Coothead,

I have tested that code in 5 different browsers on 2 different computers and it works!

However, I can't understand why it's not working correctly? The object is suppose to move positions according to specifications in the css file. Unfortunately it does not and I can't figure out why.

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="test.css" rel="stylesheet" title="" type="text/css" />
</head>
<body>

<h3><---  215px  ---></h3>

<div class="main">
<object class="myflash" type="application/x-shockwave-flash" data="http://www.coothead.co.uk/images/smiles.swf" width="400" height="300">
<param name="movie" value="http://www.coothead.co.uk/images/smiles.swf" />
</object>
</div>
</body>
</html>

css:

@charset "utf-8";
/* CSS Document */

body {
    margin:0;
 }
div.main .myflash {
    margin-left: 900px;
}

This is confusing me!

Edit II:

The way I've found is by using a lot of &nbsp; to push the object in to place like so:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','320','height','75','tabindex','14','title','Alpha','movie','alpha','quality','high'); //end AC code
  </script>

[Nightwalker83]

I have just used the code in post #5 then wrapped it in a div class = "flash".

That is the only other method (I know) of moving the object besides the above post's method.

[coothead]

Hi there Nightwalker83,

This is confusing me!

Well, the cause of your confusion is here...

div.main.myflash {
    margin-left: 900px;
}

This part of the code will work OK...

div.main

...with no space between div and .main, but with this...

div.main.myflash

...you must leave space between .main and .myflash....

div.main  .myflash {
    margin-left: 900px;
}

I did point out this error to you in a previous post but you must have overlooked it.

[Nightwalker83]

I did point out this error to you in a previous post but you must have overlooked it.

I didn't over look it! I tried it and it didn't work.

The code I posted above is suppose have the space between ".main" and ".myflash".

Edit:

I have attached an example using your code! This one works. However, when using the same exact code in mine it doesn't work.

I suspect the problem has something to do with the AC_FL_RunContent.js which, my code uses but yours does not.

<script type="text/javascript">
<!--AC_FL_RunContent-->
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','320','height','75','tabindex','14','title','Alpha','movie','alpha','quality','high'); //end AC code
  </script>
 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="320" height="75" tabindex="14" title="Alpha">
    <param name="movie" value="alpha.swf" />
    <param name="quality" value="high" />
  </object>

Edit II:

I found out something about the current code I am using the <noscript></noscript> tags can only be place around an <object></object> and not the <script><script>. However, the opposite is true with the div class.

[Nightwalker83]

Is there a way I can use the "class" code within a script tag? If not is there another way to achieve the same effect without have to use tons of &nbsp; to move the object in to place?

Edit:

I just wrapped the script in div tags like I did before.

<div class="flash">
<script>
code
</script>
</div>

Still haven't figured out I better way of doing the above when the script tags are involved.