CODEWITHSUNDEEP
htmlcssweb
yakults
yakults

Reputation: 55

Element positions upon resizing browser or zooming in/out

I'm very new to HTML/CSS and I still don't know some important attributes when maintaining elements on their positions even when the browser zooms in/out or when the browser resize.

I have managed to keep some images fixed on their position but get distorted upon browser resize.

Here's my work so far:

HTML

home.php

p.copyright {
  font-weight: bold;
  text-align: center;
  font-style: regular;
}

.clear {
    clear: both;
}

#header {
  display: block;
  width: 80%;
  top: 0;
  z-index: 1;
  text-align: center;
  position: fixed;
  overflow: hidden;
  margin-left:10%;
}

#footer {
  width: 80%;
  position:fixed;
  display: block;
  bottom: 0px;
  overflow: hidden;
  margin-left:10%;
}


#logo {
  position: relative;
  text-align: left;
  margin-left: 0;
  float: left;
  height: 95px;
  width:300px;
}

#navcontainer {
  display: block;
  margin-right:0;
  float: right;
  position: relative;
 }
#textbox {
  position: relative;
  float: right;
  height: 95px;
  width:300px;

}

#htimg, #bb-sb {
  position: relative;
}

#navcontainer ul {
  padding:0px
  list-style-type: none;
  text-align: center;
}

#navcontainer ul { 
  list-style-type: none; 
}

#navcontainer ul li { 
  display: inline;
}

#navcontainer ul li a:hover {
  color: red;
  background-color: #;
}

I'm fully aware that my code is very messy (and inconsistent, I guess). I also noticed that browsers do not behave the same. What solution should I do about this?

Upvotes: 1

Views: 9422

Answers (2)

AbstractChaos
AbstractChaos

Reputation: 4211

Few Quick things should get that working a little better.

First remove 2 of the link rels, only needed once. Next Wrap #Header, table, #footer in a div and set the css to

width:940px;
margin:0 auto;

The effect is the components will be centered and when you shrink the browser the page won't change size. Responsive (ie. changing the view as the size changes) is a little more involved.

While I agree with PP bootstrap is a good way to go, without knowing how it does it will cause you problems in the long run

EDIT

the header,footer.html don't need to have the header or html so it would be.

Header.html

    <div id="footer">

                <img src="images/rd-bb.jpg" align="right" width="300px"/>

           <div id="bb-sb">
                <img src="images/heading-bottom.jpg" width="100%" /> 
           </div>

            <div id="fttext">
                <font size="1"><p class="copyright" ><span style="color:#8e8e8f" >All site content copyright &#169; <span style="color:#0099ff">ELAN Holdings Corporation </span>2013 unless otherwise stated in site credits. All rights reserved. <br />
Website Design by Right<span style="color:#ec4e1b">Angle </span>Corporation</span></p></font>
            </div>
   </div>

Footer.html

   <div id="footer">

                <img src="images/rd-bb.jpg" align="right" width="300px"/>

           <div id="bb-sb">
                <img src="images/heading-bottom.jpg" width="100%" /> 
           </div>

            <div id="fttext">
                <font size="1"><p class="copyright" ><span style="color:#8e8e8f" >All site content copyright &#169; <span style="color:#0099ff">ELAN Holdings Corporation </span>2013 unless otherwise stated in site credits. All rights reserved. <br />
Website Design by Right<span style="color:#ec4e1b">Angle </span>Corporation</span></p></font>
            </div>
   </div>

The PHP file is providing the html,head,body tags.

Also i noted in your css your using position:fixed alot theres no need for that :)

EDIT2

Here is a fiddle with a working example, I had to remove the style.css file but you can see here that it works without.

Upvotes: 1

Mr.Web
Mr.Web

Reputation: 7154

The solution is that you learn Twitter Bootstrap: http://twitter.github.io/bootstrap/

It's a set of library for CSS which makes your site "responsive", meaning it basically resizes and moves things around depending on the browser size.

Try resizing this and you'll see the difference: http://twitter.github.io/bootstrap/examples/hero.html

Do it by hand piece by piece is going to drive you crazy if your knowledge on CSS/HTML is poor as you said.

Upvotes: 1

Related Questions