I've recently just integrated some buttons into my code but it wont' let me change the font-color with color-parameter. Everything else can be changed, but not the font-color. its black 'normal' and white on hover. Can someone maybe help?
Thats the CSS
.button {
border: none;
padding: 0.7em 2.6em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.8vw;
margin: 1.2em 0 3em 0;
cursor: pointer;
font-family: "Gill Sans", Sans-Serif;
font-weight: 600;
background-color: #b9b9b9;
color: #?????
}
.button:hover {
background-color: #b9b9b9;
text-decoration: underline;
color: #?????
}
And the HTML
<button class="button" onclick="window.location.href='http://www.XXXX.xx/‚;“>Button-Text</button >
Related
My website has a hamburger menu made with only HTML and CSS. When the hamburger icon is clicked and the menu activated, the menu titles are displayed over the background image instead of having a white background. (The hamburger menu has a transparent background.) How do I make it so that the menu displays OVER whatever is in the background, with its own white background?`
<div class="nav">
<h1>MA</h1>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
my work
about
contact
</div>
</div>
.nav {
text-align: right;
height: 50px;
line-height: 70px;
margin-bottom: 20px;
margin-top: 15px;
font-family: Gothic A1;
font-size: 20px;
color: black;
}
.menu {
margin: 0 30px 0 0;
background-color: white;
}
.menu a {
clear: right;
text-decoration: none;
color: black;
margin: 0 10px;
line-height: 70px;
padding-left: 30px;
}
.menu a:hover {
color: #edbecb;
text-decoration: none;
}
label {
margin: 0 30px 0 0;
font-size: 50px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
padding-right: 30px;
}
.menu {
text-align: right;
width: 100%;
/* height: 1000px;*/
display: none;
background-color: white;
line-height: 50px;
margin-top: 0px;
padding-right: 30px;
}
.menu a {
display: block;
margin: 0;
background-color: white;
}
#toggle:checked + .menu {
display: block;
background-color: white;
position: absolute;
}
#toggle:checked + .menu a {
background-color: white;
position: absolute;
}
#toggle:checked + label {
background-color: white;
}
}
I have created a site that has a dynamically built menu, which draws out tabs, according to some arrays in the backend. Selecting a tab fetches the whole page again, with different css classes applied, depending on the selected tab.
Basically, I am using style="position: absolute; left: xxxxpx" where the xxxx is calucated in the backend.
I want to change the site so that the gui is more independent of the backend.
I am unsure how to proceed with changing this so that all the layout calculations are made by css. I was thinking about doing it with css variables, and keeping the essential same code, but I am unsure how to determine which node and therefore how far it should be offset.
My Current Code
1st tab selected
<div class="topTabSelected tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTab tab-project noprint" style="left: 468px;">Project Manager</div>
3rd tab selected
<div class="topTab tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTabSelected tab-project noprint" style="left: 468px;">Project Manager</div>
CSS
.tab-admin{
background-color: var(--admin-tab-bg);
}
.tab-design{
background-color: var(--design-tab-bg);
}
.tab-project{
background-color: var(--project-tab-bg);
}
.topTabSelected {
position: absolute;
top: 31px;
z-index: 8;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: transparent;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
height: 17px;
text-align: center;
}
.topTab {
position: absolute;
top: 31px;
z-index: 2;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
text-align: center;
}
.topTab a {
text-decoration: none;
color: white;
}
.topTab a:hover {
text-decoration: underline;
color: white;
}
Backend code to calculate positions:
$tabwidth = 132;
$widthmodifier = 200;
for ($mainpageCounter = 1; $mainpageCounter <= count($mainpage); $mainpageCounter++) {
$topTabDivStart = "\n<div class=\"topTab " . ($p == $mainpageCounter ? "topTab-Selected " : "") . $mainpage[$mainpageCounter]["cssClass"] . " noprint\" style=\"left: " . $widthmodifier . "px;\">";
$topTabDivEnd = "</div>\n";
if ($p == $mainpageCounter) {
echo $topTabDivStart . $mainpage[$mainpageCounter]["title"] . $topTabDivEnd;
} else {
echo $topTabDivStart . "" . $mainpage[$mainpageCounter]["title"] . " $topTabDivEnd";
}
$widthmodifier += $tabwidth;
}
I would like to create a checkbox that looks like flipswitch.
I used this CSS classes. and I used this design elements. But I could not succeded. There is something that i missed. I do not know how to manage that?
Codes in XPages:
<div class="onoffswitch">
<xp:checkBox text="Label" id="onoffswitch"
defaultChecked="true">
<span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span>
</xp:checkBox>
</div>
CSS Class: Resources\Style Sheets
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
I find that when you need to put markup inside a control it mostly won't work because the XPages rendering will change or ignore it. To get around this I use plain markup with a hidden control located outside of the markup. I manage the state of the hidden control with JQuery.
Here is a working example for your FlipSwitch:
<xp:checkBox text="Label" id="checkBox1"></xp:checkBox>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
onclick="x$('#{id:checkBox1}').prop('checked', !(x$('#{id:checkBox1}').prop('checked')) )" />
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
The x$() function is a handly utility from Mark Roden:
function x$(idTag, param){ //Updated 18 Feb 2012
idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");
return($("#"+idTag));
}
On (my site) I would like to place the menubar in the center of the page.
Here the code of my menubar:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
display: inline-block;
}
Thanks in advance for helping me! :)
Add width: 100%; to your #navigation for a full-wdith centered menu.
Or change the display to block for a centered menu without a full-width background.
If you want to keep the yellow line under, add a 1px bottom margin. This will shift the rest one pixel lower and it will reveal a yellow line.
margin-bottom: 1px
Working JSFiddle for this: http://jsfiddle.net/qwnwkp7u/2/
Switch display: inline-block; to display: block;
I guess you need to understand something about block and inline-block elements.
Block elements , if sized and smaller than page/container can basicly; be centered with margin:auto;.
Inline-block element behaves like text and can follow text-align value.
To center your menu , you have then 2 options:
margin:auto; with a block formating, you need then just to remove your inline-block display wich does:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
}
or
text-align:center; from its parent if as an inline boxe. Wich would be here :
.bg-wrapper {
text-align:center;
}
If inline-block was here used to trigger some special layout , like to hold floatting elements, you could here turn display:block into display:table;.
doei
Could someone explain me what's going on with this small piece of HTML ?
http://jsbin.com/akome5
On most of current browsers (FF4, Chrome10, IE9, IE8, Opera 11), the layout of the element looks like this :
Meh?! I don't understand why ?!
Why aren't the height and width as big as the visible box (orange+red spaces) ?
Adding a "display:inline-block;" to the element doesn't seems to really fix it.
How can I fix it ?
Thx!!
Setting a width and height on an A tag
Try adding the following styles.
a.button {
display: block;
float: left;
overflow: auto;
}
a.button span {
display: block;
float: left;
}
I'd propose a different approach involving no spans
html:
<a class="button2" href="#">Text Text Text</a>
css:
/* Button 2 */
.button2 {
background-color:red;
border:solid 10px orange;
border-top:0;
border-bottom:0;
display:inline-block;
color:#fff;
font-family: Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
line-height:30px;
text-decoration:none;
padding:0 3px;
}
old (top) new (bottom)
http://jsfiddle.net/pxfunc/vr7gJ/
For information I manage to do it without float:left, here is the whole CSS :
a.button{
display: inline-block; /* <- added */
text-decoration: none;
}
a.button span{
display: inline-block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
height: 30px;
line-height: 30px; /* <- added */
text-decoration: none;
}
a.button .left, a.button .right{
background-color: orange;
width: 10px;
}
a.button .text{
background-color: red;
color: white;
}
The line-height instruction was the key.