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>