What am i missing???

hybris · Post by **hybris** » Sun Aug 27, 2017 6:32 pm

I give up,

what am I missing in the code below? Why can't I get those damn buttons to stay within the menu line???

(Code is complete so you can just copy + paste to see the result...)

(I use chrome as browser)

Thanks.

Code: Select all

<?php
class page {
    private $buttons = array();                                                                                          
    public $banner="Test";                                                              
    
    public function Display()
    {
    echo "<html>\n<head>\n";
        $this -> ConfigureTopButtons();
        $this -> DisplayStyles();
    echo "</head>\n<body>\n";
    echo "<div id=\"container\">";
            $this -> DisplayBanner();
            $this -> DisplayTopMenu($this->buttons);
    echo "</div>";
    echo "</body>\n</html>\n";
    }

    private function ConfigureTopButtons() {                                                                                                        
            $buttons = array(
            "Button 1" => "../Somelink1.php",           
            "Button 2" => "../Somelink2.php",              
            "Button 3" => "../Somelink3.php",            
            "Button 4" => "../Somelink4.php"
            );
            $this->buttons= $buttons;
    }

    public function DisplayStyles() 
    { ?>
    <style>
    body {
        margin: 0; padding: 0;
        text-align: center; 
        background-color:#ffffff;
    }

        #container {
            background-color:#ffffff;
            text-align:center;
            height:auto;
            width:80%;
            min-width:800px;
            position:relative;
            top:0%;
            margin:auto;
        }

        #banner {
            background-image:<?php echo "url(\"".$this->classimagepath.$this->classtopimage."\")" ?>;
            background-color:#ffffff;
            height:10%;
            width:100%;
            position:relative;
            float:left;
            margin-top:0px;
            margin-left:0px
        }

        #topmenu {
            background-color:#123456;
            height:30px;
            width:100%;
            position:relative;
            float:left; 
            margin-top:0px;
            margin-left:0px;
        }
        
            #tmitem {
                display: inline-block;
                background-color:#ff4321;
                position:relative;
               /* margin-top:0px;
                margin-left:0px;*/
            }
            
                h1 {
                    font-family: arial, helvetica, sans-serif;
                    color: #000000;
                    font-size:40px;
                    text-align: left;
                    letter-spacing: -3px;
                    padding:0px;
                    margin-top:10px;
                    
                }
    
                .clear {    
                    clear: both;
                }
    
                .clearleft {
                    clear: left;
                }
                
                .inline {
                    display: inline-block; 
                    margin:0px;
                }
                
                tm {
                    color:#ffffff; font-size:6pt; text-align:center;
                    font-family:arial,sans-serif
                }
    
    </style> <?php
    }
  
    public function DisplayBanner() {
        echo "<div id=\"banner\">";
            echo "<h1>".$this->banner."</h1>";
        echo "</div>" ;  
    }
  
    public function DisplayTopMenu($buttons) {
        echo "<div id=\"topmenu\">";
            while (list($name, $url) = each($buttons)) {
                $this -> DisplayNewTopButton($name, $url, !$this->IsURLCurrentPage($url));
            }
        echo "</div>";    
    } 
   
     public function DisplayNewTopButton($caption, $url, $iscurrent) {
        $b = new topmenubutton($caption, $url, $iscurrent);
        $b ->display();    
    }
    
    public function IsURLCurrentPage($url) {
        if(strpos($_SERVER['PHP_SELF'], $url )==false) {
            return false;
        } else {
            return true;
        }
    }
} 


class topmenubutton { 
    private $width;
    private $height;
    private $caption;
    private $url;
    private $iscurrent;
    
    public function __construct($caption, $url, $iscurrent){
        $this->width = 100;
        $this->height = 100;
        $this->caption = $caption;
        $this->url = $url;
        $this->iscurrent=true;
    }
    
    public function display() {
        echo "
            
                <a href=\"".$this->url."\">
                      <div id=\"tmitem\" style=\" width:".$this->width."px; height:".$this->height."%; \"><tm>".$this->caption."</tm></div>
                </a>";
    }   
}
  

$a = new Page;
$a->display();

?>

twinedev · Post by **twinedev** » Mon Aug 28, 2017 12:25 am

To be honest, since this is a CSS issue, it might be better to ask in a different location other than "PHP Code"

hybris · Post by **hybris** » Mon Aug 28, 2017 3:16 am

Oops, yeah youre right.

Maybe some of the awesome mods can move this to misc forum?

Post by **requinix** » Mon Aug 28, 2017 3:59 am

Sure.

What's the output of the page? As in the HTML and CSS markup after PHP finished.

hybris · Post by **hybris** » Mon Aug 28, 2017 5:58 am

requinix wrote:Sure.

What's the output of the page? As in the HTML and CSS markup after PHP finished.

I'm not sure what you mean, The code is complete so you can just copy and paste it into a test.php file to see it or you can watch the result here
http://fairdea.com/Main/Class/a.php (I will remove this page in a day or two)

The idea is it should display a:
White background (working)
White container (working)
.....white div with "TEST" (working)
.....black div menu bar (working)
.............red inlinedivs buttons (buttons are working but they are displayed too low (like 5px under the menu top and continue like 5px under the menu line)

It looks like the buttons fell down like 5-10 px in relation to the menu bar. I do not understand why this is happening. I know I can fix the bottom part with making menubar overflow = hidden but then the button is still 5-10 px too low in the menudiv.

Its like I put in the (relative to menubar) inline (button) div position-top:5px only I didn't (or atleast I cant see where I did it)....

http://fairdea.com/Main/Class/a.php

Post by **requinix** » Mon Aug 28, 2017 6:24 am

Yes, but it's easier for me if I don't have to run someone's PHP code to see what the problem is.

Problem #1: putting a block DIV inside an inline A. HTML works best when blocks contain blocks or inlines and inlines contain only inlines. When you start putting blocks in inlines you get unwanted spacing and positioning. Make the links be display:inline-block.
Problem #2: putting an inline A inside a block DIV. What I said above is still true, but this is a different problem. Here the issue is that you want an inline(ish) element in a block but appear as a block. That used to be done by floating, which ignores assorted positioning normally done for inline (eg, text) elements, but nowadays with inline-block you can get the same effect by setting line-height:(same height as the parent container).

So make each #topmenu>* have display:inline-block and line-height:30px.

Problem #3: IDs need to be unique on a page. You have four #tmitem elements. If you want more than one element on a page to get some CSS behavior then use a class instead of an ID.

gautamz07 · Post by **gautamz07** » Mon Aug 28, 2017 2:52 pm

never seen a tm html tag , not sure where you got that from,

First thing you should do is make sure your <a> tags completely container its child div, so the following code:

Code: Select all

 #topmenu > a {
        display: inline-block;  
}

Now add overflow:hidden on the <a> tag or its child <div>

Code: Select all

 #topmenu > a {
        display: inline-block; 
        overflow:hidden; 
}

This might be(i suspect , i am not sure an issue of childs margin applying to the parent ..
though i see no margins applied to the <tm> elementhttps://stackoverflow.com/a/20692375/4381665).

Now you want to center the text, use flex:

Code: Select all

  #topmenu > a{
      display:flex;
      align-items:center;
      justify-content:center;
    }

That should resolve your issue,

if i was you though i would code the HTML like so:

Code: Select all

<div id="container">
    <div id="banner">
        <h1>Test</h1></div>
    <nav id="topmenu">
        <ul>
            <li>
                <a href="../Somelink1.php">
                    button 1
                </a>
            </li>
            <li>
                <a href="../Somelink1.php">
                    button 2
                </a>
            </li>
            <li>
                <a href="../Somelink1.php">
                    button 3
                </a>
            </li>
        </ul>
    </nav>
</div>

a much more meaningful and organized structure and then take off all the fixed heights (not sure why you have height:100% being applied dynamically ... again not a great thing to do , unless you know what your doing !).

Now apply the padding on the <a> (and also make it display:inline-block) , apply the padding depending on how much height you want you anchor to have .. also the text will be automatically centered , if you give the <a> tag a even padding-top and padding-bottom !

Also, would't use any other unit measure other then rem or em , not even px !

hybris · Post by **hybris** » Mon Aug 28, 2017 3:52 pm

Thanks guys!

I was going insane over this. I haven't had the chance to fix the code yet but I will try to do it tomorrow and see if I can get it to work.

requinix wrote:Yes, but it's easier for me if I don't have to run someone's PHP code to see what the problem is.

Well if I actually used my brain before asking I'm sure I could have come up with this myself

Sorry.

requinix wrote:When you start putting blocks in inlines you get unwanted spacing and positioning.

Aha, didn't know that. I thought I'd missed some padding or something similar but couldn't find it.. I went trough the code over and over to look for it and thought my eyes were just too tired to find it.

gautamz07 wrote:never seen a tm html tag , not sure where you got that from,

Its just a styletag I defined at the bottom of the css (tm=topmenu ...)

Code: Select all

tm {
                    color:#ffffff; font-size:6pt; text-align:center;
                    font-family:arial,sans-serif
                }

gautamz07 wrote:a much more meaningful and organized structure and then take off all the fixed heights (not sure why you have height:100% being applied dynamically ... again not a great thing to do , unless you know what your doing !).

Well by now I think it's obvious I don't know what I'm doing haha.
The heights are just for testing so far, I havent worked much with % before (used to work with just px) and wanted to see how it behaves

PHP Developers Network

What am i missing???

What am i missing???

Re: What am i missing???

Re: What am i missing??? (CSS - mod pls move)

Re: What am i missing???

Re: What am i missing???

Re: What am i missing???

Re: What am i missing???

Re: What am i missing???