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

  • HotButton
    Reply to Project Management
    HotButton
    I agree with that.

    Basecamp and other workgroup tools like it come with all the features you need to solve those workflow problems except one: Discipline.

    That discipline can...
    Today, 05:39 PM
  • kemingMatters
    Reply to Project Management
    kemingMatters
    Before you spend all of this time on solving a very real problem, I would discuss the issue at length with your boss and offer to provide solutions based on the understanding that you will have to have...
    Today, 05:03 PM
  • com_amy
    Project Management
    com_amy
    I recently started at a new company (commercial real estate) and they have very limited project management.

    The basic workflow is:
    1. A request for a proposal or presentation is sent...
    Today, 03:25 PM
  • kemingMatters
    Comment on New Graphics Design Team | Division 1 | Has Benefits | Join Now
    kemingMatters
    a office space oppose to b office space, I wonder if that's Mike Judge's... excuse me sir, I do believe that you have my stapler...

    Where do we enter our 6 pieces of flair?
    Today, 02:52 PM
  • Kool
    Comment on Any one use 3D printer machine ?
    Kool
    That "Attachment" link is just a link to nothing that this crappy software adds to a post when you attach an image. Nothing dangerous, just annoying
    Today, 02:29 PM
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