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...
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 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
}
Hi I'm doing a really simple navigator but I just came up into a strange problem I can't figure out where this is coming from.
My separations are not exactly till, they are created the same way..
Some are tougher than other and I don't get why.
Could it be due to the font ? I tried it with different browser and the problem is persistent...
JsFiddle There
The code is really simple :
HTML
<nav id="main-menu2">
<span class="fa fa-home"></span>
DERNIÈRES MINUTES
SÉJOURS
CROISIÈRES
CIRCUITS
FRANCE
WEEK-ENDS
VOYAGE À LA CARTE
PROMOS
</nav>
SCSS
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0.7em;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -2px;
margin-right: -2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.3em;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
I can't reproduce the bug, but I may have a solution : you're currently using borders that you don't need. Let me explain : there is a border right on Séjours and a border left on Croisières. So 2 borders, and you're currently hiding one of them.
Using font-size in em, makes your trick (margin-left / margin-right : -2px) unconsistent, because em can't really be converted into px (well it can, but it will depends on the browser calculation so you may need more than 2px to make a border go over another, maybe 1px maybe 1.5487px).
So, my solution : removes all the unecessary borders :
a {
border-left: 1px solid #fff;
}
a:last-child {
border-right: 1px solid #fff;
}
No more borders overlapping, more reliable solution.
Manage it with the font-size:
#main-menu2 {
font-size: 0;
}
#main-menu2 a {
font-size: 14.5px;
margin-left: -1px;
margin-right: 0;
}
The whole code:
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -1px;
padding-left: 10px;
padding-right: 10px;
font-size: 14.5px;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
Demo: JSFiddle
It is because in your code you have some space by indent the text. Unfortunately all browsers interprete these content as white spaces and thus you have some gap between the elements.
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 made a CSS menu but the individual tabs, or rather a row of tabs, seems to be overlapping each other. I used white-space: pre-wrap with a width on the tab menu itself:
html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 620px !important;
}
#header #header-bottom-left .tabmenu li {
font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
padding: 5px;
margin-right: 16px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
white-space: pre-wrap;
margin-bottom: 20px;
}
In general, don't style the LI for menus, style the A tag and use display:block or inline-block
not sure if this is what you want but I think you may be missing a float: left in your li
code: http://jsfiddle.net/vT5vd/
BTW lists are fantastic for menus and are used so almost exclusively!
The tabs are treated just like a line of text. The line spacing is set to the height of the text, causing the larger tabs to overlap. To correct this just add a
line-height: 1.8;
line to the css file in the tabs list item section. Also. you can put a break or paragraph tag in the list of tabs to control where they wrap to the next line and avoid splitting a tab.
ul.tabs li a
{
font: normal 18px Verdana;
line-height: 1.8;
text-decoration: none;
position: relative;
padding: 0px 8px;
border: 1px solid #CCC;
border-bottom-color:#AAA;
color: #000;
background: #F0F0F0 url(tabbg.gif) repeat-x 0 0;
border-radius: 2px 2px 0 0;
outline:none;
}