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

  • KitchWitch
    Reply to Saying Hi (again) as Crow Pebble
    KitchWitch
    Welcome back, Michael. Just as a formality...

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you...
    Today, 09:33 PM
  • KitchWitch
    Reply to Critiques on resume design
    KitchWitch
    Hi Birbal and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done...
    Today, 09:32 PM
  • salsa
    Reply to Critiques on resume design
    salsa
    Neither of them are very strong typographically, to be honest. I appreciate that you're interested in typography, so many people don't care and I'm used to seeing layouts like this, just not from someone...
    Today, 07:52 PM
  • Crow Pebble
    Saying Hi (again) as Crow Pebble
    Crow Pebble
    Hello, my name is Michael. I was a member of these forums years ago (can't even remember my user name now) but shamefully let my participation lapse. I've been working as a designer in-house for 15 years...
    Today, 07:30 PM
  • Guacamoley
    Reply to Help and Critique in explaining and showcasing a skill in photoshop/design
    Guacamoley
    Hi PrintDriver

    Thanks for taking the time to look at my issue, I have mislead the situation I believe for you coming up with the CNC industry idea. What I was more so after was help in explaining...
    Today, 06:53 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