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

  • damonharris
    Reply to Business Logo Design
    damonharris
    Logo represent you and your business. If it's presentable enough, that means you are credible too in giving services to the clients or customers. That's why it's very important in any business because...
    Today, 06:12 AM
  • damonharris
    Reply to creative business cards
    damonharris
    Choose a design that is creative and effective enough to boost your business and will get the interest of your potential customers. That's what I'm always telling my friends who are in the business. And...
    Today, 06:03 AM
  • Yehoshua
    Cover Layout Feedback
    Yehoshua
    I've been exploring more with minimalism, but still trying to keep things logical. This is a 11x17 cover for a recent undergrad project I've been working on. Does it work? Why or why not? The blue wacked...
    Today, 04:22 AM
  • vaprarts
    Reply to Down selling to clients
    vaprarts
    Now i have no real experience working with clients but in my opinion you did what most designers should do. You are being hired as a designer not an artist. Its our job to create work that makes sense....
    Today, 02:58 AM
  • Buda
    Reply to Zoo Business Card Critique Wanted
    Buda
    I really like the aesthetic.

    Will you do more in the series? You could have a different design for different departments.
    Today, 02:44 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