deathshadow . . . Another Attempt From Scratch . . . Help Pls

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#1

deathshadow, if you feel up to it I sure could use your help.

I am trying to put together a basic ecommerce site. I put it together trying to strictly adhere to what you have tried to share with me so far, but I have run into a couple of snags that I can't resolve.

You can see the site at http://sharpstuff4guys.com and my html looks:


 
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
    name="viewport"
    content="width=device-width,height=device-height,initial-scale=1"
>
<link
    rel="stylesheet"
    href="screen.css"
    media="screen,projection,tv"
>

<html>

<head>
  <title>SharpStuff4Guys.com</title>
</head>

<body>

<div id="contentWrapper">

    <div id="header"></div>

    <div id="shipping-bar">
        <div id="shipping-text">
            FREE Shipping on all orders over $24.95
        </div>
    </div>

    <div id="content">
        <div id="sidebar">
            <ul>
                <li>
                    <a href=" / ">HOME</a>
                </li><li>
                    <a href=" / ">SHIPPING</a>
                </li><li>
                    <a href=" / ">RETURNS</a>
                </li><li>
                    <a href=" / ">BACK ORDERS</a>
                </li><li>
                    <a href=" / ">PRIVACY POLICY</a>
                </li><li>
                    <a href=" / ">CONTACT US</a>
                </li>
            </ul>

            <h2>Categories</h2>
            <ul>
                <?php include("categories.php"); ?>
            </ul>
        </div><!-- #sidebar -->

        <div id="products">
            <h2>FEATURED PRODUCTS</h2>
            <ul>
                <li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="CopperSpring Assist Knife" />
                        <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.49
                        </div>
                        <div class="price">
                            Your Price $17.92
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/vietnam_cap-1.jpg" alt="vietnam veteran cap" />
                    <div class="product-title">
                            Baseball Vietnam Veteran Cap w/ Adjustable Back
                        </div>
                        <div class="retail-price">
                            Retail Price: $9.99
                        </div>
                        <div class="price">
                            Your Price<br /> $ 6.72
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/death_stalker.jpg" alt="death stalker fantasy knife" />
                    <div class="product-title">
                            "Death Stalker" Fantasy Knife w/ Display Stand
                        </div>
                        <div class="retail-price">
                            Retail Price: $78.49
                        </div>
                        <div class="price">
                            Your Price $49.78
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/zombie_hack_set.jpg" alt="Biohazard Zombie "Hack 'n' Slash" 4 Pc Set" />
                    <div class="product-title">
                            Biohazard Zombie "Hack 'n' Slash" 4 Pc Set
                        </div>
                        <div class="retail-price">
                            Retail Price: $109.99
                        </div>
                        <div class="price">
                            Your Price $52.10
                        </div>
                    </a>
                </li>
            </ul>

            <h2>NEW ARRIVALS</h2>
            <ul>
                <li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="" />
                        <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.95
                        </div>
                        <div class="price">
                            Your Price $7.99
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="" />
                    <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.95
                        </div>
                        <div class="price">
                            Your Price $7.99
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="" />
                    <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.95
                        </div>
                        <div class="price">
                            Your Price $7.99
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="" />
                    <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.95
                        </div>
                        <div class="price">
                            Your Price $7.99
                        </div>
                    </a>
                </li>
            </ul>

            <h2>BEST SELLERS</h2>
            <ul>
                <li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="" />
                        <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.95
                        </div>
                        <div class="price">
                            Your Price $7.99
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="" />
                    <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.95
                        </div>
                        <div class="price">
                            Your Price $7.99
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="" />
                    <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.95
                        </div>
                        <div class="price">
                            Your Price $7.99
                        </div>
                    </a>
                </li><li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="" />
                    <div class="product-title">
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </div>
                        <div class="retail-price">
                            Retail Price: $26.95
                        </div>
                        <div class="price">
                            Your Price $7.99
                        </div>
                    </a>
                </li>
            </ul>
        </div><!-- #products -->

    </div><!-- #content -->

    <div id="description">
        If you are looking for a great place that offers a huge selection of knives, self defense products or
        collectibles, then SharpStuff4Guys.com is the place you want to be. Whether you're looking for
        fantasy knives, fixed blade knives, folding knives or protective zombie gear, we have most everything
        a guy could need to build an amazing collection and at very affordable prices. Our selection of
        self-defense and security products, collectibles and survival gear has been hand-selected to satisfy
        the wants and needs of our customers. Each item in our inventory meets our rigid standards for
        durability, functionality and ease-of-use. Here at SharpStuff4Guys.com, we are building one of the
        most comprehensive selections of name-brand knives and combat accessories that grows every week. Our
        inventory is loaded with knives from manufacturers like SOG, Gerber, Colt and Ka-Bar - just to name a
        few. We offer at discounted prices Uzi knives, Swiss Army knives and many more, so finding the right
        blade for your personal collection couldn't be easier. In addition to our growing inventory of
        knives, SharpStuff4Guys.com's inventory includes tactical gear and militaria. So whether you're
        looking a gift that will never be forgotten or adding to your own personal collection, you will be
        able to get what you need right here. Because we live in such turbulent times, we have packed our
        inventory with an amazing selection of self-defense and security products that can protect you
        if the need ever arises. Whether you're looking for a Mace pepper spray gun, a crime-stopping,
        4-million-volt stun gun or a motion-detecting alarm, you'll find things that law enforcement personnel
        and self-defense instructors use and recommend right here at SharpStuff4Guys.com. We'd like to invite
        you to browse our ever growing selection of unique knives, discount tactical gear and everything else
        we offer. At SharpStuff4Guys.com, we are quite proud of our selection, and hope you enjoy exploring
        our website for whatever it is you need.
    </div><!-- #description -->

    <div id="bottom-menu">
        <ul>
           <li><a href="/">HOME</a></li>
           <li><a href=" / ">SHIPPPING</a></li>
           <li><a href=" / ">RETURNS</a></li>
           <li><a href=" / ">BACK ORDERS</a></li>
           <li><a href=" / ">PRIVACY POLICY</a></li>
           <li><a href=" / ">Contact Us</a></li>
        </ul>
    </div><!-- #bottom-menu -->

    <div id="footer">
        &copy; 2016 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SharpStuff4Guys.com
    </div>

</div><!-- contentWrapper -->

</body>

</html>

Code (markup):

My css looks like:


 
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img, fieldset {
    border:none;
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
    (-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
    (min-resolution:172dpi) and (min-width:1600px)
{
    html { font-size:200%; }
}

body {
    background:#BFCDE4;
}

#contentWrapper {
    margin: 0 auto;
    width: 1148px;
}

#header {
    width: 1148px;
    height: 81px;
    background: #0067A9 url(/images/header.jpg) no-repeat;
}

#shipping-bar {
    width: 100%;
    height: 53px;
    margin-bottom: 2em;
    background: #0000CD;
    box-shadow: 0 5px 5px #888888;
}

#shipping-text {
    padding-top: 0.4em;
    text-align: center;
    font-size: 1.75em;
    text-decoration: none;
    color: #FD9742;
    text-shadow:
        -2px 0 4px #000,
        2px 0 4px #000,
        0 -2px 4px #000,
        0 2px 4px #000,
        0 0 8px #000;
}

#content {
    width: 100%;
    height: auto;
    background: #FFF;
}

#sidebar {
    float: left;
    width: 12em;
    font-size: 1.1em;
    line-height: 2em;
    padding: 0.5em;
    border: 1px solid #999;
    background: #FFF;
}

#sidebar ul {
    padding: 0.5em;
    list-style: none;
}

#sidebar li {
    list-style: none;
}

#sidebar a {
    font-size: 1.1em;
    line-height: 2.25em;
    text-decoration: none;
}

h2 {
    font-size: 1.65em;
    margin: 0 0 -2em 0;
    padding: 1em 0 0.5em 0;
}

#products {
    float: right;
    width: 53em;
    padding: 1em;
    background: #FFF;
}

#products ul {
    list-style: none;
    text-align: center;
    padding-bottom: 1em;
}

#products li {
    display:inline;
    vertical-align:top;
}

#products a {
    width:171px;
    padding:1em;
    display:inline-block;
    vertical-align:top;
    text-decoration:none;
    color:#FFF;
    -webkit-border-radius:1em;
    border-radius:1em;
    -webkit-transition:background 0.3s;
    transition:background 0.3s;
}

#products a:hover {
    background:#BFCDE4;
}

#products img {
    display:block;
    margin:1.5em auto 0.5em;
    max-width:100%;
}

.product-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #0067A9;
}

.retail-price {
    width: 100%;
    margin-top: 0.75em;
    font-size: 1em;
    color: #999;
}

.price {
    width: 100%;
    margin-top: 0.25em;
    font-size: 1.5em;
    font-weight: bold;
    color: #CC0000;
}

#description {
    clear:both;
    margin: 1.5em 0.5em 1.5em 0;
    padding: 2em 1em 1em 1em;
}

#bottom-menu {
    background: #0067A9;
    border-width: 2px 0;
}

#bottom-menu ul {
    list-style: none;
    padding-top: 0.25em;
    text-align: center;
}

#bottom-menu li {
    display: inline;
    vertical-align: bottom;
}

#bottom-menu a {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 0.25em;
    padding:  0.5em 1em;
    text-decoration:none;
    font: bold 120%/120% arial,helvetica,sans-serif;
    color: #FFF;
    text-shadow:
        1px 1px 2px #000,
        -1px 1px 2px #000;
}

#bottom-menu a:hover {
    color: #BFCDE4;
    text-shadow:
        0 0 2px #C60;
}

#footer {
    clear:both;
    text-align:center;
    padding:1em;
    color:#FFF;
    height: 2em;
    background: #0067A9;

}

@media (max-width:50em) {
    body {
        min-width:192px; /* CSS3 possible, so let it go narrower */
    }
    #contentWrapper,
    #extras {
        float:none;
        width:auto;
    }
    #content,
    #extras {
        margin:0;
        padding:1em 0.5em 0;
    }
    h2 {
        padding-bottom:0.66em;
    }
    .adverts {
        padding-top:1em;
        border-top:2px solid #400;
    }
    .adverts img {
        display:inline-block;
        max-width:49%;
    }
    #otherVideos {
        padding:1em 0 0;
        margin:0 0.5em;
    }
    #otherVideos a {
        padding:0.5em;
    }
}

@media (max-width:660px) {
    h1 {
        text-align:center;
        padding:0;
    }
    h1 a {
        padding:0.33em 0.167em;
        font:bold 300%/150% arial,helvetica,sans-serif;
    }
    h1 span {
        display:none;
    }
    .adverts img {
        display:block;
        max-width:100%;
    }
}

@media (max-width:340px) {
    #products a {
        width:auto;
        margin:0 auto;
        -webkit-box-sizing:padding-box;
        box-sizing:padding-box;
    }
}

Code (markup):

If you look at the site, the first problem will be pretty obvious in that no matter what I do I cannot get white background to show in #content. The second problem is the bottom-menu encompasses the footer as well.

I will bet that I have done something stupid that an experienced eye will catch real quick.

Since I am trying to re-learn everything again and adding responsive to the mix, I kind of get this thing working along those lines, but I still got a couple of problems areas.

One thing I just cannot figure out yet is how <h1> can use a logo image and changes to text when it goes from desktop to my cell phone. Another problem is my first attempt at a sidebar and getting it to resize from desktop to cell phone.

One last thing, can a responsive search bar be added to a site using just html and css or does it require JS as well? I ask because I would like to add a search bar to this page and have been looking around for a tutorial, but everything I find involves JS. I thought I would ask first so as to not duplicate my efforts unnecessarily.

If you don't have anything to do or happen to be bored to tears I would appreciate it if you would review my codes and let me know if I am catching on to your teachings or not as well as share your guidance on how to correct the problems with this site. I need to get started on the next page of this site so I really hope I am catching on.

Many, many thanks . . .

VanceVP, Jul 4, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#2

The content issue is because the internal elements are floated, and you're not containing your floats. Ie, the content div is not stretching past its content. Put overflow: hidden; on the #content css.

On my phone, so can't really do much about the other issues right now

PoPSiCLe, Jul 4, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#3

I like the speed of your website. Compared to a one build by one of those online website builders, your website loads almost instantly. That what I like about building websites from scratch properly.

Web_Dev_Chris, Jul 4, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#4

You are ahead of me in web development so I cant offer any help, but I'm still learning. Not far behind. Keep up the good work!

Web_Dev_Chris, Jul 4, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#5

PoPSiCLe said: ↑

The content issue is because the internal elements are floated, and you're not containing your floats. Ie, the content div is not stretching past its content. Put overflow: hidden; on the #content css.

On my phone, so can't really do much about the other issues right now
Click to expand...

Thanks PoPSiCLe . . . that did the trick for the content area. As for the #contentWrapper . . . looks like I screwed that up myself and either didn't put a background or got frustrated and deleted it. Either way, I got it all working now except for the #bottom-menu and footer. Still got to find out what I am doing wrong that the site is not responsive the way it should be. It works partially, so maybe I am on to something.

Web_Dev_Chris said: ↑

I like the speed of your website. Compared to a one build by one of those online website builders, your website loads almost instantly. That what I like about building websites from scratch properly.
Click to expand...

I made the mistake of going the route of Foundation/Bootstrap and when I came here looking for help . . . boy did I get schooled. My goals with any website I put together is for it to load quickly and be easy to navigate. Of course there are other goals, but these are my main initial goals. I prefer to build websites from scratch simply because I can end up with exactly what I want as opposed to what somebody else dreamed up.

Web_Dev_Chris said: ↑

You are ahead of me in web development so I cant offer any help, but I'm still learning. Not far behind. Keep up the good work!
Click to expand...

I have been involved with the Internet since the beginning and got interested in trying to build my own websites years ago. I tried to teach myself about HTML and CSS and after I got schooled here, it looks like I learn it all wrong so now I am trying to re-learn it all all over again. If you are going to hang around here and ask for advice, you might want to watch out. I have been schooled by a couple of members here that have some very definite opinions on more than one ocassion. While they might be a bit course when voicing their opinions, their advice is solid and well worth heeding.

VanceVP, Jul 5, 2016 IP

KewL Well-Known Member

Messages:: 245

Likes Received:: 16

Best Answers:: 3

Trophy Points:: 128

#6

Ok im just gonna list some stuff i see.

---

1. You're missing your content tags a lot of places. A couple examples:


<div id="header"></div>

<div id="shipping-bar">
  <div id="shipping-text">
    FREE Shipping on all orders over $24.95
  </div>
</div>

Code (markup):

Should be something like this:


<div id="header">
  <h1>My awesome title</h1>
</div>

<div id="shipping-bar">
  <p>FREE Shipping on all orders over $24.95</p>
</div>

Code (markup):

You don't need the #shipping-text, just target it with "#shipping-bar p".

More examples of missing tags:


<div class="product-title">
"Stars Above" Copper Spring Assist Knife w/ Wolf Handle
</div>
<div class="retail-price">
Retail Price: $26.49
</div>
<div class="price">
Your Price $17.92
</div>

Code (markup):

-----

2. you're using fixed dimensions all over the place this causes problems all over with responsiveness. For example you're shipping bar and header at 400px width:

https://www.dropbox.com/s/mmcdx57zxc4yck4/Screenshot 2016-07-05 18.19.13.png?dl=0

So on a shipping bar you'll want to approach it something like this:


<div id="shipping-bar">
  <p>FREE Shipping on all orders over $24.95</p>
</div>

#shipping-bar {
  background: blue;
}

#shipping-bar p {
  padding: 5px 20px
}

Code (markup):

This will allow your bar to grow in height when the text wraps.

---

If you're going to have capitalized headings, don't type in caps, use the css property:


text-transform: uppercase;

Code (markup):

---

This is another bad one:


<div id="footer">
&copy; 2016 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SharpStuff4Guys.com
</div>

Code (markup):

Instead of all those non-breaking spaces wrap the left part in a span and apply margin-right.


<div id="footer">
  <p><span>&copy;</span> 2016 SharpStuff4Guys.com</p>
</div>

#footer span {
  margin-right: 40px;
}

Code (markup):

----

You're using a bunch of <br>'s instead of margins/paddings.

Deathshadow will tell you different, but i think if you're going to use the html5 doctype, then you should lose the xhtml self closing stuff. <img/> <br/>

----

The stuff before body is all messed up:


<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
name="viewport"
content="width=device-width,height=device-height,initial-scale=1"
>
<link
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
>

<html>

<head>
<title>SharpStuff4Guys.com</title>
</head>

Code (markup):

You have two <html>'s and two <heads>'s and they don't close in the right order. I feel like the funky formatting is probably throwing you off, but whatever. Should be:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <link rel="stylesheet" href="screen.css" media="screen,projection,tv">
    <title>SharpStuff4Guys.com</title>
  </head>
  <body>
  </body>
</html>

Code (markup):

--------------------

Here's a cleaned up version of your html, the css will take too long to right but im down to answer any questions you have:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <link rel="stylesheet" href="screen.css" media="screen,projection,tv">
    <title>SharpStuff4Guys.com</title>
</head>
<body>

    <div id="contentWrapper">

        <div id="header">
            <h1>SharpStuff4Guys.com</h1>
        </div>

        <div id="shipping-bar">
            <p>FREE Shipping on all orders over $24.95</p>
        </div>

        <div id="content">

            <div id="sidebar">
                <ul>
                    <li><a href=" / ">Home</a></li>
                    <li><a href=" / ">Shipping</a></li>
                    <li><a href=" / ">Returns</a></li>
                    <li><a href=" / ">Back Orders</a></li>
                    <li><a href=" / ">Privacy Policy</a></li>
                    <li><a href=" / ">Contact Us</a></li>
                </ul>

                <h2>Categories</h2>
                <ul>
                    <li><a href=" / ">Blah</a></li>
                    <li><a href=" / ">Blah</a></li>
                    <li><a href=" / ">Blah</a></li>
                    <li><a href=" / ">Blah</a></li>
                </ul>
            </div><!-- #sidebar -->

            <div id="products">

                <h2>Featured Products</h2>
               
                <ul class="product-list">
                    <li>
                        <a href=" / ">
                            <img src="/images/copper_knife.jpg" alt="CopperSpring Assist Knife" />
                            <h3>"Stars Above" Copper Spring Assist Knife w/ Wolf Handle</h3>
                            <span class="retail-price">Retail Price: $26.49</span>
                            <span class="price">Your Price $17.92</span>
                        </a>
                    </li>
                </ul>

                <h2>Best Sellers</h2>
               
                <ul class="product-list">
                    <li>
                        <a href=" / ">
                            <img src="/images/copper_knife.jpg" alt="CopperSpring Assist Knife" />
                            <h3>"Stars Above" Copper Spring Assist Knife w/ Wolf Handle</h3>
                            <span class="retail-price">Retail Price: $26.49</span>
                            <span class="price">Your Price $17.92</span>
                        </a>
                    </li>
                </ul>

            </div><!-- #products -->

        </div><!-- #content -->

        <div id="description">
            <!-- Begin super paragraph -->
            <p>If you are looking for a great place that offers a huge selection of knives, self defense products or collectibles, then SharpStuff4Guys.com is the place you want to be. Whether you're looking forfantasy knives, fixed blade knives, folding knives or protective zombie gear, we have most everythinga guy could need to build an amazing collection and at very affordable prices. Our selection ofself-defense and security products, collectibles and survival gear has been hand-selected to satisfythe wants and needs of our customers. Each item in our inventory meets our rigid standards fordurability, functionality and ease-of-use. Here at SharpStuff4Guys.com, we are building one of themost comprehensive selections of name-brand knives and combat accessories that grows every week. Ourinventory is loaded with knives from manufacturers like SOG, Gerber, Colt and Ka-Bar - just to name afew. We offer at discounted prices Uzi knives, Swiss Army knives and many more, so finding the rightblade for your personal collection couldn't be easier. In addition to our growing inventory ofknives, SharpStuff4Guys.com's inventory includes tactical gear and militaria. So whether you'relooking a gift that will never be forgotten or adding to your own personal collection, you will beable to get what you need right here. Because we live in such turbulent times, we have packed ourinventory with an amazing selection of self-defense and security products that can protect youif the need ever arises. Whether you're looking for a Mace pepper spray gun, a crime-stopping,4-million-volt stun gun or a motion-detecting alarm, you'll find things that law enforcement personneland self-defense instructors use and recommend right here at SharpStuff4Guys.com. We'd like to inviteyou to browse our ever growing selection of unique knives, discount tactical gear and everything elsewe offer. At SharpStuff4Guys.com, we are quite proud of our selection, and hope you enjoy exploringour website for whatever it is you need.</p>
            <!-- End super paragraph -->
        </div><!-- #description -->

        <div id="bottom-menu">
            <ul>
                <li><a href=" / ">Home</a></li>
                <li><a href=" / ">Shipping</a></li>
                <li><a href=" / ">Returns</a></li>
                <li><a href=" / ">Back Orders</a></li>
                <li><a href=" / ">Privacy Policy</a></li>
                <li><a href=" / ">Contact Us</a></li>
            </ul>
        </div><!-- #bottom-menu -->

        <div id="footer">
            <p><span>&copy; 2016</span> SharpStuff4Guys.com</p>
        </div>

    </div><!-- contentWrapper -->
</body>
</html>

Code (markup):

------

Search is generally done server side, and on the front end you'll just be styling something like:


<form>
  <input type="search">
  <input type="submit">
</form>

Code (markup):

Depending on what platform you're working with.

Last edited: Jul 5, 2016

KewL, Jul 5, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#7

Sorry I've not been around to answer, heading to bed now but I'll leave this tab open and go in depth into it later. For now, for your heading research "gilder-levin image replacement" -- you have a number of unnecessary DIV, some DIV that should probably be H3 (what @KewL did), but if those DIV were h3 then they shouldn't be in a LI (redundant semantics!), a massive mess of endless text that should be broken into multiple paragraphs... and that's just the markup.

On the CSS side you seem to be throwing width:100% at EVERYTHING for no good reason -- particularly when that's the default behavior of unfloated DIV. You also seem to be declaring fixed height on a number of things (like the garbage 53px on #shipping-bar) that is guaranteed to break when the screen gets narrow. Good rule of thumb, unless it's an IMG or image replacement, pixel heights == EPIC FAIL.

... and WORSE than that is the fixed pixel width of the design, which is a giant middle finger to usability and just makes taking the layout responsive even harder to do. Again, for flow/outer width design ELASTIC, aka in EM's, not fixed/pixels. Hence:
   width: 1148px;
Code (markup):
Is a giant middle finger to accessible design and should NEVER be done. ESPECIALLY since it seems like your content is EM metric fonts, which is why the layout falls apart miserably here in Vivaldi and Firefox. (since I'm set to 20px = 1EM from the start, not the 16px default)

Also by putting your comments after the closing tags, you could trip rendering bugs in legacy IE and like every other blasted revision of FF as they could end up between sibling level elements, hence why I put them BEFORE the closure in my code. THIS:
</div>
Code (markup):
Is asking for it to break in certain browsers... hence why I do this instead:
</div>
Code (markup):
I'll dig deeper later once I'm feeling better. Got a nasty case of the summertime blahs... I'm miserable when it gets over 65F, I'm allergic to the sun, and it's a clear sunny 102F day out there with 80% relative humidity... so *** the cursed glowing orb.

deathshadow, Jul 6, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#8

Gentlemen . . . thank you for your advice. Believe it or not I thought I was starting out pretty good - did all my html first and then started styling. I think that's where things started to go wrong.

This has been a bad week for me - a few things going on at home that kept me pretty distracted and then wave after wave of massive brain farts and I think that can explain some of my coding problems. The other part is that I think I am WAY in over my head with this project. Luckily, the drama at home should be over with now and maybe I can get back on track to get this site up and working so I can kick off this new business venture.

I am sure going to hate for ya'll to look at the mess I have made of my 'sale' page for this site. I really struggled to get it to look pretty close to what I wanted, but I will guarantee you that the code is a complete train wreck. If you want a good laugh (I've already had a good cry over it), take a look at sharpstuff4guys.com/page2.php and you will see just how bad a train wreck can look.

Kewl, I will look over all of your suggestions. I have made some of the changes and they sure were noob mistakes. LOL

Jason, I feel for ya man. Pushing 90 here with humidity sky high and it sure makes getting around for me a real bitch. Sure hope you get over your case of summertime blahs and cheer up a bit. LOL

Again, thanks so much for all your advice. I do appreciate it.

VanceVP, Jul 6, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#9

Ok . . . here is an update.

I did some more work on my newest train wreck and I don't think it is as bad a wreck as it was (if you didn't see it before I made the changes, you missed one hell of a laugh).

I got the page to look the way I wanted, but I have no clue as to how to make it completely responsive. About half of it seems to be responsive while the other half don't. I think that's about the same situation on the main (index.php) page.

Any suggestions would be greatly appreciated . . .

VanceVP, Jul 8, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#10

Uhm... drive-by post as I'm out the door in 20, but...
  <li>
                    <a href=" / ">
                    <img src="/images/copper_knife.jpg" alt="CopperSpring Assist Knife" />
                        <h3>
                            "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                        </h3>
                        <h5>
                            Retail Price: $26.49
                        </h5>
                        <h4>
                            Your Price $17.92
                        </h4>
                    </a>
                </li>
Code (markup):
No, no... for **** sake NO! -- a heading indicates the start of a section of content -- specifically the start of a subsection of what's before it. As such if it means the start of a subsection using LI (staying it's a list-item, a type of section) is redundant. An H5 after a H3 makes no sense since there's no in-between H4 for it to be the start of a subsection OF, and none of your "sections" actually have CONTENT. I'd move the IMG inside or after the H3 (use positioning or flex to swap them back around visually) so the first thing is the H3 (start of section), convert the other headings to ... well... CONTENT. If anything a DL might be appropriate for those since you have item/value pairs. (it's a bit of mis-use of the actual meaning of term and definition, but not grossly so and it's common practice)

For the H1/span, use a non-transparent image, that way the text doesn't show through -- THOUGH, given that image, if you have the font that was done in I wouldn't even be using IMG, I'd style the text.

You also haven't needed to say the year on copyright since 2004 in most countries, and you should say copyright WHAT / TO WHOM which is why that space between it and the site name is wasteful. I'd also lose the ".com" you have all over the damned place since if you own the .com, people will assume that. That's a bit of a "It's a website, OF COURSE it's .com!"

Oh, and in your CSS, lose the rounded corners if you aren't going to round the content, makes the corner-clip look funny. Also, the serif fonts on screen media are accessibility rubbish. Serif is for print, sans is for screen! Say it with me: "SERIF IS FOR PRINT, SANS IS FOR SCREEN!".

deathshadow, Jul 9, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#11

Actually, I took a deeper look, LOSE the DIV around the h1, there's no need for it, and change the span to be the height of the image, NOT "auto". I thought you had an alpha transparent png, turns out you're applying it twice for Christmas only knows what.

deathshadow, Jul 9, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#12

Alrighty . . . aside from the fact that I am no designer, the headings you indicated above have been changed. The #heading and h1 problem has been squared away and appears to be working the way it is suppose to. I have removed the rounded corners because I have no clue as to how to get just the top 2 corners to round. I also changed the footer.

Now what I apparently am not understanding is why the #sidebar and #products are not resizing like they should. I have done away with all the fixed measurements and since I lack the experience, I have no clue was to what I am doing wrong. I am having the same problem with each individual product page.

Could it be that, because the #sidebar is on the left, it IS doing what it is suppose to do? And if it is, what do I need to do to get the #sidebar and the #categories to collapse down like #navlist does on amazingbarbeque dot com? Is that even possible?

What did I do wrong on the index page and individual product pages that the #products does not resize like it should?

I would also appreciate any suggestions that would give this website the best chance at succeeding?

Thanks in advance . . .

VanceVP, Jul 11, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#13

To be honest, I would like to buy the taser but here in Australia it is illegal to posses pretty much any weapons like that. Only the criminals, police and security have weapons here. Although we are not trigger happy.

You can set a border-radius to round your site container, which will round the top borders and set the border-bottom:hidden;

Just an idea, this is what I have done to achieve that top round border without altering the bottom

This is what I would do:

.box {
border: solid .1em #000;
border-bottom: hidden;
border-radius: 2em;
}

I don't know, scold me if it's wrong.

Regards,
Chris

Web_Dev_Chris, Jul 11, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#14

Actually I was wrong.

border-top-right-radius:2em;
border-top-left-radius:2em;

Web_Dev_Chris, Jul 11, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#15

Or, just do
border-radius: 2em 2em 0 0; (you can assign border-radius properties just as you can any other 4 side property)

PoPSiCLe, Jul 12, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#16

Okay gents, I tried both methods and for some reason it rounded the top left corner but left the top right square.

I think for now I am going to just leave the corners square while I try to figure out why only part of the site resizes and the #products portion does not. I still have lots of work to do on getting this site running so right now I don't have the time to fiddle with round corners.

Thanks for the advice and if you got any suggestions as to why the #products portion of my site don't resize I would really appreciate hearing them.

Many thanks . . .

VanceVP, Jul 13, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#17

The reason only one corner rounds is because the other side of the square is probably outside viewable area.

PoPSiCLe, Jul 13, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#18

PoPSiCLe said: ↑

The reason only one corner rounds is because the other side of the square is probably outside viewable area.
Click to expand...

Sorry PoPSiCle, but I am not following this. I realize that I am not the sharpest knife in the drawer, but I don't understand how one corner can be outside the viewable area if it shows without a rounded corner as well as the shadowing.

VanceVP, Jul 13, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#19

The point is: if you use the border-radius: 2em 2em 0 0; on the container, both corners will round. If one corner is NOT round, it's either overflowing (and hidden), or you have some content inside that does NOT have a rounded corner and a background color, which overlaps the corner. I made a jsfiddle showing it: https://jsfiddle.net/n55oc6jL/

PoPSiCLe, Jul 13, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#20

Okay . . . what you are telling me makes sense. The #contentWrapper is styled with:
-webkit-border-radius:
1em;
border-radius:
1em;

as per deathshadow's previous examples for me. This seems to have rounded all four corner of #contentWrapper. So based on your advice/suggestions, I tried styling h1 with:
-webkit-border-radius:
1em 2em 0 0;
border-radius:
1em 2em 0 0;

and that seemed to do the trick. So I am assuming that since I am using a header image, the image needed to be styled to round the tops of both corners.

Thanks for your help. Another hurdle overcome.

VanceVP, Jul 13, 2016 IP

Log in or Sign up

deathshadow . . . Another Attempt From Scratch . . . Help Pls

VanceVP Member

PoPSiCLe Illustrious Member

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

VanceVP Member

KewL Well-Known Member

deathshadow Acclaimed Member

VanceVP Member

VanceVP Member

deathshadow Acclaimed Member

deathshadow Acclaimed Member

VanceVP Member

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

PoPSiCLe Illustrious Member

VanceVP Member

PoPSiCLe Illustrious Member

VanceVP Member

PoPSiCLe Illustrious Member

VanceVP Member

Useful Searches