Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Positioning Top Images

    I have attached 2 images - 1 of how it looks now, and 1 of how I want it to look. Notice the 2 images at the top, a logo on the left and another image on the right. Also, the header is to low.

    Here's my code.

    THE XHTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    
    <head>
    
    <title>IHP Limousines, Inc. - Premium Limousine Services for the Greater Dallas/Ft.Worth Texas MetroPlex (USA)</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="author" content="American WebMakers - americanwebmakers.com" />
    <meta name="description" content="IHP Limousines offers high quality impeccable limo service to the greater Dallas/Ft. Worth Metroplex. Call to reserve your limo today!" />
    <meta name="keywords" content="limo, limos, limo rentals, limousine, limousine service, proms, weddings, special events, airport transfers, dallas limos, dallas limo service, dallas texas limo service" />
    <meta name="robots" content="noindex, nofollow, noarchive" />
    <meta name="googlebot" content="noarchive" />
    
    <link rel="stylesheet" href="/limo3/css/style.css" type="text/css" media="screen" />
    
    </head>
    
    
    <body>
    
    <div id="container">
    
    		<div id="logo"><!-- 1. Opens the Top Branding div -->
    			<img src="/limo3/images/ihplimo_logo.png" width="230" height="92" align="left" alt="Call IHP Limo today! T:(214)583-7899" /><img src="/limo3/images/ihplimo_contact-info-top.png" width="426" height="98" align="right" alt="Call IHP Limo today! T:(214)583-7899" /></div><!-- Closes the Top Branding div -->
    
    
    <div id="wrap"><!-- Opens the Wrap Div -->
    
    
    		<div id="home_header"><!-- Opens the Home Page Header Div -->
    
    			<h1><a href="http://www.americanwebmakers.com/limo3">IHP Limousines - Dallas,Texas Premium Limo Services</a></h1>	
    
    		</div><!-- Closes the Home Page Header Div -->
    
    
    
    		<div id="nav"><!-- Opens the Main Navigation Div -->
    
    				<ul>
    				<li><a href="#">Option 1</a></li>
    				<li><a href="#">Option 2</a></li>
    				<li><a href="#">Option 3</a></li>
    				<li><a href="#">Option 4</a></li>
    				<li><a href="#">Option 5</a></li>
    				<li><a href="#">Option 6</a></li>
    
    				</ul><!-- Closes the Main Navigation Div -->
    		</div>
    
    
    
    
    		<div id="main"><!-- Opens the Main Content Div -->
    
    			<h2>Welcome to IHP Limousine Services!</h2>
    				<p><a href="#">American WebMakers</a> | <a href="#">Website Design</a> | <a href="#">Website Development</a></p>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
    		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
    		<h3>Consectetuer adipiscing elit</h3>
    		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
    	
    
    		</div><!-- Closes the Main Content Div -->
    
    
    
        		<div id="sidebar"><!-- Opens the Right Sidebar Div -->
    
    				<h3>Sidebar Here</h3>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    
    					<ul>
    						<li><a href="#">Link 1</a></li>
    						<li><a href="#">Link 2</a></li>
    						<li><a href="#">Link 3</a></li>
    						<li><a href="#">Link 4</a></li>
    						<li><a href="#">Link 5</a></li>
    						<li><a href="#">Link 6</a></li>
    						<li><a href="#">Link 7</a></li>
    						<li><a href="#">Link 8</a></li>
    						<li><a href="#">Link 9</a></li>
    						<li><a href="#">Link 10</a></li>
    						<li><a href="#">Link 11</a></li>
    						<li><a href="#">Link 12</a></li>
    						<li><a href="#">Link 13</a></li>
    						<li><a href="#">Link 14</a></li>
    						<li><a href="#">Link 15</a></li>
    					</ul>
    
    			</div><!-- Closes the Right Sidebar Div -->
    
    
    
        		<div id="footer"><!-- Opens the Footer Div -->
    
    				<p>Footer</p>
    
    			</div><!-- Closes the Footer Div -->
    
    
    </div><!-- Closes the Wrap Div -->
    	</div><!-- Closes the Container Div -->
    
        </body>
    </html>


    THE CSS

    Code:
    body,html {
        margin:0;
        padding:0;
    	border: none;
    	background-image: url(/limo3/images/ihplimo_main-background-1.jpg);
    	background-attachment: fixed;
    	background-color:#000614;
        }
    
    body {
        min-width:760px;
    	font-family: "Lucida Grande", Arial, Verdana, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #76838D;
        }
    
    img {
    	border: none;
    	}
    
    #container {
    	background-color: #00142D;
    	margin:0 auto;
    	padding: 0;
    	width: 760px;
    	}
    
    #logo {
    	border: none;
    	height: 100px;
    	margin: 0 auto;
    	padding: 0;
    	background-color: transparent;
    	}
    
    #logo img{
    	border: none;
    	margin: 0;
    	padding:0 5px 0 25px;
    	}
    
    #wrap {
        background: transparent;
        margin: 0 auto;
        width:760px;
    	height: auto;
    	border: 1px solid #1A1F2C;
        }
    
    #home_header {
        background: transparent;
    	width: 760px;
    	height: 176px;
    	margin: 0 auto;
    	padding: 125px 0 0 0;
    	border: none;
        }
    
    #home_header h1 {
    	background-image: url(/limo2/images/ihplimo_header_1.jpg);
    	background-repeat: no-repeat;
    	width: 727px;
    	height: 176px;
    	margin: 0 auto;
    	padding: 0;
    	overflow: hidden;
    	text-indent: -9999px;
    	}
    
    #nav {
        background: transparent;
        padding:10px;
        }
    
    #nav ul{
        margin:0;
        padding:0;
        list-style:none;
        }
    
    #nav li{
        display:inline;
        margin:0;
        padding:0;
        }
    
    #main {
        background:transparent;
        float:left;
        width:500px;
        }
    
    #main h2, #main h3, #main p {
        padding:0 10px;
        }
    
    #sidebar {
        background: #0D1420;
    	border: 5px solid #1A1F2C;
    	margin: 25px 15px 0 0;
    	padding: 0;
        float:right;
        width:230px;
        }
    
    #sidebar ul {
        margin-bottom:15px;
        }
    
    #sidebar h3, #sidebar p {
        padding: 0 10px 0 10px;
        }
    
    #footer {
        background: transparent;
        clear:both;
        }
    
    #footer p {
        padding:5px;
        margin:0;
        }
    And here's the link http://www.americanwebmakers.com/limo3

    Thanks in advance!
    LMW1
    Attached Thumbnails Attached Thumbnails Positioning Top Images-how_it_looks_now.jpg   Positioning Top Images-what_i_want.jpg  
    Trust everybody. Just don't trust the Devil inside of them.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Im a little confused as far as the two images, but see if this helps your header situation

    Code:
    #logo {
    background-color:transparent;
    border:medium none;
    margin:0 auto;
    padding:0;
    }
    The images look about the same in both pictures, what do you want them to do?

  • #3
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply. At the very top, I have a logo image on the left, and the phone number image on the right side. They sit at the very top of the website.

    Then the header image of the couple.

    If you look at the 2 attached images, you'll see what I mean.

    Any ideas?

    Respectfully,
    LMW1
    Trust everybody. Just don't trust the Devil inside of them.

  • #4
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey wait a sec. That worked!!! Thanks a million!

    Another question...

    Do you notice the "glow" that surrounds the site? How do I place that there?

    Do I create 4 different images of it? Top, left side, right side, and bottom? If so, how do I code that?

    Thanks!
    LMW1
    Trust everybody. Just don't trust the Devil inside of them.

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Well you have a container, and in that container you have a repeating image.. maybe 3 divs. You would clice the top image, then a middle image(small because it will repeat) then a bottom image if necassary. Like so

    Code:
    .container {
    width:whatever;
    overflow:hidden;
    }
    
    .topBG {
    background-image:url(topBG.gif);
    background-repeat:repeat;
    width:size of image;
    height;size of image;
    margin:0 auto;
    }
    
    .middleBG {
    background-image:url(middleBG.gif);
    background-repeat:repeat;
    width:size of image;
    margin:0 auto; /*dont set a height to this one.. you want it to repeat*/
    overflow:hidden;
    }
    
    .bottomBG {
    background-image:url(bottomBG.gif);
    background-repeat:repeat;
    width:size of image;
    height;size of image;
    margin:0 auto;
    }
    Then HTML

    Code:
    <div class="container">
       <div class="topBG"></div>
           <div class="middleBG">
    
    CONTENT......
    
           </div>
       <div class="bottomBG"></div>
    </div>
    That is a basic outline of how, let me know if you have any other questions.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •