I am having problems with the z-index. I am trying to get the button link to display overtop of the image, but it just isn't seeming to work. The image below shows how I am wanting it to look.
Here is the HTML:
<div class="featured">
<img src="images/featured.png" alt="Featured Image">
<div class="button-2">
Buy Now
</div>
</div>
Here is the CSS:
.featured img
{
float: left;
z-index: -1;
}
.button-2
{
-moz-box-shadow:inset 0px 1px 0px 0px #940c00;
-webkit-box-shadow:inset 0px 1px 0px 0px #940c00;
box-shadow:inset 0px 1px 0px 0px #940c00;
background-color:#8b0101;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:43px;
line-height:43px;
width:135px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #810e05;
float: left;
}
.button-2 a
{
color: #fff;
font-size: 20px;
letter-spacing: 2px;
}
.button-2:hover
{
background-color:#6c0301;
}
.button-2:active
{
position:relative;
top: 1px;
}
This is what is displaying: http://imgur.com/XungDOU
This is what I want it to do: http://imgur.com/XHXTKae
Try this:
.button-2{
position: absolute;
left:50%;
top:50%;
z-index:99}
Related
I'm having problems with my code. I have a fixed menu bar that works as it should but it doesn't resize when I change the size of the window. I need it to resize because if you change the window size, it will will not scroll horizontally and some buttons are cut off. How can I fix this?
Also feel free to make optimization or input on unnecessary code
Thanks
body {
margin: 0px;
padding: 0px;
background: url(images/gradient.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
section {
margin: 0 auto;
border: 1px solid #000000;
border-radius: 8px;
background:#E5E7E9;
width: 958px;
height: 800px;
}
.bpic {
width: 200px;
height: 350px;
margin: 0px;
}
.biopic {
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 350px;
margin: 40px 40px 40px 375px;
}
.bio {
margin: 40px;
font-family: verdana;
text-align: center;
}
#biography {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#assignments {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#projects {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#contact {
font-family: arial black;
font-size: 100%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
.email {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 150px;
height: 96px;
margin: 3px 40px 3px 400px;
}
.banner {
width: 960px;
height: 143px;
margin: 0 auto;
padding: 0px;
background: url(images/banner.png) no-repeat;
}
.banner h2 {
font-family: vollkorn;
font-size: 350%;
color: white;
text-transform: uppercase;
margin: 0;
position: relative;
top: -40%;
left: 83%;
transform: translate(-50%, -50%);
}
.menu {
list-style-type: none;
margin: auto;
background-color: #333;
width: 100%;
background: url(images/menu.jpg) repeat-x;
position: fixed;
min-width: 1080px;
z-index: 1;
display: inline-block;
}
.menu ul {
float: left;
margin: 0px;
padding: 0 0 0 30%;
list-style: none;
}
.menu ul li {
padding: 0px;
display: inline;
}
.menu ul li a {
position: relative;
float: center;
display: inline-block;
height: 30px;
width: 180px;
text-align: center;
padding: 12px 0 0 0;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
min-height: 24px;
}
.menu li a:hover, .menu li .current {
position: relative;
color: #ffffff;
background: url(images/menuhoverright.jpg) top right no-repeat;
}
.menu li a:hover span, .menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url(images/menuhoverleft.jpg) no-repeat;
}
.jprop {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 195px;
margin: 40px;
}
.jprop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<!-- Homepage
My Biography Page
Author:
Date: 01/29/2017
-->
<meta charset="UTF-8" />
<title>Homepage</title>
<script src="modernizr-1.5.js"></script>
<link href="homestyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<img src="images/menu.jpg" alt="menu" />
<ul>
<li><span></span>Biography</li>
<li><span></span>Assignments</li>
<li><span></span>Projects</li>
<li><span></span>Contact</li>
</ul>
</div>
<div class="banner">
<img src="images/banner.png" alt="banner" />
<h2>K V</h2>
</div>
<section>
<div id="biography">
<a name="biography"><h1>Biography</h1>
</div>
<div class="biopic">
<img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
</div>
<article>
<div class="bio">
<p>Hello, my name is &&&&&&. --
</p>
<p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start
working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on
continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for
technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.
</p>
</div>
</article>
</section>
<br>
<section>
<div id="assignments">
<a name="assignments"><h1>Assignments</h1>
</div>
<div class="jprop">
<a href="Jprop/basic.html">
<img src="images/jprop.JPG" alt="jprops">
</a>
</div>
</section>
<br>
<section>
<div id="projects">
<a name="projects"><h1>Projects</h1>
</div>
</section>
<br>
<section style="max-height: 210px;">
<div id="contact">
<a name="contact"><h1>Contact</h1>
</div>
<div class="email">
<a href="mailto:REDACTED">
<img src="images/email.png" alt="emails">
</a>
</div>
</section>
<br>
</body>
</html>
This bit of css from your style sheet is going to keep the menu from resizing below 1080px. So it will be too wide for many tablets and phones for example.
.menu {
min-width: 1080px;
}
Remove the min-width property, and see if that fixes it for you.
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));
}
I am trying to make a border of 1px solid #89cFF0 for my menu. You can see from the other "divs" that this is what I have done, and it has worked such as "hero" or "top video". What am I doing wrong? Many thanks.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="videos.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;
}
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;
}
ul #navigation li:hover .sub {
display:;
}
#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;
}
You have several selectors that begin ul#navigation. There should be a space between the ul and the #navigation.
I'd like to have the caption text stay the same width as the image (without setting one fixed width). I've tried playing around with , etc., but that's even harder to control.
Here's a sample of the CSS. Hope this is the proper way to ask questions here!
<head>
<style type="text/css">
<!--
#floatrightphoto {
float:right;
padding: 6px;
margin-left: 2px;
margin-top: 3px;
margin-bottom: 2px;
margin-right: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCEE77;
border-right-color: #AFE165;
border-bottom-color: #AFE165;
border-left-color: #CCEE77;
background-color: #CCFF99;
}
#floatrightphoto p{
font-weight: normal;
color: #889260;
float: left;
margin-bottom: -3px;
margin-top: 0px;
margin-right: 1px;
margin-left: 0px;
text-align: right;
font-family: "Comic Sans MS", Ariel;
font-style: oblique;
font-size: 14px;
line-height: 16px;
position: static;
display: inherit;
}
body {
width: 750px;
}
-->
</style>
</head>
<body>
<div id="floatrightphoto">
<img src="somephoto" width="180" height="180">
<br>
<p>Caption Caption Caption Caption Caption Caption Caption
Caption Caption</p>
</br>
</img>
</div>
</body>
Whoa that's a whole lotta extra fluff. I'm looking for the same solution.
I came across this solution (modified to reflect what you are wanting):
#img-right{display: table; min-width: 1px; float:right; margin-left: 10px;}
#img-right p {display: table-caption; caption-side: bottom;}
However, this works in most all browsers except IE where in IE my #img-right spans the full width of the caption (the caption being longer than the image itself and it doesn't wrap). I am still trying to figure out how to make IE behave, as it works perfectly in other browsers.
As for your other code, I suggest simplifying it a bit to reduce load time. I modified your CSS a little bit...I'd suggest renaming the ID's to be smaller and easier to read, please, don't EVER use Comic Sans... ever. :)
body { width: 750px; }
#img-right {
float:right;
padding: 6px;
margin: 3px 2px 2px 0px;
border-top: 1px solid #ccee77;
border-left: 1px solid #ccee77;
border-bottom: 1px solid #afe165;
border-right: 1px solid #afe165;
background: #ccff99;
}
#img-right p{
font: italic 14px/16px Helvetica, Arial, Lucida Sans, Verdana;
color: #889260;
float: left;
margin: 0px 0px -3px 1px;
text-align: right;
}
In Chrome, the website bmr1.com shows the search widget with a magnifying glass as the submit buttons background image. In order to get the submit button to move I added Float:Right and Margin-top, to get it into the correct position. I also had to add position:relative, so that the button would be positioned on top of the text box. Issue is the same margin-top: of 31px that fixes Chrome, makes IE9's submit button way too high and out of place.
bmr1.com
<div id="search-2" class="widget widget_search"><h4 class="widgettitle"><cufon class="cufon cufon-canvas" alt="Search" style="width: 64px; height: 22px; "><canvas width="80" height="28" style="width: 80px; height: 28px; top: -4px; left: -1px; "></canvas><cufontext>Search</cufontext></cufon></h4><form role="search" method="get" id="searchform" action="http://bmr1.com/">
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" placeholder="" widdit="on" autocomplete="off">
<input type="submit" id="searchsubmit" value="">
</form><div id="predictad_div" class="predictad"></div></div>
#sidebar1 { position: relative; }
#search-2.widget.widget_search {z-index:0; background-color: #363636; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; color:#363636; max-width:231px;}
#search-2.widget.widget_search #s{width:94%; padding: 5px;position:relative;}
#search-2.widget.widget_search h4 {font-size:140%; background-color: #84c4e7; padding: 5px 10px 5px 10px; border: 1px solid #fff; margin-bottom:10px;}
.widget_search .screen-reader-text {margin-bottom:-20px;float:right;}
#mp_cart_widget-3.widget.mp_cart_widget { background-color: #cdcdcd; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; max-width:231px;}
#mp_cart_widget-3.widget.mp_cart_widget h4 { font-size:140%; background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/greysliver.png'); background-repeat: repeat-x; padding: 5px 10px 6px 10px; margin-bottom:10px; color:#fff; }
#mp_categories_widget-3.widget.mp_categories_widget { background-color: #363636; margin-right:15px; margin-bottom:20px; padding: 10px 10px 10px 10px; color:#fff; max-width:231px;}
#mp_categories_widget-3.widget.mp_categories_widget h4 { font-size:140%; background-color: #84c4e7; padding: 5px 0px 5px 10px; border: 1px solid #fff; margin-bottom:10px; color:#363636;}
#mp_categories_widget-3.widget.mp_categories_widget a {text-decoration:none; color:#fff; margin-left: 30px; }
#sidebar ul {font-size:18px; font-weight:bold; }
ul#mp_category_list {padding-right:10px;font-size:18px; }
ul#mp_category_list .children {text-align:left;list-style: none;margin-left:10px; font-size:15px !important;}
.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
padding: 8px 16px;
margin-top:-31px;
position:relative;
}
Try this:
.widget_search #searchsubmit {
background-image: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color: transparent;
border: none;
background-repeat: no-repeat;
height: 28px;
width: 30px;
cursor: pointer;
position: absolute;
z-index: 10;
top: 3px;
right: 0;
}
#search-2 form {position: relative;}
Also, I highly recommend to use a css reset! This will make every slight difference in lay-out between browsers go away. You will need to overwrite some of these values, but it saves you a lot of frustration in the long run!
An example: http://meyerweb.com/eric/tools/css/reset/
I agree with the previous commenter, use a reset.css! Different browsers has different default margin, padding etc values for everything and it makes your webpage look different in each of them.
To fix the problem you should do the followings.
First, give a fixed height for your text input field:
#search-2.widget.widget_search #s{width:94%;height:20px; padding: 5px;position:relative;}
Change is that I have applied a 20 pixel height for the element
Then apply the following to the submit button:
.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
bottom:31px;
position:relative;
}
You should use shortcodes like background: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png') no-repeat; to make your code shorter and cleaner
I hope this will fix your issue.