CODEWITHSUNDEEP
htmlcssposition
user1604220
user1604220

Reputation: 161

CSS position on different screens

When I'm trying to give my logo a position, it looks ok on my screen. But if I make the screen smaller or browse from a phone, the logo moves either to the center or glitches out of the header. The menu has the same issue. Why does this happen?

CSS:

#logo {
    margin-left: 20%;
    padding: 20px;
    float: left;
}

.navigation {
    list-style: none;
    font-family: Arial;
    float: left;
    margin-left: 400px;
    margin-top: 20px;
}

.navigation li {
     display: inline-block;
     margin: 10px;
}

Html:

<header>
    <div class="header">
    <div id="logo"><img src="img/logo.png"></div>
        <div id="headnav">
            <ul class="navigation">
                <li>Home</li>
                <li>Shop</li>
                <li>Rank</li>
                <li>Free</li>
            </ul>
        </div>
    </div>
    <div class="secondheader">
    </div>
    <div class="thirdheader">
    </div>
</header>

Upvotes: 0

Views: 355

Answers (3)

MicronXD
MicronXD

Reputation: 2220

I think you're trying to center the stuff in your header. (And if you are, you're doin it wrong :P)

you should be using margin:0 auto; on some kinda container for that.

I think you want something like this:

HTML

<div class="header">
  <div class="margin-center">
    <div id="logo">
      LOGO
    </div>
    <div id="nav">
      stuff on the right
    </div>
  </div>
</div>

css

.header{width:100%;}
.margin-center{margin:0 auto;max-width:960px;}
#logo{float:left;}
#nav{float:right;}

EDIT: It may not have worked because of all the other styles you have in there.

If you could, please try this -

ADD THIS TO YOUR CSS

.margin_center {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    top: 19px;
    min-width: 600px;
}
#headnav {
    float: right;
}

CHANGE THIS IN YOUR CSS

#logo {
    margin-left: 350px;
    padding: 20px;
    float: left;
}

to

#logo {
    float: left;
}

AND CHANGE THIS

.navigation {
    list-style: none;
    font-family: Arial;
    float: left;
    margin-left: 400px;
    margin-top: 20px;
}

to

.navigation {
    list-style: none;
    font-family: Arial;
}

AND CHANGE THIS HTML

<div class="header">
    <div id="logo"><img src="img/logo.png"></div>
    <div id="headnav">
        <ul class="navigation">
            <li>Home</li>
            <li>Shop</li>
            <li>Rank</li>
            <li>Free</li>
        </ul>
    </div>
</div>

to

<div class="header">
    <div class="margin_center">
        <div id="logo"><img src="img/logo.png"></div>
        <div id="headnav">
            <ul class="navigation">
                <li>Home</li>
                <li>Shop</li>
                <li>Rank</li>
                <li>Free</li>
            </ul>
        </div>
    </div>
</div>

Upvotes: 0

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15180

Per your comment, you want your logo image on the left, and your navigational text on the right. The easiest solution would be to float your image left, float your navigation right, and clear the floats.

Then your HTML would be something like this:

<header>
    <div class="header">
        <div id="logo"><img src="img/logo.png"></div>
            <div id="headnav">
                <ul class="navigation">
                    <li>Home</li>
                    <li>Shop</li>
                    <li>Rank</li>
                    <li>Free</li>
                </ul>
            </div>
        <div class="clear"></div>
        </div>
...

And then in your CSS:

#logo {
    float: left;
}
.navigation {
    float: right;
}
.clear {
    clear: both;
}

I made a JSFiddle example. (The image has an explicit larger size to make it more obvious, FYI. You can resize the Results panel to see the differences.)

Upvotes: 0

Naz
Naz

Reputation: 5144

Your margins are way to big. That's why they look like that on small screens. The logo has this style :

margin-left: 350px;
padding: 20px;
float: left;

That gives it 350px margin, and after that you have a huge margin on the menu of 400px after you add those up it bigger then normal device resolution itself.

Upvotes: 2

Related Questions