...

View Full Version : A little problem



martijn1
11-16-2010, 04:02 PM
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

SB65
11-16-2010, 04:19 PM
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:


<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.

martijn1
11-16-2010, 04:27 PM
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:


<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

SB65
11-16-2010, 05:03 PM
h4 {
display:inline-block;
margin:0;
}

gets rid of the gap.

martijn1
11-16-2010, 05:28 PM
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://img243.imageshack.us/img243/8390/likew.png
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!

SB65
11-16-2010, 05:38 PM
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.

martijn1
11-16-2010, 08:37 PM
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/

SB65
11-17-2010, 09:14 AM
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:


.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 (http://getFirebug.com) - 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.

martijn1
11-17-2010, 10:27 PM
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:


.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 (http://getFirebug.com) - 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 ?

SB65
11-18-2010, 11:31 AM
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.

martijn1
11-18-2010, 02:19 PM
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

SB65
11-18-2010, 04:44 PM
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.

martijn1
11-18-2010, 05:04 PM
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!

SB65
11-18-2010, 05:30 PM
What have you tried to do?

martijn1
11-19-2010, 07:48 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum