Announcement

Collapse
No announcement yet.

CSS Positioning Help

Collapse
X
  • 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

      Search

      Collapse

      Advertisement

      Collapse

      Latest Topics

      Collapse

      • LuisannyDesigns
        Wedding Program Panel Fans
        LuisannyDesigns
        Anyone know where i can send my wedding program panel fans design printed? Like a website?

        I am new here. Thanks for the help!
        Yesterday, 08:35 PM
      • JCookeDesign
        Comment on Researching Logo Design Process
        JCookeDesign
        Looks like the only option to watch it now is to rent (3.99) or buy (14.99) on iTunes. Netflix changes their selection so often I can't keep up. Nothing worse than starting a movie and going on to finish...
        Yesterday, 08:35 PM
      • KitchWitch
        Reply to Advice on if a design would work in the US?
        KitchWitch
        Hi Swhit101 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...
        Yesterday, 06:02 PM
      • PrintDriver
        Reply to Advice on if a design would work in the US?
        PrintDriver
        Quite honestly I don't think anyone would really take offense to a shirt like that.
        But I still don't think anyone would buy it because I'm pretty convinced ''Us vs Them'' is pretty well ingrained...
        Yesterday, 05:51 PM
      • swhit101
        Reply to Advice on if a design would work in the US?
        swhit101
        While I know little about policies on using the flag in design, I think what you're proposing would reflect the dramatic polarization that is currently occurring in this presidential race. Speaking to...
        Yesterday, 05:48 PM

      GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
      Working...
      X