How to spacing buttons?

Question

How to spacing buttons?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

$sql="SELECT P.id as Id, 
		   P.pointOfSale as [Description], 
		   P.printerExtrat1 as PrinterExtrat1, 
		   P.printerExtrat1FonteTicket as PrinterExtrat1Font, 
		   P.printerExtrat2 as PrinterExtrat2, 
		   P.printerExtrat2FonteTicket as PrinterExtrat2Font, 
		   P.printerExtrat3 as PrinterExtrat3, 
		   P.printerExtrat3FonteTicket as PrinterExtrat3Font, 
		   T.id as IdTable, 
		   T.tableDescription as TableDescription 
		   FROM PointOfSale P LEFT 
		   JOIN PointOfSalesTables T ON P.id=T.idPointOfSale and T.isActive=1 
		   WHERE P.isActive=1 
		   ORDER BY P.pointOfSale";
		
		$result = sqlsrv_query($conn, $sql);
		
		$row[0] = "";
		$i = 0;
		$conf = 0;

	while ($row1 = sqlsrv_fetch_array( $result, SQLSRV_FETCH_NUMERIC)) {
		for($j = 0; $j < $i; $j++) {
			if($row[$j] == $row1[1]) {
				$conf = 1;
			}
			else {
			}
		}
		
		if($conf == 1) {
			$conf = 0;
		}
		else {
			$resultado1 = $row1[1];
			$row[$i] = $row1[1];
?>	
		<body>
			<div>
				<a href="geral.php?id=<?php echo $i;?>" class="banquetes"><?php echo $resultado1; ?></a>
			</div>
		</body>
		<?php
		$i = $i +1;
		}
	}
?>

.banquetes {
	background-color:#60b0df;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	font:15px arial, sans-serif;
	height:95px;
	line-height:95px;
	width:157px;
	text-align:center;
	float: left;
}

.banquetes:hover {
	background-color:#60b0df;
	
}.banquetes:active {
	position:relative;
	top:1px;
}

I have this button format that when it fetches the data from the description table to the database, inserts the names of the data and forms it as it is in the image. It turns out I need to separate the buttons, can you help me?

html css button

asked by anonymous 23.02.2018 / 12:28

2 answers

slideshow: js is not working How do I save data in a JSON file using Javascript?

score 0 · Answer 1

I do not recommend using margin-right or margin-left , because it will give proper centering and positioning difference. A margin on only one side of a button row is bad because the visible part of the elements will not actually , even more so in responsive layouts that one side has no spacing).

See:

  área visível
_______|_______
↓_____________↓__
|             | |
|    BOTÃO    | |← margin-right
|_____________|_|
↑_______________↑
        |
área que o botão ocupa

Notice that the visible area of the "button" is not in the center of the area it occupies. margin is invisible, but takes up space on the page.

It is best to distribute the margins on both sides equally, for example:

    cima/baixo
        ↓
margin: 0 3px;
           ↑
    direita/esquerda

In your case, you can set a margin on the sides of 3px using the example above (will make a spacing between the 6px buttons). Just add in the class .banquetes the style:

margin: 0 3px;

score 0 · Answer 2

Put the condition margin-right: 5px important! into the first .banquetes , thus:

.banquetes {
    background-color:#60b0df;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    font:15px arial, sans-serif;
    height:95px;
    line-height:95px;
    width:157px;
    text-align:center;
    float: left;
    margin-right:5px !important;
}

.banquetes:hover {
    background-color:#60b0df;

}.banquetes:active {
    position:relative;
    top:1px;
}

If you want a smaller margin, just change the amount of pixels.