want some space between text and button - html

below is the code, i had a one image, below that image there is Price and a button, i want some space between price and button which should be left and right to the image
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
.wrapper {
text-align: center;
}
.show{
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
float: right;
<div class="wrapper">
New Released
</div>
<img src="https://www.google.com.np/search?q=django+imagefield&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiHk57k89fcAhUJVH0KHbxAC08Q_AUICygC&biw=1396&bih=690#imgrc=3ukNSrarUo82hM:" style="width: 300px" height="200px">
<table>
<tr>
<td>
Price: Rs 14000
</td>
<td> Join Now</td>
</tr>
</table>

Use this approach it will work fine. Best part is you can even adjust its responsiveness with classes. Don't need to use table for such things. That's considered bad code.
You was missing closing bracket of .new class.
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
.image-container {
width: 300px;
height: 200px;
}
.image-container img {
width: 100%;
}
.image-container span {
float: left;
}
.show {
float: right;
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
<div class="wrapper">
New Released
</div>
<div class="image-container">
<img src="http://site8.dealerbase.co.nz/media/1707/300x200.gif" />
<br>
<span>Price: Rs 14000</span>
Join Now</div>
Thanks

.item-wrap{
display:inline-block;
border:1px solid #ccc;
}
.item-footer{
display:flex;
justify-content:space-around;
}
<div class="item-wrap">
<div class='item-img'>
<img src='https://picsum.photos/300/200?image=0'>
</div>
<div class='item-footer'>
<div class='price'><p>Price: Rs 14000</p></div>
<div class='item-join'>
<p>Join Now</p>
</div>
</div>
</div>

**HTML:**
<tr>
<td>
Price: Rs 14000
</td>
<td class="joinButtonAlign"> Join Now</td>
</tr>
**CSS**
.joinButtonAlign{
display: inline-block;
padding-left:30px;
}

Related

How do i move text inside a button?

I need to move the text inside a button horizontally on click to make a win95-ish click effect.
I've tried doing it with translate, but that moves the whole button, not just its contents. How do i move the text? I'd like to avoid creating elements inside buttons or messing with the padding.
body {
background-color: #008080;
}
button {
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}
<button type="button">Click me!</button>
https://jsfiddle.net/qz0gt378/
You can use a text-shadow if you don't want to use other elements.
body {
background-color: #008080;
}
button {
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
text-shadow: 2px 2px 0px black;
color: transparent;
}
<button type="button">Click me!</button>
You can change the padding of your button.
body {
background-color: #008080;
}
button {
outline: none;
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
padding: 6px 11px 4px 13px;
}
<button type="button">Click me!</button>

Colorize button in css [duplicate]

This question already has answers here:
how to make a background-color on a div tag
(2 answers)
background color inside my <div> element using CSS
(4 answers)
Closed 2 years ago.
I found a button code so I used it. After that I saw that the button was completely transparent I learned how to colorize its text but not the background.
Can you assist?
The Code is:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
<div class="my_content_container">
Go to my link location
</div>
Use background property background-color to change the background color.
Example:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
background-color: red;
}
<div class="my_content_container">
Go to my link location
</div>
Add background-color property in your css rule:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
background-color: #fbca8e; /* <- Here */
}
How do I colorize my button in JavaScript?
Use style.backgroundColor property.
document.querySelector(".my_content_container > a").style.backgroundColor = "red";
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
<div class="my_content_container">
Go to my link location
</div>

How can I prevent my button from being mangled?

I have a css styled button that is being completely mangled and showing strangely on multiple lines. However if the button is set as a input instead of a link the button looks perfect. How can I get my link button to look the same as the input button?
Here is an example:
https://jsfiddle.net/tasenudr/
html:
<div style="width: 200px;">
<table style="width:80%;">
<tr>
<td style=" text-align: left; vertical-align: middle;">
<BR> <a class="btn" target="_parent" href="index.php?ts=fq">Daily
Starting from:
$15.22</a>
</td>
<td style=" width: 4%; text-align: left; vertical-align: middle; text-align:right;">
<BR>
<input type="submit" value="6 Month Plans Starting from: $75.36" style="width:90px; top:50px; height:115px; white-space: normal;" class="btn">
</submit>
</td>
</tr>
</table>
</div>
CSS:
.btn {
background: #FFCC02;
border: none;
padding: 10px 25px 10px 25px;
color: #585858;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}
.btn:hover {
color: #333;
background-color: #EBEBEB;
}
The button on the left is mangled, but the button on the right looks perfect.
A button is an inline element.
Give it a display: block; or display: inline-block;
Add display: block to your .btn css rule to prevent the inline native display of the element from mangling the text inside of it.
https://jsfiddle.net/tasenudr/1/
.btn {
background: #FFCC02;
display: block;
border: none;
padding: 10px 25px 10px 25px;
color: #585858;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}
You have to set the .btn to display: inline-block OR display: block for this to work properly.
Updated fiddle:
https://jsfiddle.net/tasenudr/3/
.btn{
display: inline-block;
min-width: 200px;
text-align:center;
}

My submenu items are not appearing in browser

My submenu items from VIDEOS are not appearing in the browser. I believe I have coded them correctly already. I am not sure whether it is because I am trying to make a sub-menu when I have already coded CSS (making it more difficult) but I really need some help so they can appear. Upon that, I would code CSS to make it more user-friendly so when the mouse hovers over 'videos', the menu would cascade down. my link rel is correct. Many thanks.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Puppy Power</title>
</head>
<body>
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li>Home</li>
<li>Videos
<ul class="sub">
<li>Vines</li>
<li>Pugs</li>
<li>Failing Dogs</li>
<li>Crazy Dogs</li>
<li>Funny Dogs</li>
</ul>
</li>
<li>Photographs</li>
<li>Articles</li>
<li>Contact</li>
</ul>
<div id="hero"><h1><b>HERO</b></h1></div>
<div id="topvideo"><h1><b>TOP VIDEO</b></h1></div>
<div id="topphoto"><h1><b>TOP PHOTO</b></h1></div>
<div id="toparticles"><h1><b>TOP ARTICLE</b></h1></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>FOOTER</b></h1></div>
</body>
</html>
#page {
max-width: 850px;
min-width: 840px;
min-height: 1550px;
max-height: 1600px;
}
ul {
width: 813px;
height: 100px;
padding: 10px;
margin: 0px auto 0px auto;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
text-align: center;
text-decoration: none;
list-style-type: none;
padding: 5px 0px 5px 0px;
display:inline-block;
}
li {
display: inline;
text-decoration: none;
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 0px 0px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 0px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 0px;
text-align: center;
}
A good way to debug is to strip it down and see whats working and what is not. Try removing the class="sub" and all of the a tags and see if its working then. Then you will be able to identify the problem.

How to move the menu inside the "menu border"

As the title says, I am trying to move the menu inside the border menu. I am new to this and as they are theoretically links I thought it would be something like. a { position:absolute and then I would just choose where I would want them to go. On top of this, there is a submenu I need to move with it as well. Any ideas? THANKS! I want to move the menu to the bottom right within the border.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="videos.css" />
<link rel="stylesheet" type="text/css" href="vines.css" />
<title>Puppy Power</title>
</head>
<body>
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li>Home</li>
<li>Videos
<ul class="sub">
<li>Vines</li>
<li>Pugs</li>
<li>Failing Dogs</li>
<li>Crazy Dogs</li>
<li>Funny Dogs</li>
</ul>
</li>
<li>Photographs</li>
<li>Articles</li>
<li>Contact</li>
</ul>
<div id="hero"><h1><b>HERO</b></h1></div>
<div id="topvideo"><h1><b>TOP VIDEO</b></h1></div>
<div id="topphoto"><h1><b>TOP PHOTO</b></h1></div>
<div id="toparticles"><h1><b>TOP ARTICLE</b></h1></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>FOOTER</b></h1></div>
</body>
</html>
#page {
max-width: 850px;
min-width: 840px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
}
ul #navigation, .sub {
list-style-type: none;
}
ul #navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
position: relative;
float: left;
list-style-type: none;
}
ul #navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
ul #navigation li:hover > a {
background-color: #89cFF0;
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 0px 0px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 0px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 0px;
text-align: center;
}
The problem with your CSS is in your selectors you keep placing #navigation where it is not supposed to go and it is breaking your CSS. For example, the rule for your li is this:
ul #navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
position: relative;
float: left;
list-style-type: none;
}
And the HTML is this:
<ul id="navigation">
<li>Home</li>
<li>Videos
<ul class="sub">
<li>Vines</li>
<li>Pugs</li>
<li>Failing Dogs</li>
<li>Crazy Dogs</li>
<li>Funny Dogs</li>
</ul>
</li>
<li>Photographs</li>
<li>Articles</li>
<li>Contact</li>
</ul>
Your CSS is trying to style a <li> which is a child of #navigation which is a child of <ul>, which there is none because the ul is #navigation. You should select it like this instead:
#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
float: left;
list-style-type: none;
}
JSFiddle Demo
Updated CSS:
#page {
max-width: 850px;
min-width: 840px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
#navigation {
border: 1px solid #89cFF0;
width: 813px;
height: 187px;
margin-left: 5px;
}
#navigation , .sub {
list-style-type: none;
}
#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
float: left;
list-style-type: none;
}
#navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
#navigation li:hover > a {
background-color: #89cFF0;
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 0px 0px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 0px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 0px;
text-align: center;
}