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 do this Please help...!

Discussion in 'CSS' started by XTreMe, Oct 6, 2007.

  1. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #21
    I really don't think you are going to get an adequate answer until we can see the ENTIRE layout with images - mostly because IMHO 70-80%+ of the HTML is 'on the chopping block'. You've got a page layout that shouldn't take more than 10k of HTML/CSS chewing up almost 40k. There's a lot of styling that doesn't seem to be styling ANYTHING, a LOT of tags like FONT and CENTER that shouldn't even be used post 1997, and nesting tables on single columns or on elements that don't even NEED a table.

    Seriously, THIS:
    
              <td width="986" height="112">
                <div align="left">
                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="989">
                    <tr>
                      <td width="116">
                      <font size="1">
                      <img border="0" src="file:///D:/Web2/images/banner-text.gif" width="319" height="112"></font></td>
                      <td width="873" background="file:///D:/Web2/images/banner-right.gif">
                      &nbsp;</td>
                    </tr>
                  </table>
                </div>
                </td>
    
    Code (markup):
    Is ridiculously absurd.
     
    deathshadow, Oct 10, 2007 IP
  2. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #22
    i know because i dont know anything about php and also newbie in html:s
    sorry friend
     
    XTreMe, Oct 10, 2007 IP
  3. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #23
    XTreMe, Oct 10, 2007 IP
  4. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #24
    I don't think you did what I said. I'll make it as easy as possible. Here's your code for your home link. Parts I am going to get rid of are in red

    <td width="69" align="center">
    <font face="Arial" size="2" color="#FFFFFF">
    <a href="index.html" style="text-decoration: none"><font color="#FFFFFF">Home</font></a></font></td>

    Change it to this

    <td width="69" align="center">
    <font face="Arial" size="2">
    <a href="index.html" style="text-decoration: none; color: white;">Home</a></font></td>

    All I did was to get rid of the font color spec before your <a> tag, because you don't need it, because everything within that cell will be a hyperlink. So the only thing you need to worry about is styling the hyperlink. Then, all i did was to add a white color attribute (in bold for you to notice) to the styling of your <a> in your top nav, and I got rid of the font color spec that was embedded inside of your <a> because it isn't necessary anymore and it was apparently overriding your on hover spec because it's inside the <a> tag and therefore will be given precedence over your hover styling for your <a> tag. This is why your bold on hover spec works, but your color doesn't. Because you overrode that with your innermost font tag which you stuck inside of your hyperlink tag, so no matter what, that thing will stay white just like you told it to.
     
    Arnold9000, Oct 10, 2007 IP
  5. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #25
    color not changing yet:(
     
    XTreMe, Oct 10, 2007 IP
  6. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #26
    I don't see where you made those changes. Your source code doesn't show it. Add this stuff to your live p[age, as it isn't really a live page anyway. This way, i can see what you're doing (or not doing).
     
    Arnold9000, Oct 10, 2007 IP
  7. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #27
    XTreMe, Oct 10, 2007 IP
  8. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #28
    OK, so for some reason, it doesn't like inline styles. They really shouldn't be used anyway. So here's your styles in the head tag where it really belongs

    <style>
    a:hover{color:red; font-weight:bold; }

    .navlink {
    color: white;
    text-decoration: none;
    font-family: arial;
    font-size: 14px;
    }
    </style>

    And here's your html

    <td width="69" align="center"><a href="index.html" class="navlink">Home</a></td>


    All i did is give your top nav links a unique name to separate it from your other links on the page, and then styled it, and then referenced it in the html via it's classname (class="navlink")

    Also, look at how clean your html code became. You could even style your <td> but it might be too much to get into that right now.
     
    Arnold9000, Oct 10, 2007 IP
    XTreMe likes this.
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #29
    Ok, my solution (as most always) is to throw ALL of the html out the window since it's big, bloated and needs some serious rethinking.

    As such, I'll document this line by line and explain my design philosophy - I do this from time to time to A> Keep my l33t 5k1llz up, B> teach a man to fish so he can bore me to death on OLN.

    This:
    http://battletech.hopto.org/for_others/XTreMe/template.html

    is how I'd code that page. The directory:

    http://battletech.hopto.org/for_others/XTreMe

    ... is unlocked so you can get the gooey bits. I had to remaster a few of the images to make it work with my techniques, which also reduced the filesize.

    You'll notice that the HTML file is only 9,450 bytes, and the CSS only totals 4,771 bytes compared to the 42,785 bytes of your original.

    When writing a page I put down all of the content in the order I want it to appear in the source using minimal markup. Once you have all of the data on the page in there and set up, THEN you can tackle the actual appearance, which should be done AS MUCH AS POSSIBLE from the CSS.

    So, let's go through this line by line. Feel free to follow along in the source as we go.

    Valid doctype - mysteriously missing from yours, leading cause of IE not behaving like RoW (Rest of World). I use XHTML 1.0 strict, but then I'm a stickler for format and rules. Also tested as working in IE6, 7, FF, Opera and Safari. While I took some precautions to allow function in IE 5.x, the column technique I chose still has some issues - but the page is at least functional. If you really cared it is possible to add a few hacks to bring IE 5.x into compliance - personally I don't care about decade old branches of browsers that have free upgrades and alternatives.

    Charset - honestly since I restrict myself to standard 7 bit ASCII since all I usually deal in is US Engrish any of the character sets would work... but since iso-8859-1 is what all the browsers default to ANYWAYS, might as well use that.

    screen.css - usually I write a css stylesheet for screen/projection, print and handheld... right now by just targeting screen and projection it will 'degrade' to no stylesheet on the other two.

    On to the body

    #container - it's a fixed width page (though I'm probably going to do this semi-fluid between 768 and 980 width) so we toss the whole thing inside a div with an ID.

    H1 - the page has a header, let's use a header tag for it with text equal to the image. Since there should only be one H1 per page anyways, there is no reason to waste classes or ID's on it. The empty span inside the H1 we'll be using to put an image OVER the text. This is called 'image replacement' and means that search engines, alternative browsers and people with images/css off will actually have something to look at.

    #mainMenu - no need for extra containers, wrappers or anything on this - it's a list of items, make it a list, give it an ID and be done with it. The LI's will be spaced odd (as noted in the comment) so we can have formatting, but not have the whitespace between lines end up screwing up our padding since these will be display:inline.

    #googletop - google ad at the top, let's give it a wrapper. For the advertisements I'm going to avoid using the word advertisement and it's various abbreviations so it is less likely to trip adblocking software.

    #contentWrapper and #contentBody - the double wrap around our content lets us do our columns while keeping the actual page content first. Another SEO technique, source first seems ideal for this layout since it will be fairly simple to implement.

    .article - each of your articles are fairly simple - there's a header to which I'm adding a date field (you do want the date in there, right?) a list of categories (I'm assuming that would be a list), the content itself, and the "read more" link. We toss in a few classes - this is all fairly simple. *** NOTE *** I repalaced all the double breaks with paragraph marks - if you are using a CMS on the back end for that, you'll likely be going back to double breaks - so long as it's inside the .content div you should be fine.

    #sidebar - the bar on the left side we'll simply call sidebar since it seems to be links related to the page. Again, headers followed by lists - simple, small, easy to read and maintain.

    #marketingBar - again, avoiding using the word 'advertising', this one seems to just be adverts.

    .marketingBox - wrapping each ad in a div so we can add formatting/padding.

    #footer - this is the footer INSIDE the wrapper. Again, we use the .marketingBox class, we can use the wrapping ID to isolate the difference between those when we get to the CSS.

    .popularPages - simple H2 and UL for that bottom list wedged between those two .marketingBox

    close #container

    #footerMarketing - a div to wrap the OTHER advertising that is outside our wrapping container.

    close the BODY and HTML - job's done for the HTML. As you can see it was a matter of keeping it simple using as little markup as possible. Not every tag needs a wrapping div, table, what have you.

    In my next post I'll go over the CSS line by line - I just need to edit/clean up my notes first.
     
    deathshadow, Oct 10, 2007 IP
    host-portal likes this.
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #30
    Ok, now to breakdown the CSS.
    http://battletech.hopto.org/for_others/XTreMe/screen.css

    The first thing you'll see is nulling the margins and padding on all elements via the universal selector. A number of people will use a k or two of targeting just the elements needed because they can't spend the time to figure out how to size inputs, or have their head up their ass about forms being pixel perfect. Since we have no forms here, and pixel perfect is for flashtards, we're fine using this technique.

    body - text-align:center lets us center our #container in older IE browsers, we set the font size to dynamic so users can resize the page safely... set the background, both in color and .jpg so images off it looks 'kind of' the same, and pad the sides so that we see the body background at all resolutions.

    #container - we'll set a min-width and max-width so that the page can safely scale down for people running 800x600, while expanding up to not be such a 'crappy little stripe' on higher resolution screens. Little tiny margin at the top I noticed you had, auto side margins to center it in standards compliant browsers, the overflow:hidden is to make this container wrap floats in standards compliant browsers, set the background to white, put a black border around it, and set the text-align back to normal after setting it to center in the body. That leaves the position:relative which is there to make 100% width from this point on return the width of #container instead of body.

    Below this, if you can find it inside all the comments ;), we have "* html #container" - this 'hack' means the rules inside it JUST target IE6 and earlier. In there the first thing we do is declare a fixed width for IE 6 and earlier users that have javascript off, then we use an IE specific function called an 'expression' to fake min-width and max-width since IE6 and earlier don't have those available. There are a few layout issues relating to a IE bug which can be fixed via the traditional holly hack, but setting height:1% screws up the layout thanks to overflow:hidden - BUT, what we set overflow:hidden for in all other browsers is IE 6 and earliers default behavior, so all we have to do is set overflow back to the default value of visible. Delete all the comments and the whole thing is smaller than the code needed for multiple stylesheets in the html - and putting it in the CSS means it's cached across multiple pages. Seems a little messhugah the first time you do it, but it makes a heck of a lot more sense than screwing with multiple files.

    H1 - We set the height and overflow:hidden so if the font gets resized too large it will get clipped, instead of 'peeking out' from under our image. Setting the line-height on the font declaration equal to the height of our h1 centers the text top to bottom at default text size, and we can set up our looping image. The position:relative here is so we can absolute position the span/logo over the text to hide it.

    The logo.png was redone so that the actual logo is on top, and the repeat-x is below it. Using a negative positioning on the background 'slides' the image up into place. Means one less handshake, certainty the colors match with the color reduction for image size, and results in a single image much smaller than the two you had. Old trick, works like a charm.

    H1 span - absolute positioning sets display:block by default so we can set the width and height of the actual logo. Moving the span (and therin it's background image) over the text hides it... turn images off, you see the text. Simple.

    #mainMenu - overflow:hidden in this case is so it obeys the height of floats (you'll notice again the * html hack below it to again set haslayout and overflow:visible as per our #container). List-style:none yoinks the bullets, padding left makes it match.

    You'll notice I also remastered the background image to 2048px (it loops) - should you decide to go fully dynamic it's nice to have the overhead in place - and frankly it really didn't add anything to my filesize worth mentioning. Your background had the borders around each menu item fixed - which was fine except the menu was totally broken on large font machines because you didn't declare the fonts in px - and if the user wants to resize text it also breaks. This means yanking the font-weight change to bold on hover, but since you wanted red that should be enough change.

    The red was illegible, so for the hover state I set a background-color to make it legible - you will likely want to play with that to your taste.

    #mainMenu li - the li's we'll set to display:inline just to dodge an IE7 bug. Since the anchors will be float:left, this will work fine in every browser.

    #mainMenu a - float:left so they stack AND we can set dimensions/top and bottom padding. Pad it on each side, set the font size and styling, and add the border on one side. We put a .last class on the last LI so we can set a border on the opposite side. While this does not 100% match your original's double border, visually the dark like was so vague I couldn't even see it - so this is quick, simple and effective. If you REALLY want that appearance I'd toss an extra DIV around the UL, contract the UL to the size, set borders on each side of the A and on each side of the UL.

    You can see I also set the hover, focus and active states. I set all three the same since there's no reason for them to be different from each-other, and all three should be set so keyboard navigators aren't left out in the cold.

    #googleTop - Unlike yours which used a wide image for each and inlined them, these images are presentational so I made them a single image 1px wide, which gets tiled behind this div. The height is equal to the google ad, so the padding for the image puts a bit of whitespace around all sides and makes room for the top/bottom image. Google adverts are shown in iFrames, which have a curious quirk in that they are a strange cousin to "inline-block" elements - much akin to the default state of images. As such the text-align:center will center it, but we get a hair of whitespace below the iframe. The overflow:hidden chops off that excess.

    #contentWrapper - by setting this to width:100%; float:left; we set up for the two sidebars. (I'll explain this shortly). This is a common technique for doing SEO columns without using a table.

    #contentBody - the 200px margins on each side make room for the two sidebars, and the 1em top/bottom is just to make things pretty.

    #contentBody .article - I declare this in this manner so if you want a .article elsewhere with a different appearance, you can share the things that are alike while not sharing the differences. In this case we give a big margin-bottom so the articles are spaced apart, and we use the width:100%; float:left; so that it will wrap any floats inside it. (of which we'll have one)

    #contentBody .article .bigImage - a bit long a way to access it, but again we might have other uses for .bigImage. Setting it to display:block and margin:0 auto centers the image - fairly simple.

    #contentBody .article h2 - the header for each article. The font declaration is fairly self explanitory, but the margin and padding needs some explanation. The padding-left makes room for the image you have next to each of them, which is put on the background and centered top to bottom. The margin on the other side kind of emulates a table behavior making room for the date.

    #contentBody .article h2 span - the Date. We set it to display:block to make it full width, align the text to the right, then expand the box out past the h2's margin with a negative margin of the same distance, then use a margin-top equal to our line-height to slide the date upwards next to the text.

    #contentBody .article .categories - just turn off the bullets.

    #contentBody .article .categories li - display:inline so they will be on one line, pad them out a bit to make it clearer.

    #contentBody .article p - restore paragraphs here to the 'normal' behavior. Slightly less than our line-height looks good to me.

    #contentBody .article .readMore - as said in the comments, normally I'd make the readmore text go to the right with text-align, but since we want to add an image to each of these, we have to float it. Again, pad the side the image goes on, and place it with center left. (we'll do this a lot)

    #contentBody .article a - set the default color for these links.

    #contentBody .article .readMore a - slightly different color, axe the underline.

    #sideBar - ok, here's where things get tricky. We float it the same directon as our content wrapper, set it's width... then we do a margin-left that's a negative value equal to our width - that's the trick. Doing that makes the #sidebar 0px wide as far as our rendering engines are concerned - Normally you can't float next to something set to 100% width, but you can fit 0px next to 100% right? As such the entire sidebar ends up floating up to the right of our content, but because we took it away from the right the content will render to the right of our content wrapper... not quite where we want it... but remember how I set position:relative so that the #container width is our 100%? Here's where we use it... setting position:relative and left:-100% slides the sidebar over exactly where we want it, on top of the left margin of #contentBody.

    #sidebar h2 - this should look familiar by now. Pad one side, put the image in place, margins to pretty it up and space our elements apart, set the color and font style. No real shockers here.

    #sidebar ul - strip the list style, margins to make it pretty, the only thing that needs explanation is the border-top. By setting a top border here and a bottom border on each li, we get even borders across the whole thing.

    #sidebar li - setting display:block prevents IE from doing a wierd double-line thing, padding is no shock, and here's that border-bottom I mentioned.

    #sidebar ul a - I target this via the UL just in case in the future you use anchors outside a list. Trip haslayout for IE, display:block so padding works and it expands to the width of our container, pad one side for our image, again no shockers.

    That's it for the sidebar.

    #marketingBar - the other sidebar - again we float it left and set the width, but this time we use a negative margin on the opposite side... that makes it also 0px and rides it up to the right, but because we put the margin on the opposite side our content rides over the right margin of #contentBody - right were we want it ;)

    #marketingBar .marketingBox - just some margins to pretty it up and space 'em apart.

    quick, simple, that's it for that one.

    #footer - the clear eliminates the floats making certain the footer spans the screen width, while width:100%/float:left makes sure it pays attention to floats inside it. Padding top/bottom pretties things up, border top and bottom matches your styling, and of course color/background.

    #footer .marketingBox - our OTHER marketingBox, these get almost a third the page width, float so they stack, and text-align center to center the google ads inside them in IE 5.x.

    #footer .marketingBox iframe - google ads are in iframes, setting the frame width and margin:0 auto covers our bases for the centering.

    #footer .popularPages - the remainder of our width, this one also gets float:left so it stacks. By stacking three containers at a third our #container width, we don't need a table.

    #footer .popularPages h2 - I styled this a little different because with the three boxes it's hard to 'center' this meaningfully. I ditched having the bullet before it, and just centered the header.

    #footer .popularPages ul - turn off the bullets, center the text.

    #footer .popularPages ul a - color, strip the underline.

    #footerMarketing - just center it assuming the ad is in an iframe. This advert wouldn't run, likely because that ad service is usually tied to a URL. Should work fine from your server.

    Finally, there's this mess:

    #contentBody .article a:active,
    #contentBody .article a:focus,
    #contentBody .article a:hover,
    #sidebar ul a:active,
    #sidebar ul a:focus,
    #sidebar ul a:hover,
    #footer .popularPages ul a:active,
    #footer .popularPages ul a:focus,
    #footer .popularPages ul a:hover

    These all use the same color, so I set them together at the end.

    ... and that's it. I imagine this is quite a jump from how you are used to doing things, especially if you are new to CSS - but you spend a while working this way and you'll find yourself going back and redoing almost every site you've done. IT's smaller, faster and easier to work with (IMHO)

    Any questions, fire away.
     
    deathshadow, Oct 10, 2007 IP
    XTreMe likes this.
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #31
    *** update *** - I also got the bottom script working via a quick rewrite... That was some UGLY code for that other advertising company. (NOT to say that google is much better)
     
    deathshadow, Oct 10, 2007 IP
  12. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #32
    you RockzZz you really worked hard and did a great job for me:(
    but i want to tell you dont know anything about CSS how to edit it and which softare should i use so i cannot use your givigng file but i can tell you that it is looking more better then my orignal one.
     
    XTreMe, Oct 11, 2007 IP
  13. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #33
    thanks again and please can you tell me which is the easiest software to use CSS like we have a frontpage for creating html anything like this for CSS?

    and can you do this it depends on you if you want ot do and if you dont want then dont do.

    that

    left menu and the header(with adsense code) in the css file and the middle stuff(which is types of girls etc etc.......)all this in the html because i dont want to edit left menu and top header any more just want to edit middle stuff to create more pages.
     
    XTreMe, Oct 11, 2007 IP
  14. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #34
    thanks:)
    its working fine now you peoples really worked hard for me and you all deserve reputation for it thanks again.:)

    and can i have your website link to put it in my Friend's Links Coloumn?:) both of u please post your website link also:)
     
    XTreMe, Oct 11, 2007 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #35
    Frontpage - gah, that would explain a lot.

    I use the same program to edit my HTML as I do my CSS - it's called win32pad - which is JUST one step up from notepad. In the above breakdown when I said follow along in the code, I meant it because I typed that all by hand...

    Editplus, Notepad++, win32pad - use a REAL text editor and throw those stupid WYSIWYGS in the trash. All they do is make fat bloated broken non cross-browser code.

    Frontpage, Dreamweaver, Composer, HotMetal, they're all garbage that does more to teach people how NOT to design a website, instead of how TO design one.
     
    deathshadow, Oct 11, 2007 IP
  16. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #36
    it is very hard to type whole code and use these type of editorrs for me.
     
    XTreMe, Oct 11, 2007 IP
  17. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #37
    Check out photoshop CS3. It's supposed to have new features that allow you to convert your photoshop docs to webpages. I'm sure it probably writes some semi crappy code, but if you can get it to work, then it would be a start.
     
    Arnold9000, Oct 12, 2007 IP
  18. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #38
    is it include the feature of creating webpage like in frontpage for example..directly drag or direct insert images,tables etc....
     
    XTreMe, Oct 12, 2007 IP
  19. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #39
    I'm not sure. I always hand coded so I've never really looked into it.
     
    Arnold9000, Oct 12, 2007 IP
  20. XTreMe

    XTreMe Banned

    Messages:
    1,226
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    0
    #40
    ok
    anyways thanks for the help and can you give me your website to add it in my friends links:)?


    and i also want to learn CSS from the beginning :(
    can you suggest me any CSS book name which will help me from the beginning in learning CSS?
     
    XTreMe, Oct 12, 2007 IP