Positioning of elements


Hi! I'm starting HTML/CSS and I'm having this problem with positioning of elements...



I've used this to position a text:



HTML



```
<center>
(...)
<p id="txt_principal">lorem ipsum (...)</p>
(...)
</center>
```

CSS



```
#txt_principal{
font: italic normal 14px Verdana, sans-serif;
color: #DDD;
text-align:justify;
position:absolute;
margin-top: 25px;
margin-left: 205px;
margin-right: 400px;
}
```

But whenever the window is resized the text gets out of position, as you can see on the video below.



<http://www.youtube.com/watch?v=2akmS-LY-Hg>
By adding 'margin-left: 205px' & 'margin-right: 400px' you're killing the '<center>', the correct way to do it is delete the '<center>' tags, and put 'margin-left: auto; margin-right: auto;' that will automatically center you div
Hi, I guess it depends on your layout. Of you're using CSS then you need to set the left and right margin of your main container to auto. Please check example below.

HTML:

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

CSS: 

#main {

margin-right: auto;

margin-left: auto;

}

If you need to have a visual example for this, try opening a new HTML document using a CSS layout, you can do that by going to file>new>blank page> then select a CSS Layout for HTML.

I hope this post makes sense to you. 😉 <p>google's above the fold page layout algorithm looks at how much good, helpful content is visible without scrolling:</p>
<p>&nbsp;</p>
<p>https://webmasters.googleblog.com/2012/01/page-layout-algorithm-improvement.html</p>
<p>there is often a struggle between designers and seos because it sure looks nice to have a big huge image taking up all of the above the fold content but if there is no or limited helpful text there then that's not good from an seo standpoint.</p>
<p>with that said, google will still index content that is below the fold. it's debatable whether it's given the same weight as content higher up on a page though. matt cutts from google has said before that a link that is higher up on a page is not worth any more than a link lower down on the page. however, some <a href="https://moz.com/blog/10-illustrations-on-search-engines-valuation-of-links">experiments</a> by moz contradict this.&nbsp;</p>
<p>this might be a fun experiment to do - create content both above and below a hero image and see what ranks best. i might even do that!</p>
<p>marie</p> hello, try to use the following css code.

you can add css code in customize → additional css section.

@import url('https://fonts.googleapis.com/css?family=press+start+2p');

#masthead .mainnav ul li a {

font-family: 'press start 2p', cursive !important;

}

please feel free to ask any other ques… ```

<p>
    <div>
        <span&gtsomething_1</span>
        <span&gtsomething_2</span>
    </div>
</p>

``` okay, from an iphone i see the problem. make sure you don’t have anything on too high of a pixel measurement regarding width as well as make sure none of what you have on position other than auto is sticking out. hope this helps. :wink::+1: * Use RelativeLayout instead of LinearLayout
* Instead of using your gradient as the background of the main layout container, add a child view, set the height explicitly to the size you want (230dp), and set the background of that view to your gradient.



  




 (adsbygoogle = window.adsbygoogle || []).push({}); Put the grid inside a panel (rather than scrolling the grid itself) and the following in the head section of the page. This is set for using a MasterPage, but you can remove the "ctl00\_MainContentPlaceHolder\_" prefix for a regular page.  

  

XMLCopy Code

```
<script type="text/javascript" language="javascript">
        window.onload = function () {
                var strCook = document.cookie;

                if (strCook.indexOf("!~") != 0) {
                        var intS = strCook.indexOf("!~");
                        var intE = strCook.indexOf("~!");
                        var strPos = strCook.substring(intS + 2, intE);
                        document.getElementById("ctl00\_MainContentPlaceHolder\_pnlFindings").scrollTop = strPos;
                }

        }
</script>
<script type="text/javascript" language="javascript">
        function SetDivPosition() {
                var intY = document.getElementById("ctl00\_MainContentPlaceHolder\_pnlFindings").scrollTop;
                document.cookie = "yPos=!~" + intY + "~!";
        }
</script>
```
  

  

In the Panel, you'll need:   

 onscroll="SetDivPosition()"  

  

That should do it for you. Works for me, anyway. pretty simple to do, just select the tabs element which currently has no style to it. add a style and click the center align button for typography. easy peezy. hi there,

you should set every “height” to “auto”.

the “height” in your designer tool isn’t the same as a mobile phone. your elements in the blocks with a set height are probably bigger than the set height you used.

hope this works!

cheers,

max zijlstra hey thibaut,

i believe what you want to try is adding is a rectangle object that fills the rest of the screen but is a 0% opacity background. this may help to keep the object from resizing for the screen.