Solved

Button locations in html

Posted on 2013-11-02
5
196 Views
Last Modified: 2013-11-04
I have an image that I want to use as button image. I want to be able to define an area where the buttons shall be located. How can I set limits for where the buttons will be located?


I want to have the buttons in two rows and I don't know how many buttons there will be at a certain time since they are created dynamically.
0
Comment
Question by:mdoland
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39618755
A link to the page would help.  what do you mean by: How can I set limits for where the buttons will be located?

Cd&
0
 

Author Comment

by:mdoland
ID: 39621180
I don't have a link.

I have a web-page containing a header. Directly under there I want to have two rows with buttons like this:

---------------
1 3 5 7 9
2 4 6 8 10
---------------

How do I control in a nice way where they end up? When I put them out with position:absolute, it looked very ugly when I shrinked and grow the browser since the resten moved away accordingly.
0
 

Author Comment

by:mdoland
ID: 39621732
One idea could be to use flexbox. I have tried that but without success. The plan then was to group the images two and two, putting columns (of two images) beside other columns.

How do I do that?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39622328
Flexbox is very thinly support and not yet reliable.

Just float the buttons left and they will line up and adjust when the browser width is changed.

I can't really do much with coding without seeing the page, and seeing what you are actually building.

Cd&
0
 

Author Comment

by:mdoland
ID: 39623361
Float left was almost perfect! Great!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html Table looping 4 25
CORS Error from Chrome, but FireFox is OK 1 78
binding event to form in window.open 9 35
really easy css change help please 4 17
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question