CSS/HTML : Little Help Please

by pede
16 replies
Hi Guys..

I am just now starting to study CSS. But I need to know how to do something if you would not mind, please.

I need to be able to have a header area like this: New Page 1

But I want it to go edge to edge like CSS. Even making a table at 100%, as you can see, it does not go edge to edge.

I want to have the header at the top, edge to edge and put an iframe at about 75% page width right under it.

Any suggestions would very much be appreciated.

Thank you,
John
#css or html
  • Profile picture of the author Devan Koshal
    right, thats not the right way to do it.

    Word of advice (6 years web design experience here lol) - never use tables to structure a website.

    Right for your website use this code

    HTML Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    
    <style>
    body
    {
    background-image:url(images/header-background.jpg);
    background-repeat: repeat-x;
    background-position:top;
    margin: 0 0 0 0;
    }
    </style>
    
    </head>
    
    <body>
    
    WHAT EVER CONTENT HERE
    
    
    </body>
    
    </html>
    
    {{ DiscussionBoard.errors[188830].message }}
  • Profile picture of the author ChristianM
    What Devan says will work fine. But, I don't think a blanket statement like "never use tables to structure a website." is right - it is a perfectly adequate way to get a website up quickly so for people who only want a temporary site then I see no problem with it.

    But, if you are learning to design websites then yes, don't use tables.
    {{ DiscussionBoard.errors[188842].message }}
    • Profile picture of the author Devan Koshal
      Originally Posted by ChristianM View Post

      What Devan says will work fine. But, I don't think a blanket statement like "never use tables to structure a website." is right - it is a perfectly adequate way to get a website up quickly so for people who only want a temporary site then I see no problem with it.

      But, if you are learning to design websites then yes, don't use tables.
      Yeah if its just something quick tables are fine -

      also ideally i would move that css code into a stylesheet.css file
      {{ DiscussionBoard.errors[188844].message }}
      • Profile picture of the author pede
        Great... could you please give me the html code to call the css file?

        Thanks,
        John
        {{ DiscussionBoard.errors[188853].message }}
  • Profile picture of the author Devan Koshal
    <link href="LOCATION OF STYLESHEET" rel="stylesheet" type="text/css">
    {{ DiscussionBoard.errors[188859].message }}
  • Profile picture of the author pede
    Well... I put the code right above in an html file like this:

    <link href="style.css" rel="stylesheet" type="text/css">

    I put the css file in the same directory as the test4.html file,
    named it style.css

    When page loads, it is blank.

    If I could just get this right the first time, I could take it from there.

    Thanks for all your help,
    John
    {{ DiscussionBoard.errors[188882].message }}
    • Profile picture of the author Devan Koshal
      It should be put in between the <head></head> tags.
      {{ DiscussionBoard.errors[188888].message }}
  • Profile picture of the author Devan Koshal
    Just had a look at your site page use just copy and paste this code.

    Main Html Page
    HTML Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <link href="style.css" rel="stylesheet" type="text/css"> 
    </head>
    
    <body>
    
    WHAT EVER CONTENT HERE
    
    
    </body>
    
    </html>
    style.css page

    HTML Code:
    body
    {
    background-image:url(images/header-background.jpg);
    background-repeat: repeat-x;
    background-position:top;
    margin: 0 0 0 0;
    }
    {{ DiscussionBoard.errors[188894].message }}
  • Profile picture of the author pede
    Something simple I am not doing right, must be.

    Here is file that calls the css file:
    http://bookmark50.com/test4.htm

    Here is the code in the css file:
    <style>
    body
    {
    background-image:url(images/header-background.jpg);
    background-repeat: repeat-y;
    background-position:top;
    margin: 0 0 0 0;
    }
    </style>
    {{ DiscussionBoard.errors[188920].message }}
  • Profile picture of the author pede
    Something simple I am not doing right, must be.

    Here is file that calls the css file:
    http://bookmark50.com/test4.htm

    Here is the code in the css file:
    <style>
    body
    {
    background-image:url(images/header-background.jpg);
    background-repeat: repeat-y;
    background-position:top;
    margin: 0 0 0 0;
    }
    </style>
    {{ DiscussionBoard.errors[188926].message }}
    • Profile picture of the author Devan Koshal
      Originally Posted by pede View Post

      Something simple I am not doing right, must be.

      Here is file that calls the css file:
      http://bookmark50.com/test4.htm

      Here is the code in the css file:
      <style>
      body
      {
      background-image:url(images/header-background.jpg);
      background-repeat: repeat-y;
      background-position:top;
      margin: 0 0 0 0;
      }
      </style>
      remove the <style></style>

      just have

      body
      {
      background-image:url(images/header-background.jpg);
      background-repeat: repeat-y;
      background-position:top;
      margin: 0 0 0 0;
      }

      in there
      {{ DiscussionBoard.errors[188930].message }}
  • Profile picture of the author pede
    ok... let me do that

    J
    {{ DiscussionBoard.errors[188928].message }}
  • Profile picture of the author pede
    Devan...

    Have a look please....

    New Page 1
    {{ DiscussionBoard.errors[188937].message }}
  • Profile picture of the author Devan Koshal
    Yeah that's right.

    now for the content you will need a separate div id call it container, and ad a margin to that div to move it down so the text isnt over lapping the background.
    {{ DiscussionBoard.errors[188949].message }}
  • Profile picture of the author pede
    Your awesome....

    Sent you a PM....

    J
    {{ DiscussionBoard.errors[188958].message }}
  • Profile picture of the author TheRichJerksNet
    Devan,
    Hope you dont mind but that charset should be UTF-8

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    James
    {{ DiscussionBoard.errors[189127].message }}

Trending Topics