SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Evangelist cturner01's Avatar
    Join Date
    Jun 2006
    Location
    My computer
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow [SOLVED] Displaying images problem

    I am having a problem trying to display the images which are below on the same line. It isn't working for me. It will display the onlineshopbtn.gif on the top line, and the other 3 images display on the next line.
    Here are my images:
    Code HTML4Strict:
    <div id="container">
    <div class="header">
    <!--[more html here, but I feel not relevant to the problem]>
    <img src="images/onlineshopbtn.gif" width="175" height="84" /><img src="images/smallbusinesswebsitesbtn.gif" width="175" height="84" /><img src="images/searchenginepositioningbtn.gif" width="175" height="84" /><img src="images/threestepstoawebsitebtn.gif" width="175" height="84" />
    </div>
    <!--[more html here, but I feel not relevant to the problem]>
    </div>

    Here is the css code:
    Code CSS:
    body  {
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    }
    #container { 
    	width: 800px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: #FFFFFF;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 8px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .header {
     
    }
    <!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .sidebar1 { width: 220px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .sidebar1 { padding-top: 30px; }
    .mainContent, #container { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    I tried to place some code into the header class but compatibility problems kept on appearing. I am using Dreamweaver CS3.

    I have been working on this problem too long, maybe the solution is staring me in the face, but I haven't seen it yet. Can someone please help me display the images all on one line? Thanks in advance.

  2. #2
    SitePoint Evangelist cturner01's Avatar
    Join Date
    Jun 2006
    Location
    My computer
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved. This is the updated code:
    Code CSS:
    .header2 {
    	float: left;
    }
    Code HTML4Strict:
    <div class="header2"><img src="images/onlineshopbtn.gif" width="175" height="84" /><img src="images/smallbusinesswebsitesbtn.gif" width="175" height="84" /><img src="images/searchenginepositioningbtn.gif" width="175" height="84" /><img src="images/threestepstoawebsitebtn.gif" width="175" height="84" /></div>

  3. #3
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, that's cool you managd to figure that out yourself ... i think html / css is like a toy ... the more you play around with it, the more you get it ... good luck with more !


Bookmarks

Posting Permissions

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