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 11 of 11

Thread: header image

  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    header image

    hi there, im new to html, but im building my own site with a free hosting service
    to display my concept art as a designer, for use as an online resume.
    i created an index.html file and started editing it, i have a list of code my buddy gaveme as a reference.

    for my header image, i want my image to span the entire width of the page, but when i display the image at say, 100% width or 1024 pixels in width, theres still a marginaround the image

    how do i get an image to stretch from one side of the page all the way to the other so that it will appear that way to everyone that visits the site uniformly? ie: visitor 1 is running 1024x768, visitor 2 is running 1600x1200, etc.

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    The thing is that images are fixed width, and unless you use PHP to resize the image on the server before its loaded into the page its difficult to resize the image without loss of quality.

    This is actually a javascript question. It is not something too difficult, but it might be a little confusing since you are new to HTML (and probably to Javascript as well).

    http://www.webreference.com/programm...script/images/

    Here are the parts you can edit. Change nirvana.jpg to the link of your image. If you want the page to only change its width and remain its height, remove exactly this.

    " height="' + image1_height + '

    Code:
    var image1 = '<img src="nirvana.jpg" width="' + image1_width
        + '"  height="' + image1_height + '">';
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    Regular Coder GO ILLINI's Avatar
    Join Date
    Jun 2005
    Location
    USA
    Posts
    634
    Thanks
    0
    Thanked 7 Times in 7 Posts
    this is because in some browsers the body and html tags have a margin and padding. With css you can set theese both to 0 pixels to get rid of the space.

    Put this in your header area
    Code:
    <style>
    html, body {
       margin:0px;
       padding:0px;
    }
    </style>
    css is very handy


    -Adam
    Why not thank me?

    http://adamsworld.name

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so what your saying is that css is the way to go here for a simple solution?
    or is javascript the direction i want to head in, seems both of you had solutions to this problem.

    im familiar with style sheets, i just dont know if the coding language for html
    works the same way for them.

    i would like to avoid java if i can, all i need is a nice image at the top, some
    mouseovers to different directories containing thumbs of my artwork in
    various sections - example

    image
    mouseovers - home work resume contact

    under the resume section, i just need it to link to my page of art thumbs,
    whitch ppl can click for a full sized pic, etc, which would read like this

    image

    gallery 1 - concepts and illustrations

    gallery 2 - demonology tree

    gallery 3 - finished paintings

    gallery 4 - character design and sketch blog

    and thats about it. the part that is confusing me the most at the moment
    is how to make the link to the next page work. in other words, is the css
    used on all pages? ( i would think so ), and if it is, are the other pages just
    .html pages even though they contain a style sheet?

  • #5
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    I'm confused you how could have learned css without HTML, but CSS controls the way content is displayed and HTML controls the content that is displayed. Fundamental difference. But they work together. Now HTML will put an image into your file, CSS can style it (give it a border for instance), and Javascript can give you the ability to find the size of the window and resize the image based on that.

    What I'm saying is the link I put above has the necessary information to dynamically resize an image based on the windows size.

    The other questions you raised are separate from the issue above. You put the CSS information into the <head></head> of the html document, and the browser uses that to decide how the content is displayed.

    If I didn't answer your question, then you weren't very clear about things. If you haven't yet, I would recommend going through some online tutorials about XHTML, and getting the basics of it down before tackling too much.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #6
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jeremywilken View Post
    I'm confused you how could have learned css without HTML,
    no i didnt mean to sound like i knew css, i meant that i knew what a css page is. i simple designed some graphics for someone's website who was using a css page, the coding however, im not familiar with. your explanation of the differences was very helpful though,
    and i will read up on the tutorials, much thx's!

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    I think the OP was very clear with his question(s) but different people have given different answers due to some misunderstandings as it seems.

    The margin on the page is resulting from some default margin (or padding, depending on browser) of the body element and can be removed with CSS, as GO ILLINI correctly stated. Now, a dynamic image size isn’t all that hard if you’re using percent units. Those units refer to the size of the parent element, though. For example, if you put an image on the site like this:
    Code:
    <img src="[source]" width="100%" alt="Header Image">
    The image will be 100% wide (the height will be scaled accordingly automatically) and if the width of any parent of this image isn’t fixed the image will be scaled if the window is resized.

    However, note that, since the image is most likely a raster image (as opposed to a scalable vector graphic (SVG)), it will become very pixelated if resized bigger than the original size. Also it isn’t quite current practice to adapt a page to the screen resolution like this (at least it’s hard if you’re using a lot of raster graphics). A better way would be to apply a different stylesheet to user agents with different screen resolution, and a default one if the resolution can’t be detected, or to have one fixed page layout for all user agents (everybody will see the same, only bigger or smaller, depending on resolution).

    A good article on current design practices can be found at http://www.webdesignfromscratch.com/...tyle-guide.cfm

  • #8
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Babar104 does not say what sort of image they have. If it is one of their own design for the purpose then can it be made tileable? If so, then the solution is to put the image as a background to the body, with repeat-x set but no repeat-y.

    John Rostron

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    84
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Everyone has posted a correct solution to a point. This question however falls back to the design of the page. It is not a good practice to resize an image to 100% of the screen.

    For example, if your image's original attributes were 640x75 and you resized it keeping the aspect ratio, on a 1600 display the image would be 1600x187(.5). This image would appear pixelated. This could also distort the layout of your design. If you kept the height of the original and just resized the width, the image would end up distorted.

    If you sized the image to appear best on higher resolutions, your file size could end up overly large. It would also net the same end results as the previous example when resized to smaller resolutions, distortion or pixelation.

    As has been mentioned, the padding and margin settings will remove the 'border' space you are experiencing on the page. There is also the option that was mentioned of using PHP/GD to resize the image before it is served to the client. And I would never recommend the javascript option to resize the image.

    My recommendation is to rethink your overall design. You seem to want to achieve a liquid layout(or at least that is what I gather from you wanting to size to 100%). As was previously mentioned, work on setting up a background tile image to fill in the space that the image does not.

    Whenever I layout a page, I usually use several nested layersets in Photoshop. I.E. Header->HeaderImage->HeaderText. When I layout the actual code of the page it would be something similar to
    Code:
    <div id="header">
      <h1>Site title</h1>
    </div>
    I would then style the div#header with the background tile, set my h1 to the size of the "image" and set the image as a background and then style the text. This is just the way that I have found is easiest and is by no means the right way.

    If you posted a quick sketch of what you want to achieve I could more than likely point you in the right direction on how to achieve your goal.

  • #10
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by toddandrae View Post
    If you posted a quick sketch of what you want to achieve I could more than likely point you in the right direction on how to achieve your goal.
    alright, i'll post an image of what i want the page to look like, the header image is unfinished, but youll get the idea, and yes it is a raster image (jpg), but it is very important that my page has a piece of my work on it so that viewers get the idea that they are looking at an artist's page, not having one would be somewhat unprofessional in the concept art field as someone mentioned vector art, i work with vector illustration as a designer, but that is not the position im applying for, so the raster image has to stay.

    here is what i want to achieve, nothing complex, just straight forward
    and simple layout. the blank space below the image will have a simple
    paragraph of text, being my "letter of intent". and that is all. >


  • #11
    New Coder
    Join Date
    Oct 2007
    Posts
    84
    Thanks
    0
    Thanked 8 Times in 8 Posts
    There are a few ways to handle this, depending on how in depth you want to go. The basic layout is the same, but how you present the image is different.

    The basic layout would be a header div with a repeating background. Inside this header div, you would place your image inside of the div and position it to the right.

    If your background is tileable, set the starting position to the right edge and it should meet up with your picture's edges without too much problem.

    Now if you have a complicated background, which from the looks of it I am betting you will. You will want to cut your image completely away from the background and set the background to transparent.

    As far as options for transparency, you could go with a GIF(although I am sure you are going to have far more than 256 colors), PNG(not supported by all browsers, although there are workarounds), or you can use a flash movie with a transparent background(I haven't used Flash since, maybe, version 4, but back then using a raster image in a flash file would net you a considerably larger file size than the original raster image).

    When I get home tonight, I will do an overlay on your image and show you where the "cuts" could be.

    But to be honest, don't worry about the layout until the design is done Your menu position or orientation may change, height of header, etc.


  •  

    Posting Permissions

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