Results 1 to 2 of 2

Thread: cant get images to gof form left to right

  1. #1
    Join Date
    Jan 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default cant get images to gof form left to right

    im tring to get my images to go form leftto right in one of my divs, but instead it goes fomr top to bottom. heres the cite its on, its at the middle of the page my site

    and heres the css that im working with(the bolded text is what im refering to):


    Code:
    <style type="text/css">
    body {
    	font-family: helvetica, arial, sans-serif;
    	font-size: 62.5%;
    	background-color: 444444;
    }
    
    	table, td {
    		background-color: 444444;
    	}
    
    .main{
    	position:absolute;
    	left:50%;
    	top:125px;
    	width:850px;
    	z-index:1;
    	margin-left:-430px;
    }
    
    	.main a:link, .main a:active, .main a:visited {
    		color: ffc71c;
    		text-decoration: none;
    		font-size: 1em;
    	}
    
    	.main a:hover {
    	color: ffffff;
    	}
    	
    a img {
    	border: 0;
    	filter:alpha(opacity=90); 
    	..-opacity: 0.90; 
    	opacity: 0.90;
    }
    
    	a:hover{
    		filter:none
    	}
    
    
    .friend01{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/andreana1.jpg) top left no-repeat; 
    display: block;} .friend01:hover{background: url(http://img.photobucket.com/albums/v179/li0id/andreana1.jpg) bottom left no-repeat;}
    .friend02{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/brian1-1.jpg) top left no-repeat; 
    display: block;} .friend02:hover{background: url(http://img.photobucket.com/albums/v179/li0id/brian1-1.jpg) bottom left no-repeat;}
    .friend03{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/ammber1.jpg) top left no-repeat; 
    display: block;} .friend03:hover{background: url(http://img.photobucket.com/albums/v179/li0id/ammber1.jpg) bottom left no-repeat;}
    .friend04{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/frank.jpg) top left no-repeat; 
    display: block;} .friend04:hover{background: url(http://img.photobucket.com/albums/v179/li0id/frank.jpg) bottom left no-repeat;}
    .friend05{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/amanda1.jpg) top left no-repeat; 
    display: block;} .friend05:hover{background: url(http://img.photobucket.com/albums/v179/li0id/amanda1.jpg) bottom left no-repeat;}
    .friend06{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/raalph1.jpg) top left no-repeat; 
    display: block;} .friend06:hover{background: url(http://img.photobucket.com/albums/v179/li0id/raalph1.jpg) bottom left no-repeat;}
    .friend07{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/bekka1.jpg) top left no-repeat; 
    display: block;} .friend07:hover{background: url(http://img.photobucket.com/albums/v179/li0id/bekka1.jpg) bottom left no-repeat;}
    .friend08{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/jason1.jpg) top left no-repeat; 
    display: block;} .friend08:hover{background: url(http://img.photobucket.com/albums/v179/li0id/jason1.jpg) bottom left no-repeat;}
    .friend09{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/deana1.jpg) top left no-repeat; 
    display: block;} .friend09:hover{background: url(http://img.photobucket.com/albums/v179/li0id/deana1.jpg) bottom left no-repeat;}
    .friend10{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/ox1.jpg) top left no-repeat; 
    display: block;} .friend10:hover{background: url(http://img.photobucket.com/albums/v179/li0id/ox1.jpg) bottom left no-repeat;}
    .friend11{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/jacqui-1.jpg) top left no-repeat; 
    display: block;} .friend11:hover{background: url(http://img.photobucket.com/albums/v179/li0id/jacqui-1.jpg) bottom left no-repeat;}
    .friend12{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/laura1.jpg) top left no-repeat; 
    display: block;} .friend12:hover{background: url(http://img.photobucket.com/albums/v179/li0id/laura1.jpg) bottom left no-repeat;}
    .friend13{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/kelsea1.jpg) top left no-repeat; 
    display: block;} .friend13:hover{background: url(http://img.photobucket.com/albums/v179/li0id/kelsea1.jpg) bottom left no-repeat;}
    .friend14{height:110px; width:100px; overflow: hidden; background: url(http://img.photobucket.com/albums/v179/li0id/paden1.jpg) top left no-repeat; 
    display: block;} .friend14:hover{background: url(http://img.photobucket.com/albums/v179/li0id/paden1.jpg) bottom left no-repeat;}
    
    
    
    p, li {
    	font-size: 1.2em;
    	color: 575757;
    }
    
    .title1, .title2 {
    	font-weight: bold;
    	text-transform: lowercase;
    	letter-spacing: -1px;
    	color: 575757;
    }
    
    	.title1 {
    		font-size: 1.3em;
                            
    	}
    
    	.title2 {
    		font-size: 1.2em;
                            
                            
    
    	}
    
    		.title2 a {
    			font-size: 1.1em;
                                        
    		}
    
    		.sidebar .title2 {
    			padding: 0 0 0 12px;
    		}
    
    
    
    .sidebar {
    	float: right;
    	margin-top: 50px;
    	width: 200px;
    }
    
    .content {
    	float: left;
    	margin-top: 65px;
    	margin-left: 30px;
    	width: 500px;
    	padding: 0 0 0 28px;
    }
    
    
    
    
    .lastfm {
    position:fixed; left:50%; top:140px; margin-left:-314px; 
    width: 200px; height:100px;
    background-color:transparent; border:1px solid rgb(0,0,0); z-index:3; }
    * html .lastfm { position:absolute; width:50px; height:70px; }
    
    }
    
    
    
    .breaker {
    	float: center;
    	clear: both;
    	margin-top: 120px;
      margin-left: -400px
    	border-top: 2px solid;
    	border-color: ffffff;
    	background-image: url("http://img440.imageshack.us/img440/3802/gradient5gj.jpg");
    	background-repeat: repeat-x;
    	height: 200px;
    }
    
    .bottoms {
    	clean: both;
    	margin-left: 200;
    	float: center;
    	padding: 25px 0 0 0;
    }
    
    
    textarea {
                color: 575757;
    	width: 425px;
    	height: 125px;
    	padding: 3px !important;
    	background-color: E7F1D3;
    	border: 3px solid;
    	border-color: ffc71c;
    	overflow: auto;
    }
    
    
    
    .li0id { 
    position:fixed; left:50%; top:52px; margin-left:-23px;
    background-color:transparent; border:2px solid ffc71c; z-index:2; }
    * html .li0id { position:absolute; width:450px; height: 519px; } 
    
    
    .daliah { 
    position:fixed; left:50%; top:270px; margin-left:-18px;
    background-color:E7F1D3; border:2px solid ffc71c; 
    z-index:2; padding:0px 4px 0px 4px; text-align:left;
    }
    * html .daliah { position:absolute; width:440px; height:200px; } 
    
    
    
    
    .hate {
    position:fixed; left:50%; top:56px; margin-left:-18px; 
    background-color:E7F1D3; border:2px solid ffc71c;
    z-index:3; text-align:left; padding:0px 4px 0px 4px; 
     }
    * html .hate { position:absolute; width:172px; height:211px; }
    
    
    .love {
    width:160px; height:12px;
    position:fixed; left:50%; top:35px; margin-left:107px; 
    background:transparent; border:0px;
    z-index:3; text-align:center; font-size:8pt; }
    * html .love { position:absolute; width:370px; height:20px; }
    
    
    
    .love2 {
    width:160px; height:12px;
    position:fixed; left:50%; top:253px; margin-left:110px; 
    background:transparent; border:0px;
    z-index:3; text-align:center; font-size:8pt; }
    * html .love2 { position:absolute; width:370px; height:20px; }
    
    
    .block {
    position:absolute;
    	left:50%;
    	top:25px;
    	width:250px;
    	z-index:1;
    	margin-left:-430px;
    }
    
    
    
    
    	input {
    		background-color: E7F1D3;
    		color: 575757;
    		border: 1px solid;
    		border-color: ffc71c;
    	}
    
    </style>



    thanks in advanced everyone, ive been at this all moring

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    ive been at this all moring
    And it shows. Anyways, you may not like this but, you are way over thinking and/or designing this. Images will go from left to right or (depending upon how you look at it) from right to left naturally. As long as there is room in their containing element(s) for them to fit width-wise and their display style is not set to 'block' or margins and padding are not added that would make them too wide or something dumb like putting each in its own division or paragraph, or having br tags between them, etc., they will not wrap, ex:

    HTML Code:
    <img src="im1.gif"><img src="im2.gif"><img src="im3.gif">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •