Styling problems using CSS

Question

Hello all,

I linked my code on the top. My main problem is that I have my header, content and footer perfectly set that works with all websites. It does not have a scrolling feature or anything. Everytime I try to add the Intel Logo to the screen. It does what it is up there. I move it around and tweek it and then it works for one browser and not the other... It keeps changing. I want the logo to stick to the left perfectly along with the header I made with CSS. Also I want the Mobility Group Text at that height right next to the logo, but for some reason it always messes up my header content and footer as well when I paly with it. So pretty much I want The Logo on first then Mobility Group Right next to itand make it very smooth!

Also I have just learned html css and php and if you guys see something in my code that could be done smarter please let me know. I need critical feedback so that I can progress in learning these new languages better so that I can succeed in this field of programming!

Thank you in advance for all the input and advice!!

HTML CODE:

<div id="page">

        <div id="header">

            <h1><img src="http://wireless.fm.intel.com/test/logo2.png">

                <h2>Mobility Group</h2>



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

        <div id="footer"></div>

</div>

</body>

CSS CODE:

Html, body
{
        Padding:0;
        Margin:0;
        Height:100%;
}
#page
{
        Min-height:100%;
        position:relative;
        height:100%;
}
#header
{
        background-color:#115EA2;
        height:100px;
        width:97.5;
}
#main
{
        width:1300px;
        margin-left:auto;
        margin-right:auto;
        background-color:#F1F2F3;
        min-height:87%;
        height:auto;
        height:87%;
        margin:0 auto -50px;
        vertical-align:bottom;
}
#footer
{
        Position:fixed;
        Width:100%;
        Bottom:0;
        Height:50px;
        background-color: #115EA2;
}
#header h1
{
        position:absolute;
        text-align:left;
        left:0px;
        top:0px;
}
#header h2
{
        text-align:center;
        font-size:44px;
        color:#FFFFFF;
        left:0px;
        top:20px;
        font-weight:bold;
}

This won't fix your problem but you haven't closed your <h1> tag or provided alternative text. It should be <h1><img src="wireless.fm.intel.com/test/logo2.png" alt="Intel Logo" /></h1> — Alex L
– Alex L, Commented Jul 10, 2013 at 22:52
Sure. So pretty much I have a header of 100px. On that header I have a logo to the left. I have to tweek it differently for each browser. (First question how can I add this image to the left of my header so that I don't have to change things to it seperately for every browser.) The second heading I created for the header overlaps the Logo image and I need to somehow move it to the point where it is right after the image. @Shomz — Krishp
– Krishp, Commented Jul 10, 2013 at 22:55
Assuming you mean the alt tag, yes, it is required to validate (although your site isn't going to break if you don't have it). Screen readers use it amongst other things. Can't look into your problem at the moment but if you don't get an answer I'll post one tomorrow. — Alex L
– Alex L, Commented Jul 10, 2013 at 23:21

Shomz · Accepted Answer · 2013-07-11 08:56:29Z

1

I'm still not sure I understood the question, but here's what can you do to make it more natural looking. Close the h1 tag, don't make it absolutely positioned, but rather make it float left. The same thing goes to the h2 element. And since the original image is missing, I've put another one, and fixed its height to 60px.

It's basically this:

#header h1 {
    text-align:left;
    left:0px;
    top:0px;
    float: left;
} 
#header h1 img {
    height: 60px;
}
#header h2 {
    text-align:center;
    font-size:44px;
    color:#FFFFFF;
    left:0px;
    top:20px;
    font-weight:bold;
    float:left;
}

See the results here: http://jsfiddle.net/AmKHx/1/ It should look the same in every modern browser.

Also, try not to use capital letters for CSS attributes - it's a standard to use lower case, and even some browsers might not like it.

answered Jul 11, 2013 at 8:56

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Krishp Over a year ago

THAT WORKED! I still don't know how it changed it, but atleast now the Text is not written over the logo! Only problem is that looking at this new code on the Chrome browser is amazing! It looks flawless. When I look it up on IE though the logo is like a small block how it is in your jsfiddle.net example and then the text next to it. Is there any way I can fix the logo image to fit the size of the header? @Shomz and once again Thank so much for yourhelp.

Krishp Over a year ago

@Shmoz sorry I tested everything out with the text and was able to use margin-top and margin-left to shift the text away from the img a little which worked perfectly. My biggest issue now is just the img being longer than the header in chrome and firefox and it is perfect in IE. If I change it to meet the needs of chrome and firefox than on IE it changes to a small img logo which looks really bad.

Shomz Over a year ago

You can try something like this: #header h1 img {max-width: 200px;} That will limit the logo image to 200 pixels, the same thing can be done to height (max-height). It depends on image proportions, tweak around with it and you'll figure it out surely.

Krishp Over a year ago

I tried that and it didn't work so well. I was trying to maybe make the image smaller by cutting the width of the background a little bit but that wasn't working well either. I will hopefully figure it out soon. Thank you for your help anyway I really appreciate it.

Shomz Over a year ago

Ideally, you original image file should be the size you need it, reducing the size by html/css is a bit redundant if you'll never use the larger version... I'm not sure what didn't work for you, but the best approach would be to specify only one dimension (height, for example) and let the browser proportionally rescale it. Don't forget to select/upvote an answer if it helped you. Cheers!

|

SasaT · Accepted Answer · 2013-07-10 23:23:48Z

0

Do you have a reset sheet?

Copy this to a new css file, call it reset.css and then load it in your page before you load your main css.

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}

answered Jul 10, 2013 at 23:23

SasaT

7316 silver badges19 bronze badges

1 Comment

Krishp Over a year ago

Ok so I did what you told me to do. then I added <link type="text/css" rel="stylesheet" href="reset.css"> and nothing changed. Thank you for that though. I read up on it and seemed to be pretty helpful!

Collectives™ on Stack Overflow

Styling problems using CSS

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related