News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

How to center

Started by weerforum, September 18, 2012, 07:24:08 PM

Previous topic - Next topic

weerforum

This code

<div ="metebftinesc" style="position:absolute;top:-127px;left:44px;clip:rect(135px, 531px, 535px, 170px)">
<img src="http://www.buienradar.nl/images.aspx?jaar=-3&amp;bliksem=0&amp;voor=&amp;soort=loop1uur1x1_bliksem" height="627" width="700"  alt="" title="">
</div>
<DIV ="metrotines" style="position:absolute;top:14px;left:222px">
<a href=""><img src="http://weerforum.eu/wibisaradar/images/weerkaart.gif" width="343" height="358" border="0" title="" alt="" ></a>
</div>

Orangine

as long as the position is set to absolute you cannot center it

stylusss

<div ="metebftinesc" style="margin: 0 auto; position:absolute;top:-127px;left:44px;clip:rect(135px, 531px, 535px, 170px)">
<img src="http://www.buienradar.nl/images.aspx?jaar=-3&amp;bliksem=0&amp;voor=&amp;soort=loop1uur1x1_bliksem" height="627" width="700"  alt="" title="">
</div>
<DIV ="metrotines" style="margin: 0 auto; position:absolute;top:14px;left:222px">
<a href=""><img src="http://weerforum.eu/wibisaradar/images/weerkaart.gif" width="343" height="358" border="0" title="" alt="" ></a>
</div>


Try that ^^
For top-notch server quality and expertise, visit CoreISP.net

weerforum

Quote from: stylusss on September 18, 2012, 08:00:21 PM
<div ="metebftinesc" style="margin: 0 auto; position:absolute;top:-127px;left:44px;clip:rect(135px, 531px, 535px, 170px)">
<img src="http://www.buienradar.nl/images.aspx?jaar=-3&amp;bliksem=0&amp;voor=&amp;soort=loop1uur1x1_bliksem" height="627" width="700"  alt="" title="">
</div>
<DIV ="metrotines" style="margin: 0 auto; position:absolute;top:14px;left:222px">
<a href=""><img src="http://weerforum.eu/wibisaradar/images/weerkaart.gif" width="343" height="358" border="0" title="" alt="" ></a>
</div>


Try that ^^

Sorry won`t work  :(

weerforum


hcfwesker

Just a guess.

<div ="metebftinesc" style="position:absolute;top:-127px;left:44px;clip:rect(135px, 531px, 535px, 170px)" align="center">
<img src="http://www.buienradar.nl/images.aspx?jaar=-3&amp;bliksem=0&amp;voor=&amp;soort=loop1uur1x1_bliksem" height="627" width="700"  alt="" title="">
</div>
<DIV ="metrotines" style="position:absolute;top:14px;left:222px" align="center">
<a href=""><img src="http://weerforum.eu/wibisaradar/images/weerkaart.gif" width="343" height="358" border="0" title="" alt="" ></a>
</div>

weerforum

Quote from: hcfwesker on September 20, 2012, 07:05:06 PM
Just a guess.

<div ="metebftinesc" style="position:absolute;top:-127px;left:44px;clip:rect(135px, 531px, 535px, 170px)" align="center">
<img src="http://www.buienradar.nl/images.aspx?jaar=-3&amp;bliksem=0&amp;voor=&amp;soort=loop1uur1x1_bliksem" height="627" width="700"  alt="" title="">
</div>
<DIV ="metrotines" style="position:absolute;top:14px;left:222px" align="center">
<a href=""><img src="http://weerforum.eu/wibisaradar/images/weerkaart.gif" width="343" height="358" border="0" title="" alt="" ></a>
</div>


Nope sorry  ???

Hj Ahmad Rasyid Hj Ismail

Quote from: Orangine on September 18, 2012, 07:37:08 PM
as long as the position is set to absolute you cannot center it
I will have to concur with Orangine. You will need to remove position absolute. More preferably, do such styling in index.css file instead of hardcoded it into the template.

Kindred

well, first of all, why are you posting this in 2.x support?  This doesn't seem like anything native to SMF....

but second, why the heck are you using all those absolute positionings? Unless absolutely necessary you should almost always use relative positions.

third...   that's not valid html...
<div ="metebftinesc"

huh?

you need something BEFORE that = sign...   div class="..., div id ="...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Orangine

Good catch didn't see that!

weerforum

Ok Kindred i am sorry for asking here.
I will ask somewhere else.

Kindred

weer...   don't worry too much about it. It was more for the future.   Now that I'm back on the green team, I'll just bounce this over to coding help. ;)
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

weerforum

Thnx Kindred
I still don`t get it  :( :( :(

Kindred


<div id="metebftinesc" style="padding:0px;float:left;clip:rect(135px, 531px, 535px, 170px);">
<img src="http://www.buienradar.nl/images.aspx?jaar=-3&amp;bliksem=0&amp;voor=&amp;soort=loop1uur1x1_bliksem" height="627" width="700"  alt="" title="">
</div>
<div id="metrotines" style="padding:0px;float:right;">
<a href=""><img src="http://weerforum.eu/wibisaradar/images/weerkaart.gif" width="343" height="358" border="0" title="" alt="" ></a>
</div>
<div style="clear:both"></div>



this is what the code should look like.
However...   we can't help you adjust the relative positioning until we see the page itself or at the very least, the code this is being dropped into.  You can adjust the padding setting to help position the actual placement, without using silly absolute positioning.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

weerforum

I have this now
Please see attachments.

<div id="" style="padding:0px;float:left;clip:rect(135px, 531px, 535px, 170px);">
<img src="http://www.buienradar.nl/images.aspx?jaar=-3&amp;bliksem=0&amp;voor=&amp;soort=loop1uur1x1_bliksem" height="343" width="358"  alt="" title="">
</div>
<div id="" style="padding:0px;float:left;">
<a href=""><img src="http://weerforum.eu/wibisaradar/images/weerkaart.gif" width="343" height="358" border="0" title="" alt="" ></a>
</div>
<div style="clear:both"></div>

weerforum

I solved it peeps.
Thnx for the help ;)

<html>
    <head>
        <style type="text/css">
        <!--
            body { margin: 0; padding: 0; }
            #weerwrapper { margin: 0 auto 0 auto; width: 361px; position: relative; }
            #buienradar { position: absolute; top: -135px; left: -170px; clip:rect(135px, 531px, 535px, 170px); height: 627px; width: 700px; }
            #weerforum { position:absolute; top:14px; left:10px; width: 343px; height: 358px; }
        //-->
        </style>
    </head>

    <body>
        <div id="weerwrapper">
   
             <img id="buienradar" title="Afbeelding Buienradar" src="http://www.buienradar.nl/images.aspx?jaar=-3&amp;bliksem=0&amp;voor=&amp;soort=loop1uur1x1_bliksem" />
   
            <img id="weerforum" title="Afbeelding Weerforum" src="http://weerforum.eu/wibisaradar/images/weerkaart.gif" />

        </div>
    </body>
</html>

Kindred

glad you fixed it...   but you are still using absolute positioning which is a poor choice.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

weerforum

Do you have a suggestion Kindred ?

Kindred

oh...   I see what it's doing with that stuff...   it's doing an overlay

Ugly, messy coding...   but I guess you can leave it, since it would take more effort to plan positioning than it's probably worth....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Advertisement: