Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation moving in line 'style' to <head> <style type="text/css"></style>

    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

    Code:
    <!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.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I'm a little confused as you have used two values for a few of the positioning elemtents inside the style:

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

    Code:
    <img class="imgclass" src="19.jpg" alt="Click to move on" />
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ahallicks View Post
    I'm a little confused as you have used two values for a few of the positioning elemtents inside the style:

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

    Code:
    <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
    Last edited by effpeetee; 06-05-2007 at 11:31 AM.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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 )

    You are trying to do that here:
    Code:
    #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.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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

    Code:
    <!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>
    Last edited by effpeetee; 06-05-2007 at 02:27 PM. Reason: Omitted some info

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hmm... I now see an error.

    This:
    Code:
    #main.figure
    should have been this:
    Code:
    #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.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Sorry, it should have been like this.
    Code:
    #main .figure
    One really has to be carefull

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by koyama View Post
    Sorry, it should have been like this.
    Code:
    #main .figure
    One really has to be carefull
    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

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by effpeetee View Post
    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:
    Code:
    #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/

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by koyama View Post
    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:
    Code:
    #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
    Last edited by effpeetee; 06-05-2007 at 04:08 PM.

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    You can make the following bit of code more efficient:

    Code:
    #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.

    Code:
    #main .figure img
    The above could be simplified to the below:

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

    Code:
    #main. figure {
        width:200px;
        margin-bottom:0px;
        margin-left:110px;
        
    }
    Quote Originally Posted by effpeetee View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 06-05-2007 at 05:15 PM. Reason: spelling

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by effpeetee View Post
    Arbitrator,

    The new code is up at this address.

    http://www.exitfegs.co.uk/ATemplateb.html
    The 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:

    Code:
    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).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •