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

  • Xeon
    Reply to Went to an interview and did a graphic design test
    Xeon
    Hi guys,

    Tks for the input. To elaborate further, there was no specific design brief for the test, other than "design a logo for company x. Company x is in social media services"....
    Today, 08:56 AM
  • PanToshi
    Comment on Use of personal props in photography work
    PanToshi
    you could "enhance' with teh tassles, no? some glitter maybe?
    Today, 06:24 AM
  • Cerib
    Reply to Logo/Banner Critique.
    Cerib
    @VanHelsing: I was actually going for the Royalty/Kings theme anyways because they wanted the headline "OU Kings." I might have made it a bit too obvious with the clipart in the background,...
    Today, 05:22 AM
  • Mindlight
    Feedback for a logo
    Mindlight
    Hello,

    I would like some feedback on a logo design. He has a small online presence and wanted help with a logo to use for the website, promotional materials and packaging.

    The...
    Today, 05:10 AM
  • PrintDriver
    Reply to Feedback please - for GD assignment
    PrintDriver
    First, you have to really think about your brand. You have a big old draft horse in a very modern space. Right now everything you have is sort of just sitting there being boring. How are you going to...
    Today, 02:54 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 © 2015 Mediabistro Inc.
      Working...
      X