Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created a simple HTML button, the button works fine. There is some blank/white space around it. How can I get rid of it? My question might sound silly, but for a beginner like me, I have no idea how to get rid of it.
Thank you.
You can see the white spaces, which I was talking about, in the following screenshot.
Following is the code I have for buttons.
<p>
<a class="button" href="https://facebook.com/">
<button style="background-color:#3b5998; border:none; color:white; border-radius: 3px;">Facebook</button> </a>
<a class="button" href="https://wa.me/1234567898">
<button style="background-color:green; border:none; color:white; border-radius: 3px;">WhatsApp</button>
</a>
</p>
<p>
<a href="tel:01234567890">
<input type="image" align="right" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" name="submit" width="70" height="70" alt="Call Us" value="">
</a>
</p>
I tested your code in opera, it's working as expected here.
https://i.imgur.com/HAl4Xka.png
EDIT: I've fixed the code following the suggestions made in your first post.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fb-button, .wa-button {
border:none;
color:white;
border-radius: 3px;
padding: 10px;
text-decoration: none;
}
.fb-button {
background-color:#3b5998;
}
.wa-button {
background-color:green;
}
.container {
padding: 10px;
margin: 0 auto;
max-width: 50%;
text-align: center;
}
form {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<a class="fb-button" href="https://facebook.com/">Facebook</a>
<a class="wa-button" href="https://wa.me/1234567898">WhatsApp</a>
<form action="tel:01234567890" method="GET">
<input type="image" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" width="70" height="70" alt="Call Us">
</form>
</div>
</body>
</html>
<a> should not contain any other Action Elements (like <button>).
Stop using the inline style attributes. Use a proper CSS file or a <style> tag.
Don't use , use styles instead - if you want to add spacings like margins
Use flex to ease the positioning of your elements
.buttons-group {
display: flex;
align-items: center;
}
.button {
color: white;
border-radius: 3px;
padding: 0.5rem 1rem;
text-decoration: none;
}
.color-fb {
background-color: #3b5998;
}
.color-wa {
background-color: #00aa45;
}
.img-icon {
display: inline-block;
height: 3rem;
}
/* Utility classes */
.u-left-auto {
margin-left: auto;
}
<div class="buttons-group">
<a class="button color-fb" href="https://facebook.com/">Facebook</a>
<a class="button color-wa" href="https://wa.me/1234567898">WhatsApp</a>
<a class="button u-left-auto" href="tel:01234567890">
<img class="img-icon" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" alt="Call Us">
</a>
</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am creating tag links in my application, and I am struggling to get the individual tags to align nicely with each other (i.e. without overlapping etc.)
Here is my markup
a.user-interest {
border-radius: 5px;
background: #f2f2f2;
color: #696969;
border: 3px solid #A9A9A9;
padding: 3px;
white-space: nowrap;
text-decoration: none;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div>
<h4>Interests</h4>
<p class="interest">
<a class="user-interest" href="#">Science Fiction</a>
<a class="user-interest" href="#">Community Service</a>
<a class="user-interest" href="#">Craftsmanship</a>
<a class="user-interest" href="#">Exercising and Healthcare</a>
</p>
</div>
</body>
</html>
How do I get the tags to align nicely?
Add display: inline-block to your CSS, I also recommend using margin to fully see the separation (It's up to you).
a.user-interest {
border-radius: 5px;
background: #f2f2f2;
color: #696969;
border: 3px solid #A9A9A9;
padding: 3px;
white-space: nowrap;
text-decoration: none;
display: inline-block;
margin: 2px;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div>
<h4>Interests</h4>
<p class="interest">
<a class="user-interest" href="#">Science Fiction</a>
<a class="user-interest" href="#">Community Service</a>
<a class="user-interest" href="#">Craftsmanship</a>
<a class="user-interest" href="#">Exercising and Healthcare</a>
</p>
</div>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
i'm trying to make a top bar with flexbox, i want to have an icon on the top-left part of the site and a nav on the right side. So i write this in css:
.barra {
display: flex;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
}
.barra a {
text-decoration: none;
color: black;
}
But the bar only took half the width.
The HTML looks like this
<body>
<div class=barra>
<i class="fas fa-wifi"></i>
<nav class=navegacion>
<a href="#">Productos<a>
<a href="#">Servicios<a>
<a href="#">Contacto<a>
</nav>
</div>
</body>
I tried with "Width: 100%; in the .barra but it didn't do anything
I dont know what is wrong here, i would appreciate some help.
I'm using ruby on rails to make the site.
You're missing closing tags for your anchors.
<a>...</a>
New markup:
<div class=barra>
<i class="fas fa-wifi"></i>
<nav class=navegacion>
Productos
Servicios
Contacto
</nav>
</div>
https://codepen.io/koralarts/pen/wvaxERr
Your example in fact does take the full width:
Using border: 1px solid red is a good way to debug these things.
Do you perhaps have other styles that apply to .barra?
.barra {
display: flex;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
border: 1px solid red;
}
.barra a {
text-decoration: none;
color: black;
}
<div class=barra>
<i class="fas fa-wifi"></i>
<nav class=navegacion>
<a href="#">Productos<a>
<a href="#">Servicios<a>
<a href="#">Contacto<a>
</nav>
</div>
Remove your typos. You are not closing any anchor tag, but only creating broken HTML.
.barra {
display: flex;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
background: yellow;
}
.barra a {
text-decoration: none;
color: black;
}
i {
display: block;
}
nav {
background: red;
display:block;
}
<body>
<div class=barra>
<i class="fas fa-wifi">i</i>
<nav class=navegacion>
Productos
Servicios
Contacto
</nav>
</div>
</body>
i have modified the class names .Please use proper names which should be related to it semantically.
Some errors are in the code
1.You forgot to quote the class names
<nav class=navegacion>
You forgot to close the tags properly.
Modified code
.header {
display: flex;
justify-content: space-between;
padding-top: 20px;
font-size: 30px;
background-color: black;
color: whitesmoke;
}
.navigation a {
text-decoration: none;
color: whitesmoke;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
</head>
<body>
<div class="header">
<i class="fas fa-wifi">icon</i>
<nav class="navigation">
Productos
Servicios
Contacto
</nav>
</div>
</body>
</html>
Not sure if I got your question right but this is maybe what you are looking for, I added flex display on the <nav> and <i>, the icon tag is not visible since you didn't include font-awesome style.
.barra {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
}
.barra nav {
text-decoration: none;
flex: 4;
border: 1px solid;
width: 95%;
}
.barra i {
flex: 1;
border: 1px solid;
}
<body>
<div class="barra">
<i class="fa fa-wifi"></i>
<nav class="navegacion">
Productos
Servicios
Contacto
</nav>
</div>
</body>
I'm doing a little HTML project, I Have a Main CSS code the HTML that I'm stuck on,
I have (as you'll see in my code) a dropdown button which gives you several options, Now what I want is for when you click one of the options-
1. It shows the option in the main dropdown button (The text on it [Changing from "$4-$30 Aud" to whatever they pick])
and I want somehow for the "Add to cart" button to change to code that would redirect to what has been picked above it (the options mention above)
Anyway thanks for you help
CSS:
.button {
background-color: #ffffff;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 1px 2px;
cursor: pointer;
}
ul {display: inline;
list-style-type:none;
text-decoration: none;}
.button:hover{
background-color: #595959;
}
.header {
text-align: center;
background-color: #2ac9b7;
color: black;
position: fixed;
width: 100%;
padding: 20px;
}
html, body{
width:100%;
height:100%; background-color: #62666d; margin: 0px;
}
h1 {
font-weight:bold;
color: #000000;
font-size:42px;
}
.main {
font-family: arial;
margin: 0px;
}
.Content {
top:0;
bottom:0
left:0;
right:0;
margin-top: 160px
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
img
{
display: block;
margin: 0 auto;
}
HTML
<html>
<head>
<link rel="stylesheet" href="Masters_baby.css">
<div class="Main">
<div class="header">
<div class="links">
<ul><button class="button">Home</button> </ul>
<ul><button class="button">Shop</button></ul>
<ul><button class="button">Art</button></ul>
<ul><button class="button">About Me</button></ul>
<ul><button class="button">Support</button> </ul>
<ul><button class="button">Production</button></ul>
</div>
</div>
</div>
</div>
<IMG STYLE="position:absolute; TOP:23px; LEFT:20px; WIDTH:130px; HEIGHT:50px" SRC="Logo.png">
</head>
<body>
<IMG STYLE="TOP:180px; LEFT:30px; WIDTH:50px; HEIGHT:50px" SRC="Flame.png">
</body>
</div>
</div>
<div class="parallax"></div>
<div style="height:4950px; width:80%; margin:0 auto; background-color:#98eacc; margin-top: 44px">
<div class="Products" style="padding-top: 50px;">
<div class="∞ Frosted Kumquat" style= "width: 100%; height:9.1%; width:80%; margin:0 auto; background-color:#fff; ">
<p style="font-size: 25px">∞ Frosted Kumquat</p>
<IMG STYLE="WIDTH:35%; HEIGHT:63%" SRC="candle.jpg" >
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 80%;">A fresh citrusy smell that fills the room, Its is fairly stong washing out any unwanted smells or just lifting the room. Best for someone who doesnt like the smell of overly sweet but likes the fresh smell of fruit.</td>
<td>
<div class="dropdown"><button class="dropbtn">$4-$30 AUD</button>
<div class="dropdown-content">Melts $4.00 Tea light(6) $5.00 Candle in a Tin $14.00 Specitally Candles $15.00-$30.00 Boxed candle $22.00 Triplet pack of candles $28.00</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="kin#kinskards.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Display the payment button. -->
<input type="image" name="submit"
src="Add2Cart.png"
alt="Add to Cart" STYLE="WIDTH:70%; HEIGHT:20%">
<img alt="" width="1" height="1"
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</html>
Again Thanks for any help :)
First of all, place all of your content in the <body>. Your head is where you link to stylesheets, load scripts and set meta-data etc. you don't want to have any content such as your header in the head.
You can achieve things like this with JavaScript. Let me give you an example.
Lets say we have the following HTML:
<select class="selector">
<option value="10">10$</option>
<option value="20" selected>20$</option>
<option value="30">30$</option>
</select>
Selected plan: <span class="selected_plan">20$</span>
We want to change the content of the span with class selected_plan to the value selected in our select element.
First we need to create a new script (load your scripts at the bottom of your body).
<script> // place your script here </script>
or
<script src="link_to_your_js_file.js"></script>
Next we need to select our elements like so:
let selector = document.querySelector('.selector');
let selectedPlan = document.querySelector('.selected_plan');
Then we listen for when the select changes:
selector.addEventListener('change', function() {
selectedPlan.innerHTML = selector.value + '$';
});
I created this JSFiddle for you so you can experiment with this particular example: https://jsfiddle.net/dgyyyoh8/1/
EDIT:
If I'm correct you want to change attributes as well. You can use the setAttribute method for this.
let link = document.querySelector('.element');
link.setAttribute('href', selected.value);
Take a look at this JSFiddle: https://jsfiddle.net/dgyyyoh8/2/
Select our element
Create an event for when the selector changes
Set the innerHTMl of the link equal to 'Go to (text of the option)'
Set the href attribute equal to the selected options' value.
EDIT:
There are ways to change the appearance of the select element.
For example: https://codepen.io/ericrasch/pen/zjDBx
I'd suggest you also take a look at the CSS Framework Bootstrap. This framework contains a lot of classes you can work with to really take your styling to the next level.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I'm currently designing a webpage using Bootstrap and I have two <a> buttons laid inline with each other inside of the <div class="jumbotron"></div>
Here's the HTML code:
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a>
</div>
</div>
And here's the CSS of the div wrapping the buttons and the buttons themselves:
.hub-btns {
display: inline-block;
margin: auto;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
I'm still not great with CSS so I'm probably missing something obvious here. But, I simply want to take the div that is wrapping the two buttons and center that div within the jumbotron div.
Any help is greatly appreciated!
I made some changes in a class name (removed spaces) and put some borders for your better understanding of the div placing. Here is the code:
<html>
<head>
<style>
.jumbotron-hub-jumbo {
margin: 0 auto;
border:2px solid black;
width:300px;
}
.hub-btns {
margin: 0 auto;
width:200px;
border:2px solid green;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
width:200px;
border: 2px solid red;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="jumbotron-hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a>
</div>
</div>
</body>
</html>
In the HTML I just changed class jumbotron hub-jumbo
I saw you said you are new to CSS, don't be afraid seeing HTML and CSS merged together. Just cut style part and paste it into your style.css.
It's a bit tricky to help without seeing what you're trying to do.
Adding text-align: center; inside the .hub-btns should be enough to center align those buttons.
Also, I would probably move the margin: 0 10px; to .hub-btnsinstead of applying it the anchors/buttons directly.
Lastly, if you don't need to support old browsers, try to invest some time learning the basics of flexbox. It makes our life a lot easier when it comes to 'aligning things'.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I'm a bit new to HTML/CSS and I'm having a really hard time figuring out why some of my selectors aren't working.
As with it stands right now, only the .tasklist and .totalleft seem to be in effect. I've tried changing them all to class selectors but that doesn't seem to work either. I think the syntax is correct, as I've tried only doing one at a time and they work, but it's when they are all together that it doesn't work. What I am missing here...? Thanks!
HTML
<body ng-app="app" ng-controller="demoController">
<center><h1>Todos by Angular.js</h1></center>
<div>
<input type="text" ng-model="input" placeholder="What needs to be done?">
<button type="submit" ng-click="add()">Add task</button>
</div>
<input type="checkbox" ng-model="allChecked" ng-change="markAll(allChecked)">Mark all as complete<br>
<ul class="tasklist" >
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.done">
<label id="done-{{item.done}}">{{item.val}}</label>
<hr>
</li>
</ul>
<br>
<div class="totalleft">
{{numLeft()}} out of {{items.length}} remaining
<button id="clearbutton" type="submit" ng-click="clearItems()" ng-show="showClear()">Clear {{numCompleted()}} items</button>
</div>
</body>
CSS
.tasklist {
list-style-type:none;
padding-left: 0px;
margin-left: 0px;
text-indent: 0px;
}
#done-true {
text-decoration: line-through;
color: grey;
}
.totalleft {
background-color: #E5E5E5;
color: dark grey;
}
#clearbutton{
font-size: 50%;
}
Have you copied that code straight from your text editor? When I copy/paste it into the SO editor I am seeing an extra UTF character:
See the red dots? When I remove them in the editor the styling works. Here is your code without the extra elements:
.tasklist {
list-style-type:none;
padding-left: 0px;
margin-left: 0px;
text-indent: 0px;
}
#done-true {
text-decoration: line-through;
color: grey;
}
.totalleft {
background-color: #E5E5E5;
color: dark grey;
}
#clearbutton{
font-size: 50%;
}
.tasklist {
list-style-type:none;
padding-left: 0px;
margin-left: 0px;
text-indent: 0px;
}
#done-true {
text-decoration: line-through;
color: grey;
}
.totalleft {
background-color: #E5E5E5;
color: dark grey;
}
#clearbutton{
font-size: 50%;
}
<body ng-app="app" ng-controller="demoController">
<center><h1>Todos by Angular.js</h1></center>
<div>
<input type="text" ng-model="input" placeholder="What needs to be done?">
<button type="submit" ng-click="add()">Add task</button>
</div>
<input type="checkbox" ng-model="allChecked" ng-change="markAll(allChecked)">Mark all as complete<br>
<ul class="tasklist" >
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.done">
<label id="done-{{item.done}}">{{item.val}}</label>
<hr>
</li>
</ul>
<br>
<div class="totalleft">
{{numLeft()}} out of {{items.length}} remaining
<button id="clearbutton" type="submit" ng-click="clearItems()" ng-show="showClear()">Clear {{numCompleted()}} items</button>
</div>
</body>