Printable View
Hi,
I know I can move a element in a div for example a paragraph by putting:
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?Code:div.main p {
margin-left: 215px;
}
I tried:
But that didn't work because of the number of the particular header say "3" wasn't being referred to.Code:div.main h {
margin-left: 215px;
}
TIA
Nightwalker
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.
This can then be used in any html document as:Code:#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;
}
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.Code:<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>
I hope this is what you wanted but if not my apologies for any time wasted.
Kind regards
Steve
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:
So I don't have to repeat the style code like:Code:<h1>some</h1> <h2>text</h2> <h3>here</h3>
I could just put something like:Code:div.main h1 {
margin-left: 215px;
}
div.main h2 {
margin-left: 215px;
}
div.main h3 {
margin-left: 215px;
}
It would apply the changes to the element regardless of what size/number the element was. Is this possible?Code:div.main h {
margin-left: 215px;
}
Thanks
Hi there Nightwalker83
you have two choices.
1. Give the the header elements a class name - ( say class="h" ) - and the use this code...
2. Use this code...Code:
div.main .h {
margin-left: 215px;
}
Code:
div.main h1,div.main h2,div.main h3 {
margin-left: 215px;
}
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:
How would I apply the settings? I have tried: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>
As well as class code but neither worked!Code:div.main#object{
margin-left: 215px;
}
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>.
Hi there Nightwalker83,
this code...
...requires a space between 'main' and the '#' or the '#' being removed altogether.Code:
div.main#object{
margin-left: 215px;
}
However, this code...
...has not been given an id or class at all.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>
If this object element is unique within the div element class="main" use...
..and if there are more than one then give them a class - (say class="myflash" ) - and use...Code:
div.main object{
margin-left: 215px;
}
Code:
div.main .myflash {
margin-left: 215px;
}
Thanks, do you know the fire fox equivalent of that code? The code you just posted doesn't in FF.
Hi there Nightwalker83,
the code will work in Firefox, as this example will show..
Code:
<!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>
@ 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:
css:Code:<!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>
This is confusing me!Code:@charset "utf-8";
/* CSS Document */
body {
margin:0;
}
div.main .myflash {
margin-left: 900px;
}
Edit II:
The way I've found is by using a lot of to push the object in to place like so:
Code: <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>
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.
Hi there Nightwalker83,
Well, the cause of your confusion is here...Quote:
This is confusing me!
This part of the code will work OK...Code:
div.main.myflash {
margin-left: 900px;
}
div.main...with no space between div and .main, but with this...
div.main.myflash...you must leave space between .main and .myflash....
I did point out this error to you in a previous post but you must have overlooked it. ;)Code:
div.main .myflash {
margin-left: 900px;
}
I didn't over look it! I tried it and it didn't work. :pQuote:
Originally Posted by coothead
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.
Edit II:Code:<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>
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.
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 to move the object in to place?
Edit:
I just wrapped the script in div tags like I did before.
Still haven't figured out I better way of doing the above when the script tags are involved. :mad:Code:<div class="flash">
<script>
code
</script>
</div>