css help please

[Joanne123]

Hi
I am having a go at a design for my front page .

The html will be on a fragment and I am adding the css to my current style sheet in Sellerdeck 2013.

I am using Dreamweaver CC.

I have the following css which is for a "ul" of 3 "li" images with links to anchor points in my T&C's

The code is

.infobanners {
	width: 650px;
	height: 50px;
	padding: 0;
	border: 0;
	margin-bottom: 0px;
}

.infobanners ul {
	list-style: none;
	padding: 0;
	position: static;
	top: 0px;

}

.infobanners ul li {
	width: 215px;
	height: 50px;
	display: inline;
	float: left;
	border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	top: 0px;


}

.infobanners ul li a {
	border: 0;
	float: left;
	width: 215px;
	height: 50px;

}

.infobanners ul li a img {
	width: 215px;
	height: 50px;
	border: 0;
	float: left;
	border-top-right-radius: 20px;
	-moz-border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	-moz-border-top-left-radius: 20px;
	-webkit-border-top-left-radius: 20px;

}

My problem is - my "ul" will not sit inside the div "infobanners"
I would like it to be centred inside it.

I have attached a shot of my dreamweaver page - the blue border is the div

Many thanks for any help

[jont]

can you post the HTML you have used as that is the only way to tie it in with the CSS and see what is happening.

[Joanne123]

Hi
Heres the html

 <div class="infobanners">
    <ul>
      <li><a href="http://www.ukcurtainpoles.co.uk/acatalog/info.html#secureshopping">
      <img src="images/Secure-Shopping.jpg" alt="Secure online shopping" title="Secure Shopping"/> </a></li>
      
      <li><a href="http://www.ukcurtainpoles.co.uk/acatalog/info.html#delivery">
      <img src="images/Free-Delivery.jpg" alt="Free delivery on orders over £70" title="Free Delivery" align="absmiddle"/></a></li>
      
      <li><a href="http://www.ukcurtainpoles.co.uk/acatalog/info.html#contactus">
      <img src="images/Customer-Service.jpg" alt="Contact customer service" title="Customer Service"/></a></li>
    </ul>
  </div>

[leehack]

.infobanners {
width: 650px;
height: 50px;
padding: 0;
border: 0;
margin-bottom: 0px;
}
.infobanners ul {
	list-style: none;
	padding: 0;
	position: static;
	top: 0px;
        margin: 0;
}
.infobanners ul li {
	width: 215px;
	height: 50px;
	display: inline;
	float: left;
	border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	top: 0px;
        margin: 0;
	padding: 0;
}

.infobanners ul li a {
	border: 0;
	float: left;
	width: 215px;
	height: 50px;
        margin: 0;
	padding: 0;
}
.infobanners ul li img a {
	width: 215px;
	height: 50px;
	border: 0;
	float: left;
	border-top-right-radius: 20px;
	-moz-border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	-moz-border-top-left-radius: 20px;
	-webkit-border-top-left-radius: 20px;
        margin: 0;
	padding: 0;
}

Try the above, see if that solves it, my first thought is it's your margins. Although, personally i'd not use a UL as i don't see the need for the tag to be involved. You have a container and want 3 images inside linking off if i have it correctly?

[Joanne123]

Hi
Thank you for that - it ssems to of made it all better now, except I have lost my border radius's

I have followed online tuturial to make a home page which showed to use ul.
I have also used ul for the 4 images below which I need to sort out too.

How would you of done it?

[Joanne123]

css is now the following

.infobanners {
	width: 650px;
	height: 50px;
	padding: 0;
	border: 0;
	margin-bottom: 6px;
}

.infobanners ul {
	list-style: none;
	padding: 0;
	position: static;
	top: 0px;
    margin: 0;
}
.infobanners ul li {
	width: 215px;
	height: 50px;
	display: inline;
	float: left;
	border-top-right-radius: 20px;
	-moz-border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	-moz-border-top-left-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	top: 0px;
    margin: 0;
	padding: 0;
}

.infobanners ul li a {
	border: 0;
	float: left;
	width: 215px;
	height: 50px;
    margin: 0;
	padding: 0;
}
.infobanners ul li img a {
	width: 215px;
	height: 50px;
	border: 0;
	float: left;
	border-top-right-radius: 20px;
	-moz-border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	-moz-border-top-left-radius: 20px;
	-webkit-border-top-left-radius: 20px;
    margin: 0;
	padding: 0;
}

[jont]

You are over complicating things using a list especially as they are all unique images. In this instance I would be inclined to use a simple

<a href=""><img src=""></a><a href=""><img src=""></a><a href=""><img src=""></a>

Which reduces the markup and the CSS.

Using the <ul> method only really come in to use if you use a single sprite (made up of all the images )and you set the background position of each <li> to show the desired part of the sprite accordingly.

[jont]

In your CSS you would then just need to float the <a> in the infobanners <div> left and zero out any padding, borders and margins

[Joanne123]

Hi
Thank you

I have changed the html and css as suggested and it all seems ok. But do you know why my border radius isn't working now?

  <div class="infobanners">
      <a href="http://www.ukcurtainpoles.co.uk/acatalog/info.html#secureshopping">
      <img src="images/Secure-Shopping.jpg" alt="Secure online shopping" title="Secure Shopping"/> </a>
      
      <a href="http://www.ukcurtainpoles.co.uk/acatalog/info.html#delivery">
      <img src="images/Free-Delivery.jpg" alt="Free delivery on orders over £70" title="Free Delivery" align="absmiddle"/></a>
      
      <a href="http://www.ukcurtainpoles.co.uk/acatalog/info.html#contactus">
      <img src="images/Customer-Service.jpg" alt="Contact customer service" title="Customer Service"/></a>
  </div>

.infobanners {
	width: 645px;
	height: 50px;
	padding: 0;
	border: 0;
	margin-bottom: 6px;
}


.infobanners a {
	border: 0;
	float: left;
	width: 215px;
	height: 50px;
    margin: 0;
	padding: 0;
}
.infobanners img a {
	width: 215px;
	height: 50px;
	border: 0;
	float: left;
	border-top-right-radius: 20px;
	-moz-border-top-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	-moz-border-top-left-radius: 20px;
	-webkit-border-top-left-radius: 20px;
    margin: 0;
	padding: 0;
}

[Joanne123]

Snapshot attached

Thought you might like to see the images

[leehack]

.infobanners a img {
width: 215px;
height: 50px;
border: 0;
float: left;
border-top-right-radius: 20px;
-moz-border-top-right-radius: 20px;
-webkit-border-top-right-radius: 20px;
border-top-left-radius: 20px;
-moz-border-top-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
margin: 0;
padding: 0;
}

Try that, that's your original code.

[Joanne123]

Thank you

That's fine now.

[jont]

Pedant hat back in place .... you are generally better to have the global declaration after the browser specific ones eg:

-webkit-border
-moz-border
border

... there is also ...

-ms-border
-o-border

Newer browsers will work directly with border so the new version of Chrome will first pick up the -webkit- styling then move on to the standardised border styling afterwards.

Not essential but good practice. Hopefully we can all someday forget the browser hacks.

Of course the other option is to create the images with curves in your image editing software first #oldschool

[Joanne123]

Hi
I have uploaded live now to www.ukcurtainpoles.co.uk

There are still a couple of issues.
I still have more work to do as I want to create a:hover over the 4 main images yet and add titles to them. Also need to sort out guides and mailing list.

Initially I need help with the following.

Everything looks fine in Dreamweaver looking with browsers Google Chrome, Firefox and Explorer.

After upload, things change!

The radius on the 4 main images - 3 ofthem disappear.

My h3 headings change to the a;hover colour which is too light. The colour should be a darker colour then change to this light colour when mouse hovers over them.

>Useful Guides
>Our Company
etc...

Lastly, the text under these headings have weird character in them

It’s always exciting changing the décor of a room and new curtain poles can transform, and lend inspiration to further ideas, for any room in the house. Whether you want elegance or simplicity, we have a range to suit all tastes.


Can anyone enlighten me as to what has happened and how I can fix these things.

Many thanks

[Duncan Rounding]

...Hopefully we can all someday forget the browser hacks...

In your dreams John.