Cool free code - but a little help needed if you would be so kind

HTML & CSS
1

So what we have here is failure failure to communicate

I have two CSS sheets failing to communicate. (LOL dy’a like how I got Gun’s N Roses line in there? http://en.wikipedia.org/wiki/Guns_N’_Roses a line originally from > http://en.wikipedia.org/wiki/What_we’ve_got_here_is_(a)_failure_to_communicate

Any way back to the CSS prob

I got a Google clone top nav bar free - Here it is if it is of use to you to > http://blog.geotitles.com/2011/09/creating-the-new-top-black-bar-found-in-google-and-all-its-products/

Here is one of the pre black version > http://praveenfrancis.com/design/googles-new-top-navigation-bar-css-tutorial/

Now I decided due to some recent results on some SE’s that I need to do some linking to

My Site that is I need to link up one of my other sites and update my site

So I started playing with

This new version

Which has the Google top bar clone and also another bit of code I picked up and used elsewhere like here

I have stripped out and adapted a part of that and got it working elsewhere but

on the new version of my site I have some CSS conflict going on

So what we have here is as I said failure to communicate

So would any one please be so kind as to give me a tip or two.

I am likely only couple of CSS edits away form the page displaying and then the only problem I see arising is there will likely be a larger than liked gap under the cartoon strip which I will then most likely need to address

Oh and the other things I half hitched for this are

Dynamic Drive > http://www.dynamicdrive.com/style/ whose site / page design there I nicked off with (I did write to DD and tell them I didn’t want their menus I wanted their page and would leave a credit link in and if there was a problem let me know - that was about 2 years ago and have not heard so hey ho).

The other thing I used was another free html5 (so it said) template but I will have to post the link for that later as I can’t find it presently

So it will be apparent I am not really a web designer as all I do is learn from putting others codes together and it is a brilliant way to learn IMHO.

So can anyone help me make sense of this please?

2

Does anyone know if it is the .clearfix and if that is the conflict due to it being in both the cartoon teddy bear style and the main kdmstyle?

If so, any tips on how I fix this? Pretty please :slight_smile:

3

I read what you had to say and I looked at your site.

To be honest I am not sure where the communication fail is and what look your trying to accomplish.

You have a style sheet called google_menu.css, which is dictating all the styles of your top menu. Using firebug I can see that there are no other style sheets that are able to ‘communicate’ with your menu. The only big problem I can see is that you have hard coded the ‘current’ class on all the list items. You should be using javascript or a server side language to set that class for you.

Not sure if this is what you where having problems with. Maybe post the code that is not showing the way you want it to so we can have a look at it?

4

It is not the Google bar that is the problem that is fine. The problem is (I think) a conflict between this > http://www.kd-mains.com/test-site/kdmstyle.css and this > http://www.kd-mains.com/test-site/css/dtt-cartoon-teddy-bears-style.css

If you check this you will see where the cartoon part came from and how it got adapted is [URL=“http://tvworlds.co.uk/”]here

So as you can see I got the cartoon display right much wider and from four images to six but I just can’t get it to display right on this

I have a feeling it is the .clearfix command but not completely sure as it could be that and another thing combined but I think that is how far away from displaying properly that it is. I mean maybe 2 or perhaps 3 or just the one edit away from displaying correctly.

Am I on the right track? If so any pointers would be much appreciated. It is very frustrating to be a couple of edits away from a fix :slight_smile:

5

The .clear fix is not the problem, it has a property called ‘clear’ in it, this just effects floating elements which it does not look like you need to worry about. What browser are you using? You might have better luck trouble shooting your site if you tried out the browser development tools available to you. With developer tools you can turn off different css properties or add properties to see how they effect your site without refreshing or changing your code.

Just to clear things up, you want the cartoon section to display like it does on the other sites, with a curled paper background and center the cartoon on the page? If that is so it looks like you might not have all the styles in your style sheet that are required to recreate that look.

6

hmm that’s strange I have that working elsewhere hence why I am baffled - I will see if adding another stylesheet that is used on one of the other sites has any effect

Yes it is the curled effect I am trying to recreate again

TBH this will likely be the last page I do any design on (not that I am claiming any designing other than putting others codes together) so I don’t really want to be learning how to use new things in regards to tools.

I know that might sound a bit mad but I have a lot to do and a book to finish writing so once this page is displaying properly as I have two other pages that match with different design structures but the same look etc other than learning how to do a form page which I shall likely also just grab a free copy of and then see about getting it to work, as far as web design goes (hands on) that’s me done for a few years. As I will then have the site designs I need for pretty much all my sites and can concentrate on SEO, writing and over seeing things which I am far better at than this web design stuff that I would rather find someone I can outsource to as now I have so many page 1 SEO SERPS I will definately be needing a contact for that.

I will see what effect the other stylesheet connected to the other version of this has but I was sure the code was all in that stylesheet

Oh and I use Chrome

7

You are missing this whole css file.


/** Add CSS rules here */
/* CSS Document */

        /* Small reset */
        
        article,details,figcaption,figure,
        footer,section { 
            display:block;
        }
        
        ul
        {
            list-style: none;
            margin: 0;
            padding: 0;         
        }
        
        a
        {
          color: #6F3736;
        }      
    
        /* Clear floats */
        
        .clearfix:after 
        {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
        }
        
        .clearfix
        {
          *zoom: 1;
        }
        
        /* Layout styles */
        
       

        
        /* --------------------------------------------------- */
        
        footer
        {
            text-align: right;
            width: 100%;
            margin: 0 auto;
            padding: 10px 0;
        }
        
        
        
        /* --------------------------------------------------- */        
        
        #main
        {
            margin: 1px auto 0 auto;
            width: 965px;
        }
        
       
        #content
        {
            float: center;
            width: 965px;
        }
        
        article
        {
            position: relative;            
            padding: 5px;
            margin: 0 0 50px 0;
            text-align: center;
            background: #fff;
            -moz-box-shadow: 0 1px 1px #999;
            -webkit-box-shadow: 0 1px 1px #999;
            box-shadow: 0 1px 1px #999;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            border-radius:5px;            
        }

        article:before, article:after
        {
          z-index: -1;
          position: absolute;
          content: "";
          bottom: 15px;
          left: 10px;
          width: 50%;
          top: 80%;
          max-width:300px;
          background: rgba(0, 0, 0, 0.7);
          -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
          -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
          box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
          -webkit-transform: rotate(-3deg);
          -moz-transform: rotate(-3deg);
          -o-transform: rotate(-3deg);
          -ms-transform: rotate(-3deg);
          transform: rotate(-3deg);
        }
        
        article:after
        {
          -webkit-transform: rotate(3deg);
          -moz-transform: rotate(3deg);
          -o-transform: rotate(3deg);
          -ms-transform: rotate(3deg);
          transform: rotate(3deg);
          right: 10px;
          left: auto;
        }        
        
        article footer
        {
            text-align: center;
            width: auto;
        }
       
        article footer span
        {
          padding: 0 10px 0 12px;
          margin: 0 0 0 12px;
          background: #bbb;
          color: #fff;
          font: bold 12px/24px tahoma, arial, helvetica;
          display: inline-block;
          position: relative;
          text-shadow: 0 1px 0 #999;
          -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
          -moz-box-shadow: 0 1px 0 #fff, 0 1px 0 #999 inset;
          -webkit-box-shadow: 0 1px 0 #fff, 0 1px 0 #999 inset;
          box-shadow: 0 1px 0 #fff, 0 1px 0 #999 inset;
        }
        
        article footer span:before
        {
          content: "";
          position: absolute;
          top: 0;
          left: -12px;
          width: 0;
          height: 0;
          border-color: transparent #bbb transparent transparent;
          border-style: solid;
          border-width: 12px 12px 12px 0;
        }
         
        article footer span:after
        {
          content: "";
          position: absolute;
          top: 10px;
          left: 0;
          width: 4px;
          height: 4px;
          -moz-border-radius: 2px;
          border-radius: 2px;
          background: #fff;
          -moz-box-shadow: -1px -1px 2px #777;
          -webkit-box-shadow: -1px -1px 2px #777;
          box-shadow: -1px -1px 2px #777;
        }        
        
        figure
        {
            margin: 1em 0;
        }
        
        figcaption
        {
            margin: 0.5em 0;
            font-style: italic;
            font-size: 0.9em;
            color: #777;
        }
		
		ul.gallery {
   height:184px;
   width:960px;
   list-style-type: none;
   padding-left:1px;
}
ul.gallery li {
   border:1px solid #BBBBBB;
   float:left;
   height:184px;
   margin-right:1px;
   margin-top:0px;
   width:156px;
}

ul.adverts {
   height:18px;
   width:960px;
   list-style-type: none;
   padding-left:1px;
}
ul.adverts li {
   border:1px solid #BBBBBB;
   float:left;
   height:18px;
   margin-right:1px;
   margin-top:0px;
   width:156px;
}
8

LOL thanks Paul O’B

What a complete an utter wazok I am I added the wrong style sheet

That’s what you get for having two stylesheets with the words teddy bears in

I have sorted that look it’s fixed here

All I need do now is fix the amount of space beneath and other than the bizarre "current thing in the G nav bar I think that’s me sorted, well once tht gap is fixed

ah almost I do have a conflict though as my text on the old Dynamic Drive part is now all way to big hmm

Also

under the Google top bar I have

<div>
<br> </br>
</div>

If I remove either of these BR’s to get rid of too much gap above the thing overlaps with the Google bar

What can I do instead here?

9

To fix the over lap, remove from ‘.menu’

position:absolute;
top:0px;
left:0px;

And if you want a little bit of breathing room, you can add a margin bottom:
margin-bottom:5px;

10

Just give a mrgin top to the div to avoid the absolute nav.

e.g.


#content {
    margin: 4em 0 0;
}
11

OK I did what ckdesign said and it looks cool there now

All I have left now is to fix the space underneath the cartoon strip and I think I should be there (fingers crossed)

Which is best of the two above just out of interest EG Paul or ck or does it not really mater too much?

Shall I remove the Google Custom search and just make it a free one (it never makes money and so why bother people won’t like and I cant use it) if so that must be fairly simple but how to do so really easily without upsetting how it displays now?

I don’t know about anyone else but I feel these days Google custom search is really a complete newbie only thing and is off putting to everyone with half a bit of savvy as to what’s going on with do others think?

12

The code suggested by Paul will fix the problem, but I am all for removing unnecessary code other wise you can just add and add then you end up with a big mess that can be difficult to keep track of. It is like stacking a house of cards, you don’t know if adding more to the top might cause your site to come crashing down or make it difficult to adjust. It did not look like the position absolute was necessary for your site layout, so that is why I felt confident in suggesting to removing it.

To fix the spacing, look at this part of your code:

article {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px #999999;
    margin: 0 0 50px;
    padding: 5px;
    position: relative;
    text-align: center;
}

Adjust the margin to a number you find visually acceptable:


    margin: 0 0 10px;
13

Thanks ckdesign

Do you know sometimes I am a real idiot. My own worst enemy as I had this exact same problem the other day and went and took the same stylesheet with the 50px margin that I had to do the same thing on.

So what do people think about the Google search?

I have a plain one here but am not sure whether to just leave it as an Adsense search or forget that idea bwecause it is off putting and put that clean one in anyone any thoughts?

14

I’m not sure about google search, do you want your users to see other adds by google when using the free search or see custom/no adds? I think that is a personal preference.

If your wondering about advertising and making money I think you may want to ask this question else where, if you look around you might find a discussion section that is more appropriate, this is the CSS form and css gurus hang out here waiting to answer css questions.

15

No I am not wondering about advertising and making money ck the cartoons are cartoon adverts (or will be down the line - presently they are designed to advertise their selves).

I was just wondering how off putting a Google Custom search comes across to people?

I don’t allow links or adverts on my sites other than ones using the cartoons. If you look at the only two adverts (well they are adverts in that they are in effect banner ads) they are to two of my other sites.

I had been considered allowing one strip of something like Google ads but that won’t work with my plans for the cartoons really.

I am really not building for Adsense so really in saying that I think I have answered my own question EG remove the Google Adsense search

scuse the off topic a bit there :slight_smile:

16

Yes, that’s a better approach. I just assumed that the menu was absolute for a reason that I hadn’t noticed yet :slight_smile:

17

I erm winged that “absolute” mark up tbh

It was originally a “fixed” menu so it didn’t move when scrolled

I remembered reading somewhere on a forum that someone had been told to change “fixed” to “absolute”. It was just a vague memory from my reading on the net.

So I changed it to absolute after trying it empty (which I think didn’t work). If I remember correctly it did work but when I tried to remove the little bit of script referencing the fixed menu in the header it broke everything so I just left it as “absolute”.

I did say I am not a designer and I am pretty much just winging some things (a point in case here). So just to clarify what that code was there for. Especially for other using the Google top bar in the first post. The menu comes as fixed and what has been gone through above (in regards to the absolute code and that I said it started as fixed) addresses that issue and makes the menu move with the page.

18

Absolute elements are removed from the flow and are like little islands on their own. They don’t care about other content and other content doesn’t know they are there.

Therefore when you use them yo have to control the flow around them so that elements don’t overlap which is a pain and why absolute positioning is only the right choice in certain situations. Most of the time static (non positioned) elements are the best because they react to each other and get out of the way when needed so you need do nothing special to control them You just let the flow of the page take over. Preserving the natural flow of a page (one element follows another) is an important concept and results n layouts that can adapt to the content that precedes or follows them without having to do much at all.

Imagine if you had to write a paragraph but each word in the paragraph was absolutely placed into position. It would be very fragile and break if you changed one word as you would have to re-position all the other words. This is what happens to absolute layouts and they are very fragile and cannot cope with changes very well.

There are times where absolute positioning is useful and where the flow is already controlled by another larger element (or if you need elements to overlap) but most times floats and static positioning are the way to go.:slight_smile:

19

Nice to know Paul

We learn every day :slight_smile:

BTW

I thought I might mention at this juncture that AS PLANNED (by me) since the first post in this thread

Sitepoint now resides on page 1 of the big G for

“Cool Free Code” :slight_smile: (I know I “pointed the site” there Pointed the site site point get it?)

As Dire Straits would say

That’s the way to do it. Get your … well not money for nothing but cool free code LOL

It is only a suggestion but maybe people would be able to continue this adding “Cool Free Code” related to any of the above?

After all anyone looking for “cool free code” could end up reading and see also how easy it is to actually get constructive help here on SP

20

How does that help anyone? Anybody searching for those terms and landing on this thread is likely to be confused and disappointed. Fortunately, it’s not likely to be on page 1 for long.