1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Small problem with a layout

Discussion in 'CSS' started by mithrellas, Jul 24, 2005.

  1. #1
    Or at least I think it's small. :)

    I used a layout code, made a few changes and this is how it came out: http://www.livejournal.com/users/eledhwenn/

    Everything seems to be working fine, except the header. Whenever the window changes sizes it looks out of place. I looked for the specific code and this is it:

    <img
    src="http://img.photobucket.com/albums/v97/artemisa/varias/header.jpg" class="x" style="display:inline;">

    <style type="text/css">
    <!--
    .x {
    position:absolute;
    left:50%;
    margin-left:-350px;
    top:0;
    z-index: 1;
    width:700px;
    }


    Anything I can do or add so that doesn't happen? It bothers me so much :( I don't know much about CSS or designing but I'll try to keep up, I appreciate any input, thanks!
     
    mithrellas, Jul 24, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There is a couple of things broken in this HTML. For example, your <br> tags are written as <br />. This is not valid transitional HTML. Another thing is that you have <style> inside <body>, which is invalid - it may only appear inside the <head> element. You also use a mix of HTML (bgcolor, cellpadding, etc) and CSS formatting.

    At the very least, move this out-of-place style inside your main style block on the page. I would also reconsider dropping this oversized image (BTW, you are hotlinking - never a good idea; unethical too) and using a set of smaller images - one for the flower, a couple for the shadows, etc.

    J.D.
     
    J.D., Jul 24, 2005 IP
  3. fryman

    fryman Kiss my rep

    Messages:
    9,604
    Likes Received:
    777
    Best Answers:
    0
    Trophy Points:
    370
    #3
    J.D. to the rescue!!! :D

    I'm in a Macromedia course and will be learning html and css soon, hope I can get to be at least as half as good as you are
     
    fryman, Jul 24, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sometimes I would trade half of my knowledge for the ability to design crazy-layout websites some people are so good at :D
     
    J.D., Jul 24, 2005 IP
  5. mithrellas

    mithrellas Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yeah I guess 'cause it's not an actual website, but LiveJournal and the 'overrides' work a bit differently than regular websites. I suppose that's why there's a mix.

    I'm not hotlinking that image's mine, that's my photobucket account.

    Thanks anyways.
     
    mithrellas, Jul 24, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    No they don't. HTML is HTML regardless what you use it for and yours isn't valid.

    Anyway, if you don't want to break the image apart, you can use background-image instead. It will do the same thing, but would be cleaner than using an absolutely-positioned element, as it is now.

    As for your original question, I don't see the header do anything weird when I resize the window (tried IE and FF). Only when the size goes to about a third of the screen, the timestamps overflow into the right column. What browser/resolution do you see this problem on?

    J.D.
     
    J.D., Jul 24, 2005 IP
  7. mithrellas

    mithrellas Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hm thing is, I think the image is 'covering' something so it wouldn't cover it if it were a background.

    Well I'm on a 1024*768 resolution, IE and when I click on favourites, the screen resizes and the image looks totally off.

    Hm that's ok, I've started searching for a different layout. I don't know enough to fix it and it bugs the hell outta me. ;) Thanks so much.
     
    mithrellas, Jul 24, 2005 IP
  8. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #8
    It does cover a square image of a girl with a checkerboard background along with user info and friends links. If that's what you want, then what you have does its job.

    I see what you mean - it doesn't seemt to happen all the time, but I see that IE doesn't like this layout. Here's what you can do to fix this:

    1. Move the content of the .x style inside your <head> element as follows (remove the lines with <-- remove in them):

    <style type="text/css"> <-- remove
    <!-- <-- remove
    .x {
    position:absolute;
    ......
    width:700px;
    }
    --> <-- remove
    </style> <-- remove

    2. change this style to what's below, plus add the .c1 line:

    .x {
    position:relative;
    left: -350px;
    top: 0;
    z-index: 1;
    width:700px;
    }
    .c1 {position: absolute; width: 0; height: 0; overflow: visible; top: 0; left: 50%;}

    3. Change the image line as follows:

    <div class="c1">
    <img class="x" src=".../header.jpg">
    </div>

    This should take care of your problem.

    J.D.
     
    J.D., Jul 24, 2005 IP
  9. mithrellas

    mithrellas Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    It didn't work. But that's ok, I changed the whole layout. Thanks SO much for the help, you know so much! :D
     
    mithrellas, Jul 27, 2005 IP