I am currently copying this site: http://www.onlinemeetingnow.com/register/?id=q6wpivs95c& here: http://beaminggeek.com/profitbuilder/test-2/
and using a WP tool called ProfitBuilder: http://wpprofitbuilder.com/
I have three issues here in particular.
1. I put margin-top: 20px; on my tag (to push it on the center) on the image below however when I do it adds up a margin on the both top and below:
Here's my code on that:
<h2 style="text-align: center; font-size: 40px; font-weight: bold;"><span style="color: #ffffff; ">The 4-Step Strategy We Used to Build a</span><br /> <span style="color: #ffffff;"> 7-Figure Coaching Business...</span><br /> <span style="color: #ffffff; font-size: 25px; "> (while ignoring ALL the conventional wisdom!)</span></h2><p style="text-align: center;"><a style="font-family: 'Open Sans Condensed'; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd800',endColorstr='#f7d100'); background: -moz-linear-gradient(center top,#ffd800 5%,#f7d100 100%); background-color: #ffd800; display: block; margin: 0 auto; position: relative; min-height: 33px; width: 280px; text-decoration: none; font-weight: bold; font-size: 30px; color: #fdffff; cursor: pointer; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: none; padding: 17px 10px; text-align: center; z-index: 2; margin-top: 12px;" href="#">Claim My Spot Now >></a></p>
I also have some issues with this two section here as there are spaces all around:
Any idea what to move to make it look perfect using inline-CSS? YOu can use Chrome inspector tool to check this.
NOTE: The Profit Builder Tool is a tool that doesnt go with custom css panel with it meaning everything is just plain inline CSS.
You have a padding-bottom set for your Claim Your Spot Now button. So when you put a margin-top value on top of your h2 it pushes your p down as well and the padding-bottom of the p pushes down the following section
I think this should work
body {
margin: -1px 0 0 0
}
h2 {
margin: 25px 0 0 0;
}
.pbuilder_column {
margin: 0 0 -24px 0
}
Related
As I said, depending on what browser I'm using, the button varies for some reason.
Here's the code I'm using right now-
HTML-
<input type="button" id="submitButton" onclick="generateLink()" value="Go" />
CSS-
#submitButton {
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
cursor: pointer;
}
#submitButton:hover {
background-color: #6b5ebd;
}
#submitButton:active {
background-color: #554a97;
}
Whenever I look this up on the live server on my Windows PC (on both Firefox and Chrome), it looks the way I want it to. But when I deploy the test site on Firebase and check it out on my mobile phone (iPhone with Safari Browser), The text "Go" is gone and all I can see is a flat, text-less button.
I have also tried changing the <input> tag to a <button> tag, adding a display: block; and a bunch of other stuff but it doesnt seem to work.
Any idea why this could be happening?
Please and thanks.
Have you tried using anchor element ?
Go
a{
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
text-decoration:none;
}
a:hover {
background-color: #6b5ebd;
cursor:pointer;
}
a:active {
background-color: #554a97;
}
I could nee some help. I'm trying to get my page display the same in Firefox as in Chrome. The page using a imported font from Google and I'm not able to force it to look like the same.
Left is Google Chrome and right (how it is supposed to be) Firefox
And I have no idea now to fix it.
The affected CSS:
#big_header{
display: inline-block;
text-align: center;
margin-top: 40px;
margin-bottom:30px ;
background-color: #858585;
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
font-family: exocet;
font-size: 8em;
line-height: 100%;
text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF;
color: white;
white-space: nowrap;
}
#big_header::first-line{
font-size: 180%;
}
And here the used Google Font:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
I hope that some of you could help me :)
I need to center vertically the text inside a div but I am having a problem. This is the situation:
There is an hover attribute that I added in the CSS and in fact, when the mouse goes on the div, it changes the background and the text goes at the center of the div.
I would like the text to be centered also in the first case shown in the picture (when the mouse in not over the div). You can find the fiddle with the code here: Fiddle
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
This is the code that I have used for the div. And when the mouse goes over:
.tab:hover {
cursor: pointer;
box-shadow: inset 0 0 10px #999;
-moz-box-shadow: inset 0 0 10px #999;
-webkit-box-shadow: inset 0 0 10px #999;
background-color: #555;
line-height: 50px;
}
I have used the line-height in both cases but it works only in .tab:hover. Any idea?
That happens because you are setting after a declaration for the font:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
This CSS is after and then the specificity goes with the declaration here. If you just change the order it will work, since the last has more precedence:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
UpdatedFiddle
You need to set the line-height: 50px; for .font_header as well.
Example fiddle: http://jsfiddle.net/6tzwc17c/2/
At least in Chrome it works if you just split the font declaration, like:
font-family: Century Gothic, sans-serif;
font-size: 19px;
Instead of:
font: 19px Century Gothic, sans-serif;
I am working on a sheet music catalog. Available sheets are listed on an ordered list and when hovering on "view", a pop-up preview image shows. I noticed that as you scroll down previewing each sheet, certain elements from the < li > items below the current one can be seen through the image. I am sure this has to do with the stacking context/order or even with a missing 'position' somewhere, but I can't figure it out.
I have the scenario here: http://jsfiddle.net/4BwBX/
HTML:
<div id="SheetMusicStore">
<ol class="enlarge">
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="http://www.antonioromo.com/newsite/images/01gnw-tn.png" alt="Just Another Dusk" /><br />Just Another Dusk (Good Night Wishes)</span>
<span class="name">Just Another Dusk (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="http://www.antonioromo.com/newsite/images/02gnw-tn.png" alt="My Nightlight" /><br />My Nightlight (Good Night Wishes)</span>
<span class="name">My Nightlight (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
<li>
<span class="view">[ view ]</span>
<span class="preview"><img src="http://www.antonioromo.com/newsite/images/03gnw-tn.png" alt="Whisper of Love" /><br />Whisper of Love (Good Night Wishes)</span>
<span class="name">Whisper of Love (Good Night Wishes)</span>
<span class="price">$3.99 BUY</span>
</li>
</ol>
</div>
CSS:
/** Sheet Music Store **/
#SheetMusicStore {
width: 500px;
margin: 40px auto;
}
ol.enlarge{
margin-left:0;
font-family: 'Trebuchet MS', Helvetica, Tahoma, Arial, Sans-serif;
font-size: 1em;
color: #999;
padding: 10px 20px;
box-shadow: inset 0 2px 2px #582E58;
border-radius: 6px;
background: url(http://www.antonioromo.com/newsite/images/sheet-bg.png) repeat 0 0 scroll;
color: #AAA;
}
ol.enlarge li{
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
background: transparent url(http://www.antonioromo.com/newsite/images/sheet-item-bg.png) repeat-x bottom left scroll;
padding: 5px 0 7px 0;
list-style-position: inside;
font-size: 12px;
}
ol.enlarge img{
background-color: #eae9d4;
padding: 6px;
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
border-radius: 4px;
}
ol.enlarge span.preview{
position: absolute;
left: -9999px;
background-color: #eae9d4;
padding: 10px;
font-family: 'Trebuchet MS', Helvetica, 'Droid Sans', sans-serif;
font-size: .9em;
text-align: center;
color: #495a62;
box-shadow: 0 0 20px rgba(0,0,0, .75);
border-radius: 8px;
}
ol.enlarge li:hover{
color: #EEE;
}
ol.enlarge li:hover .view{
color:#FFFFCC !important;
}
ol.enlarge .view:hover{
cursor: pointer;
}
ol.enlarge span.preview img{
padding: 2px;
background: #ccc;
}
span.view:hover ~ span.preview{
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 300px; /*distance from the left of the thumbnail to the left of the popup image*/
z-index: 50;
}
ol.enlarge .price {
width: 62px;
height: 16px;
position: absolute;
top: 7px;
right: 0;
border-radius: 8px;
background: transparent url(http://www.antonioromo.com/newsite/images/buy-bg.png) repeat 0 0 scroll;
margin: 0 0 0 10px;
font-size: 10px;
text-align: center;
line-height: 16px;
text-shadow: none;
color: #BBB;
text-decoration: none;
}
ol.enlarge .price:hover {
color: #EEE;
cursor: pointer;
}
I need the preview image to be on top of anything else. Thank you in advance for your help!
I fixed this by removing the z-index:0; declaration from ol.enlarge li:
ol.enlarge li{
position: relative;
/*z-index: 0; */ /*resets the stack order of the list items - later we'll increase this*/
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
background: transparent url(http://www.antonioromo.com/newsite/images/sheet-item-bg.png) repeat-x bottom left scroll;
padding: 5px 0 7px 0;
list-style-position: inside;
font-size: 12px;
}
JSfiddle
Z-index is still a bit of a dark art to me, but I believe that by declaring z-index: 0 you were taking the li out of the natural stacking order (which is actually what you wanted in this case, since they merely serve as an "anchor" for your .preview images). This was causing each li to "stack" on top of each other – albeit in a different order than the normal top down flow – and that was why you the content of the li above the hovered li was visible.
The site i'm working on is http://cargocollective.com/amytdatta
I am trying to position the Running on Cargo link at the right side of the top nav bar.
In the theme i'm using there used to be a search box positioned exactly there, so I hid the search and tried copying the search CSS to the Cargo link CSS. Here it is:
.cargo_link {
float: right;
margin: 0 0 0 20px;
color: #cccccc;
padding: 0 0 0 25px;
width: 160px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 50px;
text-align: right;
border-left: 1px solid #cccccc;
}
Some fiddling with z-index values has made the Cargo link visible again.
I'm still unable to place it where I want, though. Here is the CSS for the Search Box (which i've made visible for now):
#search_form {
display: inline-block;
float: right;
margin: 0 0 0 20px;
padding: 0;
}
#search_form #search_term {
background: #f5f5f5;
border-left: 1px solid #cccccc;
border-top: 0;
border-bottom: 0;
border-right: 0;
color: #999999;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 50px;
line-height: 12px;
padding: 0 0 0 25px;
width: 160px;
}
I basically wish the Cargo Link to precisely replace the Search box.
Any advice would be greatly appreciated!
Cheers.
Your #nav_wrapper element has a background: whiteSmoke; property which hides whatever's under it.
You either put the cargo link in the wrong element (i.e. not inside #nav_wrapper but under it). or you should not have a background on #nav_wrapper
Edit:
I'm guessing you should move your <div class="cargo_link"> to right after <div class="page_nav">'s closing tag
You have <div id="nav_wrapper"> with position:fixed and z-index:999, that's making the cargo_link appear behind the nav_wrapper...