Announcement Announcement Module
Collapse
No announcement yet.
CSS Positioning Help Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Latest Topics Latest Topics Module
Collapse

  • OntheVerge
    Job Advice for Junior Graphic Designer
    OntheVerge
    So I graduated with my AA in Graphic Design from Art Institute (yeah I know) in December of last year. This year I've had 3 jobs one at a vape company for two weeks, a yogurt company for a month and an...
    Today, 11:38 PM
  • ninasaint
    Image requirements for a VERY large poster
    ninasaint
    I was asked to create a very large poster for a client, 130" x 104", using images from a professional photographer. The images are about 12" x 8" at 300 dpi. Will these work for such...
    Today, 11:33 PM
  • OntheVerge
    Reply to How to price T-shirt design to a potential company
    OntheVerge
    I would say negotiate some type of royalty as apart the selling of the design, you could limit it the first 1,000 sold or something like that if you want. As long you haven't yet sold the designs you...
    Today, 11:17 PM
  • OntheVerge
    Packing Design Critique
    OntheVerge
    I am trying to improve on some of my associate degree portfolio pieces, any thought ideas? These are both package covers,I think the Revamped version may be a little too plain, what do you all think?...
    Today, 10:57 PM
  • SylversVolpe
    Greetings from Egypt
    SylversVolpe
    Hello folks!

    I never know how to do these introduction bits.. Anyway, my name is Magdy. I graduated from a Management Information System major less than a year ago. I am passionate about...
    Today, 10:41 PM

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Positioning Help

    I am currently trying to make a simple splash page, that involves 4 images (background/logo/english/french)

    Im currently trying to put the english/french on each side of the logo, and the logo centered in the middle. The problem is, when I resize the browser window, the images end up overlapping eatchother. Same as if I change my resolution.

    Here is the HTML/CSS:

    HTML Code:
    <body>
    <div id="container">
    
    <div id="sahel">
      <img src="spllogo.png"  alt="Spa Sahel Logo" />
    </div>
    <div id="english">
      <a href="eng.html" onMouseover="imageOn('english')" onMouseout="imageOff('english')"> <img src="english.png" name="english" border="0" /></a>
    </div>
    <div id="francais">
      <a href="fr.html" onMouseover="imageOn('francais')" onMouseout="imageOff('francais')"> <img src="francais.png" name="francais" border="0" /></a>
    </div>
    
    </div>
    
    </body>
    </html>
    Code:
    @charset "utf-8";
    /* CSS Document */
    html, body {
    	background-image: url(splbg.png);
    	border-style: none;
    	overflow: hidden
    }	
    #sahel{
    	position: relative;
    	top: 120px;
    	text-align: center;
    }
    #english {
    	position: absolute;
    	top: 274px;
    	left: 200px;
    }
    #francais {
    	position: absolute;
    	top: 274px;
    	right: 200px;
    }
    
    #container {
    	min-width: 100%;
    	width: 100%;
    	position: relative;
    }
    I would just like to make everything stay in place, rather than overlapping when the window is resized.

    and how would I optimize this for smaller resolutions? (I am viewing this at 1600x900)

    Thanks

  • #2
    What is the point of the container div? If you want to control the width, set a width on it.
    Swedish Meatball Pornography

    Comment


    • #3
      I put it in as a last ditch effort. It wasn't working before I put that in anyways.

      Comment

      Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2015 Mediabistro Inc.
      Working...
      X