Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 24
  1. #1
    Junior Member
    Join Date
    Jul 2010
    Posts
    13
    Member #
    22850
    I am a first time poster and this is my quandary.

    I would like to make the large text containing the title of my site readable to search engines and thus write at least a portion of my banner in text. This presents some uncertainties. That is where you, the knowledgeable and helpful reader comes in.

    Please tell me if you know of a better way to achieve my goals.

    If it weren't for the need to appeal to search engines and be mobile browser accessible, I would lock both the graphical and textual elements of my banner together into one .jpg so that I know they will always display properly and not jumble up together in the uncertain world of various browsers, operating systems, text zoom settings, [not] installed fonts, mobile browsers...

    Below is a "concept sketch" (albeit digital) of my banner design, nicely locked into place as a .jpg:



    In attempting to make the textual elements of this banner (both the title and the navigation links) visible to search engines I have put each element in a div, and played around with absolute positioning, z-indecies, and chosen px over em for font sizing.

    I have the "redline" div set to z-index: 1; and the "title" div, which contains text set at z-index: 2;. Both are absolute positioned by pixel to my liking. This looks right in Firefox, but in Chrome the divs are positioned differently relative to eachother. I can only imagine IE (I'm currently on MAC OS).

    There must be a more sure footed approach no?

    The following is my HTML and CSS code.


    (if you are kind enough to take the time to put these together - thank you! - You will need the image "redline.jpg" saved with the HTML and CSS. I've put the red line image online so you can save it... )


    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <title>Title Continued</title>



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

    </head>
    <body>
    <div id="container">
    <div id="banner">
    <div id="title"> Title <br />
    continued </div>
    <div id="redline"><img src="redline.jpg" /></div>
    <div id="navbar">
    <ul>
    <li class="navlinks"><a class="navilinks" href="home.html">home</a></li>
    <li class="navlinks"><a class="navilinks" href="about.html">about</a></li>
    <li class="navlinks"><a class="navilinks" href="contact.html">contact</a></li>
    </ul>
    </div>
    </div>

    <div id="main">
    </div>
    </div>
    </body>
    </html>


    And CSS:

    body {
    margin: 0px;
    background-color: white;
    text-align: center;
    }
    div#container {
    margin: 0 auto;
    }
    div#title {
    font-family: helvetica;
    font-size: 55px;
    font-weight: bold;
    text-align: left;
    background-color: transparent;
    position: absolute;
    z-index: 2;
    top: 2px;
    }
    div#redline {
    top: 50px;
    position: absolute;
    z-index: 1;
    }
    div#banner {
    margin: 0 auto;
    height: 173px;
    width: 1150px;
    bottom: 0px;
    font-family: Arial,Helvetica,sans-serif;
    }
    div#navbar {
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    list-style-type: none;
    }
    li.navlinks {
    display: inline;
    }
    a.navilinks {
    font-weight: inherit;
    text-decoration: none;
    color: #002600;
    width: 175px;
    }



    Thank you for your help!

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I would think that you would run into more cross browser compatibility issues (and screen resolution issues) resulting from using absolute positioning AND using them without setting the container to relative positioning. Absolutes can cause major headaches with browsers especially when users enlarge the text size, it can get ugly.

    I would look more into floats. You can float the title left and float the navbar div right inside the container.

    Code:
    <div id="container">
    
    <div id="banner">
    
    <div id="title"> Title </div> <!-- float left -->
    
    <div id="redline"><img src="redline.jpg" /></div>  <!-- no float -->
    
    <div id="continued"> Continued </div>  <!-- float left -->
    
    <div id="navbar">   <!--float right -->
    <ul>
      <li class="navlinks"><a class="navilinks" href="home.html">home</a></li>
      <li class="navlinks"><a class="navilinks" href="about.html">about</a></li>
      <li class="navlinks"><a class="navilinks" href="contact.html">contact</a></li>
    </ul>
    </div>
    </div>
    
    <div id="main">
    </div>
    </div>
    This is how you would arrange the markup. The css would have to be overhauled, but it would result in a more simple and controllable code. Just make sure you put widths on the floats. (Hopefully you know some css?)

    This will also keep your header intact when people resize text and keep it a text based header as you desire.

    I know I didn't give a whole lot of code, but try it and if you get stuck let me know.

  4. #3
    Junior Member
    Join Date
    Jul 2010
    Posts
    13
    Member #
    22850
    Thank you!

    Yes I do know the basics of css, and what you have said regarding floating the title and navbar left and right makes perfect sense. I will try it out and post back how it worked out.

    I'm a little more unclear about the relative positioning of the red line between the title words. I'm sure this is totally irrational, but just by the names "relative" and "float" I am led to worry more about things moving around with text resizing. If it will work I am totally on board!

    What I am focused on is maintaining the proportions of first title word above the red line and the second word below. Its not as big a deal if things get re sized as long as the red line stays in the same place (i.e. equally padded) between the words.

    When I have more time I will play around with this and post back. Thanks again!

  5. #4
    Junior Member
    Join Date
    Jul 2010
    Posts
    13
    Member #
    22850
    Alright I've had a minute to re-do the divs and css as you suggested, and it worked very nicely. Much more simple and effective (the K.I.S.S. principle seems very applicable to webdesign).

    The only problem now is that the distances (i.e. margins and paddings) between the two words and the red line between them, are uneven and too wide.

    I tried adjusting the margins and paddings by px to my liking (using Kompozer btw). In Firefox, things look just like they do in my WYSIWYG, but in chrome they are slightly different and off balance. I'm sure its different again in IE.

    Maybe I am just not doing it right, but this adjusting margins and paddings feels like a (leaky) duct tape solution... Is there a better way to proportion these elements than my "jerry-rigging"?

    P.S. I'm wondering if this hassle and uncertainty is worth the search engine readability. I'm also thinking since my title will be so much bigger than the body text, if someone zooms text only in their browser, the title will become colossal!

    As per the title, I'd love to hear any of the reader's thoughts on using a picture vs. text for the banner.

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Show me the code you have now. You don't need positioning for the red line. It should fall into place.

    And text sizing should not hurt you the way you have it laid out.

    As far as using an image for your title it's not a big deal, just make sure you use the alt attribute. I would actually do it that way myself but I wanted to show you the alternative to what you were doing, and it helps teach by messing around with it.

  7. #6
    Junior Member
    Join Date
    Jul 2010
    Posts
    13
    Member #
    22850
    Whoops, I wrote up a response last night and clicked preview and then forgot to post it. (Code is in quotes below)

    Anyways the line is in place nicely. The problem is more with the big and uneven padding of the text around the line. Ideas?

    As far as the alt attribute, can a person do more than just write a description? Could I make an HTML/CSS encoded alternative to an image banner?

    Third and final question: If I were to use an image banner would it be a bad idea to write the text for my navbar links in the image as well and just designate links on top of the image?


    HTML:
    <body>
    <div id="container">
    <div id="banner">
    <div id="cafe">cafe</div>
    <div id="redline"><img src="redline.jpg" /></div>
    <div id="commons">commons</div>
    <div id="navbar">
    <ul id="navbarlinks">
    <li class="navlinks"><a class="navilinks" href="cafes.html">cafes</a></li>
    <li class="navlinks"><a class="navilinks" href="events.html">events</a></li>
    <li class="navlinks"><a class="navilinks" href="art gallery.html">art gallery</a></li>
    </ul>
    </div>
    </div>
    <div id="main">
    </div>
    </div>

    </body>
    CSS:
    body {
    background-color: white;
    text-align: center;
    }
    div#container {
    text-align: left;
    padding-top: 10px;
    font-family: helvetica,sans-serif;
    }
    div#banner {
    margin: 0 auto;
    height: 173px;
    width: 930px;
    font-family: Arial,Helvetica,sans-serif;
    }
    div#cafe {
    background-color: transparent;
    text-align: left;
    z-index: 2;
    font-weight: bold;
    font-family: helvetica;
    font-size: 55px;
    float: left;
    }
    div#redline {
    z-index: 1;
    }
    div#commons {
    font-family: helvetica;
    background-color: transparent;
    float: left;
    font-size: 55px;
    font-weight: bold;
    z-index: 2;
    text-align: left;
    }
    div#navbar {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    list-style-type: none;
    width: 525px;
    float: right;
    height: 40px;
    }
    ul#navbarlinks {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    a.navilinks {
    text-decoration: none;
    color: #999999;
    width: 175px;
    display: block;
    }
    a.navilinks:hover {
    color: black;
    background-repeat: no-repeat;
    }
    li.navlinks {
    float: left;
    }

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Any way you can get this online?

  9. #8
    Junior Member
    Join Date
    Jul 2010
    Posts
    13
    Member #
    22850
    I haven't chosen my host service yet. In the meantime do you know of anything quick, easy, and free?

  10. #9
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    You'll have to Google that, I don't have any experience with free hosting. I'll have some time this weekend to load up your code and actually see it!

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    They all look the same to me on Chrome, FF3, and IE7. You're not going to get any closer. The only thing I did was add width and height to your redline image just to be safe. There are a few things I would do different with some of your css... but this thread will get long if we get into that.

    <img src="redline.jpg" width= "930px" height= "12px"/>


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

text based banner

,

text based banner css

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:51 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com