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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding images to 'columns' on site

    Hello,

    This is my first post on the forum. So hopefully, my description of the problem won't be too confusing!

    Essentially, i'm building a website, i have a basic understanding of HTML and CSS, mainly the syntax of things more than anything. However i still have much to learn! Anyway onto the problem:

    I am building a website for a clothing line selling t-shirts. At current i have a basic home page, containing a few paragraphs on About Us, and featured products etc. I have an image for a t-title. Using a seperate CSS sheet for styles.

    Now, i want to add lots of tiny images down the side of the page.(both left and right, symmetrical and all the same image). But ruined the formatting of the page or the coding will become extremely complicated. I thought about a table with 3 columns. (images running in the outside to columns) but it didnt work.

    What would you advice is the best way to accomplish this? I will attach my code and a screen shot of what i mean.

    Code:
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head></br>
    </title><h1><img src="Y3.jpg" alt="¥"><h1></title>
    </br></br>
    
    
    
    <p>
    <table border="0">
    <tr>
    <h2>Featured Product:</h2></br>
    This month's featured product is #4 - Nellie.</br></br>
    Our beloved Nellie the elephant (on acid) is the aztec inspired brain child of our Chief Ink-Smith.</br>
    She combines familiar lines and curves with a sense of warped imagary, whilst maintaining a recognisable structure.</br></br>
    Planned in pencils and painstakingly inked using fineliner.</br></br></br></br>
    
    
    <h2>About Us:</h2></br>
    
    We specialise in selling high quality clothing; focusing on black ink and crisp lines. Each of the designs have been hand-drawn on A3 paper and digitsied via scanner. Whilst this may seem a little bit excessive, (and perhaps long winded) we do not believe in the compromise of quality or detail on ANY of our products.</br></br>
    Whilst our store will launch in September of 2013. The foundations of the company began back in early January. The brand is exclusively operated by its two founders and will remain this way. We strongly believe that the products will dictate the direction of the company.</br></br>
    Drawing inspiration from an eclectic array of sources; particularly the minimalistic designs of Yves Saint Laurent, the underground scene of electronic dance music with a blend of graphic noir and the warped surrealism of H.R Giger.</br>
    So, thats us introduced. If you like what we're about, why not check out our store?</td>
    </tr>
    
    </p>
    Hopefully with the code and the screenshots, you can understand what i mean.

    Thank you so much for taking the time to look at this! Any help is hugely appreciated.

    Sach
    Attached Thumbnails Attached Thumbnails Adding images to 'columns' on site-screen-shot-2013-10-20-15.58.24.png   Adding images to 'columns' on site-screen-shot-2013-10-20-16.00.23.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello 420_SR,
    Tables are not really used for layout anymore, see the link in my signature below.
    Maybe this will give you some ideas for your background -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->	
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    }
    html {background: #fff url(2015_58_24.png) repeat-y left}
    body {background: url(2015_58_24.png) repeat-y right}
    		/* HTML5 tags */
    		header, section, footer,
    		aside, nav, article, figure {display: block;}
    #container {
    	width: 600px;
    	margin: 0 auto;
    	padding: 20px;
    	background: #999;
    }
    </style>
    </head>
    <body>
        <div id="container">
    		<h2>Featured Product:</h2>
    			<p>
    				This month's featured product is #4 - Nellie.</br></br>
    				Our beloved Nellie the elephant (on acid) is the aztec inspired brain child of our Chief Ink-Smith.</br>
    				She combines familiar lines and curves with a sense of warped imagary, whilst maintaining a recognisable structure.</br></br>
    				Planned in pencils and painstakingly inked using fineliner.</br>
    			</p>		
    		<h2>About Us:</h2>
    			<p>
    				We specialise in selling high quality clothing; focusing on black ink and crisp lines. Each of the designs 
    				have been hand-drawn on A3 paper and digitsied via scanner. Whilst this may seem a little bit excessive, 
    				(and perhaps long winded) we do not believe in the compromise of quality or detail on ANY of our products.</br></br>
    				Whilst our store will launch in September of 2013. The foundations of the company began back in early January. 
    				The brand is exclusively operated by its two founders and will remain this way. We strongly believe that the 
    				products will dictate the direction of the company.</br></br>
    				Drawing inspiration from an eclectic array of sources; particularly the minimalistic designs of Yves Saint Laurent, 
    				the underground scene of electronic dance music with a blend of graphic noir and the warped surrealism of H.R Giger.</br>
    				So, thats us introduced. If you like what we're about, why not check out our store?
    			</p>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    For displaying data in the way you want to, including images, a table should work fine, just put the table inside a div container, styled accordingly. And follow the advice about using a valid page layout, which your example is not. The table is just a repetition of certain elements, so it doesn't matter how 'big' it is, just that the repetition is consistent.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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