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

    Question New to CSS - nesting simple css gallery into main section of index page

    Hi all,
    I'm new to html and css, and have been trying to apply what I am learning to the vision I have for my personal website for my model horse collection.

    I read several tutorials before carefully constructing my first page, which includes a header, left side vertical nav, main page and footer.

    My next step was to create a template for a simple photo gallery- a group of 12-16 small photos each of which will link to a page dedicated to the individual model in each photo.

    I did that with the help of some copy and pasting, but it is formatted as one large page with no divs.

    My problem now is how to nest the gallery code (in each of the html and css files) into the main page codes and maintain the positioning, which I'm losing once I copy and paste.

    I thought part of the problem might have been that my original menu bar coding may be interfering by duplication, with my gallery code, but I used ids for each element so as to separate one set of codes from the other.

    I'm also confused about whether to use an id or a class for my gallery styling- I do know I will likely have two "galleries" on one page, which makes me think I should use a class for that set of styles. Then I get confused about how the the "ul" element vs. the ul li elements are to be coded.

    Thanks in advance for your help!

    This is the gallery the way I want it to look WITHIN the main body of my page(I'll adjust width and height once it's in the main page section):

    Code:
    <!DOCTYPE HTML >
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Gallery Base</title>
    <link rel="stylesheet" type="text/css" href="cls_gallery.css">
    </head>
    
    <body>
    <div id="container">
    	
    	<div id="gallerycontainer">
    	
    		<h1>Gallery Template</h1>
    		<ul class="gallery">
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    		
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    	</ul>
    </div><!--gallery container-->
    </div> <!--structural container-->
    </body>
    </html>
    Here is the test page formatted with it's sections, and the html from the gallery:

    Code:
    <!DOCTYPE html>
     
    <html>
     
    <head>
      <title> Clover Lake Acres </title>
      <meta charset="utf-8" >
      <meta name= "description" content="Clover Lake Acres"/>
      <link type="text/css" rel="stylesheet" href="gallery_test_style.css" /> 
    
      <meta name= "keywords" content= "horses, model, Breyer, Stone, NJHeart2Heart"/>
      </head>
    <body>
    <div id="container">
    
         <div id="topbar">
    	 <h1> Welcome to Clover Lake Acres</h1>
         </div>
    	 
    		<div>
    			<div id="leftbar"> 
    			
    			<ul id="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">Office</a></li>
      <li><a href="#">Stallions</a></li>
      <li><a href="#">Mares</a></li>
      <li><a href="#">Kennels</a></li>
    </ul>
    			</div>
    		</div>
    		
    	 <div id="mainbar">
    	 	<p> Welcome to Clover Lake Acres, a premier equestrian
    	 	center with a passion for developing horses of top performance and eye-catching beauty, and people with exceptional education and compassion for all living things. </p>
    	 
    		<p> Clover Lake Stables was first established in 1988 with a small group of ten horses. The first humble barn was made of crude wood and housed six horses in straight stalls. The residents were rotated out regularly to paddocks with turn our shelters. It wasn't much, but it was a start, and the owner had a great vision for future development. </p>
    
    		<p> As equines were added to the herd, more straight stall barns were built to accommodate additional members of the growing community, and by 1990, Clover Lake Stables was expanded to accommodate about 88 animals. </p>
    		
    		<p> Clover Lake grew in leaps and bounds, adding at a horse per month, and in 1991, the first full sized barn was built in anticipation of a new focus on showing. However, due to a necessary change of priorities, the facilities and it's horses were leased out to a third party for several years. </p>
    		
    		<p> In January 2011, Clover Lake Stables was re-established as Clover Lake Acres and was registered as a mini-barn of the Arcadia SIM Community. Our first two Arcadian registered horses, Gideon and Sunlight Serenade were temporarily housed at Semper Fidelis while we established our place in the community. We registered in appropriate discipline associations and began participating in shows. We have begun to build our reputation for consistent high level performance skills while also setting the standard for selecting quality stock with style and great colors. </p>
    		
    		<p> We worked hard to earn that reputation and in mid-February, 2011 earned Arcadia Silver level membership, which bestowed us with the privilege of building our own facilities. We immediately acquired a generous amount of acreage which will house our state of the art equestrian facility, surrounded by carefully chosen property for various equestrian pursuits. We have a passion for the environment, and have dedicated a section of land as our contribution to the development, testing and maintenance of endangered woodland tree species, including the American Chestnut tree. <p>
    		
    		<p> Our current plan includes a masterfully designed barn that will house 15 animals, 15 acres of turn out space and a small outdoor training arena, plus approximately 30 acres of woodland/fields for outdoor training. </p>
    		
    		<p> The Clover Lake equestrian training program is geared towards western performance with a concentration on pleasure, trail and western riding competition. As an organization we believe that the best and most competitive riders have a broad base of training eduction, so we round off our expertise with select training for dressage and endurance events. We take pride in our small but well established group of english style animals, which compete primarily in pleasure, dressage, and endurance competition. </p>
    			
    		<p> As you can well see, we are an organization that thrives on variety with quality, which is why our motto is "Performance and Beauty by Design". We are always on the lookout for new and exciting opportunities for the horse-rider team. We strongly support wild mustang herds and the humane capturing and taming of these animals. We also place a high value on serving the community through educational workshops and horse camps for youngsters as well as contributing some of our time towards the development and application of equine therapy. </p>
    		
    		<p> Several traditional farm animals also make their home here primarily as companions to our horses. We have a friendly mule, donkey and several smaller animals, including goats, cats, ducks, sheep and chickens. </p>
    		
    		<p> We also own Clover Lake Kennels, home of The Eclectic Approach canine training facility. This associated company focuses on family dog training and encourages training towards Canine Good Citizenship and therapy dog certification. We train for a various performance events including agility, rally and freestyle, with a strong focus on operant conditioning techniques. For all our animals, we maintain the highest standards of physical and mental health and pride ourselves in our trainer education, which allows us to apply the most effective yet humane training techniques to all of our residents. </p>
    		
    		<!--start of experiment -->
    		<div id="gallerycontainer">
    	
    		<h2>Gallery Base</h2>
    		<ul id="gallery">
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    		
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    				<li><a href="ps_gallo.jpg"><img src="ps_gallo_sm.jpg" alt="My Golden Valentine" /></a>
    				<br />My Golden Valentine</li>
    				
    	</ul>
    </div><!--gallery container-->
    		<!--end of experiment -->
    		
    </div><!-- end of mainbar div -->
    
    <div id="footer">
    Here is space for an approriate footer- whatever that may be!
    	 </div> <!-- end of footer div -->
    	 
    	</div> <!-- end of container div -->
    </body>
    </html>
    and here is the stylsheet for the test page with formatting:

    Code:
    *{margin: 0px; padding: 0px;
    }
    
    body {
    background-color: gray
    }
    
    div#container {
    border: 1px solid #FFFF66;
    background-color: #00293D;
    }
    
    div#topbar {
    border: 1px dotted white;
    background-color: #00293D;
    height: 40px;
    margin-left: 220px;
    padding: 25px 50px;
    color: #FED20A;
    text-align: center;
    font-family: "Georgia", Geneva, sans-serif;
    font-style: italic;
    font-size: 20px;
    
    }
    
    div#leftbar {
    background-color: #00293D;
    width: 120px;
    float: left;
    padding: 20px 20px;
    }
    
    
    #menu ul {
    	margin: 5px;
    	padding: 0;
    	background-color: #00293D;
    	list-style: none;
    }
    #menu li {
    	display: inline;
    	float: left;
    	font-size: 20px; 
    	font-family: "Georgia", Geneva, sans-serif;
    	margin: 0px 0px;
    	padding: 5px;
    }
    
    #menu a:link, a:active, a:visited {
    	display: block;
    	float: left;
      	margin: 0px;
    	padding: 10px;
      	background-color: #00293D;
    	color: #FED20A;
    	font-size: 1.5em;
      	text-decoration: none;
    }
    
    #menu a:hover {
    	background: #00293D;
    	color: #0088A3;	
    }
    
    div#mainbar {
    background-color: #00143D;
    margin-left: 220px;
    padding: 25px 50px;
    line-height:150%;
    color: #01DFD7;
    font-family: "Arial", Helvetica, sans-serif;
    }
    
    div#footer {
    background-color: #00143D; 
    height: 15px;
    margin-left: 220px;
    padding: 20px 50px 22px 50px;
    border: 1px dotted #FFFF66;
    color: #0088A3;
    text-align: center;
    font-family: "Georgia", Geneva, sans-serif;
    font-size: 80%;
    clear: both;
    
    h1 {
    margin: auto;
    width: 70%;
    }
    
    div#gallerycontainer  {
    background-color: #00293D;
    border: 2px dashed white;
    width: 900px;
    height: 700px;
    margin: 5px auto;
    padding: 10px;
    }
    
    h2 {
    border: 2px dotted white;
    color: #FED20A;
    text-align: center;
    }
    
    #gallery {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    }
    
    #gallery li {
            display: inline;
            list-style: none;
            width: 200px;
            height: 130px;
            float: left;
            margin: 10px 5px;
            color: #FED20A; 
            text-align: center
            text-decoration: none;
    Last edited by WA; 05-23-2011 at 08:41 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    If you put this up live somewhere I'll take a look. I'm too lazy to build my own test case to debug with.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Rows,
    I didn't have it live until you asked. I put it up on webs, so hopefully they don't add extra "stuff". My test page does look the way I had it locally, so I assume it's ok.

    Here's the link to the page:

    http://njheart2heart.webs.com/IndexandGallery_test.html

    The style sheet is below in plain text. When I open the location from the domain, it opens notepad with the coding... don't know what you want me to do with that to make it easier for you to view?

    Thanks,
    Dawn in NJ


    *{margin: 0px; padding: 0px;
    }

    body {
    background-color: gray
    }

    div#container {
    border: 1px solid #FFFF66;
    background-color: #00293D;
    }

    div#topbar {
    border: 1px dotted white;
    background-color: #00293D;
    height: 40px;
    margin-left: 220px;
    padding: 25px 50px;
    color: #FED20A;
    text-align: center;
    font-family: "Georgia", Geneva, sans-serif;
    font-style: italic;
    font-size: 20px;

    }

    div#leftbar {
    background-color: #00293D;
    width: 120px;
    float: left;
    padding: 20px 20px;
    }


    #menu ul {
    margin: 5px;
    padding: 0;
    background-color: #00293D;
    list-style: none;
    }
    #menu li {
    display: inline;
    float: left;
    font-size: 20px;
    font-family: "Georgia", Geneva, sans-serif;
    margin: 0px 0px;
    padding: 5px;
    }

    #menu a:link, a:active, a:visited {
    display: block;
    float: left;
    margin: 0px;
    padding: 10px;
    background-color: #00293D;
    color: #FED20A;
    font-size: 1.5em;
    text-decoration: none;
    }

    #menu a:hover {
    background: #00293D;
    color: #0088A3;
    }

    div#mainbar {
    background-color: #00143D;
    margin-left: 220px;
    padding: 25px 50px;
    line-height:150%;
    color: #01DFD7;
    font-family: "Arial", Helvetica, sans-serif;
    }

    div#footer {
    background-color: #00143D;
    height: 15px;
    margin-left: 220px;
    padding: 20px 50px 22px 50px;
    border: 1px dotted #FFFF66;
    color: #0088A3;
    text-align: center;
    font-family: "Georgia", Geneva, sans-serif;
    font-size: 80%;
    clear: both;

    h1 {
    margin: auto;
    width: 70%;
    }

    div#gallerycontainer {
    background-color: #00293D;
    border: 2px dashed white;
    width: 900px;
    height: 700px;
    margin: 5px auto;
    padding: 10px;
    }

    h2 {
    border: 2px dotted white;
    color: #FED20A;
    text-align: center;
    }

    #gallery li {
    display: inline;
    list-style-type: none;
    width: 200px;
    height: 130px;
    float: left;
    margin: 10px 5px;
    color: #FED20A;
    text-align: center
    text-decoration: none;

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    What are the contents of the file named "cls_gallery.css"?

    That file appears to contain the styles associated with the gallery in your first example but I without knowing what is in it I can't say whether or not it's missing from your "indexandgallery_test_style.css" file. I'm not sure if/where the file is on your test server.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Rows,

    "indexandgallery_test.css" is the style sheet associated with the html file that I placed online. I tried to explain - probably not very well that though I loaded the stylesheet file onto "webs.com" server, it does not show as a typical html file online, but rather, opens locally as a notepad file. Because of this, I copied the code in my above reply. My html file (online) is linked to that exact code.

    Does that make sense? I'm so sorry that I am making things difficult to help you troubleshoot- I have never done this before and fumbled my way this morning with just uploading those two files online for viewing purposes (until now, I've kept everything local while I learned the basics). I don't have access to a dedicated FTP site at this time.

    I've been playing around with the code a little here and there this morning, so some things have changed. It's closer to what I want it to look like, but still not there. I think whatever advice you offer will still be applicable to my code as it stands now. I

    One theory for my problems it that I am mis-understanding how the css instructions are getting layered on the html when applied. Seems a lot of changes I try to make have no effect at all, then I make one code change, and a bunch of stuff changes that I did not intend to change...


    Thank again.
    Dawn
    Last edited by NJHeart2Heart; 05-24-2011 at 04:21 PM.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I don't think you're confusing me and I see all of the source code that you have posted in your test page available from the website that you have linked to. That's all fine. What I don't see online, and what your last post has confirmed you have not uploaded, is your style sheet from your simple gallery page. If you go to your very first post in this thread and look at your first block of code you posted you will see this:

    Code:
    <!DOCTYPE HTML >
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Gallery Base</title>
    <link rel="stylesheet" type="text/css" href="cls_gallery.css">
    </head>
    (highlighting added for emphasis)

    The style sheet named right there in that piece of HTML code is the style that controls the appearance of your gallery. It is also this style that is apparently not being applied to your "big page" because you have not added it in to the header of the big page (nor have you uploaded the file to the server). You are missing whatever is in that file for style rules. That's why you aren't getting the appearance you wanted when you paste the HTML into your page.

    If you can locate the cls_gallery.css file, wherever it may be, and get all of the style rules that are in that file then we should be able sort this out.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did a long post explaining what happened with the html and css (I had, since the first post, changed the .css name, but had correctly updated the file name on the html code), but when I tested the page on the webs domain, vs. locally, it's rendering differently. So.. I can't seem to get a sample for you online that renders the same way as locally, and until I do so, I guess it's pointless to ask for help. Extremely frustrating. I'll just have to continue fumbling through information until I stumble upon the answer on my own, but it's definitely not a very efficient way to get my answer.

    Thanks anyway for the offer to help.

    Dawn


  •  

    Tags for this Thread

    Posting Permissions

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