How can I change the background of my div interestBTN with css?
My css:
.interestBTN {
width: 50%;
height: 35px;
line-height: 35px;
border-color: #ACED52;
border-radius: 10px;
font-size: 18px;
color: black;
text-align: center;
margin: auto;
margin-bottom: 30px;
background-color: #ACED52;
}
div.interestBTN :hover {
background-color: black;
color: #ACED52;
}
HTML:
<div class="interestBTN"><strong>Open</strong></div>
Thank in advance!
All you need to do is remove the space before the :hover
.interestBTN {
width: 50%;
height: 35px;
line-height: 35px;
border-color: #ACED52;
border-radius: 10px;
font-size: 18px;
color: black;
text-align: center;
margin: auto;
margin-bottom: 30px;
background-color: #ACED52;
}
div.interestBTN:hover {
background-color: black;
color: #ACED52;
}
<div class="interestBTN"><strong>Open</strong></div>
.interestBTN {
width: 50%;
height: 35px;
line-height: 35px;
border-color: #ACED52;
border-radius: 10px;
font-size: 18px;
color: black;
text-align: center;
margin: auto;
margin-bottom: 30px;
background-color: #ACED52;
}
div.interestBTN:hover {
background-color: black;
color: #ACED52;
}
<div class="interestBTN"><strong>Open</strong></div>
Related
I am trying to make somethng like that:enter image description here
Image from the left I have done without botton-right cut, I have made border-radius.
Image from the right is what happens when you hover on whole item. AS you can see only middle is highlighted. Any idea how to fix it?
Here is my Code:
HTML:
<div class="pojemnik" onclick="location.href='nitystandardowe.html'" >
<div class="zdjecie"> <img src="img/nitystandardowe.jpg"> </div>
<div class="tekst_"><h5>Nity Standardowe</h5> </div>
</div>
CSS:
.pojemnik{
display: flex;
width: 190px;
height: 170px;
background-color: #f5f7f6;
flex-wrap: wrap;
flex-direction: column;
color: silver;
font-family: sans-serif;
text-decoration: none;
border-bottom-right-radius: 30px;
}
.pojemnik:hover {
text-decoration: none;
cursor: pointer;
width: 190px;
height: 190px;
background-position:bottom;
background-image: url("../images/icons/strzalka-w-praw-tlo.png");
background-repeat: no-repeat;
bottom: 20px;
}
.tekst_ {
border-bottom: solid 2px white;
padding-left: 10px;
}
.tekst_:hover {
border-bottom: solid 2px blue;
background-color:#00a2fa;
border-bottom: solid 1px white;
color: white;
}
.tekst_ h5{
font-family: sans-serif;
font-size: 15px;
margin-top: 5px;
margin-left: 5px;
}
.tekst_ h5:hover{
font-family: sans-serif;
font-size: 15px;
margin-top: 5px;
margin-left: 5px;
color: white;
}
.zdjecie{
align-self: flex-start;
}
.zdjecie img{
position: relative;
width: 190px;
}
You need to specify that you also need to target the .tekst_ class upon hover of .pojemnik like so:
.pojemnik:hover .tekst_ {
border-bottom: solid 2px blue;
background-color:#00a2fa;
border-bottom: solid 1px white;
color: white;
}
.pojemnik{
display: flex;
width: 190px;
height: 170px;
background-color: #f5f7f6;
/* flex-wrap: wrap; */
flex-direction: column;
color: silver;
font-family: sans-serif;
text-decoration: none;
border-bottom-right-radius: 30px;
}
.pojemnik:hover {
text-decoration: none;
cursor: pointer;
width: 190px;
height: 190px;
background-position:bottom;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAUVBMVEX///8AAAD7+/s7OzusrKze3t7Z2dmvr6/b29tVVVUFBQVdXV34+Pjt7e0SEhKUlJRCQkLl5eXy8vJzc3NlZWXLy8tra2u9vb1KSkp5eXmZmZlkbd6rAAACfElEQVR4nO2di27aQBBFbWhSYhzCK03T///QVkhR0mAjEyBrn3vOB6C5mjs7uwvLVJWIiIiIiIiIiIiIiIiIiIjIG+1mWzqEW7LYNfU/9s+lA7kRs9f6jeVj6WBuQTuv31ndlQ7nBqzr/+BJ/FN/4r50RFdmu/qssF6Ujum6/DwSSDPqrkMhK4vLLoWoWnzoVEgy6q9uhSCJTz0KOUa971PIkdi91JCMuulViGkaL/0SKUb9wc/iCYmUWuzanOZkMaAWA4waIDHAqAESA4xq05gMARs4mwaB7FoMMCpFYrZRKU0juxYDsmgtToaApuEGjkB206BIzDYqpWlk12JAFgNqMcCoARIDjBogMcCoNo3JELCBs2kQyK7FAKNSJGYb1abRw2xsXDeLm6f9ej42fvcrPLcW29cTnzVSzsri5vjl3AQ4oxYfm9LBfolm+FvinkdXo+dhqMAT7yBGzgs8hXW9HCawLR3nBbSDFN6VDvMChi2nz6XDvIBh/z7BzyG/DvlraUA/nGwSB+9pAval/LPFNM+H515k0M/4B0pfyxzBv23DXwr3Z7BhZBB/5x1sUbzABm9RxiKTXIOMDCa3CXwG6TUI2arhfyqU3CbwAvEWZSwyyRbFZxBfg3iL0gXyT/R4gXSL8gXiLYpv9HiL4jOIr0G8RekC+Vs1xiKTXIOMDCa3CXwG6TXoly/TILlN4AXiLcpYZJItysggft7TiZldDIvy564t4BZNmH/In2HJn0PKnyXLnwfMn+nMn8vNn61eVWuyRQ+08w/6VkCBVTV7f6m6POMN76RY7A6PqvfD/u1horSbbekQRERERERERERERERERERE5Jv4CxOfKflP0w6QAAAAAElFTkSuQmCC");
background-size: 20px 20px;
background-repeat: no-repeat;
bottom: 20px;
}
.tekst_ {
border-bottom: solid 2px white;
padding-left: 10px;
}
/* .tekst_:hover {
border-bottom: solid 2px blue;
background-color:#00a2fa;
border-bottom: solid 1px white;
color: white;
} */
.pojemnik:hover .tekst_ {
border-bottom: solid 2px blue;
background-color:#00a2fa;
border-bottom: solid 1px white;
color: white;
}
.tekst_ h5{
font-family: sans-serif;
font-size: 15px;
margin-top: 5px;
margin-left: 5px;
}
/* .tekst_ h5:hover{
font-family: sans-serif;
font-size: 15px;
margin-top: 5px;
margin-left: 5px;
color: white;
} */
.zdjecie{
align-self: flex-start;
}
.zdjecie img{
position: relative;
width: 190px;
}
<div class="pojemnik" onclick="location.href='nitystandardowe.html'" >
<div class="zdjecie"> <img src="https://cdn.pixabay.com/photo/2020/11/17/15/44/cup-5752775__340.jpg"> </div>
<div class="tekst_"><h5>Nity Standardowe</h5> </div>
</div>
I have a problem converting html page into wordpress theme. When loading theme i just see white screen but other previously installed theme looks normal. I read earlier similar subject on stackoverflow but it seems that it doesnt help me. Can somebody help me solve this problem?
These are my theme files:
Theme Name: Vesti
Theme URI: www.komunalacbecej.com
Author: Aljosa Boskovic
Author URI: www.komunalacbecej.com
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
*/
* {
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
background-color: #faf6d0;
padding: 0;
//background-image: url('images/green.png');
background-size: cover;
}
header{
display: block;
width: 100%;
margin: 0 auto;
}
#uppermenu{
float: right;
margin-top: 4px;
}
#uppermenu ul{
margin-right: 15px;
}
#uppermenu ul li{
display: inline;
padding: 5px;
font-size: 15px;
color: grey;
font-weight: 540;
font-family: 'Oswald', sans-serif;
cursor: pointer;
}
#uppermenu ul li:hover{
color:#156038;
}
#flags{
float:right;
margin-top: 4px;
}
#flags img{
width: 20px;
height: 20px;
margin-right: 7px;
cursor: pointer;
}
#logo{
vertical-align: middle;
float: left;
height: 70px;
}
#naziv{
float: left;
color: #1a7645;
height: 70px;
width: 300px;
box-sizing: border-box;
padding: 5px;
font-family: sans-serif;
}
nav{
width: 100%;
background: #3d874d;
text-align: center;
position: relative;
z-index: 11;
border: 2px solid #a4a41b;
margin: 0 auto 10px auto;
clear: both;
border-radius: 2px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
padding: 15px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
nav ul li a{
text-decoration: none;
color: #fff;
display: block;
font-size: 1.1em;
}
nav ul li:hover{
background: #150;
}
nav ul li a:hover{
color: #fdf742;
}
nav ul ul {
position: absolute;
width: 150px;
background: #2a562c;
opacity: 0.8;
margin-top: 15px;
margin-left: -15px;
text-align: left;
display: none;
}
nav ul ul li{
display: block;
text-align: left;
border-bottom: 1px solid #5b7e5d;
}
nav ul li:hover > ul{
display: block;
}
#slide{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
margin: 0 auto;
}
#slidephoto{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
border-radius: 5px;
}
#leftbutton{
width: 5%;
height:500px;
position: absolute;
left: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#rightbutton{
width: 5%;
height:500px;
position: absolute;
right: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#leftarrow {
vertical-align: middle;
cursor: pointer;
}
#rightarrow {
vertical-align: middle;
cursor: pointer;
}
#leftarrow:hover{
background: grey;
}
#rightarrow:hover{
background: grey;
}
#naslov{
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px;
text-indent: 30px;
font-size: 20px;
color: #1a7645;
font-family: Georgia;
border-top: 1px solid #1a7645;
background: #639665;
color: #e6f3d1;
padding: 10px 0;
}
#firsttext{
width: 100%;
margin: 30px auto 0 auto;
font-family: 'Times New Roman';
line-height: 1.4em;
font-size: 19px;
text-align: justify;
padding-top: 10px;
box-sizing: border-box;
padding: 40px 90px;
color: white;
background: #6eae49;;
border-radius: 4px;
}
#firsttext span{
font-size: 28px;
font-weight: bold;
color: #1a7645;
}
#delatnosti {
width: 100%;
position: relative;
text-align: center;
background-color: #e6f3d1;
margin: 0px auto;
box-sizing: border-box;
border: 1px solid #6d9e6f;
padding: 20px ;
}
.boxes div {
display: inline-block;
border: 1px solid #a2b6c0;
width: 200px;
height: 210px;
vertical-align: top;
text-align: center;
background-color: white;
color: #46545b;
margin: 20px 10px;
cursor: pointer;
border-radius: 4px;
}
.boxes div:hover{
border: 1px solid green;
background-color: #dfdede;
}
.boxes a img{
width: 200px;
height: 110px;
}
.boxes a p, h3{
//margin: 5px;
text-decoration: none;
}
.boxes div a{
text-decoration: none;
color: black;
}
#obavestenja{
width: 100%;
height: 40px;
//border: 1px solid black;
font-size: 2em;
line-height: 40px;
text-indent: 210px;
}
#mainnews-banner{
width: 100%;
margin: 0 auto;
}
#mainnews-banner h1{
text-indent: 210px;
font-family: serif;
letter-spacing: 3px;
}
#sadrzaj{
width: 75%;
background-color: white;
display: inline-block;
box-sizing: border-box;
text-align: justify;
border: 1px solid black;
}
#vestikolone{
width: 80%;
}
#glavnavestslika{
width: 100%;
height: 430px;
background: url("images/slika4.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#glavnavesttekst{
width: 100%;
height: 180px;
background: black;
position: absolute;
bottom: 0;
opacity: .6;
}
#glavnavesttekst p{
color: #ded8d8;
opacity: 1;
padding: 10px;
font-size: 18px;
font-family: Georgia;
line-height: 23px;
}
#glavnavesttekst h2{
color: white;
font-weight: bold;
opacity: 1;
font-family: Georgia;
text-indent: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
#glavnavest {
font-size: 1.2em;
font-family: 'Oswald', sans-serif;
}
#datum{
width: 100%;
padding: 10px;
box-sizing: border-box;
color: white;
background: black;
}
#banner{
width: 25%;
float: right;
text-align: center;
//border: 3px solid green;
//background: #f1f1f1;
}
#banner img{
width: 120px;
height: 100px;
background: #9ac0f6;
border: 1px solid #9ac0f6;
cursor: pointer;
}
#banner p{
font-size: 1em;
font-family: Arial;
background: #fecd61;
width: 60%;
margin: 0 auto;
margin-bottom: 8px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
#pastnewspara{
text-transform: uppercase;
background-color: black;
color: white;
width: 75%;
box-sizing: border-box;
padding-left: 10px;
margin-bottom: 1px;
opacity: .9;
}
#pastnews{
border-top: none;
position: relative;
text-align: center;
width:75%;
height: 140px;
float: left;
border: 1px dashed black;
border-top: none;
}
.column{
width: 25%;
height: 140px;
display: inline-block;
margin-left: -4px;
background-color: white;
box-sizing: border-box;
vertical-align: top;
box-sizing: border-box;
}
.column img{
width: 100%;
height:140px;
}
.column h3,p{
text-align: left;
padding: 5px;
}
#prognoza{
clear: both;
width: 75%;
background: brown;
color: #a2b6c0;
border-bottom: 2px solid white;
}
.weatherwidget-io{
width: 100%;
display: block;
height: 20px;
text-align: left;
}
#footer{
width: 100%;
height: 130px;
background: white;
background: #a2b6c0;
text-align: center;
position: relative;
border-top: 3px solid white;
}
#icons{
line-height: 130px;
}
#footer i{
color: #554f4f;
font-size: 36px;
padding: 26px;
vertical-align: middle;
}
#footer span {
position: absolute;
right: 50px;
color: grey;
font-family: sans-serif;
}
#footer span i{
padding: 6px;
color: grey;
font-size: 0.6em;
}
/* stranica zelenilo.html */
#submenu ul li{
list-style: none;
font-size: 1.1em;
padding-bottom: 5px;
border-bottom: 2px solid green;
margin-bottom: 13px;
background: rgba(96,96,96,0.4);
}
#submenu {
margin-top: 30px;
width: 22%;
background: url('images/leaf3.jpg');
background-size: cover;
opacity: .9;
font-family: 'Oswald', sans-serif;
text-align: center;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding: 10px 0;
color: #cfcf05;
border: 2px solid green;
float: left;
}
#submenu ul {
opacity: 1;
padding: 40px 20px;
font-size: 16px;
}
#zelenilobody{
background: url('images/goranski.jpg');
background-size: cover;
height: 1000px;
}
#submenu ul li:hover{
background-color: grey;
background: rgba(96,96,96,0.7);
color: white;
cursor: pointer;
}
#navigation nav{
background-color: #61a239;
}
#zelenilo-naziv #naziv{
color: #60a23a;
background-color: rgba(96,96,96,0.7);
}
#zelenilo-uppermenu #uppermenu li{
color: #60a23a;
background-color: rgba(96,96,96,0.8);
}
#zelenilo-tekst{
width: 75%;
float: right;
margin-top: 30px;
border: 1px solid white;
background: rgb(246, 241, 241, 0.8);
box-sizing: border-box;
padding: 20px;
}
#zelenilo-tekst p{
line-height: 20px;
margin-top: 10px;
font-size: 17px;
}
#zelenilo-tekst ol{
padding-left: 20px;
line-height: 24px;
margin-top: 15px;
font-size: 17px;
}
/* stranica vesti.php */
#blognews {
background-color: white;
margin-top: 20px;
padding: 10px;
border: 1px solid black;
}
#article {
border: 1px solid black;
margin-top: 20px 0;
}
#article h2 {
margin-left: 15px;
margin-top: 10px;
}
#datumclanka{
display: block;
margin-left: 15px;
}
#article img{
height: 120px;
display: inline-block;
width: 180px;
vertical-align: middle;
margin-top: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
#article p{
display: inline-block;
width: 650px;
vertical-align: middle;
font-size: 1.1em;
margin-left: 10px;
}
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header>
<img src="images/logofirme.jpg" id="logo">
<div id="naziv">
<h1><?php bloginfo('name'); ?></h1>
<p>Javno preduzeće za komunalne usluge</p>
</div>
<div id="flags">
<img src="images/serbia.png">
<img src="images/hungary.png">
</div>
<div id="uppermenu">
<ul>
<li>Najčešća pitanja</li>
<li>Korisni linkovi</li>
</ul>
</div>
<?php wp_nav_menu(); ?>
</header>
footer.php
<div id="footer">
<div id="icons">
<i class="fa fa-phone"></i>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-facebook-official"></i>
<span><i class="fa fa-copyright"></i>Design by Aleksey</span>
</div>
</div>
</body>
</html>
index.php
<?php get_header(); ?>
test
<?php get_footer(); ?>
Can you try following solutions?
In first line of style.css add "/*" before "Theme Name: Vesti". So it will be like
/*
Theme Name: Vesti
Disable/deactivate all plugins to check if confliction happens between your active theme and plugins. And then enable it one by one if issue happens because of it.
Add following line in wp-config.php file for increasing PHP memory limit.
define(‘WP_MEMORY_LIMIT’, ’64M’);
My body on my site is smaller on all edges for some reason, i have no idea why, here is my site to preview what the spaces / edges are doing: csgodice.co.uk, here is my css code, if you need my html i will edit it and add the html but i think its the css:
CSS:
#font-face{
font-family: "coolvetica"; /* You can name the font whatever you like here */
src: url('fonts/coolvetica rg.ttf') format('truetype'); /* Font directory and format */
}
#header {
margin-right: 50px;
height: 6%;
width: 100%;
border-radius: 3px;
background-color: #FA5858;
}
#logo {
height: 60px;
width: 250px;
}
#steamLogon {
float: right;
margin-top: 0px;
}
#navbar {
float: right;
margin-top: 13px;
margin-right: 100px;
}
#navbar a {
margin-left: 50px;
height: 20px;
width: 70px;
display: align-block;
font-weight: 200;
font-size: 22px;
text-align: center;
text-decoration: none;
color: white;
font-family: coolvetica;
}
#navbar .dropdown {
margin-left: 50px;
height: 20px;
width: 70px;
display: align-block;
font-weight: 200;
font-size: 22px;
text-align: center;
text-decoration: none;
color: white;
font-family: coolvetica;
}
.logout {
font-family: coolvetica;
background-color: #e6e6e6;
font-weight: 300;
height: 25px;
width: 160px;
border: 2px solid #f2f2f2;
}
.logout:hover {
font-family: coolvetica;
font-weight: 300;
font-size: 14px;
color: #262626;
height: 25px;
width: 160px;
background-color: #FA5858;
border: 2px solid #f2f2f2;
}
.account {
font-family: coolvetica;
font-size: 14px;
color: #262626;
height: 20px;
margin: auto;
width: 153px;
background-color: #e6e6e6;
border: 2px solid #f2f2f2;
}
.account:hover {
font-family: coolvetica;
font-size: 14px;
color: #262626;
height: 20px;
width: 153px;
background-color: #FA5858;
border: 2px solid #f2f2f2;
}
/* Dropdown Button */
.dropdown-content {
display: none;
border-radius: 3px;
position: absolute;
height: 45px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown-toggle:hover .dropdown-content {
display: block;
}
#diceholder {
height: 50%;
width: 85%;
margin: auto;
margin-top: 100px;
background-color: #404040;
}
/* Account.php */
.trade-url {
display: align-block;
font-family: coolvetica;
font-size: 24px;
color: #1a1a1a;
margin-top: 50px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
I assume you mean that the body has a margin and you'd like to remove it - if so, try adding this CSS:
body {
margin: 0;
}
I'm trying to create a button that looks like this:
The tricky part is getting the number to 'fit' inside of the button. This is how I have my button set up:
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
This is my CSS:
.textclass {
width: 90px;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
border-radius: 2px 0 0 2px;
}
Setting the height and width of the number seems unnecessary, and I can't get the number to line up properly unless I get into extremely specific positioning which is not ideal. Where am I going wrong here?
Plunk:
http://plnkr.co/edit/0WUs3Y2axmOvfB7TswCb?p=preview
Try to this Define your .textclass position:relative;overflow:hidden; and .numberclass line-height:30px; as like this
/* Styles go here */
.textclass {
width: 90px;
position:relative;
overflow:hidden;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
line-height:30px;
border-radius: 2px 0 0 2px;
}
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
or you just define button into span tag as like this
.textclass {
width: 90px;
position:relative;
overflow:hidden;
display:inline-block;vertical-align:top;text-align:center;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 30px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
line-height:30px;
border-radius: 2px 0 0 2px;
}
<div>
<span class="textclass"><span class="numberclass">33</span>Text</span></div>
Just give position: relative; to .textclass and line-height: 30px; to .numberclass
Updated Plunker
try this (replace it)
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 9px;
top: 8px;
height: 20px;
padding-top: 9px;
width: 30px;
border-radius: 2px 0 0 2px;
}
you can try this one:
.textclass {
width: 140px;
position:relative;
overflow:hidden;
height: 40px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 15px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 30px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:40px;
width: 40px;
line-height:35px;
border-radius: 2px 0 0 2px;
}
DEMO HERE
Please, see the working plunker with completely auto adjusting height of the number part. You do not even need to apply the line-height.
HTML
<button type="text" class="textclass">
<span class="numberclass">
<span class="container"><span class="inner">33</span></span>
</span>
Text
</button>
CSS
.textclass {
width: 90px;
height: 30px;
position: relative;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 30px;
border-radius: 2px 0 0 2px;
display: block;
}
.container {
display: table;
height: 100%;
text-align: center;
width: 100%;
}
.inner {
display: table-cell;
height: 100%;
vertical-align: middle;
}
change in .numberclass class
/* Styles go here */
.textclass {
width: 90px;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
border-radius: 1px 0 0 1px;
color: #fff;
left: 8px;
padding: 8px;
position: absolute;
top: 9px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
</body>
</html>
I feel like this is a stupid question, but I honestly cannot figure this out. I can't align an image to the text.
kissoff.weebly.com/account-page.html
The box in the center that has
"ID:78490
Bank:" etc.
should have the image to the right of it. The problem is the image keeps putting itself in the last header on the page and aligning to that instead (it's a picture of a cat with a green border).
Main CSS used for this page:
/*ACCOUNT PAGE!*/
#content-container {
padding-left: 300px;
padding-top: 70px;
height: 200px;
width: 500px;
}
#stats {
background-color: #FCFCFC;
width: 500px;
margin-top: 20px;
margin-left: 100px;
border: 1px solid rgba(125,180,18,0.8);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top: 18px solid rgba(125,180,18,0.8);
}
img.stat-img {
margin-top: -45px;
margin-left: 370px;
height: 100px;
width: 100px;
border: 1px solid rgba(125,180,18,0.8);
}
#box-container {
width: 200px;
}
.box {
background-color: #FCFCFC;
margin-top: 100px;
margin-left: 1px;
padding: 5px;
float: left;
width: 180px;
line-height: 5px;
border: 1px solid rgba(125,180,18,0.8);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top: 18px solid rgba(125,180,18,0.8);
}
.box2 {
background-color: #FCFCFC;
margin-top: 20px;
margin-left: 1px;
padding: 5px;
color: #C2BAAF;
float: left;
width: 180px;
line-height: 5px;
border: 1px solid rgba(125,180,18,0.8);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top: 18px solid rgba(125,180,18,0.8);
}
.last-box {
background-color: #FCFCFC;
margin-top: 20px;
margin-left: 1px;
margin-bottom: 50px;
padding: 5px;
color: #C2BAAF;
float: left;
width: 180px;
line-height: 5px;
border: 1px solid rgba(125,180,18,0.8);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top: 18px solid rgba(125,180,18,0.8);
}
.box-title {
margin-top: -15px;
z-index: 900;
color: #FFF;
}
.box a:link {
font-size: 13px;
color: #000;
text-decoration: none;
}
.box a:visited {
font-size: 13px;
color: #000;
text-decoration: none;
}
.box a:hover {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.box a:active {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.box2 a:link {
font-size: 13px;
color: #000;
text-decoration: none;
}
.box2 a:visited {
font-size: 13px;
color: #000;
text-decoration: none;
}
.box2 a:hover {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.box2 a:active {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.last-box a:link {
font-size: 13px;
color: #000;
text-decoration: none;
}
.last-box a:visited {
font-size: 13px;
color: #000;
text-decoration: none;
}
.last-box a:hover {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.last-box a:active {
font-size: 13px;
color: #000;
text-decoration: underline;
}
/*ACCOUNT PAGE END!*/
Possible CSS issues (the main text containers):
#container {
margin-left: 30px;
padding-left: 210px;
padding-top: 70px;
}
#text {
width: 800px;
border: 0 solid #000;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
Thanks for looking, I appreciate it.
First add position:relative to the .stat-container class (the container of the img)
then add this css to your .img.stat-img class
.img.stat-img
{
position: absolute;
right: 0;
top: 0;
}
If you want the img to the far right of the box then add position:relative to the id="stats" div instead, and in your .img.stat-img class use
.img.stat-img
{
position: absolute;
right: 40px;
top: 25px;
}
Here is the corrected HTML and css sturcture. Please follow the following css and HTML.
CSS Chagnes
#stats {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FCFCFC;
border-color: rgba(125, 180, 18, 0.8);
border-image: none;
border-radius: 5px 5px 5px 5px;
border-right: 1px solid rgba(125, 180, 18, 0.8);
border-style: solid;
border-width: 18px 1px 1px;
/*margin-left: 100px;
margin-top: 20px;*/
width: 500px;
float:left;
}
#content-container {
height: auto;
margin-left: 30px;
/*padding-left: 210px;*/
padding-top: 70px;
}
#stat-container {
padding:10px;
}
}
img.stat-img {
border: 1px solid rgba(125, 180, 18, 0.8);
height: 80px;
margin-left: 10px;
margin-top: 5px;
width: 100px;
}
HTML changes
You need to put cat image outside the div id="stats" not inside it.
Hope it will work for you.