my CSS properties won't render. Fonts, widths etc. do nothing and I have no idea why. I've tried multiple things.
I'd like to have a percentage width for the nav and the logo but all render 100% width. It seems like I have a huge misunderstanding on how CSS works but after I read, I still don't get it. I have normalize.css added in Wordpress too.
If I add and span class around the text, it will change the text but it doesn't help with the issue of element size.
My Code:
*,
*:after,
*:before {
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a {
text-decoration:none;
}
body {
font-family: 'Roboto', sans-serif;
font-size:100%;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Rhodium Libre', serif;
}
header {
position:fixed;
top:0px;
width:100%;
background-color:#000;
opacity:0.9;
z-index:10000;
}
//desktop
/*logo*/
.logo-holder {
position:relative;
float:left;
display:inline-block;
font-family: 'Rhodium Libre', serif;
font-size:2.4em;
background-color:white;
width:200px;
}
/* nav */
.nav-holder {
position:relative;
float:right;
width:500px;
}
nav {
}
/*nav design*/
nav ul {
display:inline;
}
nav ul li {
position:relative;
display:inline-block;
cursor:pointer;
padding-top:4px;
padding-bottom:4px;
font-family:'Rhodium Libre', serif;
font-size:1.35em;
}
nav ul li:hover, nav ul li:active {
background:transparent;
color:#5F8E14;
}
nav ul li a {
padding-left:0.5em;
color:#FFF;
}
nav ul li a:hover, nav ul li a:active {
color:#5F8E14;
}
//sub menu
nav.sub {
}
nav.sub ul {
display:inline;
}
nav.sub ul li {
position:relative;
display:inline-block;
cursor:pointer;
padding-top:2px;
padding-bottom:2px;
font-family:'Rhodium Libre', serif;
font-size:1.1em;
}
nav.sub ul li:hover, nav.sub ul li:active {
background:transparent;
color:transparent;
}
nav.sub a:hover, nav.sub ul li a:active {
text-decoration: underline;
}
<body>
<!-- header -->
<header>
<div class=logo-holder">
why is nothing changing here?
</div>
<div class="nav-holder">
<nav>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>
<nav class="sub">
<?php wp_nav_menu( array( 'theme_location' => 'sub-menu' ) ); ?>
</nav>
</div> <!--nav holder-->
</header>
<!-- /header -->
</body>
Thanks for any help!
// does not make a valid comment in CSS. /* ... */ does.
Also,
<div class=logo-holder">
is obviously lacking a ".
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my code for navigation:
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>MARKETS/SOLUTIONS</li>
<li>PRODUCTS/SERVICES</li>
<li>BUSINESSES</li>
<li>INVESTORS</li>
</ul>
</nav>
</header>
</div>
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper{
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
}
nav ul li{
display:inline-block;
padding:15px;
}
nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover{
text-decoration: underline;
background-color:none;
}
nav ul li:hover{
background-color:#000;
}
Demo on JSfiddle
If I put width:960px; for the wrapper, it will cut the margin on both sides. I need to avoid using text-align:center; for nav ul because of what happens when the window is resized. When the window is shrunk, lists should be center aligned; in window of normal size, lists should be displayed in the left side of the navigation bar.
JSFiddle - DEMO or SHOW [EDITED]
You could use CSS3 #media queries for small screen sizes.
HTML:
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME
</li>
<li>COMPANY
</li>
<li>MARKETS/SOLUTIONS
</li>
<li>PRODUCTS/SERVICES
</li>
<li>BUSINESSES
</li>
<li>INVESTORS
</li>
</ul>
</nav>
</header>
</div>
CSS:
* {
box-sizing:border-box;
}
body {
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper {
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align: center;
}
nav ul {
background-color: red;
}
nav ul li {
display:inline-block;
padding:15px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover {
text-decoration: underline;
background-color:none;
}
nav ul li:hover {
background-color:#000;
}
#media (max-width: 960px) {
nav {
text-align: left;
}
}
Here is what you looking for http://jsfiddle.net/adarshkr/ubz7Lcft/9/
Style your CSS using media quires
Changes made
.wrapper{
width:100%; /*takes full width*/
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
text-align:left; /* for normal view */
padding-left:0
}
#media(max-width:992px){
nav ul{
text-align:center /* for resize */
}
}
First correct the spelling of wrapper and then set its width to 80%.
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>MARKETS/SOLUTIONS</li>
<li>PRODUCTS/SERVICES</li>
<li>BUSINESSES</li>
<li>INVESTORS</li>
</ul>
</nav>
</header>
</div>
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper{
width:80%;
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
}
nav ul li{
display:inline-block;
padding:15px;
}
nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover{
text-decoration: underline;
background-color:none;
}
nav ul li:hover{
background-color:#000;
}
Demo on JS Fiddle
Changed made in CSS
nav {
background-color: red; /*apply color for nav instead of ul */
}
nav ul{
text-align:left;
padding-left:0
}
#media(max-width:992px){
nav ul{
text-align:center;
width:80%; /*reduce the list width */
margin:0 auto; /* to make it align center */
}
}
I have a website with 3 iframes and none of them works, although the text is longer than the windows: in Firefox the scroll bars appear but don't work; in Chrome the bars don't even appear. They do scroll in IE 6.
So I suspect there is a problem with the CSS. Probably it's something trivial, but I fail to see it.
CSS code:
.header
{
position:fixed;
top:0%;
right:0%;
height:4%;
width:100%;
text-align:center;
background-color:#BF1E4B;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
z-index:+1;
}
.nav,.nav ul
{
list-style:none;
margin:0.5%;
padding:0;
}
.nav
{
top:0%;
left:0%;
position:absolute;
}
.nav ul
{
height:0;
left:0;
position:absolute;
overflow:hidden;
top:100%;
}
.nav li
{
float:left;
position:relative;
}
.nav li a
{
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
background-color:#BF1E4B;
color:#fff;
display:block;
font-size:100%;
line-height:100%;
padding:4px 35px;
text-decoration:none;
transition:0.1s;
}
.nav li:hover > a
{
background:#000;
color:#fff;
}
.nav li:hover ul.subs
{
height:auto;
width:100%;
}
.nav ul li
{
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
opacity:0;
transition:0.1s;
width:100%;
}
.nav li:hover ul li
{
opacity:1;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}
.nav ul li a
{
background:#BF1E4B;
color:#fff;
line-height:0%;
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
transition:0.1s;
}
.nav li:hover ul li a {
line-height:150%;
}
.nav ul li a:hover
{
background:#000;
}
.iframe1
{
position:fixed;
bottom:48%;
right:0%;
height:48%;
width:50%;
}
.iframe2
{
position:fixed;
top:4%;
left:0%;
height:96%;
width:50%;
}
.iframe3
{
position:fixed;
top:52%;
right:0%;
height:48%;
width:50%;
}
Sorry for the amateur look, and thanks in advance :)
HTML code:
<div class="header">
<ul class="nav">
<li>Links
<ul class="subs">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
</li>
</ul>
<div style="clear:both"></div>
</div>
<div class="iframe1">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>
<div class="iframe2"">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>
<div class="iframe3">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>
As Javid said above, overflow:scroll on the iframe elements, though I think using position:fixed might cause problems up on some browsers based on the fact it locks the elements relative to the page scrolling. Consider using position:absolute, though I don't know anything about your situation.
try playing with the z-index value, you might cover it, change it to 1000 in the iframe and see you still cant use it
{
z-index: 1000;
}
What is the best way to center this nav bar?
I know I can center if I add
#nav ul {
margin:0 auto;
width:720px;
}
or if I remove width and add padding to #nav, but none of these seems right because If I ever need to add another item to the nav bar I will need to change the numbers. any ideas?
this is the code I have so far:
#nav {
background:url(../images/nav-background.jpg) repeat-x;
height:50px;
width:960px;
text-transform:uppercase;
position:fixed;
}
#nav ul li {
display: table-cell;
vertical-align:top;
line-height:3.8em;
}
#nav li {
display:inline;
font-family: 'Philosopher', sans-serif;
font-size:0.9em;
letter-spacing:0.1em;
font-weight:700;
}
#nav li a {
color:#848484;
text-decoration:none;
padding:5px 8px;
}
#nav li a:hover {
color:#fff;
background-color:#636566;
}
.nav-separator {
padding:0 2px;
}
#nav .logo a:hover {
background:none;
}
<div id="nav">
<ul>
<li>Lourenço<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Áreas de Atuação</li>
<li class="logo"><img src="images/logo-lourenco-advogados.png" /></li>
<li>Clientes<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Notícias<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Contato</li>
</ul>
</div>
Try:
#nav {
text-align: center;
}
#nav ul li {
display: inline-block;
}
You can use:
min-width: Apx; /* any value */
width: auto;
margin:0 auto;
I'm trying to make a horizontal menu layout in CSS. I was using the guide listed here:
http://www.devinrolsen.com/pure-css-horizontal-menu/
I've got a css file looking like this, called navigation.css:
.navigation{
width:100%;
height:30px;
background-color:lightgray;
}
.navigation ul {
margin:0px;
padding:0px;
}
.navigation ul li {
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
}
.navigation li a {
color:black;
text-decoration:none;
}
.navigation li a:hover {
color:black;
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
display:none;
}
.navigation li:hover ul {
display:block;
width:160px;
}
.navigation li li{
list-style:none;
display:block;
}
and in my actual php page, I have this
<div class="navigation">
<ul>
<li>
something
<ul>
<li>Hello</li>
<li>hello2</li>
</ul>
</li>
<li>
Browse database
<ul>
<li>test</li>
<li>Test2</li>
<li>Search</li>
</ul>
</li>
</ul>
</div>
For reasons I cannot determine, their is no drop-down menu effect. Consequently, if I change navigation to an id instead of a class by replacing .navigation with #navigation, then none of the layout affects the HTML.
In case you're still having the problem, have you tried changing:
.navigation li li{
list-style:none;
display:block;
}
To:
.navigation li li{
list-style:none;
display:none;
}
.navigation li:hover li{
display:block;
}
Stumped...my menu shows up about 25% of the time in IE7. It appears to be a stacking issue: I can see the menu at first but once the header image and the rest of the page loads, it disappears. I've tried setting the z-index in both the menu and its parent elements, but nothing's working...
Here's the site: http://www.hospiceofmissoula.com
html {
height:100%;
}
body, p, a, ul, li, ol, h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
}
body {
behavior:url("csshover3.htc");
font-size:14px;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#bacddb;
height:100%;
}
h1 {
font-size:18px;
color:#752eca;
text-decoration:none;
}
h2 {
font-size:14px;
color:#909090;
text-decoration:none!important;
}
h3 {
color:#4d2288;
font-size:18px;
}
p {
text-indent:20px;
color:#000;
}
p a {
color:#000;
text-decoration:underline;
}
p.foot {
text-indent:0px;
}
p.link {
font-size:18px;
color:#30F;
text-decoration:underline!important;
}
a {
color:#4d2288;
text-decoration:none;
outline:none;
}
a:visited {
color:#4d2288;
}
p a:hover {
text-decoration:underline!important;
}
label {
text-align:left;
}
ul#nav {
padding:5px;
margin:0px auto;
width:100%;
z-index:999;
}
ul#nav li a {
display:block;
font-weight:bold;
padding:2px 10px;
background:#bacddb;
}
ul#nav li a:hover {
background:#d9c3f2;
color:#4d2288;
}
li {
list-style:none;
float:left;
position:relative;
width:225px;
text-align:center;
margin:0px auto;
margin-right:4px;
border:1px solid #4d2288;
}
li ul {
display:none;
position:relative;
width:auto;
top:0;
left:0;
margin-left:-1px;
}
li>ul {
top:auto;
left:auto;
border:none;
}
li:hover ul {
display:block;
}
ul#nav li.current a {
background:#bb96e4;
}
ul#nav li.current a:hover {
background:#d9c3f2;
}
<div id="maincontent">
<div id="header">
<div id="lyr_ddmenu">
<ul id="nav">
<li class="current">Hospice of Missoula
<ul class="sub">
<li>Charity Care</li>
<li>History</li>
<li>Mission Statement</li>
<li>Services</li>
<li>Staff</li>
</ul></li>
<li>What is Hospice?
<ul class="sub">
<li>Frequently Asked Questions</li>
<li>End-of-Life Information</li>
<li>Advanced Directives</li>
<li>Helpful Links</li>
</ul></li>
<li>Volunteering</li>
<li>Contact Us
<ul class="sub">
<li>Upcoming Events</li>
<li>Employment</li>
</ul></li>
</ul>
</div>
#header {
padding-top: 160px !important;
}
#lyr_ddmenu {
margin: 0 auto !important;
position: relative !important;
left: auto !important;
top: auto !important;
}
.colmask {
margin-top: 20px !important;
}
A lot of problems in your code... a lot, the more important ones being: don't abuse XHTML, don't use so much JS (particularly for simple things like rounded corners), and — the most immediately relevant to your problem — be careful using position: absolute;.