Crave: A modern WordPress theme with appetizing aesthetic


Results 1 to 6 of 6

Thread: How Can I Position My Images Correctly?

  1. #1
    Join Date
    Apr 2014
    Location
    NJ, USA
    Posts
    11

    Default How Can I Position My Images Correctly?

    Greetings, Website Babble.

    I'm attempting to create a Shop page for my website, where you can see all of my categories with two choices to click on. From there, it would take you to the appropriate category where all of my items for the given category are displayed (clicking from there would lead to the order page).

    I intend on making my category name centered in my page (no problems with that so far), and aligning one option to the left, and the other to right. As it stands, both of my images are touching, sandwiched into the left side and whenever I try to re-align the right image or reposition it, it moves to the next line, halfway into the next category's name, even if I use (CSS) display: block; . (Using a semi-random square image as a placeholder for the time being, but the newbie/spam filter is preventing me from posting, so I'm removing anything that looks like a link. I had classed every left-most square as .leftpic, and the same for right-most as .rightpic. Also, the comments are just notes to myself to put which image where, those can be ignored right now.) Can anyone direct me? I'll attach my code below.

    Thank you for any and all assistance. I apologize if I did not explain well, web design is relatively new to me, and I'll clarify what I can.

    HTML code
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="description" content="Our wall DEEcor looks painted on your walls! Works of art, new and old! Including Redoute and Audubon of international fame! Buy them small or cover your wall.">
    <title>DEEcals by Norman DEE - Masterpieces by World-Famous Artists</title>
    <links tag>
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <div id="foreground">
    <header>
        	<div class="Logo"><my logo  width="300" height="104" />           <span class="Construction">< my under construction image width="360" height="116" /></span>
       	</div><div class="Construction"></div>
            	<ul>
                	<Index"><li>Home</li></a>
                    <About"><li>About</li></a>
                    <Shop"><li>Shop</li></a>
                    <Gallery"><li>Gallery</li></a>
                    <Testimonials"><li>Testimonials</li></a>
                    <FAQ"><li>FAQ</li></a>
                    <ContactUs"><li>Contact Us</li></a>
                </ul>
    </header>
         <p class="PageName">Check out some of our Categories!</p>
    	<p class="CategoryName">Custom Kids' Names</p>
        <!-- Broken links - need the actual picture files -->
        <!-- 2 bears boy, girl cat boot -->
    	<link to Custom Kids' Names Page><square placeholder" /></a>
    	<Custom Kids' Names Page><square placeholder /></a>
    <p class="CategoryName">Pop Culture</p>
        <!-- mickeymau5, i heart zombies -->
    	<Pop Culture Page><square placeholder /></a>
    	<Pop Culture Page><square placeholder /></a>
    	<p class="CategoryName">Humor</p>
        <!-- bad spellers, stones -->
    	<Humor Page><square placeholder /></a>
    	<Humor Page><square placeholder /></a>
    <!-- State Pride? Politics? Current Events? -->
    	<p class="CategoryName">Butterfly Flowers</p>
        <!-- BF-A, BF-B -->
    	<BF Page><square placeholder /></a>
    	<BF Page><square placeholder /></a>
    	<p class="CategoryName">Redoute's Flowers</p>
        <!-- red, blue -->
    	<Redoute Page><square placeholder /></a>
    	<Redoute Page><square placeholder /></a>
        <footer>widgets, etc.</footer>
    </div>>
    </body>
    </html>
    Edit: CSS doesn't seem to pass the link filter, so I'm not sure I can share it with the forum.
    Last edited by JonGSonOfTheDee; 04-18-2014 at 09:45 AM. Reason: Clarification

  2. #2
    Join Date
    Dec 2007
    Location
    Alexandria, MN USA
    Posts
    6,530

    Default

    Before you can get any of this to work you need to fix a good number of html errors, quite a few of which are serious.

    One of the easiest ways to see these one by one with recommended fixes is to use HTML Validator (an add-on I use with Firefox). It is free. When you install it and then look at your page source (right click on the page, click on view page source) it will list each error by line number, tell you what is wrong and how to fix it. A terrific tool.
    Good Success!

    Website: Success With Money
    "People will forget what you said, people will forget what you did, but people will never forget how you made them feel." —Maya Angelou

  3. #3
    Join Date
    Apr 2014
    Location
    NJ, USA
    Posts
    11

    Default

    Thanks for the recommendation; my software is supposed to flag bad code but none of it was highlighted; the firefox plugin seems to have found them all. I'll continue tweaking.

  4. #4
    Join Date
    Dec 2007
    Location
    Alexandria, MN USA
    Posts
    6,530

    Default

    You may want to work on fixing the errors identifiable with the html validator, then reposting the code with your question if there is still a problem.

    CSS doesn't seem to pass the link filter
    But to start, your head does not have a proper link to the stylesheet in the head part of your page code. The correct format/syntax of that code is:

    <link href="filename.css" rel="stylesheet" type="text/css" />

    In this model filename is the name you give your file and it is assumed that it is located in the root folder, otherwise the path would be different but it is standard practice to put it in the root folder.

    The style block you have in your head is for putting the css in the head instead of a separate CSS file which is preferred for most of your code:

    <style type="text/css">
    [CSS may be placed here instead of a separate file. You have none currently]
    </style>
    Good Success!

    Website: Success With Money
    "People will forget what you said, people will forget what you did, but people will never forget how you made them feel." —Maya Angelou

  5. #5
    Join Date
    Apr 2014
    Location
    NJ, USA
    Posts
    11

    Default

    Thank you for that note. I've already fixed everything I could with the validator, and I seemed to have an unintended double CSS link in there, as I had the link href, then style type format right under it. I've made amendments to the code since then and I'll post the code when everything looks about as good as I can make it.

  6. #6
    Join Date
    Apr 2014
    Location
    NJ, USA
    Posts
    11

    Default

    It might be easier if I just broke my code apart into groups...

    At the moment, I'm having trouble centering my <header>, and positioning a couple images in it. I was hoping my logo could reside in the top left corner, with my "under construction" sign in the top right. I intend on developing the website for users with a screen resolution of 1024 x 768. Viewed at that size, the header displays fine, however, when testing it on my 2048 x 1152 monitor, the header itself stays in the left of my screen, whereas the rest (other text, etc.) display as intended. Is there a way to center my header? I appreciate any input.

    That code is
    Code:
    <header>
        	<div class="Logo"><img src="DEEcalimages/DEEcalLogo.png" width="225" height="78" alt="The DEEcals official logo: 'DEEcals by Norman DEE; Any size, any shape, You can stick with us." />           <span class="Construction"><img src="DEEcalimages/UnderConstruction.png" width="180" height="58" alt="A construction sign with the text: 'Please Excuse Our Appearance; Our website is Under Construction." /></span>
        	</div><div class="Construction"></div>
            	<ul>
                	<li><a href="DEEcalsIndex.html">Home</a></li>
                    <li><a href="DEEcalsAbout.html">About</a></li>
                    <li><a href="DEEcalsShop.html">Shop</a></li>
                    <li><a href="DEEcalsGallery.html">Gallery</a></li>
                    <li><a href="DEEcalsTestimonials.html">Testimonials</a></li>
                    <li><a href="DEEcalsFAQ.html">FAQ</a></li>
                    <li><a href="DEEcalsContactUs.html">Contact Us</a></li>
                </ul>
    </header>
    The relevant CSS:
    Code:
    li {
    	display: inline;
    	border: 2px solid black;
    	background-color: white;
    }
    
    ul {
    	margin-left: -5%;
    }
    
    header {
    	display: inline-block;
    	border: 1px solid black;
    	align-content: center;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .logo {
    	display: inline-block;
    }
    
    .construction {
    	display: inline-block;
    }

Posting Permissions

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