1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to increase area for logo

Discussion in 'CSS' started by WebDev Solutions, Jun 23, 2015.

  1. #1
    Hi,

    We want to place the company logo to the top left corner, but at present the area is far too small for us to place it (it only displays perhaps 30% of the logo before cutting it off).

    Can somebody guide me to what I need to edit?

    Many thanks,
    WebDev
     
    Last edited: Jun 23, 2015
    WebDev Solutions, Jun 23, 2015 IP
  2. 2WDH.com

    2WDH.com Active Member

    Messages:
    143
    Likes Received:
    3
    Best Answers:
    5
    Trophy Points:
    68
    #2
    Hi.

    Can you show how exactly you are trying to place the logo now?
     
    2WDH.com, Jun 23, 2015 IP
  3. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #3
    Thanks for the response. Please see the attachment, I've drawn up a rough mockup. (As you can see its almost like we need to push the purple colour in the header down further to accomodate the logo.

    roughexample.gif
     
    WebDev Solutions, Jun 23, 2015 IP
  4. 2WDH.com

    2WDH.com Active Member

    Messages:
    143
    Likes Received:
    3
    Best Answers:
    5
    Trophy Points:
    68
    #4
    Thanks for the screenshot, but I meant the code. Sorry for the confusion.
    Can you upload a page with logo to your site and give me the link to it?
     
    2WDH.com, Jun 23, 2015 IP
  5. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #5
    We are placing the logo in the code below, in index.html
    
    <!-- Logo -->
                    <div id="logo">
                        <h1>Logo Here</h1>
                    </div>
    
    Code (markup):
    Our style.css file is as follows;

    
    /*
        Autonomy by TEMPLATED
        templated.co @templatedco
        Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
    */
    
    /*********************************************************************************/
    /* Basic                                                                         */
    /*********************************************************************************/
    
        body {
            margin: 0px;
            padding: 0px;
            background: #654D62;
            font-family: 'Raleway', sans-serif;
            font-size: 11pt;
            color: #000000;
        }
    
        h1, h2, h3 {
            margin: 0px;
            padding: 0px;
        }
    
        h2 {
            padding: 0px 0px 20px 0px;
            letter-spacing: -1px;
            font-size: 1.8em;
        }
    
        p, ol, ul {
            margin-top: 0px;
            line-height: 160%;
        }
    
        p {
            margin-bottom: 2em;
            line-height: 160%;
        }
    
    
        strong {
            font-weight: 700;
        }
    
        a {
            color: #A2A2A2;
        }
    
        a:hover {
            text-decoration: none;
        }
    
            /* Images */
    
                .image
                {
                    display: inline-block;
                }
               
                    .image img
                    {
                        display: block;
                        width: 100%;
                    }
    
                    .image.featured
                    {
                        display: block;
                        width: 100%;
                        margin: 0 0 2em 0;
                    }
                   
                    .image.full
                    {
                        display: block;
                        width: 100%;
                        margin-bottom: 2em;
                    }
                   
                    .image.left
                    {
                        float: left;
                        margin: 0 2em 2em 0;
                    }
                   
                    .image.centered
                    {
                        display: block;
                        margin: 0 0 2em 0;
                    }
    
                        .image.centered img
                        {
                            margin: 0 auto;
                            width: auto;
                        }
    
            header
            {
                margin-bottom: 1em;
            }
               
                header h2
                {
                    font-weight: 600;
                }
           
                header .byline
                {
                    display: block;
                    margin: 0.5em 0 0 0;
                    padding: 0 0 0.5em 0;
                }
    
            ul.style
            {
            }
           
            ul.style li
            {
                padding: 0.55em 0em;
            }
           
            ul.style li:first-child
            {
            }
           
            ul.style a
            {
                color: #FFFFFF !important;
            }
    
            ul.style1
            {
            }
           
            ul.style1 li
            {
                padding: 0.55em 0em;
            }
           
            ul.style1 li:first-child
            {
            }
           
            ul.style1 a
            {
                color: #FFFFFF !important;
            }
    
            ul.style1 img
            {
                float: left;
                margin-right: 1em;
            }
       
    /*********************************************************************************/
    /* Header                                                                        */
    /*********************************************************************************/
    
        #header
        {
            position: relative;
        }
    
            #header .container
            {
                position: relative;
                padding: 6em 0em;
            }
    
    /*********************************************************************************/
    /* Logo                                                                          */
    /*********************************************************************************/
    
        #logo
        {
            position: absolute;
            left: 0em;
            top: 4.5em;
        }
       
            #logo h1
            {
                color: #FFF;
            }
       
            #logo a
            {
                display: block;
                text-decoration: none;
                font-size: 2.8em;
                font-weight: 600;
                color: #FFF;
            }
    
    /*********************************************************************************/
    /* Nav                                                                           */
    /*********************************************************************************/
    
        #nav
        {
            position: absolute;
            right: 0em;
            top: 5em;
        }
    
            #nav > ul > li
            {
                float: left;
            }
           
                #nav > ul > li:last-child
                {
                    padding-right: 0;
                }
    
                #nav > ul > li > a,
                #nav > ul > li > span
                {
                    display: block;
                    margin-left: 0.7em;
                    padding: 0.80em 1.2em;
                    letter-spacing: 0.06em;
                    text-decoration: none;
                    font-size: 1em;
                    outline: 0;
                    color: #FFF;
                }
    
                #nav li.active a
                {
                    background: #56c9d6;
                    border-radius: 5px;
                    color: #FFF;
                }
    
                #nav > ul > li > ul
                {
                    display: none;
                }
    
    /*********************************************************************************/
    /* Banner                                                                        */
    /*********************************************************************************/
    
        #banner
        {
            position: relative;
            background: #333 url(../images/banner.jpg) no-repeat center;
            background-size: cover;
        }
       
        .homepage #banner
        {
        }
    
    /*********************************************************************************/
    /* Main                                                                          */
    /*********************************************************************************/
    
        #main
        {
            position: relative;
            padding: 6em 0em;
            background: #44253B;
            color: #FFFFFF;
        }
       
        #main header h2
        {
            color: #ffffff;
        }
       
        #main a
        {
            color: #44253B;
        }
    
    /*********************************************************************************/
    /* Featured                                                                      */
    /*********************************************************************************/
    
        #featured
        {
            position: relative;
            padding: 6em 0em 4em 0em;
            background: #FFF;
        }
    
    /*********************************************************************************/
    /* Marketing                                                                     */
    /*********************************************************************************/
    
        #marketing
        {
            position: relative;
            padding: 6em 0em;
            background: #654D62;
            color: #FFFFFF;
        }
       
        #marketing header h2
        {
            color: #654D62;
        }
    
    /*********************************************************************************/
    /* Copyright                                                                     */
    /*********************************************************************************/
       
        #copyright
        {
            position: relative;
            padding: 3em 0em;
            text-align: center;
            color: #FFFFFF;
        }
       
        #copyright .container
        {
        }
       
        #copyright a
        {
            text-decoration: none;
            color: #FFFFFF !important;
        }       
    
    Code (markup):
     
    WebDev Solutions, Jun 23, 2015 IP
  6. 2WDH.com

    2WDH.com Active Member

    Messages:
    143
    Likes Received:
    3
    Best Answers:
    5
    Trophy Points:
    68
    #6
    I can't find the logo image code. Is it there?
     
    2WDH.com, Jun 23, 2015 IP
  7. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #7
    We place the logo in index.html. (see the first code). The second set of code is our css... The issue I believe is in the header height in the CSS.
     
    WebDev Solutions, Jun 23, 2015 IP
  8. 2WDH.com

    2WDH.com Active Member

    Messages:
    143
    Likes Received:
    3
    Best Answers:
    5
    Trophy Points:
    68
    #8
    Thank you for the update. Can you please post the code with the placed logo image?
     
    2WDH.com, Jun 23, 2015 IP
  9. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #9
    I'm not sure how that helps you?

    
    <!-- Logo -->
    <div id="logo">
    <h1><img src="IMG LINK GOES HERE"></h1>
    </div>
    Code (markup):
    I don't believe it's this part of the code that needs updating? Rather the CSS...
     
    WebDev Solutions, Jun 23, 2015 IP
  10. Phil S

    Phil S Member

    Messages:
    60
    Likes Received:
    18
    Best Answers:
    4
    Trophy Points:
    35
    #10
    Oh my... Let's start from the top. The code you posted above is gibberish, but so is your whole markup.
    You do NOT need a DIV to wrap your H1 in. Honestly, do you really need that to say <!-- Logo --> when you already have a proper element with an ID "logo"?
    All you'd probably need is this:

    <h1>
         Karen Parke <br>
         <small>Relationship &amp; Sex Therapist</small>
    </h1>
    Code (markup):
    You'd probably want to apply an image replacement method of some sort (see Gilder-Levin, Leon Dwyer, Phark, Lindsay, Fahrner, Malarkey, etc). Some of the aforementioned techniques are either outdated or generally just bad, defeating the whole point of having an image replacement (like -9999px text indent or 1px font size garbage), so think well before deploying one of those. I'd probably go with Gilder/Levin as it actually displays text. The only drawback is an empty bogus span, but that's still better than setting text to display:none. If a bogus span is too much to take for you, you might consider a pseudo-class to show the image, which I personally wouldn't recommend.

    If all those pointless DIV don't make your alarm go off, that empty SPAN won't either.
    Seriously, what's with all those DIV, SECTION and HEADER abuse? Take a look at this:
    <nav id="nav">
    ...
    <ul class="style">
    
    Code (markup):
    . Don't you smell something fishy there?
    P tags around your images don't help either.

    Don't even get me started on fixed metric webfonts. Your EM values are pretty much pointless as you give your BODY font-size:11pt. And for god's sake WHY do you need that many?? 9 additional handshakes for ONE (ugly) webfont... Why??

    And lastly I really don't see why you'd want jQuery there when you don't even make use of it. Tell you what, do yourself a favor and ditch that markup while it's still fresh.
    P. S. : those SEO people you hired did an amazing job. How do they even sleep at night?!
     
    Phil S, Jun 23, 2015 IP
  11. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #11
    If somebody is willing to assist with the issue we've highlighted, we'd appreciate it.

    Many thanks,
    WebDev
     
    WebDev Solutions, Jun 23, 2015 IP
  12. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #12
    Three things are obvious to me:
    • You did not validate or you would have seen the typo caused by the > missing on a tag. that is a sign of incometance on the part of the developer. You don`t even need the validator to find it. View source with firefox and the red jumps right out in front of you.
    • The 'developer' who did the rdoes not have a clue how to code a page; it is nothing but tag soup; with semantics from another planet
    • The person who did the SEO has a head full of dead brain cells. You might as well put up a notice "Google please do not send me any traffic". There is virtually nothing of value above the fold and you are worrying about screwing around with a bauble that won't fit the way you want it too.
    I suggest you hire someone who is actually a professional developer to do the site, because from what I can see there is very little hope that the person who did that actually has the skillset required to implement suggestions that would fix it.
     
    COBOLdinosaur, Jun 23, 2015 IP
  13. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #13
    Hi,

    Thanks for the responses. Our website is not yet live, work only begun 24 hours. The point of this thread isn't to review anything other than the logo issue, if somebody could help us. Thank you. :)
     
    WebDev Solutions, Jun 23, 2015 IP
  14. 2WDH.com

    2WDH.com Active Member

    Messages:
    143
    Likes Received:
    3
    Best Answers:
    5
    Trophy Points:
    68
    #14
    As a quick/temporary solution for now in your case you can do the following (in both style-desktop.css and style.css):
    1. Remove position: absolute style in #logo
    2. Change padding to "1em 0" in #header .container
     
    2WDH.com, Jun 23, 2015 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Like most off the shelf templates, that one is a disaster that I'd REALLY suggest rewriting from scratch -- You're encountering the biggest problem with using them; if you are qualified to make changes to one, you should be qualified to build your own. If you can't make changes, you aren't even qualified to choose one to use as you cannot recognize what's wrong with it.

    ... and there's SO MUCH wrong with that -- like the endless pointless DIV for nothing, header around headings for nothing, DIV around headings for nothing, SECTION around single elements, (admittedly IMHO all the allegedly semantic HTML 5 tags of SECTION, HEADER, FOOTER, ASIDE and NAV are pointless redundancies used to justify code bloat practices or sweep developer ineptitude under the rug), no media targets, overstuffed keywords meta missing that's it's called keyWORDS not keyphrases or keysentences, webfonts of dubious legibility, illegible fixed metric fonts, IE specific scripttardery and stylesheet asshattery, etc, etc... I mean hell, did you really even mean to content cloak those H2?

    Hence it being a 1.5 megabyte monstrosity in 14 files doing the job of maybe 96k in 8 files.

    You've got far bigger issues than adding one image; to the point I'd suggest tossing that mess and starting over.

    So... first step, let's drag that markup kicking and screaming out of the worst of 1990's practices mated to HTML 5 stupidity. Given what's being done on that page it is EXTREMELY unlikely that needs to be much more than:

    <!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8">
    
    <meta
    	name="viewport"
    	content="width=device-width, height=device-height, initial-scale=1"
    >
    
    <meta
    	name="description"
    	content="Offering confidential counselling service for couples or individuals in Scarborough."
    >
    
    <meta
    	name="keywords"
    	content="therapy,scarborough,therapist,couples,sex, relationship therapist scarborough"
    >
    
    <link
    	rel="stylesheet"
    	type="text/css"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    
    <title>
    	Karen Parke - Relationship &amp; Sex Therapist
    </title>
    
    </head><body>
    
    <div id="top"><div class="widthWrapper">
    	
    	<h1>
    		<a href="#">
    			Karen Parke
    			<span>-</span>
    			<small>Relationship &amp; Sex Therapist</small>
    		</a>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="index.html" class="current">Home</a></li>
    		<li><a href="about-me.html">About Me</a></li>
    		<li><a href="relationship-therapy.html">Relationship Therapy</a></li>
    		<li><a href="sex-therapy.html">Sex Therapy</a></li>
    		<li><a href="faq.html">FAQ's</a></li>
    		<li><a href="fees.html">Fees</a></li>
    		<li><a href="contact.html">Contact</a></li>
    	</ul>
    <!-- .widthWrapper, #top --></div></div>
    
    <div id="pointlessFillerImages">
    	<hr>
    	<!-- not even sure why these would have anchors -->
    	<a href="#" title="SAY WHERE THIS LINK GOES!">
    		<img src="images/coupleinlove.jpg" alt="DESCRIBE THIS!">
    	</a>			
    	<a href="#" title="SAY WHERE THIS LINK GOES!">
    		<img src="images/gaycouple.jpg" alt="DESCRIBE THIS!">
    	</a>			
    	<a href="#" title="SAY WHERE THIS LINK GOES!">
    		<img src="images/oldcouple.jpg" alt="DESCRIBE THIS!">
    	</a>			
    	<a href="#" title="SAY WHERE THIS LINK GOES!">
    		<img src="images/hummingbird.png" alt="DESCRIBE THIS!">
    	</a>
    <!-- .pointlessFillerImages --></div>
    		
    <div id="content"><div class="widthWrapper">
    
    	<div class="subSection">
    		<h2>Praesent eleifend</h2>
    		<p>
    			Hello and welcome to my website.
    		</p><p>
    			Here you will find information about me and the services that I offer to couples and individuals. Please browse through the different headings and hopefully any questions you may have will be answered within them. If not, please don't hesitate to email me with your query and I will do my best to answer it.
    		</p><p>
    			Seeing as though you are viewing this site I am guessing you are thinking about whether you may need relationship therapy, sex therapy or both. Deciding whether you think therapy would be useful to you or not can be a confusing decision sometimes, so I do offer a half hour initial assessment free of charge.
    		</p>
    	<!-- .subSection --></div>
    	
    	<div class="subSection">
    		<h2>Maecenas lectus</h2>
    		<p>
    			This gives you the chance to meet me and to see if we could work together effectively. It also lets me hear what is going on for you at the moment and start to assess whether my services would be suitable for you too. If you live out of the Scarborough area the initial contact can be by phone if more convenient.
    		<p><p>
    			I offer a confidential, safe and understanding space to explore and discuss what is happening for you either as an individual or as a couple. Talking and exploring the issues can help you make sense of what you are feeling and thinking. We can then work with any underlying issues and I can support you in your changes for your future.
    		</p>
    	<!-- .subSection --></div>
    	
    	<div class="subSectionFinal">
    		<h2>Personable</h2>
    		<a href="#" class="plate">
    			<img src="images/pics12.png" alt="DESCRIBE THIS!">
    		</a>
    	<!-- .subSectionFinal --></div>
    	
    <!-- .widthWrapper, #content --></div></div>
    
    <div id="information"><div class="widthWrapper">
    
    	<div>
    		<h2>Karen Parke PG Dip , BA ( Hons)</h2>
    		Registered Member MBACP<br>
    		General Member COSRT<br>
    		Email- karenparke69@gmail.com<br>
    		<img
    			src="images/accreditations.jpg"
    			alt="Qualifications"
    		>
    	</div>
    	
    	<h2>Quick Links</h2>
    	<ul>
    		<li><a href="#">About Me</a></li>
    		<li><a href="#">Relationship Therapy</a></li>
    		<li><a href="#">Sex Therapy</a></li>
    		<li><a href="#">FAQ's</a></li>
    		<li><a href="#">Fees</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
    	
    <!-- .widthWrapper, #information --></div></div>
    
    <div id="footer">
    	<hr>
    	&copy; Karen Parke &bull;
    	Relationship and Sexual Therapist &bull;
    	Registered Member MBACP
    	<!-- most clients prefer you NOT pimp yourself here -->
    <!-- #footer --></div>
    	
    </body></html>
    Code (markup):
    Now, that logo you have on the page already (the one I assume you want to mimic) is a massive alpha transparency -- something I HIGHLY advise AGAINST doing on a website. Render it to the size you want to use it atop the background you want 1) so things like image replacement tech can be used so images off it gracefully degrades as the H1 content, 2) it consumes less bandwidth as you can palettize it since it's effectively monochromatic, and 3) browser scaling of line-art always looks like ass. Same goes for those pointless images four-across up top -- you want them 160x100 make them that size to save bandwidth and not look like arse when the browser scaler gets hold of them.

    Gimme a few minutes, I'll remaster that logo, tweak the layout and provide a working CSS for how I'd be approaching the code for that page. Basically I'll give you a full rewrite of that template that should be far easier to work with, a rescaled version of that logo for the header, then I'll write up a code explanation that you should be able to learn from. (this will probably be spread over three more posts)
     
    Last edited: Jun 23, 2015
    deathshadow, Jun 23, 2015 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    Ok, took me a bit longer than planned as I ended up dicking too much with the image. That image does NOT scale to an 'acceptable' size for a logo thanks to the ridiculously small sub-text, so I hand redrew it for maximum legibility hammering it into pixel boundaries.

    This is what I came up with as a rewrite of that homepage:
    http://www.cutcodedown.com/for_others/webDevSolutions/parke/template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/webDevSolutions/parke/

    ... is unlocked for easy access to the bits and pieces. Ended up a hair larger than planned (105k) but still a tenth what you were working with. No scripttardery, goofy tricks or HTML-5tard bull needed. (though I deployed it as 5 "just in case" you end up having the two or three things being shoved down our throats on the page like AUDIO or VIDEO).

    I took some stylistic liberties since there were some accessibility issues; the webfont of questionable legibility, the white on blue "current" link being invisible, and so forth. I also made the headings show properly since if you are going to have them in the markup, show them or search engines are going to slap you down. You don't want that text, remove it from the markup. I got rid of the larger copy of the logo as a complete waste of space better used for showing actual content, and redid things to be elastic, semi-fluid and responsive.

    One of the biggest changes is making the images used on the page actually the size they are used instead of trying to have the browser handle it -- as again the larger filesizes aren't worth it, and browsers rescale images like sweetly retarded rhesis monkeys on crack. Likewise I axed the alpha transparency.

    Alpha is GREAT for working with it in Photoshop, but in terms of bandwidth and ease of use in layouts they are a nightmare best avoided, PARTICULARLY if you give a flying purple fish about graceful degradation and want to use image replacement techniques like Gilder-Levin.

    Resize the window to see the responsive layout changes... try looking at the page images off. Up the default font size in the browser -- this version handles them all flawlessly.

    It also has a little code in place to at least TRY and make the layout useful all the way back to IE 5.x -- it won't be perfect on anything less than IE9, but it should remain usable. I wouldn't waste time, code or bandwidth trying to make it perfect in anything earlier than that -- but that's no reason to not at least make the page USEFUL as that too is one of the very reasons HTML and CSS even exists!

    I'm out the door for the evening, but either late tonight or tomorrow morning I'll belt out the HTML and CSS breakdowns to explain the how/what/why of the layout.

    Hoping this helps, I know it might seem a bit harsh to pitch it and start over, but that mess you were trying to work from? NEEDED IT BADLY.
     
    Last edited: Jun 23, 2015
    deathshadow, Jun 23, 2015 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    Alright, the freak is back... Let's break down this markup for you.

    Whenever I start working on a page, I concentrate on writing JUST the semantic markup FIRST... before I even THINK about layout. HTML exists to say what things are so the user-agent (a term that includes more than just browsers) can best determine how to show it within the capabilities of that device. As such HTML tags have a meaning of what something is, or would be in a professionally written document. The latter part is why many tags people THINK are presentational like <b>, <i> and <hr> aren't. They serve a grammatical purpose in professional writing that's separate from what the 'typography minded' folks think.

    In the case of this page, I gutted it down to this FIRST:
    http://www.cutcodedown.com/for_others/webDevSolutions/parke/semantic.txt

    Structurally not that different from what you had, just cleaned up and removing pointless redundancies. The numbered headings mark off sections, so you don't need <section>. They ARE headings, so you dont need <header> tags around them. They SHOULD be used for navigation by user agents (and are in UA's like JAWS) meaning you don't need that stupid <nav> tag. The images are complete thoughts unto themselves so there's no reason to waste any extra markup around them other them during the semantic markup point. Again, <hr> were inserted to indicate changes in topics / starts of subsections that lack numbered headings.

    I also switched to bullets in the footer becuase, well... I just prefer them to hypens on a website.

    The whole purpose of this is to have a working, organized appearance when CSS and visual style is unavailable, inapplicable, or undesired by the user. Remember, not all website users are sighted; search engines don't even have eyeballs, and screen readers sure as hell don't care if something is left or right aligned. NON screen layout semantics should ALWAYS be your first stopping point on building a website or content for one. Far too many "designers" waste time dicking around with appearance before they have any of this, and the accessibility, searchability and usability of their very pretty but ultimately useless designs suffer as a result.

    Moving on to the production version (here's a .txt link so you can actually read it online)
    http://www.cutcodedown.com/for_others/webDevSolutions/parke/template.txt

    tags like DIV and SPAN are added as hooks for style without saying what that style is so as to avoid changing the existing semantic meanings of the page. They should only be added once you've expended what the existing tags can do, or to group together tags for similar styling without slapping classes on everything. This is a detail those pesky new HTML 5 tags and their fans seem to fail to grasp.

    At the top of the full production markup you'll see I put the doctype, <html>, <head> and charset <meta> all on the same line. This isn't done so much to save characters as it is a reminder that NOTHING should go before or in-between these tags. Even the charset META should be as early as possible in the document just in case the HTTP headers fail to provide that information. (also handy in local testing and validation without a URI). In that same way I put </head><body> and </body></html> together on the same line as another reminder that NOTHING should EVER get pasted in-between those elements.

    Which laughably is FAR too common a mistake amongst beginners and experts alike.

    You'll notice when it comes to attributes, particularly with long values and in the <head> I like to format them one attribute per line. It's just easier to read, easier to edit, and easier to copy/past. I'll generally suck down the two to four extra bytes per line for code clarity -- the laugh being that even with this type of formatting my code is generally anywhere from two-thirds to a tenth what most people use on pages.

    meta[viewport] -- This basically tells mobile browser we know what the **** we are doing, and not to second guess us by defaulting to a increased zoom or lying about their width and height... or at least lie to us LESS about it. (Retina iOS devices still pack us full of sand on this, but do so in a good way as opposed to earlier devices).

    meta[description] -- Your description was pretty good, I just removed a little redundancy at the beginning.

    meta[keywords] -- The keywords meta however was filled with redundancies. It's called keyWORDS... not keyphrases, not keysentences, but keyWORDS -- it should be 7 or 8 single words (the exception being proper names!) that exist inside BODY (I would REALLY get "scarborough" into the text somewhere, possibly provide an ADDRESS for said client on the page?) totalling 127 character or less (some people say 95 or less!) -- you vary from that and some search engines (Bing, Google) will just ignore it altogether, whilst others (Baidu, DuckDuckGo) will actually penalize you for it!

    link rel="stylesheet" -- a PROPER stylesheet link should have a MEDIA attribute on it to say what the stylesheet is for. Simple fact is screen media layout rarely makes sense on print, much less other devices like aural. I use the "screen,projection,tv" stack as screen is what most people are using, but some kiosks and browsers in full-screen operation report themselves as projection, while there are STILL some "tv" devices out there in use. It's just the safest declaration.

    The title tag shouldn't need much explanation. I removed the "scarborough" part as it was just keyword stuffing and made it longer than is usually useful. Remember <title> is for what's displayed in the window title area, tab, taskbar, or as the default text link to the site on search engines. That's what it's FOR.

    Close out head and open up body, and we have:

    #top -- I called it this so that if later on you wanted to add a "back to top" link on really long pages it would simply be <a href="#top">back to top</a>. It's just a good name to use for that.

    .widthWrapper -- this class is re-used across the page for the simple purpose of constraining the width inside a parent area. Your template had a more vague "container" name on basically the same element -- I like to say what it's there to do. This doesn't really break the "no presentation in the markup" rule as it's not saying what that width IS.

    h1 -- the heading under which everythign else on the page is a subsection, hence the logical candidate for this is the site title. Usually it's just good practice to make the logo a second link back to home. The span aroudn the hyphen will serve two purposes -- first to let us hide the hyphen when CSS is enabled (since again we code for non-screen appearance FIRST), second is so that we can use it as a "image sandbag" to place the image over the text hiding it. We'll get into that more in the CSS, but for now placing the image as a background over the text means that images off our H1 text (which it's important to have REAL text there) will be shown. At narrow screen widths when we go responsive narrower than the image size we may want to get rid of the image/logo as well, and this lets us do so.

    The small tag inside there provides the semantic meaning of a tagline, which is to say "de-emphasis". There is no real deemphasis tag, but grammatically when smaller text is inside a heading that's what it means, so small in this case is providing semantics, NOT presentation. (even if that default presentation conveys that meaning).

    ul#mainMenu -- the menu is so simple it doesn't really need any extra wrappers around it. Again, use up the UL BEFORE resorting to slapping extra tags around/next to it. I switched the class to the anchor for more direct targeting since styling LI cross browser is... a headache. (again, I'll cover that more in-depth in the CSS breakdown), and call it "current" since "active" can be a bit confusing, since there's a CSS psuedostate also called ":active" (which is supposed to be when it's clicked on, but some older browsers use for keyboard nav instead of :focus)

    Now, notice my closing comments. There's a bug in older versions of IE and FF where comments -- those things browsers are supposed to be ignoring -- can actually trip rendering bugs. (FF also for a while had the same problem with the SCRIPT tag!) If they end up between "sibling level" elements in the document, and positioning gets involved inside them you can have the entire content either dissapear, or be drawn twice slightly offset.

    Avoiding having opening comments and instead putting meaningful ID's, classes and tags on things means you don't need "<!-- begin content -->" type comments since herpaderp, whaddaya think <div id="content"> means? Closing comments are useful to know WHICH div are being closed, but since it's </div> you know it's being closed so why waste time saying "end". Moving the comment before the closing tag makes the close stand out more, but even better means it's impossible for it to be in-between sibling-level tags completely avoiding the possible bugs! I like to use CSS notation to say the class or ID being closed for further clarity.

    Moving on...

    #pointlessFillerImages -- wasn't sure what else to call these :D -- generally I'm not a fan of this sort of thing on websites, but these were fairly small (once optimized) so why not. I left the anchors in place though it's not clear what/why they'd link to anything since they seem more decoration than content... but the rest of the markup there? Yanked as pointless bloat. Since this is obviously a separate section of the page I put a HR at the start since there seems to be no desire for a numbered heading or it's text.

    People often screw up ALT and TITLE in terms of their function. Generally if you were to put TITLE on a IMG tag, you're doing something wrong... that's ALT's job. TITLE on a anchor however makes sense if it's conveying information (like where the link is going) that the text inside it does not. Since images aren't text, and the alt text should describe the image not the link, TITLE on an anchor makes perfect sense here... just be sure to fill those in with meaningful descriptions of where the link is going once you have a proper URI in the href.

    Just a side note -- something you'll see a LOT is a title that's identical to the content of the tag; that's a complete waste of code and ignorant halfwit bull, no matter how many people vomiting up templates for turdpress in complete ignorance of what HTML and CSS are may have deluded themselves into believing.

    The classless DIV is there to act like widthWrapper, but with different values that are "image friendly" -- all the text content of the page is goign to be measured in EM's so they dynamically/automatically fit the user's browser preferences, which while a great technique for accessibility isn't exactly image-friendly. Keeping this section that just has images under it's own rules is just common sense. As there's no reason to use other DIV here and it's unlikely any other element will need the same rules, there's no reason to waste a class on this.

    #content -- like all the major sections this too gets a widthwrapper, and is broken into two div as '.subSection'... the latter getting a 'even' class so we can target it in older browsers that can't do "nth-child". Apart from removing the POINTLESS <header> tags wrapping numbered headings, there's no major changes here apart from killing off the third column.

    Since you'd have the logo at the top (the whole reason you started the thread) there's no reason to show it twice, and that massive image area was making the ACTUAL content columns too narrow to be a comfortable read. Long flow text like paragraphs are "fun" that way as too wide? Hard to follow. Too narrow? Hard to follow. Bugger nabs you coming and going.

    #information -- another widthWrapped div, with two subsections. As these are major common subsections that you might want to index width a hash, I gave them descriptive ID's. I put a span in the first H2 for word-wrap control since having just (hons) go to a line by itself at small sizes looked kinda crappy. You really don't have a complete thought or grammatical paragraphs here so I wouldn't put <p> tags around anything. I also altered the ALT text on the IMG to be somewhat more meaningful.

    Apart from #contact and #quickLinks having ID's there shouldn't be much else needing explanation there.

    #footer -- since the text is narrower than the widthwrapper would be anyways and is centered, I didn't bother with the extra DIV. As before I use a HR to indicate a new subsection of the page, which is why we don't need or even want <footer> or <section> here. I broke the separate parts into SPAN so that on narrow displays they can be forced to single lines, and put the bullets inside span inside those span so they can be removed from being displayed when we do so.

    Close out </body></html> and that's the whole markup. No JS needed, only one stylesheet needed if all you are styling for is screen media. (I would make a print stylesheet if something like maps, addresses or more contact info were present)

    ... and that's basically the markup. Gimme a bit and I'll belt out a breakdown/explanation of the CSS.

    Laughably it takes me longer to explain the code than it did to make it! But as the saying goes, give a man a fish, he'll eat for a day. Teach a man to fish and he'll bore you to death on the Outdoor Life Channel.
     
    deathshadow, Jun 23, 2015 IP
    PoPSiCLe and malky66 like this.
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Ok, here we go with breaking down the CSS. Follow along with:
    http://www.cutcodedown.com/for_others/webDevSolutions/parke/screen.css

    EVERY CSS I write I start out with a reset. A reset is important since HTML does NOT actually define the default appearance of tags, nor should it. -- again the point of HTML is to let user-agents (browser) best determine how to convey the meanign or intent of the tag; with CSS being to customize that appearance. Since there is no hard defintion browsers prior to CSS had free license to make tags look however they like, and with early CSS not declaring the defaults for when CSS is applied, well -- it's been an uphill battle ever since.

    There are larger ones like Eric Meyer's "reset reloaded" -- but that's a fat blaoted wreck bordering on being a framework and changing values that have nothign to do with being a 'reset'. There are smaller ones like the so called universal "* { margin:0; padding:0 }" but that can wreak havoc trying to style things the same between FF, IE, and "everyone else". BOTH are responsible for a lot of developers scoffing at the idea of resets, or being outright hostile to them.

    The one I use is a sane middle-ground developed by Dan Schulz shortly before his passing. It hits JUST the elements we need to hit and nothing else... and at a quarter K in size anyone bitching about how "big" it is doesn't really have any business opening their yap on the subject. (Especially when said people badmouthing resets are often the same dipshits who then see nothing wrong with using 100k a pop frameworks -- that often INCLUDE their own resets?!?)

    hr -- the comment says it all. HR are present for their non-CSS semantics, NOT to draw lines on the screen, so I hide them for screen layout.

    @media + text-size-adjust -- much like the viewport meta, this tells certain mobile devices NOT to screw with the fonts and that we actually know what we are doing. I put them in a media query as I've not seen a mobile device that needed this reporting it's width as wider than 480px, but sending this to desktop Safari breaks zooming. Just to prove how jacktarded Apple developers are, it does not break Safari on iOS which... just..... wow.

    body -- I set a min-width basically for IE 7 and 8 so the layout doesn't break too badly since we won't be "responsive" there.

    I like to declare the font-size and line-height once here for the majority of content so the only places it has to be said again is the headings and maybe on tag clouds. I use the full condensed font property as it's nice to see EXACTLY what's set, and it's usually within spitting distance on length from just saying line-height and font-size properly.

    Some advice -- if you change the font-size, REDECLARE THE LINE-HEIGHT. You cannot trust it to inherit properly. There is a LIE being circulated that if you omit a metric and just for example say "line-height:1.5" without %, EM, PX, whatever that it will inherit... this is only true at default font size (16px/96dpi browser or OS setting) and then only consistently in Firefox and Chrome. Don't trust it.

    I use really tall line-heights (150% or more) as IMHO it aids in legibility over the typical 120% most people use. Beware that the default line-height isn't even standard in the CSS spec, as it just says "anywhere from 110% to 130%" -- MOST browsers seem to use 120% as the default, but Mozilla quite often seems to take that "110% to 130%" literally and randomly change it up even inside the same element unless you state it!

    I threw the text align on to center the subsections in IE5 just for laughs and to prove you can do stuff like fix legacy IE in little to no time whilst still keeping the stylesheet tiny -- in this case 5k for just the home page. From there it's just colours. I set the background for the header/middle/footer here so that we don't have to screw around with adding a min-height layout should the content be short. IF you do need that min-height / sticky footer type design, I'd suggest using flex-box for that on modern browsers and saying "Oh well" on IE9/earlier with that.

    .widthWrapper -- first I set float and margin wrapping for modern browsers and IE just so we don't have to fret about that later. The max-width is there to make it so that the layout can still shrink, without growing so wide the paragraphs of flow text are hard to follow. The auto margin centers .widthWrapper inside it's parents, and finally a text-align so things default left after the IE 5 text-align on body that's to make up for legacy IE not having "auto" as a margin concept.

    I know, crazy right, still supporting IE5? Hey, why not? It's not THAT hard on such a simple layout!

    * html .widthWrapper -- legacy IE can't do min or max width, so we'll use the selector hack to send them a fixed width; OH WELL. If you really care one could try using an expression there, but that can really suck on CPU power.

    #top -- simple padding to make it pretty.

    #top a -- turn off underscores, colour it, and set up some cute fade in/out animations.

    h1 -- setting this to position:relative means absolute positioned elements inside it treat 0:0 as the top-left of this element instead of the window corner. We'll need this to position the span and it's image over the text. I float it so we can ride the menu up next to it, fix the width so the text is centered inside it should images be blocked/unavailable/borked/whatever, and then some simple margins. I set the font-size as for some screwed up reason FF and older versions of IE will mysteriously treat the font-size of their first element as 1EM instead of the size from it's parent unless you explicity say this. REALLY stupid.

    h1 a -- block makes it auto-expand to fit the width, and the padding is there so that padding + line-height + line-height of the small tag will end up equalling the height of the image.

    You will hear me rant -- at great lengths -- about how fonts should be declared in % or EM whenever possible. This is true for 99% of usage cases as %/EM so long as you don't have a parent element declared in something else will automatically scale to whatever the browser default is -- and that default is NOT always 16px. Since the image being placed over it is in pixels this behavior would result in the text on large font/120dpi or even higher setting machines peeking out from under the image... THIS -- beneath an image replacement or during an image interaction -- is the ONLY real world usage scenario in which one should even be THINKING about saying a font-size or it's line-height in pixels!

    h1 small -- block to put it on it's own line, again px metric fonts with a line-height for the image interaction... then I upped the letter-spacing to try and mimick the text placement of the logo image.

    h1 span -- and here's the magic. This span is positioned over the entire h1 and it's text, and has the logo as it's background. As the logo was made opaque instead of alpha transparent, it hides the text. Images off, text shows. A massive negative text-indent is present just to hide the hyphen that's in there for non-CSS or non-screen media layouts.

    #mainMenu -- I declared the menu in EM's... and positioning EM scale elements next to pixels when they do not have a fixed relationship can be tricky. The big trick to get around that is to have EM metric padding on the image, and PX metric padding on the menu. Hence the margin-top is the same as the height of the logo. We can then just slide the whole thing up in relative position in EM's to align it with the bottom.

    #mainMenu li -- I set these to inline JUST to get them "out of the way". If we tried to float, or otherwise style them IE8 can have all sorts of bizzare issues like the so called "Staircase bug". It's usually safer to just strip formatting clean off them by saying "inline" and then style the anchor instead.

    #mainMenu a -- setting these to inline-block means that in modern browsers the element will accept top/bottom paddings or height declarations. (legacy IE incorrectly obeys them no matter what display is set to :/ ) -- padding, margin, rounded corners, nothing too fancy there.

    #mainMenu a:psuedostates -- I always set all three of these states together so mouse hover and keyboard navigation get the same style. TECHNICALLY keyboard nav is supposed to use :focus, but some older browsers use :active instead and don't have :focus. It's just safest to put these three together.

    #mainMenu a.current -- I used a more legibile background colour on this in a similar palette to the rest of the page. Fixes an accessibility issue, and IMHO just looks prettier.

    p -- padding; yawn. I usually pad the bottom instead of margin all-around so I don't have to deal with margin-collapse issues. This usually means the element before it or the parent contains a margin for the top-edge.

    h2 -- similarly padded on the bottom, with the font sized enlarged 150% that makes 0.66em roughly the same as 1em on a P / elsewhere on the page. I gave it a color since, well, why not.

    h2 span -- nowrap behavior just to keep things you want together... together.

    #pointlessFillerImages -- again float and margin wrapping behavior, and some color.

    #pointlessFillerImages div -- at 1024px width 4 images fit across without the space between them growing on larger displays.

    #pointlessFillerImages a -- inline-block again makes these obey height-wise padding. It also stops them from "jumping around randomly" when hovered in some builds of Firefox. Also helps to turn off the underscores since some browsers will add a space after the image that then shows that little line...

    #pointlessFillerImages img - even with the padding on the anchors instead of margin on the images, IE8 can STILL do a "3 pixel jog" of alignment on these images. Vertical-align fixes that.

    #content -- padding. YAWN. Top padding is larger than bottom since as you'll remember, paragraphs and h2 are 0 top and 1 bottom.

    #content .subSection -- I used % width here which I'm usually not a big fan of, but it's the easiest to control given the two column split between the two sections. Normal ones are floated left...

    #content .even -- ...while the even numbered ones get floated right. This provides a even gap and even columns on both sides.

    #information -- padding all around, right alignment for the non-floated content, and of course the different colouration.

    #information ul -- turn off bullets. Big deal.

    #information a -- color, transition... again nothing to write home about excepting perhaps the text-shadow for a bit of glow on the hover states. I like to add some glow to links just to draw more attention to them.

    #contact img -- block cleans up some odd behaviors this image might otherwise have. Margin is just there to space it without adding another BR in the markup.

    #contact -- float the contact and alight it's contents left, and everything else after it goes right and has right alignment from the parent. Quick, dirty easy two column where each is "flush" against their respective edges. Handy when at narrower widths you don't want them to be a equal percentage widths since it's plain the one on the right is narrower.

    #quickLinks - sent to the right, aligned right, the padding is there so that there's a forced gap when the screen gets smaller; though really our media queries should be handling that.

    #quicklinks ul -- turn off bullets, and I increased the line-height for clarity.

    #footer -- center alignment and padding, again nothing fancy.

    ... and that's the primary "for desktop" layout. To make it responsive we just start changing values and stripping off things like columns with media queries which I'll briefly summarize here.

    NORMALLY media queries should also be in EM, but we have those pixel based areas to deal with, so those get their own pixel based media queries.

    max-width:1024px -- at this size the four across images don't fit, so switch it to two across by changing that inner DIV's width to 512px.

    max-width:512px -- even narrower we want one column... since the screen is so small all that padding also makes it less useful so we set the width back to auto and reduce the paddings. I also set the max-width on the images to 100% so that if the available space does dip below that 224px width (some handhelds go as small as 192px) the browser will scale it down. While browser scaling of images suck, on anything that tiny the user is used to it.

    max-width:320px -- this small the logo image and the space around it is too small for the display, so we hide the span containing that background-image with display:none revealing that text. Lowering the padding around it and then adding a border-bottom keeps things nice and tidy.

    The following EM based queries are based on the needs of the content and when the layout breaks, NOT on some arbitrary "grid" planned ahead of time. Working from a planned "grid" just makes you design content to fit the grid instead of making a layout that adapts to the content. I just narrow the window until it breaks, figure out how wide that was and/or when that was, and make a media query to adjust. Lather, rinse, repeat until I get down to the narrowest possible result.

    max-width:64em -- the first of our EM queries is to deal with there no longer being enough room for the logo and menu on the same line. Solution? Strip off the floats, change up the margins and paddings and boom, you can put them one over the other centered.

    max-width:48em -- this is our body min-width for non media query browsers, since we know queries work we can unlock the ability to go narrower by changing that min-width. I further lower the padding on all areas to make more stuff fit on the smaller display with less white-space waste. I also pull the floats off the .subsections and set them to auto-width removing the column behavior since it's just too narrow to be stuffing two columns in the content area at this point.

    Conversely both the main menu and information links I vastly increase the margins and padding around the links to make them more touch friendly. Fingers are WAY bigger than a mouse pointer, plan accordingly!

    Finally I lower the footer padding, increase the line-height, hide the &bull characters in the nested span with display:none and put each of those span on their own lines since word-wrap looked pretty cruddy there.

    All just a simple re-arrangement to keep things well behaved.

    max-width:32em -- the last media query deals with the last columns in #information -- stripping them out, reducing the side paddings, and aligning their contents center. I further tweaked that image's margins to help space things out clearly as well....


    ... and that's how the CSS works and should give you an inkling of the how and why of how a site SHOULD be done.

    Hope this helps, I know it's a lot to digest and probably a LOT more than you were looking for, but seriously take your time, digest it, and any questions ask. You learn all this stuff you'll either be better qualified to choose good templates, or being to realize just what a giant scam off the shelf templates actually are.

    If nothing else, you'll realize that layouts as simple as that shouldn't have 3 or more separate stylesheets or 128k of "JavaScript for nothing" in 4 files...

    JS for nothing and your scripts for free... that ain't workin', that's not how you do it. Lemme tell ya, these guys ARE dumb.
     
    Last edited: Jun 23, 2015
    deathshadow, Jun 23, 2015 IP
    PoPSiCLe, Adam_UK and malky66 like this.
  19. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #19
    @deathshadow

    I can't even begin to thank you for taking such time to write so comprehensively, if you drop me you're PayPal I'll send something over. I've just skim read the content so far as I felt obliged to right a reply as quickly as I found your responses. I'll try and work my through everything now. The revised version of the site you've knocked up looks fantastic and is what we originally wanted!!! I'll revisit and post again once I've taken all your explanation in.

    WebDev
     
    WebDev Solutions, Jun 24, 2015 IP
  20. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #20
    This reply should absolutely not be necessary because your response to suggestions has been exemplary. Unfortunately, there have been a plethora of recent responses that fall far short of good manners and of good sense. I didn't reply to this thread, but believe me, I will not hesitate to offer my help should you ever need it.

    cheers,

    gary
     
    kk5st, Jun 24, 2015 IP