PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Fri Nov 24, 2017 5:55 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 8 posts ] 
Author Message
 Post subject: What am i missing???
PostPosted: Sun Aug 27, 2017 6:32 pm 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 172
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.

Syntax: [ Download ] [ Hide ]
<?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();

?>


Last edited by hybris on Mon Aug 28, 2017 3:17 am, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: What am i missing???
PostPosted: Mon Aug 28, 2017 12:25 am 
Offline
Forum Regular
User avatar

Joined: Tue Sep 28, 2010 11:41 am
Posts: 984
Location: Columbus, Ohio
To be honest, since this is a CSS issue, it might be better to ask in a different location other than "PHP Code"


Top
 Profile  
 
PostPosted: Mon Aug 28, 2017 3:16 am 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 172
Oops, yeah youre right.

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


Top
 Profile  
 
 Post subject: Re: What am i missing???
PostPosted: Mon Aug 28, 2017 3:59 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6587
Location: WA, USA
Sure.

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


Top
 Profile  
 
 Post subject: Re: What am i missing???
PostPosted: Mon Aug 28, 2017 5:58 am 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 172
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 [url]
http://fairdea.com/Main/Class/a.php[/url] (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


Top
 Profile  
 
 Post subject: Re: What am i missing???
PostPosted: Mon Aug 28, 2017 6:24 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6587
Location: WA, USA
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.


Top
 Profile  
 
 Post subject: Re: What am i missing???
PostPosted: Mon Aug 28, 2017 2:52 pm 
Offline
Forum Contributor
User avatar

Joined: Wed May 14, 2014 12:18 pm
Posts: 331
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:

Syntax: [ Download ] [ Hide ]
 #topmenu > a {
       display: inline-block;  
}
 


Now add overflow:hidden on the <a> tag or its child <div>
Syntax: [ Download ] [ Hide ]
 #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:

Syntax: [ Download ] [ Hide ]
  #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:

Syntax: [ Download ] [ Hide ]
<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 !


Top
 Profile  
 
 Post subject: Re: What am i missing???
PostPosted: Mon Aug 28, 2017 3:52 pm 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 172
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 :D 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 ...)

Syntax: [ Download ] [ Hide ]
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 :)


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group