SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question header with split word color combo

    Hello all,

    It seems that just when I think I am getting the hang of creating better css I end up having to ask why this doesn't work the way that I want.

    I was asked to split the name ΔΕΡΜ Α - Ω into 2 colors and I have the following code for a header and although it appears to work in say a normal browser width, when I squeeze the browser width down the header line of logoname2 and logoname3 break apart.

    What I would like to see is that all the header info move to the left side when the screen size is narrower than 800x600.

    What am I doing wrong and why?

    Should I set the header font sizes to em for variable screen sizes?


    Code:
    body {
        background: #FFFFFF; /* white background for typography and WYSIWYG editors */
    }
    
    #container {
        padding: 0;
        margin: 0;
        width: 100%;
        background:#fff; /*background: #C2C29C url(../images/bg.png) repeat 0 0;*/
        text-align: center;
        
        font-family: Arial, Verdana, sans-serif;
    }
    
    #mainwrap {
        width:90%; /*center hack*/
        /*margin: 30px auto;*/ /*center hack*/
        margin: 30px 60px 0px 60px;
        text-align:left;
        /*background:#fff url(../images/rbg.png) repeat-y 80% 0; */
        height:100% !Important; 
        height:1%; /* IE */
        min-height: 700px;
        border: 1px solid #999;    /*    777    */
    }
    
    #header {
        background-color: #E3EFFF;
        height: 150px;
        border-bottom: 1px solid #999;
    }
    
    #logoname  h1 {
        float: left;
        width: 120px;
        margin: 10px 0px 0px 10px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        text-decoration: none;
        font-family: Arial, Verdana, sans-serif;
        font-size: 18px; font-weight: bold; color: #555; 
    }
    #logoname2  h2 {
        float: left;
        width: 180px;
        margin: 10px -10px -10px 156px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        text-decoration: none;
        font-family: Arial, Verdana, sans-serif;
        font-size: 60px; line-height: 80px; font-weight: bold; color: #000;
        /*text-shadow: 5px 8px 2px #555;*/
    }
    #logoname3 h2 {
        float: left;
        width: 180px;
        margin: 0px 0px -10px -10px;
        padding: 10px 0px 0px 0px;
        text-align: center;
        text-decoration: none;
        font-family: Arial, Verdana, sans-serif;
        font-size: 60px; line-height: 80px; font-weight: bold; color: #CF1A27;
        /*text-shadow: 5px 8px 2px #555;*/
    }
    #logoname4 p {
        float: left;
        width: 600px;
        margin: 0px 0px 0px 142px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        text-decoration: none;
        font-family: Arial, Verdana, sans-serif;
        font-size: 1.3em; line-height: 1.5em; font-weight: bold; color: #555; 
    }
    Code:
    <div id="container">
        <div id="mainwrap">
            <div id="header">
    
                <div id="logoname">
                    <h1>mydomain.gr</h1>
                </div>
                
                <div id="logoname2">
                    <h2>DERMA</h2>
                </div>
                <div id="logoname3">
                    <h2>TOLOGY</h2>
                </div>
    
                <div id="logoname4">
                    <p>name of person <br />
                    name of person2 - name of person3</p>
                </div>
    </div>
    </div>
    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It's not really clear how you want this to appear. Could you post a screen shot of the result you want? There are much easier ways to do this. If you want part of a word or heading colored differently, just wrap part of it in a span and color it differently. Using separate heading elements is not the way to go.

  3. #3
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello ralph.m,

    The screen shot for a regular browser size of 800 x 600 is as follows. If the size is smaller than I think that each line should fall one below the other and all to the left side of the screen.

    FireShot-Screen-Capture.jpg

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by peterb View Post
    each line should fall one below the other
    I'm confused. Each line is below the other in your screen shot. You need to clarify.

  5. #5
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because of the use of set widths for logoname2 and 3, the info does not fall one under the other when the width of the browser is less than 800px.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yeah, don't set widths and so on, just do something like this:

    Code:
    <h2>DERMA<span>TOLOGY</span></h2>
    Code:
    h2 {text-align: center; }
    h2 span {color: red;}
    That's the basic idea.

    If you want text left aligned on smaller screens, you can use @media queries. E.g.

    Code:
    @media only screen and (max-device-width : 800px) {
      h2 {text-align: left;}
    }
    Those divs you have are unnecessary, as you can style the headings just as easily. They are block level elements just like a div.

  7. #7
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My alternative thought was to simply make the logoname2 and 3 into a graphic. That could be a better and simpler solution I guess.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    But you really want important text like that to be actual text, so that it can be indexed by search engines and be accessible to non-sighted users. So at a minimum, you'd also supply the text along with the image. But really, this is easy to do with text anyway. doing it with an image is more longwinded.

  9. #9
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are right. After experimenting with it, it now works even when I resize it to an iphone.
    Many thanks

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.


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
  •