Jump to content

Moloney

Member
  • Posts

    59
  • Joined

  • Last visited

Posts posted by Moloney

  1. Hi all,

    There is something simple i am probably missing here, can anyone see it?

    I've tried debugging it for a while now.

     

    This is the html part:

     

    <p> Company Name: <input type="text" name="company_name" value="Company Name" /> </p>

     

     

    This is the php part

     

    $name = $_REQUEST['company_name'];

     

    if (!EMPTY($name)) {

    $condition2 = TRUE;

    }

    elseif (!EMPTY($name) == FALSE) {

    echo "<p> Sorry, the form has not been submitted. A Company name has

    not been submitted</p>";

    }

    elseif ( $name == "Company Name") {

    echo "<p> Sorry, the form has not been submitted. A <b>valid</b> Company name has not been submitted</p>";

    }

     

    The first 2 parts of the statement work but the third part of the statement does not.

    I can't figure out why the third part is not echoed.

    It looks like $name is the same as "Company Name".

     

    Any ideas what is wrong?

     

    Thanks

  2. Hey there,

    I'm not sure what a spry menu is but if it is just a normal horizontal navigation menu then I had this problem before.

    This was the first real problem that I came up against when I started using css a few months back and there is a post where

    others on this forum contributed to my solution. css positioning problem

    Maybe the following will help you find a solution:

    http://jsfiddle.net/j6ecR/ (inline-block method) --> the text-align:center; is what centers the li element.

    or

    perhaps something along these lines this could work for your either (modified to your requirements):

    http://jsfiddle.net/jDc5J/1/ (float:left; method) --> By setting a width for each li element, i think it should do what you want it to. The total of the 6 <li> widths must be 100% or 960px in your case.

    All the Best,

  3. I think that media queries might not be necessary for this project because the navigation menu is only three elements wide.

    But responsive designs using css is the answer --- essentially you need to change your widths to percentages instead of pixels.

    But you would have to learn at least a little bit about how to use css.

  4. Hi all,

     

    I am using the translate property to pull down my nav buttons a little bit when they are hovered over.

    The problem I am having though is that the overflow is hidden. I thought it should be visible by default?

     

    nav ul li:hover {

    -moz-transform:translate(-4px, 4px);

    overflow:visible;

    }

     

    Also, even when I put overflow:visible; in specifically, it still is hidden because the background-color of the body shows up rather than the button background color.

     

    In fact, I've tried a few different things now including changing the z-index and position to relative and I can't seem to get the overflow of these nav buttons to show up.

     

     

     

    Any ideas anyone?

     

    ok, i figured this one out. the problem was that the background color of the nav ul li:hover element had to be set to #fff just like the nav element.

    But I thought this colour would have been inherited. Wonder why it wasn't? (maybe hover simply doesn't inherit parent features?)

  5. Hi all,

     

    I am using the translate property to pull down my nav buttons a little bit when they are hovered over.

    The problem I am having though is that the overflow is hidden. I thought it should be visible by default?

     

    nav ul li:hover {

    -moz-transform:translate(-4px, 4px);

    overflow:visible;

    }

     

    Also, even when I put overflow:visible; in specifically, it still is hidden because the background-color of the body shows up rather than the button background color.

     

    In fact, I've tried a few different things now including changing the z-index and position to relative and I can't seem to get the overflow of these nav buttons to show up.

     

    Any ideas anyone?

  6. Is it possible to center a div (not a text or an image) horizontal and vertical? I have always used the position absolute and negative margins like in the example that I provide. But it has the problem that if the content i larger than the window, the content is cut. Is there another way to center without this problem?.

     

    I have the example here to play: http://jsfiddle.net/6KaMy/1/

    I attach the file too.

     

    Im not sure exactly what your asking but why don't you get rid of positoon absolute for the

    .content div and change it to position relative and change it to margin right and left = auto. That should centre it on the x axis.

    You could then centre in on the y-AXIS by setting a margin top = 30% or 300px again for the .content

    Div but the exact px or percentage depends really on your height requirements.

    Im not sure is this what your looking for?

  7. Correct.

     

     

    I can't really comment on this -- it isn't something I use. You might want to check the FiddleJS support or FAQs or something. Though I don't use it much, it is useful for questions where the code needs to run, and means it's a bit easier for me to help you with any questions without having to manually create my own files and copy/paste code.

     

    I'm going to look into it a bit more. I think there are other programs like fiddlejs too. But that's why I used it because it makes testing and asking questions easier for other people & they should have to stress the minimum to get an answer!

    Thanks again.

     

     

     

  8. Here's a simple example. Say you have this:

     

    x = 1;

    x += 2;

     

    The result of x should be "3". The += adds whatever is on the right side of the "+=" to whatever is on the left. It's the same as saying:

     

    x = 1;

    x = x + 2;

     

    In your sample, when you click the button, you use jQuery to get the value of each .span, adding it to "x" each time. The alert message that appears after the loop completes displays the values for all .spans in the page.

     

    The first time it loops, it grabs the value for the first .span: "Nationality: " and adds it to the x variable. The second time it loops, it gets the second value " Irish", and adds that to x. Once the loop completes and there are no more .spans to access, Javascript uses an alert message to display the final value for x.

     

    Hope that helps?

     

    I'm glad I asked because this is a perfect explanation and I wasn't clear about what I was doing. Now I am.

     

    Here I added var x ="My"; and the stuff on the right is added to the stuff on the left like your said ---.> http://jsfiddle.net/GdBBf/58/

     

    Here I added var x = "My"; and then used the = sign instead of += and it replaces what is in the x variable. --> http://jsfiddle.net/GdBBf/59/

    *** I think rather than replacing what is in var x ="My"; --> It just grabs the last item that looped through the .each function which was the

    Irish Span (would i be right here?) *******

    Thanks a lot.

     

    By the way, do you know what happens to the stuff on fiddlejs -- is it left there forever?

    Do you use fiddlejs for this type of question/example?

  9. Hi there all,

    Can somebody tell me what exactly += means and how exactly does it differ with =? I kinda get it by trial and error but I'm looking for more of a definition.

     

     

     

    http://jsfiddle.net/GdBBf/46/

    When I run this function with +=, the first and second div show up in a single alert box. So I know this is because I am using += but what exactly += telling the variable to become?

     

     

     

    http://jsfiddle.net/GdBBf/47/

     

    When I run this function only with =, then only the 2nd <class="span"> shows up and not the first <class="span"> Why didn't both fire sequentially as the .each function looped through the <class="span">?

     

     

    Stephen

     

     

    [ps. I'm not too familiar with fiddlejs --> does that stuff stay up there forever?]

  10. Finally, the template that I used has a main page area that is intended to fill about 2/3 of the page and a sidebar area for the other 1/3. On some of the pages, I'd like the main page to reach completely across...further, I'd like to create a "grid" of pictures that link to other sites with a brief text passage attached to each picture. Currently I can only make them as a vertical list. (Specifically on the pages http://hotbotz2640.o...nkalliance.html and http://hotbotz2640.o...illiepage.html)

     

    Hey,

    I'm only learning too so don't rely too much on my advice. But I think this is one of many possible solutions to the above problem: (Also, it will need to be tweaked a bit to your liking)

    I have no time to add fancy css or double check it or anything but others can look into it and check for mistakes if they want.

     

    Happy new year!

    Relevant css:

     

     

    #content {

    float: left;

    width: 1100px;

    min-height:650px;

    }

     

    #content .images1, .images2 {

    width:1000px;

    height:250px;

    }

    .images2 {

    margin-top:30px;

    }

     

    #content .images1 .img1, .img2, .img3 {

    display:inline-block;

    width:33%;

    }

    #content .images2 .img4, .img5, .img6 {

    display:inline-block;

    width:33%;

    }

     

    Relevant HTML:

     

     

    <div id="page">

     

    <div id="content">

    <h2>The PINK ALLIANCE</h2>

    <p>Some of our Favorite Teams from across the FRC Community</p>

     

    <div class="images1">

    <div class="img1">

    <h3><a href="http://thehitchhikers.org/index.php"'>http://thehitchhikers.org/index.php" accesskey="1" title="">The Hitchhikers - Team 2059 - Cary, NC</a></h3>

    <img src="images/2059.jpg" title="" alt="" height="200" width="280" />

    </div>

    <div class="img2">

    <h3><a href="http://www.lospolloslocos.com/"'>http://www.lospolloslocos.com/" accesskey="1" title="">Los Pollos Locos - Team 2815 - Columbia, SC</a></h3>

    <img src="images/2815.jpg" title="" alt="" height="200" width="280" />

    </div>

    <div class="img3">

    <h3><a href="http://www.team587.org/index.html"'>http://www.team587.org/index.html" accesskey="1" title="">The Hedgehogs - Team 587 - Hillsborough, NC</a></h3>

    <img src="images/587.jpg" title="" alt="" height="200" width="280" />

    </div>

    </div> <!-- end of images1 -->

     

    <div class="images2">

    <div class="img4">

    <h3><a href="http://thehitchhikers.org/index.php" accesskey="1" title="">The Hitchhikers - Team 2059 - Cary, NC</a></h3>

    <img src="images/2059.jpg" title="" alt="" height="200" width="280" />

    </div>

    <div class="img5">

    <h3><a href="http://www.lospolloslocos.com/" accesskey="1" title="">Los Pollos Locos - Team 2815 - Columbia, SC</a></h3>

    <img src="images/2815.jpg" title="" alt="" height="200" width="280" />

    </div>

    <div class="img6">

    <h3><a href="http://www.team587.org/index.html" accesskey="1" title="">The Hedgehogs - Team 587 - Hillsborough, NC</a></h3>

    <img src="images/587.jpg" title="" alt="" height="200" width="280" />

    </div>

    </div> <!-- end of images2 -->

     

    </div> <!-- content -->

     

    </div> <!-- page -->

  11. I'm not familiar with html 5 as it is not done yet so I don't use it. But if nav is display block (as is a ul) then yes it would behave like a div. if it doesn't then your code changed its default behavior. The white disappears because you need to contain the floated li's. here are all the ways http://www.visibilit...tain-floats.php

     

    I read through the list. Good Advice in there. Method 1 and 3 seem to be the most convenient. Method 1 worked for me -- although I had to add it to the child container aswell -- maybe because the <li>'s are also seen as block elements. I couldn't seem to get method 3 working but my brain is fried for now on this topic.

    So anyways, thanks for all your advice, it's helped me to achieve the horizontal navigation menu in 2 different ways and I sort of understand them both now.

     

     

  12. Just wrap your nav in a div. by default the div will go 100% width. Put the background and shadow on the div. now just center your ul nav within that

     

    Thanks Eric. Great solution. Menu bar resizes without dropping down how i wanted it but I don't understand it - I thought a nav tag was just like a div tag.

  13. I'm going to go at this again today and try to solve this responsive issue.

     

    Eric: I got rid of the reset css at the start -- It was unnecessary but I really wanna keep HTML 5. This is my learning site so I can afford to spend time on it using more style sheets for ie.

    Kevin: I made that change with the Shiv but problem with IE9 is actually the font. It is not accepting the google font for some reason.

    But I'm not going to worry about IE now since I will do a separate stylesheet for IE.

    Wickham: This is actually the issue I am most concerned with and spending all my time on --- when I use the float method -- Items drop down below and overlap stuff beneath it (I was hoping to keep them all in a line no matter how small the window size).The method you are suggesting is the same as method 5 in Eric's website but I really want the elements to meet the sides 100% in all window sizes.

    When I use the inline block method -- then the elements squish up beside each other no matter how narrow the window -- or at worst, they drop down but they stay inside their parent container. This is good.

    But the big problems I am having with inline block method is matching the elements exactly to the margins ie. 100% in all window sizes. There is also an issue of white spaces between the elements -- although there seems to be some fixes for that.

  14. About internet explorer -- it has caused me several headaches including IE9. I am thinking of writing up a separate stylesheet for IE6,7,8 in a more basic style -- is this a fairly acceptable solution nowadays given the low usage levels?

     

    It looks okay but I'm not happy with it since there are several things I just can't seem to do yet.... Like a lack of control --- I want to do X but am forced to do Y instead.

    Most of my problems are stemming from attempting to get a responsive page and I am completely confused about what exactly inline-block is and float is and it seems there are pros and cons to both.

     

    Anyways, I'll post back tomorrow with specifics.

  15. Inline block is probably your best bet. You can remove the frivolous stuff for ie6/7 as they are dead. Removing all white space between the li tags is one way to fix the white space problem. There are css fixes I don't remember what.

     

    Okay. Thanks Eric. I'll try it with those fixes. I found this blog: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

     

    What do you think of responsive design in general?

    Maybe fixed widths and media queries for different screen sizes is a better idea?

     

    [i'm not sure if I have the terminology exactly right either]

  16. as for your second problem, i'm assuming your <li> tags for the nav are styled with a float: left. floats will override any parent margin styles. ditch the float, and try using display: inline-block.

     

    here's an article detailing your woes.

     

    http://robertnyman.c...d-why-it-sucks/

     

    Hi Kevin,

     

    I applied the method on the link you suggested and it works but it leaves a space between each list item.

    I have read up on fixes for these spaces but it seems all a bit messy.

     

    Are there any other ways using inline block but sticking with the % widths?

  17.  

    Hi Eric,

     

    I've looked through your 6 methods and bookmarked it as they seem useful methods depending on the situation.

     

    I've just gone through methods 4 - 6 which seem most applicable to my case.

     

    The 5th method -- using relative positioning should work but then the whole thing about the overflow:hidden puts me off..

     

    The 4th and 6th method would be nice if they would work with % widths. Is it possible with % widths? (It didn't seem to work for me when I tried it this way).

     

    A slight modification of the 4th method --- which is the same as Kevin's link INLINE BLOCK METHOD works but it leaves a white space between each list item.

  18. could it be the margin-top? just throwing out ideas, but in the future, you should consider putting your code into something like http://jsfiddle.net/ so that those who would like to help don't have to replicate your code from a jpg.

     

    -k

     

     

    Hi Kevin ---- I removed the first question because I solved it after I posted..... It was something to do with my image throwing out the margin... I had stupidly put the image directly into the html like this

    <header> <img src=""> </header>. I changed the header to a background image using css and bing -- problem gone.

     

    I am going to read your post now on how to fix the second problem. And Yes, the <li>s are floated left.

     

     

×
×
  • Create New...