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

      • Troep
        Hello....
        Troep
        Hello I'm Troep and i'm new to this forum
        Today, 12:53 PM
      • B
        Reply to Illustrator: "colored" grain effect?
        B
        Which grain type did you select from the drop-down menu. If you selected stipple, it will make it B&W. Otherwise, I don't know why you're getting that effect. Honestly, though, I tend to avoid raster-based...
        Today, 12:43 PM
      • calebninja
        Reply to Sizing Photos for Portfolio Grid in WordPress
        calebninja
        Can you provide a link to your website so we can see what you mean about the sizes?

        Are you having an alignment issue?
        Today, 09:50 AM
      • Lord Daz
        Reply to Illustrator: "colored" grain effect?
        Lord Daz
        Really? What do you do exaktly?

        To start, I create a simple linear gradient with the white and red color stops in a rectangle. I select Effect - Texture - Grain.

        Now I have a...
        Today, 09:48 AM
      • btwenty1
        Reply to Facebook - Business Page Cover Size
        btwenty1
        I use 851x315, the most important thing is to try to keep the quality while saving the image under 100kb, if it is over 100kb FB will automatically compress the image therefore losing much of its qua...
        Today, 09:39 AM

      Incredible Stock
      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