32 users online (1 members and 31 guests)  


  Results 1 to 3 of 3

Related

  1. Replies: 0
  2. CSS Layers and Scrolling    Forum: CSS Forum
    Replies: 3
  3. divs versus layers in navigator/i.e.    Forum: CSS Forum
    Replies: 5
  4. columns associated with layers    Forum: CSS Forum
    Replies: 1
  1. #1
    flelm's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    2

    Images, Layers, and Divs... Oh my.

    Hey, I've been hitting my head against the wall, and I simply can't figure out how to do this.

    This is the layout of the main page. It's very clean, and I like it a lot.
    Code:
    <HTML>
    <HEAD>
    
    <TITLE>Wytech Industries</TITLE>
    
    <LINK rel="stylesheet" type="text/css" href="css/main.css">
    
    </HEAD>
    <BODY>
    
    <div id="logo"><a href="http://www.wytech.com"><img class="logo" border=0 src="images/logo3.jpg">
    <img border=0 src="images/tfws.jpg"></a></div>
    <img class="greybar" border=0 src="images/greybar.jpg">
    
    <div id="container">
    	<div id="content">
    	<p class="center"><img class="front" border="0" src="images/WytechFront.jpg" width="391" height="167"></p>
    	<h2>WYTECH Industries Inc.</h2>
        <h5>960 E. Hazelwood Avenue</h5>
        <h5>Rahway, New Jersey&nbsp; 07065</h5>
        <h5>732.396.3900 &nbsp;&nbsp;&nbsp; FAX 732.396.4943</h5>
        <h5><a href="mailto:info@wytech.com" class="black">info@wytech.com</a></h5>
        </div>
    </div>
    
    <div id="sidebar">
    <h4><a href="about.htm">About Us</a></h4>
    <h4><a href="grinding.htm">Precision Grinding</a></h4>
    <h4><a href="forms.html">Wire Forming</a></h4>
    <h4><a href="guidewire.htm">Coated Guidewire Cores</a></h4>
    <h4><a href="pressing.htm">Pressing &amp; Flattening</a></h4>
    <h4><a href="straight.htm">Straightened &amp; Cut Wire</a></h4>
    <h4><a href="news_links.htm">News Links</a></h4>
    <h4><a href="contact.htm">Contact Us</a></h4>
    <h4><a href="sales.htm">Sales Representation</a></h4>
    <h4><a href="jobs.htm">Employment Opportunities</a></h4>
    </div>
    
    </BODY>
    </HTML>
    And the stylesheet:
    Code:
    body {
    	margin: 0;
    	padding: 0;
    }
    #logo {
    	position: absolute;
    	top: 0px;
    	right: 195px;
    }
    img.logo {
    	position: relative;
    	top: 4px;
    	left: 4px;
    }
    img.greybar {
    	position: absolute;
    	right: 0px;
    	top: 55px;
    	float: right;
    }
    p.center {
    	text-align: center;
    }
    h4 {
    	text-align: center;
    }
    h2,h3,h5 {
    	text-align: center;
    	font-family: Arial;
    }
    #container {
    	width: 100%;
    	float: left;
    	margin-right: -405px;
    }
    #content {
    	padding-top: 150px;
    	margin-right: 405px;
    	background: #FFFFFF;
    }
    #sidebar {
    
    	padding-top: 150px;
    	height: expression(document.body.clientHeight + "px");
    	width: 391px;
    	float: right;
    	background: #000000;
    }
    a {
    	color: white;
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    	color: #FFFFFF;
    }
    a:active {
    	text-decoration: underline overline;
    	color: #FFFFFF;
    }
    a.black {
    	color: black;
    	text-decoration: none;
    }
    a.black:hover {
    	text-decoration: underline;
    	color: #000000;
    }
    a.black:active {
    	text-decoration: underline overline;
    	color: #000000;
    }
    That page works fine, looks good. However, the problem comes when I want to apply the same layout to another page. The customer wants a picture to overlap the white and black parts of the layout. I've tried just about everything, and nothing really works. I'm at my wits end, does anyone have any suggestions?

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Have you tried absolute or relative positioning? You can get an element pretty much anywhere with it
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    flelm's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    2
    I have. The problem is, no matter how I set up the z-indices, either the sidebar will be on top of the image or the container and content will be on top of the sidebar, taking a large white chunk out of it.

    I think I have figured out a less than elegant workaround with background images, however. I'm going to give that a try. If you have any other suggestions, I'm willing to listen.



Tags for this Thread