HTML/CSS Formatting Issue

[jzm]

I need to create the following 2 buttons:


i.stack.imgur.com/3QrlQ.png
i.stack.imgur.com/Yllsw.png


In Page Help:


This should be floated to the right of the nav menu. I cannot see it in my Current Code - jzm.co.nz/clients/dev/ but if I upload the current code to jsfiddle it works fine.


How would I create an arrow that size?


How would I position the Icon jzm.co.nz/clients/dev/_assets/images/infoButton.png ?


HTML:

    
<div class="options">
                            <nav class="mainOptions">
                                <ul>
                                    <li><a class="composer" href="#"><img src="jzm.co.nz/clients/dev/_assets/images/composer.png" /> Composer</a></li>
                                    <li><a href="#">Address Books</a></li>
                                    <li><a class="active" href="#" target="_self" title="View Messages Scheduled for Future Delivery">Scheduled Messages</a></li>
                                    <li><a href="#" target="_self" title="Message Templates for you or your organisation">Templates</a></li>
                                </ul>
                        </nav>​
            
                <div class="pageHelp"><p>In Page Help</p></div>
        </div>

CSS:

   
.pageHelp{
        float:right;
        margin:10px 20px 0 0;
        width:85px;
        height:25px;
        border-radius:3px;
        background-color:#354E69;
        position: relative;
    }
    .pageHelp:after, .pageHelp:before {
        left: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    .pageHelp:after {
        border-left-color: #354E69;
        border-width: 5px;
        top: 50%;
        margin-top: -5px;
    }
    .pageHelp:before {
        border-left-color: ##354E69;
        border-width: 16px;
        top: 50%;
        margin-top: -16px;
    }
    .pageHelp p{
        color:#000;
        padding:5px;
        text-align:center;
    }

Alert:


This Icon should be situated to the left of the text. How could I get the placement of the icon correct as I cannot seem to get it close in my Current Code - jzm.co.nz/clients/dev/


HTML:

    <div class="scheduledTop">
                <h3>Scheduled Messages</h3>
                    <p class="alert">Alert Message Area</p>
                </div>

CSS:

    
.scheduledTop .alert{
        width:200px;
        height:50px;
        float:right;
        margin: -30px 20px 0 0;
        color:red;
        text-align:right;
        font-weight:bold;
        background:url('../images/alert.png') no-repeat 0 8px;
        border:1px solid red;
    }

[weegillis]

An aside:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

has been replaced with

<meta charset="UTF-8">

inserted just above the <title>. The content-type is already declared in the HTML tag (which should also include a lang="en" attribute). We also no longer need to declare a 'type' on script and style elements. These are both moot in HTML5. Simpler now, eh?

There are a lot of IMG tags that are more or less private images (for chrome, not content). These could be removed from the images folder (the one that Google and others look for) and placed in a BGDS folder within your CSS folder. The background-image property, or some other form of CSS (:before, comes to mind) could be used to include these images, and keep them out of the search index (by excluding BGDS folders in robots.txt). All your markup will be simpler to read once these clunky tags are removed.

I would say the same could apply to proprietary marks and badges of third parties (SN, etc.) you link out to. You do not want their images appearing in the search index for your site. Switch to CSS bg's. Much cleaner without all these img tags, also.

Your site is already resolved to the domain, so including http://yourdomain.com in all your internal links is redundant, and forces a DNS lookup on every one encountered by a bot. Simply stick with "/folder/resource.nam" and your pages will be search friendly, and lighter weight and easier to read.

Still reviewing your page and CSS. Might have an answer for you in a while... Sorry I don't have one now, just the malarkey above. Hope to make that up to you shortly.

[jzm]

Thanks,

Yea I have not started to do a correction of validation etc yet just want to get the stuff sorted and working. But because I am a visual learner I am stressing

[weegillis]

I would add to the malarkey above, all your CSS ought to be in one place, easily accessible from the site root, like a css folder right at that level. It is never a good idea to bury CSS in multiple folders, especially with images, unless perhaps it only applies in that folder, but it still would be better in the root folder, maybe under the name that matches the folder to which it is applied. SE's get a little suspicious when they have to chase around looking for CSS (opinion). Better they find all the style sheets in one place.

Images you want indexed, as in your photos, your logos and brand marks, belong in the images folder. Those you do not want indexed, well, they don't. And they especially do not belong in IMG tags. Just extended what I wrote above.

---------- Post added at 04:34 PM ---------- Previous post was at 04:27 PM ----------

Thanks,

Yea I have not started to do a correction of validation etc yet just want to get the stuff sorted and working. But because I am a visual learner I am stressing

Walk away. Take a breather. Mow the grass, walk the dog, take in a sitcom. Then go back to work when you're not stressing. It will make your life a lot easier, and cough up less errors and oversights. For now, work on moving all your chrome (skin) and third party marks into a bgds folder in your CSS, and work at getting all your CSS in one place. Then we can come back around to markup and CSS. Take your time. You'll meet your deadline, and have much cleaner markup to work with.

[jzm]

For now, work on moving all your chrome (skin) and third party marks into a bgds folder in your CSS, and work at getting all your CSS in one place

I am still unsure what you mean via above my general structure (Not using all of the stylesheets) is d.pr/i/xFFg

[weegillis]

1) Put all style sheets in one folder (best practice, especially if someone else has to work on the site in future). Plug-ins might be a rare exception, but I would still try, at least, and if the plug-in cannot be 'rewired' to point to the CSS folder, then leave it in the folder it came in.

2) Chrome, skin, window dressing--all of these graphics are for site dressing only, including buttons. They can all go into the /css/bgds/ folder and be accessed through CSS background image property, or the :before pseudo selector. Read up on it. You'll be glad you did. Search around here, too. The topic has been raised before.

None of this has to do with structure, but organization. By weeding out the chrome and third party graphics, you leave yourself with only content and your own images being tagged into the page.

Adding to this, with Sprites, you can put all those buttons, logos and badges into a single image file. This is something well worth reading up on, too. Again, you'll be very glad you did, and your work will be made even simpler, still.

[jzm]

Are you able to link to an example, Along with my main issue you have a point

[weegillis]

Try looking through this SERP: sprites.

[mikmik]

These last three links are returning a 404:

<link rel="stylesheet" href="_assets/css/style.css">

- - - - - - - - the last three - - - - - - -

<link rel="stylesheet" type="text/css" href="_assets/images/bootstrap2.0.2.css">
<link rel="stylesheet" type="text/css" href="_assets/images/bull_bs_icons.css">
<link rel="stylesheet" type="text/css" href="_assets/images/wrap.css">

the _assets/images/ folder is there because I can link to the png's in there, but the 'bootstrap2.0.2.css' and the other css files are not there.

Check that out. You can also remove the 'type="text/css"' from those three. That's not the problem, though, just something you can clean later, or not at all if you don't want!

<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL _assets/images/bootstrap2.0.2.css was not found on this server.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>

Definitely, the css files are named wrong or are not in the images folder. I tried taking the 'images' out of the url, but still no joy:

The requested URL _assets/bootstrap2.0.2.css was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Remember, this one works: _assets/css/style.css, so that file is there okay.

[mikmik]

Sheesh! I found 'bootstrap2.0.2.css' and it is in the _assets/css/ folder!

Take out the 'images' and replace with 'css' in your <link rel> like this:

<link rel="stylesheet" href="_assets/css/bootstrap2.0.2.css">
<link rel="stylesheet" href="_assets/css/bull_bs_icons.css">
<link rel="stylesheet" href="_assets/css/wrap.css">

That might help!