I am a little confused:
In the picture, the element that says "Navigation einblenden" is span button, while the one with "Suche" is a span a. I have styled them exactly the same:
part of the css, dispOpts is the class-name of the parent span. and the all:none is for testing.
.dispOpts {
all:none;
}
.dispOpts button {
all:none;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom:2em;
}
.dispOpts a {
all:none;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
}
.dispOpts::before,
.dispOpts::after {
display: none;
}
.dispOpts a:hover,
.dispOpts button:hover{
background: var(--accent-color);
color: white;
}
I cannot find any difference at all...
It is our workbench for a project at work:
http://exist3.ulb.tu-darmstadt.de:8080/exist/apps/edoc/view.html?id=e000001_kuttenberger_religionsfrieden_einleitung
As you can see in your code, you didn't style them the same.
The .dispOpts a is missing margin-bottom:2em; and also to work the same as on button, you have to add also display: inline-block on .dispOpts a, and also to be same, they need to have same line-height and font-size, so result would be like this:
.dispOpts button {
all:none;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom:2em;
line-height: 1.4;
font-size: 14px;
}
.dispOpts a {
all:none;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom: 2em;
display: inline-block;
line-height: 1.4;
font-size: 14px;
}
And all would be lined correctly with same height.
Also you could use it with all: initial; and the end result would be:
.dispOpts button {
all:initial;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom:2em;
}
.dispOpts a {
all:initial;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom: 2em;
display: inline-block;
}
With this way, you would need only margin-bottom, and display on a element.
Both link didn't have the same styles :
Related
I want that the size of my button should get fixed for the mobile view but it should be auto for window. how can I do it, please help? Or it should be auto placed in the center. I am using this code. I am using CSS like this.
.button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 {
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;}
.button2 a:link, .button2 a:visited {
background-color: #FF5733;
color: white;
text-decoration: none;
}
.button2 a:hover, .button2 a:active {
background-color: #FF5733;
color:#000000;
}
#media screen and (max-width: 680px) and (min-width:0px){
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;
}
.button1 { padding: 6px 32px;width: 85px;max-height:88px;}
}}
<button style="margin:auto"class="button button1">BUY NOW</button><button style="margin:auto;" class="button button2">DETALS</button>
Could the issue be that you have the button style set to auto in your inline CSS in your html page? That would override the margins you are setting in your CSS page. Maybe that is effecting the way the buttons are being displayed, because the media query looks good. I really hope this helps. Good luck!
I am using a CSS button code, but I found some problem in doing it. I want that the width of my button should get fixed for the mobile view but it should be auto for the window. how can I do it, please help? Or it should be auto placed in the center. I am using this code. I am using CSS like this.
CSS code :
.button1
{
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2
{
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 a:link, .button2 a:visited
{
background-color: #FF5733;
color: white;
text-decoration: none;
}
.button2 a:hover, .button2 a:active
{
background-color: #FF5733;
color:#000000;
}
#media screen and (max-width: 680px) and (min-width:0px)
{
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;}
.button1 { padding: 6px 32px;width: 85px;max-height:88px;}
}
HTML code:
<button class="button button1">
BUY NOW
</button>
<button class="button button2">
DETALS
</button>
For a start, change the button display from inline-table to inline-block
I have been working on this game for a while and decided to change my navbars to just buttons and I'm having trouble finishing up matching my style i had.
old code fiddle : https://jsfiddle.net/tmanrocks999/L4hmpan1/38/
new code that i think is almost done : https://jsfiddle.net/tmanrocks999/yfcdqu5g/ ( can't get the last few things to work. not sure what the tab-container etc things need to say to make them work)
I basically want how my first fiddle looks on the 2nd one. its alot to post in here but i can post the css for both
old css:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 5px;
}
.nav_bar ul li a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover {
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover {
background: #ffffff;
color: #000000;
}
.main_container {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
starting of the new css that i will use once done because it works with buttons:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
/* remove border radius for the tab */
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
#exTab3 .nav-pills>li>a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-radius-topleft: 10px;
border-radius-topright: 10px;
width: 115px;
display: block;
text-align: center;
}
#exTab3 .tab-content {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
I expect my 2nd fiddle to match my first fiddle in css style. i figured out that navbars = a list of links so what i did find to work should work . Active tab should be white and other non active tabs blue. But my actual output is close to my old style but not exactly. If i could get some help with fixing my css id really appreciate it. been wanting this fix for a few months now.
You need to add below CSS to your code.
#exTab3 .nav-pills>li.active>a,
#exTab3 .nav-pills>li.active>a:hover,
#exTab3 .nav-pills>li.active>a:focus {
background-color: #fff !important;
}
How can I make the color of the text turn to black not only when I move the mouse cursor to the text, but also when the cursor enters the whole button area?
.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
transition: 0.35s;
}
.button a, active {
text-decoration: none;
color: #e7dd84;
}
.button a:hover {
text-decoration: none;
color: black;
}
.button:hover {
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>
Do you mean like this?
.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
transition: 0.35s;
}
.button a, active
{
text-decoration: none;
color: #e7dd84;
}
.button:hover a
{
text-decoration: none;
color: black;
}
.button:hover
{
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>
Instead of styling the <div>, I suggest to do it on the <a> tag directly.
I would use inline block, so that you don't need to specify the width, as inline block has the ability of shrink-to-fit based on length of the text. And on the container all you need is text-align:center to center that button horizontally.
Hover on the edges of the button you'll see the link also becomes available, because we set padding on it directly. Unless your original demo, you'll have to hover on the text to be able to click. This small improvement makes it more accessible, less confusing.
I also moved the class button onto the <a>, and add container to the <div>.
jsfiddle
.container {
text-align: center;
}
.button {
text-decoration: none;
background-color: rgba(236, 229, 167, 0.2);
border: 2px solid #e7dd84;
color: #e7dd84;
display: inline-block;
font-size: 1.5em;
padding: 8px;
transition: 0.35s;
}
.button:hover {
text-decoration: none;
background-color: white;
border-color: white;
color: black;
}
<div class="container">
<a class="button" href="first.html">Go to site</a>
</div>
You have to give the color change to the link when you hover on the button.
Currently you have given the color to change when hoverd on the link inside the button.
Check updated snippet.
.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
transition: 0.35s;
}
.button a, active
{
text-decoration: none;
color: #e7dd84;
}
.button:hover a
{
text-decoration: none;
color: black;
}
.button:hover
{
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>
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.