HTML/CSS showing buttons online and auto going to next line


Tags: html,css,button

Problem :

I am new to HTML/CSS so I really don't know how it works but this is what I want. There are buttons like blocks but the problem is :-

1) How do i make it goto next line when the page ends (stable for other device than PC)
2) How can i remove the margin between different buttons.
3) All i want is these buttons a footer and an header nothing more on that page (but stable on all devices)
4) How can i add pics as button backgrounds.
5) When i hover over them it shows the categories i add.

Hope you understand what i am trying to learn. And thanks.

.button {
    background-color: black;
    text-decoration: none;
    border-radius: 0px 0px 0px 0px;
	margin:0px;
	list-style-type:none;
	line-height:0px;
	color:white;
    text-align:center;
    padding:100px;
	width:240px;
	height:240px;
	position: relative;
    left: -20px;
	/*opacity: 0.8;*/
	display:inline;
}

#options {
    line-height:00px;
	position:relative;
	top: 100px;
	bottom: auto;
    float:center;
    padding:0px 10px 10px 0px;
	display: inline;
}

.button :hover {
	background-color: white;
    text-decoration: none;
    border-radius: 0px 0px 0px 0px;
	margin:0px;
	list-style-type:none;
	line-height:60px;
	color:black;
    text-align:center;
    padding:0px;
	width:210px;
    left: -30px;
	position:relative;
	z-index:-0.1;
    opacity: 1;
	-moz-opacity: 0.8;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
}

a:link    {color:white; background-color:transparent; text-decoration: none;} 
a:visited {color:white; background-color:transparent; text-decoration: none;}
a:hover   {color:black; background-color:transparent; text-decoration: none; } 
a:active  {color:white; background-color:transparent; text-decoration: none} 
<div id="options">
			<a  class="button" onclick="textdisplay(0)">What's New</a>
			<a  class="button" onclick="textdisplay(1)">My Account</a>
			<a  class="button" onclick="textdisplay(2)">Server Data</a>
			<br />
			<a  class="button" onclick="textdisplay(3)">OLD Posts</a>
			<a  class="button" onclick="textdisplay(4)">Last Left HTML</a>	
		</div>



Solution :

First of all, your button :hover css is not working because you have a space in it. Once I took that out, the transitions worked nicely. I took out the break code in the html, and added a float:left on the button css (that allows it to go to another line if the window is too small). I also messed with your padding, deleted the line-heights, positions, and quite a bit of other code that was unnecessary. Try this code and mess with the widths and heights if you want.

.button {
    background-color: black;
    border-radius: 0px 0px 0px 0px;
    margin:0px;
    color:white;
    text-align:center;
    padding:100px;
    width:240px;
    height:40px;
    float:left;
}

#options {
    position:relative;  
}

.button:hover {
    background-color: white;
    border-radius: 0px 0px 0px 0px;
    margin:0px;
    color:black;
    opacity: 1;
    -moz-opacity: 0.8;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
}

a:link    {color:white; background-color:transparent; text-decoration: none;} 
a:visited {color:white; background-color:transparent; text-decoration: none;}
a:hover   {color:black; background-color:transparent; text-decoration: none;} 
a:active  {color:white; background-color:transparent; text-decoration: none;} 

    CSS Howto..

    How to locate the element within CSS using javascript

    How to Change CSS Styling on a Checkbox on Hover with JQuery

    How do I use CSS to let one or more elements fill remaining space?

    How to keep links and hover effects on my icon-fonts isolated with CSS

    How could I join a smaller and a bigger div with rounded edges?

    How to add CSS class to the HTML5 picture element

    How to center an img inside a div

    How to match a particular tag through css selectors where the class attribute contains spaces?

    How to force Dojo TitlePane to overlap with CSS?

    How to override external css?

    How to apply class only for IE?

    How to center multiple div elements within a parent div?

    How to make a text slideshow using CSS/HTML/JAVA

    How to fill a text with color using CSS?

    using overflow hidden, show a partial element when the children are too large for container

    How can I divide a div element's content with CSS selector?

    how to prevent child element from widening parent element's width in css

    How to dynamically allocate block of text using css?

    How to make a paragraph appear in a certain area in the page using Wordpress?

    How to float div up?

    How to build this layout with CSS?

    How does Gmail prevent overlap for elements that use absolute positioning?

    How to remove outline dotted border with using css

    How to create a CSS? [closed]

    How to set each type of page transition to a specific page? (css animations)

    How to get a working CSS zigzag border?

    How to spin an image horizontally with CSS

    How to enlarge an image horizontally in css?

    How To Style A Class Based On Unique ID?

    How to change
  • to variable width on css dropdown submenu