SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tidier way of doing this code?

    Hi

    done the course but that doesn't tell you how you could do things.

    now I have this code but I am trying to make it smaller less repeating.

    HTML Code:
    <div id="logo" style="position:absolute; left:11px; top:3px; width: 455px; height: 68px; color:black; font-size:32pt;">
    my text here</div>
    <div style="position:absolute; left:12px; top:4px; width: 455px; height: 68px; color:lightblue; font-size:32pt;">
    my text here</div>
    <div style="position:absolute; left:13px; top:4px; width: 455px; height: 68px; color:blue;font-size:32pt;">
    <a href="mytexthere.html" style="text-decoration: none">my text here</a></div>
    As you can see I have repeated the code three times is there away of doing this so that I only have to put 'my text here' in once and get the same results.

  2. #2
    SitePoint Addict
    Join Date
    Jul 2007
    Location
    San Jose, California
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <style type="text/css"><!--
    div {
    width: 455px;
    height: 68px; 
    position:absolute;
    font-size:32pt;
    }
    --></style>
    <div id="logo" style=" left:11px; top:3px;  color:black; ">
    	my text here
    </div>
    <div style="left:12px; top:4px; color:lightblue;">
    	my text here
    </div>
    <div style="left:13px; top:4px;color:blue;">
    	<a href="mytexthere.html" style="text-decoration: none">my text here</a>
    </div>

  3. #3
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers that one way, however I think I am looking for away to do it one line as this will be on every page in the site, I know I could do it with an image but don't what to do it like that.

    I have it that I now have a css with a title_a title_b and Title_c and I call them like so.

    HTML Code:
    <div class="title_a";>my text</div>
    <div class="title_b";>my text</div>
    <div class="title_c";>
    <a href="mytext.html" style="text-decoration: none">my text</a></div>
    however I was hoping there might be away to do it like this.
    HTML Code:
    <div class="the_title";>
    <a href="mytext.html" style="text-decoration: none">my text</a></div>
    once I have the css file correct.

    Now if you think this is a css question then I post a question there.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You can group them:

    Code CSS:
    #logo, .box2, .box3 {
       position: absolute;
       top:4px;
       width; 455px;
       height: 68px;
       font-size: 32pt;
    }
     
    #logo {
        left:11px;
        top:3px;
        color: black;
    }
     
    .box2 {
        left:12px; 
        color:lightblue;
    }
     
    .box3 {
        left:13px; 
        color:blue;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    If you want to use a more modular approach, you could do this as well:
    Code CSS:
    .title {
       position: absolute;
       top:4px;
       width; 455px;
       height: 68px;
       font-size: 32pt;
    }
     
    #a {
        left:11px;
        top:3px;
        color: black;
    }
     
    #b {
        left:12px; 
        color:lightblue;
    }
     
    #c {
        left:13px; 
        color:blue;
    }
    Code HTML4Strict:
    <div class="title" id="a"></div>
    <div class="title" id="b"></div>
    <div class="title" id="c"></div>



    Or:

    Code CSS:
    .title {
       position: absolute;
       top:4px;
       width; 455px;
       height: 68px;
       font-size: 32pt;
    }
     
    .title.a {
        left:11px;
        top:3px;
        color: black;
    }
     
    .title.b {
        left:12px; 
        color:lightblue;
    }
     
    .title.c {
        left:13px; 
        color:blue;
    }

    Code HTML4Strict:
    <div class="title a"></div>
    <div class="title b"></div>
    <div class="title c"></div>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    kohoutek big thanks, some every interesting ways of doing it there, I chose the class id one as that worked when I did it, the others do but thay did not go first time.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Howdo View Post
    I chose the class id one as that worked when I did it, the others do but thay did not go first time.
    You forgot to clear your browser cache between tests - if you had they'd all work first time.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thought it would have worked straight away as I am using coffeecup untill have some money to spend on something better that I can get to work, tried Altova still trying to work out how to get to doing something apart from the demos.

    Is there a CSS book out there that's worth gettting you know the one that you cannot do without.

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    There are plenty of books that are of great value.


    - Cascading Stylesheets, the Definitive Guide
    - Bulletproof Webdesign
    - The Ultimate CSS Reference (Sitepoint)
    - CSS Mastery
    - Transcending CSS

    Those are a few I have read. They're all immensely valuable. There are plenty more than those, but those are my picks.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

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