...

View Full Version : moving in line 'style' to <head> <style type="text/css"></style>



effpeetee
06-05-2007, 11:15 AM
In the folling code, a senior coder suggested that I move the style code that is embedded in the <DIV>, to a position in the <head> using

<style type="text/css">
</style>

How would I do this? I have tried but without success.

Thanks in advance.

effpeetee


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>We've lost our way</title>
<style type="text/css">
body{background:#000000}
#main {
width: 1200px;
margin: auto;
}
#main.figure {
float:right;
width:200px;
margin-bottom:0px;
margin-left:110px;
position:absolute;
}

#main .figure p {
position:absolute;
width:290px;
left: 410px;
top: 352px;
font-size:.9em;
font-weight:bold;
font-color:#ffffff/*This does not alter the font color - why not?*/ text-align:center;
padding: 5px;
margin: 0;
}

#main .figure img
{
display: block;
}

</style>
</head>

<body class ="" id="main">

<div class="figure">
<A href="Picchoose.html"><IMG style="LEFT: -5px; POSITION: absolute; TOP: -3px" height=728 alt="Click to move on" src="19.jpg" width=1024 84px; POSITION: absolute; TOP: 15px?></A><p>We should have turned left at the crossroads.</p></div>

</body>
</html>
--------------------------------------------------------------------------------
Last edited by effpeetee : 06-04-2007 at 05:04 PM. Reason: correcting text.

ahallicks
06-05-2007, 12:02 PM
I'm a little confused as you have used two values for a few of the positioning elemtents inside the style:



<style type="text/css>
.imgclass {
position: absolute;
left: -5px;
top: -3px;
height: 728px;
}
</style>


And in your HTML:



<img class="imgclass" src="19.jpg" alt="Click to move on" />

effpeetee
06-05-2007, 12:20 PM
I'm a little confused as you have used two values for a few of the positioning elemtents inside the style:



<style type="text/css>
.imgclass {
position: absolute;
left: -5px;
top: -3px;
height: 728px;
}
</style>


And in your HTML:



<img class="imgclass" src="19.jpg" alt="Click to move on" />

The line of code in question was produced by my WYSIWYG editor, just using Insert image and insert hyperlink and then dragging the image to where I needed it.

It works OK, but I am committed to bringing my site into CSS for better or for worse.

Thanks for your help.
Your modifications worked fine.

regards,

effpeetee

koyama
06-05-2007, 02:21 PM
Just for your information, you cannot simultaneously absolutely position and float an element. (The details are in CSS 2.1 Working Draft, Section 9.7, Rule 2 (http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo) )

You are trying to do that here:


#main.figure {
float:right;
width:200px;
margin-bottom:0px;
margin-left:110px;
position:absolute;
}
Effectively, what happens when you do this is that the float:right is ignored. Depending on what you want you should remove one of the lines.

Remember that absolute positioning without specifying offsets left/right and top/bottom can be “dangerous” since it is left to the user agent exactly where to position the element.

effpeetee
06-05-2007, 03:16 PM
Thank you Koyama,

The two position items were moved there by me prior to raising the issue.
It did include the position info and image sizes.
This is what I had previously:

<div style="Z-INDEX: 101; LEFT: 258px; WIDTH: 549px; POSITION: absolute; TOP: 584px; HEIGHT: 50px">
<center><span class="t14aw"><p style="COLOR: #ffffff; BACKGROUND-COLOR: #00364a">Ybut a nice photo.</p></span></center>
</div>


I forgot to remove the float item.

This is what I have now, and it works OK.

http://www.exitfegs.co.uk/1a.html

effpeetee


<!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>here</title>
<style type="text/css" xml:space="preserve">

body{background:#040}
#main {

width: 1000px;
margin: auto;
}
#main.figure {
float:right;
width:200px;
margin-bottom:0px;
margin-left:110px;
position:absolute;
}

#main .figure p {
position:absolute;
width:250px;
left: 90px;
top: 10px;
background-color:#ccc;
border: 1px solid #666666;
font-size:.9em;
font-weight:bold;
text-align:center;
padding: 5px;
margin: 0;
}

#main .figure img
{
display: block;
}


</style>
</head>

<body id="main">
<div class="figure">
<a href="index.html"><img class="img" src="steve6.jpg" alt="Click to move on" /></a>

<p>Steve, relaxing on the 'Bluebell Railway.</p>
</div>
</body>
</html>

koyama
06-05-2007, 03:37 PM
Hmm... I now see an error.

This:


#main.figure

should have been this:


#main. figure
The space is important. The first selector selects elements having both id="main" and class="figure" at the same time, but you don't have any of such elements, so the styles do not apply to anything.

The second selector selects elements of class="figure" that are descendants of an element with id="main". I guess that is what you wanted.

effpeetee
06-05-2007, 03:51 PM
I have put this right now.

#main. figure {
width:200px;
margin-bottom:0px;
margin-left:110px;
position:absolute;
}

It does not seem to matter whether I float or absolute, or take it out altogether.

#main. figure {
width:200px;
margin-bottom:0px;
margin-left:110px;
}


It works every way. Weird 'innit.

effpeetee

koyama
06-05-2007, 03:54 PM
Sorry, it should have been like this.


#main .figure

One really has to be carefull :D

effpeetee
06-05-2007, 04:07 PM
Sorry, it should have been like this.


#main .figure

One really has to be carefull :D
Well. It works as it is (faulty), but as soon as I 'correct' the code, the image goes over full right side.
It's OK when left as it is.
Obviously I have messed up somewhere else.

I shoud have taken up learning Japanese. It's probably easier.

If at first you don't succeed............................

effpeetee

koyama
06-05-2007, 04:25 PM
Well. It works as it is (faulty), but as soon as I 'correct' the code, the image goes over full right side.
The thing is that if you entirely remove the faulty code it will look the same way because it is having no effect at all. But it isn't working. When you resize the window, the image caption start to slide over the image.

Try this instead:


#main {
position: relative;
width: 1000px;
margin: auto;
}
#main .figure {
position: relative;
}
You may wonder why I added the blue part. It really isn't necessary, but solves for an IE resize bug where relatively and absolutely positioned elements do not move as one resizes the window. (At least IE6 and IE7 are affected).

If you are interested, the bug is described here: http://friendlybit.com/css/ie6-resize-bug/

effpeetee
06-05-2007, 05:02 PM
The thing is that if you entirely remove the faulty code it will look the same way because it is having no effect at all. But it isn't working. When you resize the window, the image caption start to slide over the image.

Try this instead:


#main {
position: relative;
width: 1000px;
margin: auto;
}
#main .figure {
position: relative;
}
You may wonder why I added the blue part. It really isn't necessary, but solves for an IE resize bug where relatively and absolutely positioned elements do not move as one resizes the window. (At least IE6 and IE7 are affected).

If you are interested, the bug is described here: http://friendlybit.com/css/ie6-resize-bug/
Hi!

I tried it and it solves the picture position, but the text has now disappeared.

http://www.exitfegs.co.uk/ATemplateb.html

effpeetee

Arbitrator
06-05-2007, 05:08 PM
You can make the following bit of code more efficient:


#main .figure img
{
display: block;
}


</style>
</head>

<body id="main">
<div class="figure">
<a href="index.html"><img class="img" src="steve6.jpg" alt="Click to move on" /></a>You’ve chosen to use an element selector (img) instead of a class selector (.img); the result is that the class attribute assigned to the img element is redundant and can be removed.

Additionally, your selector is more specific than necessary since there are no other images on the page and that selector is not used for multiple pages.


#main .figure img

The above could be simplified to the below:


img

I would also delete the below code since it’s not doing anything; it has an invalid selector.


#main. figure {
width:200px;
margin-bottom:0px;
margin-left:110px;

}


I tried it and it solves the picture position, but the text has now disappeared.You might want to update the page so that we can see what code is in use.

effpeetee
06-05-2007, 05:34 PM
Arbitrator,

The new code is up at this address.

http://www.exitfegs.co.uk/ATemplateb.html

Note that this page is hyperlinked to the index page. but the row of ...........'s under the menu will get back.

Meanwhile I will do as you say.

Thank you for your help.

effpeetee

Arbitrator
06-05-2007, 06:21 PM
Arbitrator,

The new code is up at this address.

http://www.exitfegs.co.uk/ATemplateb.htmlThe paragraph is invisible because you’ve (unnecessarily) absolutely positioned the image and used the z-index property to put the image on top of the paragraph. In other words, the paragraph, with a default z‐index of zero, is displayed behind the image, with an assigned z‐index of 100. To fix the issue, remove the following from your style sheet:


img.c1 {Z-INDEX: 100; LEFT: -3px; POSITION: absolute; TOP: -18px}

On another note, I’m not sure why you’ve gone back to XHTML (as HTML) and decided to use xml:preserve. Namespaced attributes are ignored when you serve XHTML as HTML.

If you want to see what your page looks like under real XHTML, then you can change the file extension to that of XHTML: *.xhtml or *.xht; this may, or may not, work, depending upon your server configuration. Also, note that this will result in a change in appearance in Firefox, Opera, and other browsers that support XHTML (because your CSS is specified incorrectly for XHTML) and will result in a download dialogue when accessed by Internet Explorer (because that browser does not support XHTML).

effpeetee
06-05-2007, 06:39 PM
Many thanks Arbitrator.

The DOCTYPE, believe it or not, was altered by the 'SimpleTidy' program which is supposed just to tidy up the layout. I am still with HTML. The other piece of redundant code has been removed as you suggest and all is now OK.

I do not seem to have grasped CSS properly. If it were not for your kind and expert help, I don't know what my site would be like. Still - press on. Once I get this template right, I can then bring the others into line.

Regards, and again many thanks.

effpeetee



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum