How to grid/position these buttons correctly - CSS
Question
I'm stumped. I need some professional advice.
First off, the second menu, I guess I should use padding to put it in the correct place? Second, even though I got the nav bar looking visually similar, when I added the images to it, they're low res and also it stops turning blue when active. Also, I'm pretty sure adding the arrow as an improvised shape with the overflow hidden is wrong because I want the whole thing to be responsive on mobile. This is NOT responsive. In fact, if I resize the button, the top left logo gets smaller. I just need a nudge in the correct direction because I've been doing this supposedly easy to do page for 2-3 days now. Should I start over?
.html{ height: auto; } .uk-container { display: flex; margin: 0 0 0 0; padding: 0 0 0 0; height:auto; } .box-1 { width:100%; height:auto; margin: 0; padding: 0; } #card{ margin: 0; padding: 0; height: 100%; width: auto; display:block; } .box-2 { display: inline-block; } .uk-card-media-top { padding: 70px 50px 70px 50px; margin: 0; } /*********************************************************************/ /***************************List Properties**************************/ ul { position: relative;; padding: 0; } ul li { background-repeat: none; background-position-x:200px; border:0; line-height: 15px; margin:0%; padding: 9px; text-align: left; position: relative; width:100%; height:100%; list-style: none; margin-bottom: 5px; background-color: #eeeeee; } ul li.active:after { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #0092ff; position:absolute; top: 20%; right:-15px; } ul li a { display:block; padding:10px 10px 10px 20px; text-decoration: uppercase; color:#555353; font-weight: bold; overflow: hidden; } ul li.active a { background:#0092ff ; color:white ; } ul li.active:hover a{ color:white; } ul li:hover a{ text-decoration: none; color: rgb(149, 147, 147); } /*****************************************************/ /*******************Buttons***************************/ .contactdiv { display: flex; position: center; justify-content: center; } #contact{ background-color: #555353; color: #eeeeee; border-radius: 4px; margin: 4%; } .button { border: none; color: white; padding: 100px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } .buttn{ border:0; padding: 75px; /* this is how wide the image is plus any additional padding*/ border-radius: 5px; cursor: pointer; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script> <script src="js.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>Gerege EasyPay</title> </head> <body> <div class= "uk-container"> <div id="card" class="uk-card uk-card-horizontal uk-card-default uk-card-body"> <div class="uk-card-media-top"> <img src="1/gerege.png" alt="Something Went Wrong..."> </div> <div class="box-1"> </div> <div class="uk-width-auto"> <!--270 px height 170 px width--> <ul> <!--starting to understand why bootstrap,uikit was made--> <li class="active"><a href="#">НИЙТЛЭГ ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Торгууль, татвар, СӨХ...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/car.png) left no-repeat; background-size: 20% 50%">АВТО ТЭЭВЭР<br><span style="font-size:15px;">Торгууль, татвар...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/travel.png) left no-repeat; background-size: 20% 50%">АЯЛАЛ ЗУГААЛГА<br><span style="font-size:15px;">Хот хоорондын тээвэр, галт тэрэг...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/goverment.png) left no-repeat; background-size: 20% 50%">ТӨРИЙН ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Лавлагаа, тодорхойлолт...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/apartment.png) left no-repeat; background-size: 20% 50%">ОРОН СУУЦ<br><span style="font-size:15px;">Цахилгаан, дулаан, СӨХ...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/ticket.png) left no-repeat; background-size: 20% 50%">ҮЗВЭР ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Ticket.mn, Playtime...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/contact.png) left no-repeat; background-size: 20% 50%">ГАР УТАС<br><span style="font-size:15px;">Skytel,Unitel,G-Mobile...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/other.png) left no-repeat; background-size: 20% 50%">БУСАД<br><span style="font-size:15px;">Skymedia, Univision...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/contract.png) left no-repeat; background-size: 20% 50%">ХАМТРАН АЖИЛЛАХ<br><span style="font-size:15px;">Бид таны итгэлт түнш</span></a></li> </ul> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).on('click','ul li', function(){ $(this).addClass('active').siblings().removeClass('active') $(this).addClass('active') }) </script> <div class="contactdiv"> <!-- This is a button toggling the modal with the default close button --> <button id="contact" class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">ХОЛБОО БАРИХ</button> <!-- This is the modal with the default close button --> <div id="modal-close-default" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <h2 class="uk-modal-title">WHA</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div> </div> <div class="box-2"> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> </div> </div> </div> </div> </body> </body> </html>
Supposed to look like this: https://i.ibb.co/FzCNMjz/kiosk-home.jpg Looks like this: https://i.ibb.co/BTPRnR1/Fire-Shot-Capture-001-Gerege-Easy-Pay-127-0-0-1.png
Was supposed to have turned this(and 2 more things) on wednesday, which is passed, I've just been stuck on this for 4 days.
1 answers
solution1
0 2019-04-17 07:12:28
.html{ height: auto; } .uk-container { display: flex; margin: 0 0 0 0; padding: 0 0 0 0; height:auto; } .box-1 { width:100%; height:auto; margin: 0; padding: 0; } #card{ margin: 0; padding: 0; height: 100%; width: auto; display:block; } .box-2 { display: inline-block; } .uk-card-media-top { padding: 70px 50px 70px 50px; margin: 0; } /*********************************************************************/ /***************************List Properties**************************/ ul { position: relative;; padding: 0; } ul li { background-repeat: none; background-position-x:200px; border:0; line-height: 15px; margin:0%; padding: 9px; text-align: left; position: relative; height:100%; list-style: none; margin-bottom: 5px; background-color: #eeeeee; } ul li.active:after { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #0092ff; position:absolute; top: 20%; right:-15px; } ul li a { display:block; padding:10px 10px 10px 20px; text-decoration: uppercase; color:#555353; font-weight: bold; overflow: hidden; } ul li.active a { background:#0092ff ; color:white ; } ul li.active:hover a{ color:white; } ul li:hover a{ text-decoration: none; color: rgb(149, 147, 147); } /*****************************************************/ /*******************Buttons***************************/ .contactdiv { display: flex; position: center; justify-content: center; } #contact{ background-color: #555353; color: #eeeeee; border-radius: 4px; margin: 4%; } .button { border: none; color: white; padding: 100px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } .buttn{ border:0; padding: 75px; /* this is how wide the image is plus any additional padding*/ border-radius: 5px; cursor: pointer; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script> <script src="js.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>Gerege EasyPay</title> </head> <body> <div class= "uk-container"> <div id="card" class="uk-card uk-card-horizontal uk-card-default uk-card-body"> <div class="uk-card-media-top"> <img src="1/gerege.png" alt="Something Went Wrong..."> </div> <div class="box-1"> </div> <div class="uk-width-auto"> <!--270 px height 170 px width--> <ul> <!--starting to understand why bootstrap,uikit was made--> <li class="active"><a href="#">НИЙТЛЭГ ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Торгууль, татвар, СӨХ...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/car.png) left no-repeat; background-size: 20% 50%">АВТО ТЭЭВЭР<br><span style="font-size:15px;">Торгууль, татвар...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/travel.png) left no-repeat; background-size: 20% 50%">АЯЛАЛ ЗУГААЛГА<br><span style="font-size:15px;">Хот хоорондын тээвэр, галт тэрэг...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/goverment.png) left no-repeat; background-size: 20% 50%">ТӨРИЙН ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Лавлагаа, тодорхойлолт...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/apartment.png) left no-repeat; background-size: 20% 50%">ОРОН СУУЦ<br><span style="font-size:15px;">Цахилгаан, дулаан, СӨХ...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/ticket.png) left no-repeat; background-size: 20% 50%">ҮЗВЭР ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Ticket.mn, Playtime...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/contact.png) left no-repeat; background-size: 20% 50%">ГАР УТАС<br><span style="font-size:15px;">Skytel,Unitel,G-Mobile...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/other.png) left no-repeat; background-size: 20% 50%">БУСАД<br><span style="font-size:15px;">Skymedia, Univision...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/contract.png) left no-repeat; background-size: 20% 50%">ХАМТРАН АЖИЛЛАХ<br><span style="font-size:15px;">Бид таны итгэлт түнш</span></a></li> </ul> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).on('click','ul li', function(){ $(this).addClass('active').siblings().removeClass('active') $(this).addClass('active') }) </script> <div class="contactdiv"> <!-- This is a button toggling the modal with the default close button --> <button id="contact" class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">ХОЛБОО БАРИХ</button> <!-- This is the modal with the default close button --> <div id="modal-close-default" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <h2 class="uk-modal-title">WHA</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div> </div> <div class="box-2"> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> </div> </div> </div> </div> </body> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to rotate an element and correctly position it with CSS or jQuery
how to position items inside css grid?
How to correctly position prev and next buttons at the middle of flexbox carousel?
Cursor position to CSS grid position
Javascript grid with css position
How to make a 14x5 grid of Radio Buttons in HTML and CSS
CSS table: How to position action buttons left to each row
How to correctly set alignments when using OpenLayers and CSS grid layout
How to position css post items properly when using grid display
How to get the buttons to work correctly
Related Tags