For some reason my google web font in the navigation menu keeps on changing its weight from page to page although I have set it to 700. The CSS for the menu is identical on each page. Could somebody please tell me whats going on as I have never found this before.
For future posterity reasons I shall delete the live link as soon as somebody answers. Thanks!
My CSS is
* {
font-family: 'Lato', sans-serif;
}
#menu {
font-weight:700;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: -101;
}
Firstly, you need to fix this:
body {
background-color: #FFF;
background-image: url(bg.png);
color: #D6D6D6;
font-family: font-family: 'Lato', sans-serif;
}
Your font-family declaration is duplicated.
Secondly, your 700 is being overridden by the #menu li a class here:
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: lighter; /*should be changed to 700*/
white-space: nowrap;
color: #333;
}
Related
When I try to create a h1 element with padding and set it as an inline then follow up with a screen wide line using h1:after it ends up with the padding of the h1 element on a new line, how can I get the paddin of the h1 element to be before the horizontal line?
The css code is as follows.
h1 {
font-size: 15px;
background: #ccc;
display: inline;
padding: 8px 0px 5px 10px;
}
.headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
h1:after {
content:' ';
display:block;
border:4px solid #ccc;
border-radius:1px;
-webkit-border-radius:1px;
-moz-border-radius:1px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
And the html code is simply a span with class headline inside a h1 element.
It currently looks like this:
And I want it to look pretty much the same except that the padding that gets put below the line at the end of the text.
You're overthinking the issue.
Leave the h1 as a block level item and move the styles around to the span.
h1 {
font-size: 15px;
}
.headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
background: #ccc;
padding: 8px 10px 3px 10px;
}
h1 {
border-bottom: 4px solid #ccc;
}
<h1><span class="headline">Headline</span></h1>
Try
h1 display:-webkit-inline-box; or inline-flex;
I have 2 elements sharing the same class .cta. The CTA inside of .casino-box looks great, however the one inside of .header-box is accounting for the 165px of space taken up by .top-nav-bar and .nav-bar.
How can I get the top CTA to ignore the added spacing of those two nav bars, without having to split the css code for the CTAs?
Link to CodePen
.cta {
max-width: 600px;
margin: 0 auto;
text-align: center;
position: relative;
top: 50%;
margin-top: -80px;
}
.cta h1 {
color: #fff;
weight: 500;
text-shadow: 0px 0px 4px black;
}
.cta .button {
color: #fff;
border-color: #fff;
font-weight: bold;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
text-shadow: 0px 0px 4px black;
}
.cta .button:hover {
color: #90281F;
background: #fff;
text-shadow: none;
}
.cta hr {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
}
You have to set negative margin-top with the height of .top-nav-bar and .nav-bar plus your normal margin so the two div could be aligned in center. In this case it would probably be as following:
.header-box .cta {
margin-top: -205px;
}
I want to create a set of 3 circle buttons vertically aligned (see reference: http://i.imgbox.com/hAjYNmIq.jpg) but I can't get it done for some reason, the first button seems to cover the rest. I know this is a basic code thing but I'm stuck and I need to get this solved asap.
Here's a basic code for what I've got so far:
#pagination a {
color: {color:Link Shadow};
font: 700 1.000em 'Helvetica', Calibri, Helvetica, Arial!important;
position: fixed;
float:left;
z-index: 999!important;
bottom: 28px;
display: none;
background-color: #fff;
border:3px solid {color:Link Shadow};
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
width: 26px;
padding: 13px;
height: 26px;
border-radius:100%;
margin-left: -245px; }
<div id="pagination"> Back To Top<br> Prev Page<br> Next Page </div>
After updating your HTML (incorrect href's), here's what I've come up with. Your text will be overflowing because of your size constraints, though.
And here's a Fiddle of it
<div id="pagination">
Back To Top
Prev Page
Next Page
</div>
#pagination a {
color: #000;
font: 700 1.000em 'Helvetica', Calibri, Helvetica, Arial!important;
z-index: 999!important;
background-color: #fff;
border:3px solid #00a;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
width: 26px;
padding: 13px;
height: 26px;
border-radius:100%;
display:block;
margin-bottom:20px;
}
#pagination {
position:fixed;
}
I am having trouble with this, I have looked through other peoples questions and answers I have found some helpful info however I am struggling to apply it to my menu. I am looking for my current menu which is pure CSS and HTML no other scripts or code to become fully responsive and mobile friendly. i.e. I want to make sure when the browser window size is reduced that the menu also gets smaller then to the point where it turns into the mobile button that you tap to expand.
I am hoping someone can show me the exact code I need to add to it with the correct class names etc. I have already tried and failed at this by trying to adapt other peoples answers. I am aware there are various places that will "build" one for free and give me the code however I want the desktop version of my menu to be 100% the same I just need it to scale properly to smaller screens.
I also do not want to use jquery javascript or anything else that is not HTML5 or CSS3, the code is inserted into my index.php and css into my external css file,
From my index page:
<!-- NAV-BAR-START -->
<div id="navbar"><div id='cssmenu'>
<ul>
<li><a href='/?p=home'><span>Home</span></a></li>
<li class='has-sub'><a href='/?p=gallery'><span>Gallery</span></a>
<ul>
<li><a href='/?p=photos'><span>Photos</span></a></li>
<li><a href='/?p=videos'><span>Videos</span></a></li>
<li><a href='/?p=audio'><span>Audio</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='/?p=ian-milne'><span>Ian Milne</span></a>
<ul>
<li><a href='/?p=about'><span>About Ian</span></a></li>
<li><a href='/?p=testimonials'><span>Testimonials</span></a></li>
<li class='last'><a href='/?p=location'><span>Location</span></a></li>
</ul>
</li>
<li><a href='/?p=events'><span>Events</span></a></li>
<li><a href='/?p=bookings'><span>Bookings</span></a></li>
<li class='last'><a href='/?p=contact'><span>Contact</span></a></li>
< /ul>
</div></div>
<!-- NAV-BAR-END -->
And the associated CSS:
/* CSS DROPDOWN MENU */
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: auto;
text-align:center;
}
#cssmenu ul {
background: #000dfa;
height: 50px;
list-style: none;
margin: 0;
padding: 0;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
-webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
}
#cssmenu li {
float: none;
padding: 0px 0px 0px 15px;
display: inline-block;
}
#cssmenu li a {
color: #ffffff;
display: block;
font-weight: normal;
line-height: 50px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu li a:hover {
background: #000894;
color: #ff8400;
text-decoration: none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
#cssmenu ul li:hover a {
background: #000894;
color: #ff8400;
text-decoration: none;
}
#cssmenu li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px;
z-index: 200;
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px;
background: #000dfa;
/*this is where the rounded corners for the dropdown disappears*/
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 50px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover a {
border: 0px;
color: #ff8400;
text-decoration: none;
background: #000894;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
I have now put this into jsfiddle aswell for those who were asking
http://jsfiddle.net/GregTimeassistant/WLP8h/
You can style for each media query. Just copy/paste all your styles for each case.
You can resize your browser window so you can see the result for each media query.
Just experiment a lot, you will see that it is easy to customize your design for each aspect ratio.
#media (max-width: 600px) {
#cssmenu {
/*
copy styles here
*/
}
}
Check this example that covers a lot of devices (but needs some updating for new HD smartphones and tablets).
https://gist.github.com/marcobarbosa/798569
I'm not good in css, so please try to help me
I have this css code
#mo-stats-w1 {
background: url("http://i48.tinypic.com/108dbix.png") 0px 0px repeat-x;
/*height: 143px;*/
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 10px 0px 0px 0px;
padding-bottom: 10px;
background-color: #3EC4CD;
}
#mo-stats-w2 {
padding: 12px 0px 0px 15px;
}
#mo-stats-w1 ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 1px 0px;
height: 59px;
}
#mo-stats-w1 ul li {
display: block;
list-style: none;
padding: 1px;/*0px 0px 0px 0px;*/
margin: 0px 1px 0px 0px;
width: 174px;
height: 59px;
float: left;
}
ul#mo-stats-r1 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px 0px no-repeat; }
ul#mo-stats-r2 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px -59px no-repeat; }
#mo-stats-w1 ul li strong {
font-size: 24px;
height: 22px;
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-weight: bold;
color: #1774C2;
text-shadow: 1px 1px 1px white;
display: block;
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 11px;
}
#mo-stats-w1 ul li span {
font-size: 13px;
font-weight: bold;
color: #3e3e3e;
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 11px;
}
and this html code
<div id="mo-stats-w1">
<div id="mo-stats-w2">
<ul id="mo-stats-r2">
<li><strong>Status</strong></li>
<li><strong>100</strong> <span>Points</span></li>
<li><strong>30</strong> <span>Pending Points</span></li>
<li><strong>0</strong> <span>Direct Referrals</span></li>
<li><strong>Total</strong></li>
<li><strong>2</strong> <span>Links</span></li>
<li><strong>114</strong> <span>Views</span></li>
<li><strong>7</strong> <span>Unlocked Views</span></li>
</ul>
</div>
</div>
So the layout will be
Change the background for "Status" and "Total" to #4EC772 and background hover #7DD798 and the color for both words to be #FFFFFF
To be something like this
How i can do that please ?
jsfiddle: http://jsfiddle.net/WwY2v/
Thanks
You need to use the nth-child() pseudo class to target those two <li> and do the same for the color: #fff; except specify the <strong> element after ..
Updated fiddle: http://jsfiddle.net/WwY2v/2/
This is what I added:
#mo-stats-r2 li:nth-child(4n + 1):hover {
background: #4EC772;
}
#mo-stats-r2 li:nth-child(4n + 1) strong:hover {
color: white;
}
Simply add a class to the required elements like:
<li class='highlight'><strong>Status</strong></li>
...
...
<li class='highlight'><strong>Total</strong></li>
And use the following css:
.highlight {
color:#FFFFFF; /* normal text color */
background-color:#4EC772; /* normal bg color */
}
.highlight:hover, .highlight:focus {
color:#FFFFFF; /* hover text color */
background-color:#7DD798; /* hover bg color */
}