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

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • <b>
    Reply to How to choose a scanner?
    <b>
    I agree, the Canoscan is a good scanner -- especially for the price. I've bought a couple of Epson Perfection V700 Photo Scanners for work, and would do so again if they're still made. They've been very...
    Today, 03:54 AM
  • PanToshi
    Reply to [ Logo Critique ] Period or not at the end of the tagline?
    PanToshi
    Adding my vote for keeping it.
    Today, 03:31 AM
  • PanToshi
    Reply to Glad to Be Here Now!
    PanToshi
    Welcome to GDF Tess

    We ask all new members to read the very important links here and here. These explain the rules and how the forum runs. No, you haven't done anything wrong, we ask every...
    Today, 02:44 AM
  • PanToshi
    Comment on Where do you find talent?
    PanToshi
    Yep, like I said, freelancers who are hoping to work full-time for the company for which they are occasionally freelancing are unemployed designers who are freelancing until they find full-time work.
    Today, 02:40 AM
  • MichaelWied
    Comment on Where do you find talent?
    MichaelWied
    The "freelancers" are basically there to be called in if a big project comes up and they need the extra hand, and these are designers hoping to get a full time spot at the company.
    ...
    Today, 01:51 AM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

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 © 2014 Mediabistro Inc. call (212) 389-2000 or email us
      Working...
      X