56 users online (0 members and 56 guests)  


  Results 1 to 3 of 3

Related

  1. Problem with margin in CSS    Forum: CSS Forum
    Replies: 7
  2. Ie mysterious margin around my box...    Forum: CSS Forum
    Replies: 1
  3. Margin?    Forum: CSS Forum
    Replies: 4
  4. Replies: 0
  5. web page margin    Forum: HTML Forum
    Replies: 16
  1. #1
    Hrqls's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2004
    Location
    Alkmaar, The Netherlands
    Posts
    2

    image at 100% gives scrollbars and margin

    hi all, this is my first post on this board so please be gentle with me

    i have split my page in 4 frames, in the lower left frame i show the logo of the company i work for. i have set the image to width="100%' and height="100%" but this makes some scrollbars appear on the frame

    another annoyence is the empty space around the image, even when i set it to 100% it will still show some empty margin around the image, while i want it to fill the total frame

    i have tried setting the image as the 'background' property of the body but then it doesnt resize.
    i also have troubles making the background image 'norepeat'
    i used the style sheet you posted in other threads (put inside the 'head' part of the page, didnt try it in an external css file, but that should make no difference

    to summarize : i want 1 frame with 1 image (preferably with a 'href' on it) which filles the total frame and shows no scrollbars

    the code i have so far is
    Code:
    <html>
      <head>
        <style>
        <!--
          body {
            background-image: url("logo.jpg");
            background-repeat: norepeat;
          }
        -->
        </style>
        <title>Logo</title>
      </head>
      <body>
      </body>
    </html>
    or
    Code:
    <html>
      <head>
        <title>Logo</title>
      </head>
      <body bgcolor=#4080C0>
        <a href="http://www.kohartog.nl" target="view">
          <img src="logo.jpg"></a>
      </body>
    </html>
    thanks in advance for any help that i might get

    (hmm my sig doesnt show well, will have a look at that later )

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hi, welcome to the forums.

    It sounds like you may have fallen foul of the <body> tags default margin/padding.

    Try -

    Code:
    body {
            background-image: url("logo.jpg");
            background-repeat: norepeat;
            padding: 0px;
            margin: 0px;
          }
    I am sure this is not the entire solution, but its the first step. Let us know the results.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    Hrqls's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2004
    Location
    Alkmaar, The Netherlands
    Posts
    2
    thanks for the welcome

    the norepeat still doesnt work (using an external css file now)

    the padding and margin dont do anything .. i can change them from 0 to any other value and see no difference, but thats probably correct since i have nothing inside the body tags

    right now my complete css file is
    Code:
    body{
    /*	background-image: url("logo.jpg");
    	background-repeat: norepeat;*/
    	background: #ADD2D8;
    	text-align: "center";
    	padding: 0px;
    	margin: 0px;
    }
    
    img{
    	border: 0;
    	width: 97%;
    	height: 97%;
    }
    i commented the background away since it still repears (and of course it doesnt resize which an img can do )

    there is still some margin/padding around the img .. therefore i have set the background color of the frame to the same color as the edges of the jpg .. but i would love to have no margin/padding around the picture (in case the logo changes in the future)

    i have added the 'center', and it does move the img a bit to the right .. bit doesnt center it at all

    i need to set the height to 97% otherwise i get a vertical scrollbar

    my html file which is the frame is :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="Logo.css" />
        <title>Logo</title>
      </head>
      <body>
        <a href="http://www.kohartog.nl" target="view"><img src="logo.jpg"></a>
      </body>
    </html>
    my frame.html is
    Code:
    <html>
      <frameset rows="*,20%">
        <frameset cols="20%,*">
          <frame name="menu" src="menu.html">
          <frame name="view" src="view.html">
        </frameset>
        <frameset cols="20%,*">
          <frame name="logo" src="logo.html">
          <frame name="scroll" src="scroll.html">
        </frameset>
        <noframes>
          <body>
            Your browser does not handle frames!
          </body>
        </noframes>
      </frameset>
    </html>
    an img without any padding and no scrollbar would be perfect .. but somehow i cant seem to get that.



Tags for this Thread