Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    A little problem

    Hello

    I'm having some problems with a site.

    I have put it online(sorry for the name) :
    http://hornylisa.99k.org/
    http://hornylisa.99k.org/contact.html <-- page with the problem

    The problem is that I want the following
    On the page contact.html there is a contact form with 2 radio boxes.
    when you press both in, both are selected, I want that people can only select one.
    Second problem is that I want that the radio boxes are left of the text
    so like :
    RADIOBOX Particulier RADIOBOX Bedrijf

    As you can see, I can't get this done.
    Please help me with this


    I hope you guys can help me


    Thanks in advance

    Wheelieking

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    In order for radio buttons to behave properly they need the same "name" attribute - yours have different names and hence are not related to each other.

    Easiest way to have the radio button to the left of the label is like this:

    Code:
    <label><input type="radio" name="radio1">Label</label>
    You've almost got this at the moment but not quite, and because the width of all your input elements is set at 165px there's a gap between the radio and the label. Give your radio inputs a smaller width and you'll be OK.

    If you want two or more radio buttons on the same line then I'd suggest floating them as being the easiest for cross-browser consistency.

  • Users who have thanked SB65 for this post:

    martijn1 (11-16-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    In order for radio buttons to behave properly they need the same "name" attribute - yours have different names and hence are not related to each other.

    Easiest way to have the radio button to the left of the label is like this:

    Code:
    <label><input type="radio" name="radio1">Label</label>
    You've almost got this at the moment but not quite, and because the width of all your input elements is set at 165px there's a gap between the radio and the label. Give your radio inputs a smaller width and you'll be OK.

    If you want two or more radio buttons on the same line then I'd suggest floating them as being the easiest for cross-browser consistency.
    Thanks bro

    How can I get the margins between the forms and the text smaller
    So : How can I get the input type, beneath the text "Naam" closer to naam.
    if I erase padding:8px;, then my forms are screwed up.

    http://hornylisa.99k.org/contact.html
    Last edited by martijn1; 11-16-2010 at 03:45 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Code:
    h4 {
    display:inline-block;
    margin:0;
    }
    gets rid of the gap.

  • Users who have thanked SB65 for this post:

    martijn1 (11-16-2010)

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Code:
    h4 {
    display:inline-block;
    margin:0;
    }
    gets rid of the gap.
    You are great!!

    Next prob
    I made this contact page, and you see this big picture above it, the point is that I need to get it besides it.

    Like this

    http://yfrog.com/6rlikewp

    So how can I get it like this
    because if I use margins, the whole content moves with it

    http://hornylisa.99k.org/contact.html

    Thanks bro!
    Last edited by martijn1; 11-16-2010 at 04:30 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Here's a good case for using absolute positioning, which will allow you to position the logo where you want it. Set position:relative on #contactform, and position absolute on the images, and then set their precise position using top and left.

    You'll probably want to move the form itself down the div using margin-top as well.

  • Users who have thanked SB65 for this post:

    martijn1 (11-16-2010)

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Here's a good case for using absolute positioning, which will allow you to position the logo where you want it. Set position:relative on #contactform, and position absolute on the images, and then set their precise position using top and left.

    You'll probably want to move the form itself down the div using margin-top as well.
    Again fixed, thanks bro!!!

    Last problems
    First in IE, the hover in the navigation doesn't have rounded corners but is just a rectangle, how to fix?
    I already used -webkit-border-radius.


    Second
    I got a hover on the homepage, with the buttons "Lees meer".
    But once people hover it, they become smaller, but I have setten the size on the same, so why does this happen.

    Page :
    http://hornylisa.99k.org/

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Border-radius is not supported by IE8 or less, so you'll need to use either images or a javascript solution. An image would be easier here. For info, the best you can do with css alone at the moment is:

    Code:
    .roundedcorners{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px
    }
    where the first line targets FF3, the second Safari 4, and the last will work in IE9 (allegedly), Opera 10, Safari 5 and Chrome.

    On your "lees meer" link both the "normal" and hover effects are provided by images - so the text is smaller in the hover state because that's what the image is like.

    If you use Firefox for testing (and you should...) then try Firebug - which is a Firefox plugin that allows you to display the css applied to an element simply by highlighting the element, and I think is virtually indispensable for web building.

  • #9
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Border-radius is not supported by IE8 or less, so you'll need to use either images or a javascript solution. An image would be easier here. For info, the best you can do with css alone at the moment is:

    Code:
    .roundedcorners{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px
    }
    where the first line targets FF3, the second Safari 4, and the last will work in IE9 (allegedly), Opera 10, Safari 5 and Chrome.

    On your "lees meer" link both the "normal" and hover effects are provided by images - so the text is smaller in the hover state because that's what the image is like.

    If you use Firefox for testing (and you should...) then try Firebug - which is a Firefox plugin that allows you to display the css applied to an element simply by highlighting the element, and I think is virtually indispensable for web building.
    So I need to make pictures for that navigation in order to let it work in IE.

    Btw you received my PM ?

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    All you're doing here is displaying a background "shape" on hover. If you want rounded corners for this I'd do it as an image. You could do it with css and javascript, but it's easier with images here - you gain nothing by doing it the more complex way.

  • #11
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    All you're doing here is displaying a background "shape" on hover. If you want rounded corners for this I'd do it as an image. You could do it with css and javascript, but it's easier with images here - you gain nothing by doing it the more complex way.
    Ok and on the index.html page there is a big picture, called solution.png
    In IE is it pushed down, how can I get it on the same height as in ff and in any other browser?


    Thanks

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a look at the way IE deals with that top margin on the image in conjunction with the preceding floated element. Consider whether that element really needs to be floated.

  • #13
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Have a look at the way IE deals with that top margin on the image in conjunction with the preceding floated element. Consider whether that element really needs to be floated.
    Can't get it working, can you please help me further with this one?

    thanks!

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    What have you tried to do?

  • #15
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    What have you tried to do?
    Ok I got it solved, but now I got another problem
    Because IE doesn't have border radius, I want to do this with a picture.

    I got 2 pictures home.png, which is the first link, if it isn't hovered
    If people hover it, it changes into homehover.png

    This is the css :
    #navigation{
    font-size:17px;
    margin-top:10px;
    width:100%;
    height:70px;
    background-color:#0b3543;
    }

    h4{
    display:inline-block;
    margin:0;
    }

    ul{
    padding-top:20px;
    }

    li,#navlist,ul,#navigation{
    text-decoration:none;
    }

    #navlist li
    {
    padding:15px;
    display: inline;
    list-style-type: none;
    }

    .homehover:link {background-image:url('images/home.png');width:62px;height:30px;}
    .homehover:hover {background-image:url('images/homehover.png');width:62px;height:30px;background-repeat:no-repeat;}

    This is the navigation

    <div id="navigation">
    <ul id="navlist">
    <li class="homehover">
    <span><a href="index.html"></a></span>
    </li>
    <li>
    <a href="overons.html">Over ons</a>
    </li>
    <li>
    <a href="diensten.html">Diensten</a>
    </li>
    <li>
    <a href="concepten.html">Concepten</a>
    </li>
    <li>
    <a href="links.html">Links</a>
    </li>
    <li>
    <a href="contact.html">Contact</a>
    </li>
    </ul>
    </div>

    How can I get this working
    Because now It doesn't show the first picture, home.png, and it cuts off the hover?

    the width and height of the pictures are : 62 30

    Thanks in advance


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •