header with split word color combo

[peterb]

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?

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; 
}

<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>

[ralph.m]

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.

[peterb]

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

[ralph.m]

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.

[peterb]

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.

[ralph.m]

Yeah, don't set widths and so on, just do something like this:

<h2>DERMA<span>TOLOGY</span></h2>

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.

@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.

[peterb]

My alternative thought was to simply make the logoname2 and 3 into a graphic. That could be a better and simpler solution I guess.

[ralph.m]

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.

[peterb]

You are right. After experimenting with it, it now works even when I resize it to an iphone.
Many thanks

[ralph.m]

You're welcome.