I used a css file for print, everything is good in IE and Chrome but in FireFox font's are much bigger!!!! i don't know what's wrong with firefox.
Can anybody tell me what's wrong?
here is my css file
*,:before,:after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html,
body
{
width: auto;
height: auto;
float: none !important;
margin:10px 20px;
padding:0;
background-color: #fff;
font-family: "B Yagut", "B Titr";
line-height: 220%;
font-size:18pt;
font-weight:bold;
direction:rtl;
}
#header,
#footer,
#nav,
#section,
legend,
#bottom-controls,
#bottom-details,
#tabs-2,
#tabs-3 {
display: none;
}
#main {
width: auto;
float: none !important;
padding: 0;
height:auto;
}
p { line-height:220%; font-size:18pt; font-weight:bold;}
strong { line-height:220%;}
#tabs, fieldset, #tabs-1 { width: auto; border-style:none; margin:0; padding:0; line-height:200%; font-size:18pt;
font-weight:bold;}
#tabs ul, #cssmenu{
display: none;
}
thanks everybody.
Related
I am using #media all and (max-width: 600px) {} in my css for responsive menu, the thing is that it does not show correctly.
I want the orange fill the green space.. and turn the green space to transparant of course. Basically it's just a size/position problem.
CSS:
#media all and (max-width: 600px) {
.example-header .container {
width: auto;
height:auto;
margin:0 auto;
padding:auto;
}
/*Zwarte MENU balk */
a.menu-link {
display: block;
color: #fff;
background-color: #333;
text-decoration: none;
padding: 19px 10px;
width:auto;
height:auto;
margin:0 auto;
padding:auto;
margin-bottom:2em;
}
.menu {
border-top: 10px solid #333;
border-bottom:10px solid #333;
height:13.2em;
margin:0 auto;
padding:auto;
width:100%;
background-color:blue;
}
.menu ul {
width:auto;
height:auto;
margin:0 auto;
padding:auto;
}
.menu > ul {
height:auto;
margin-top:;
background-color:TRANSPARANT;
}
.menu li, .menu > ul > li {
width:100%;
height:auto;
margin:0 auto;
padding:0px;
background-color:green;
}
.menu li a {
color: #000;
display: inline;
border-bottom: 1px solid #333;
position: relative;
height:auto;
margin:0 auto;
padding:auto;
background-color:orange;
}
}
It looks like a padding-related issue, try setting it to 0 instead of auto for .menu ul. HTML would be helpful though.
My guess is that the anchor elements' should be display: block; instead of display: inline;. And possibly their margin should also be just 0 instead of 0 auto
Can't say much without the HTML.
the tablet/phone media query styles that I have set on my site seem to be ignored, even though I have a viewport declaration in the <head> and the #media styles are at the bottom of the stylesheet—so they can't be over-ridden by desktop styles. I'm sure it's something very simple, but I've tried everything that I can think of. The styles are ignored both on mobile and on desktop when the browser window is resized. Oddly enough, the responsive menu works fine...but the rest of the site is riddled with uncomfortable padding, floats, and margins without the mobile styles. Any help is appreciated!
#media screen and (max-width: 768 px){
body { }
#container {padding: 0;}
#content, #content-archive, #content-full, #content-blog, #content-images, #content-sitemap {padding: 0px;} #content h2, #content-full h2, #content-blog h2 {margin-left: 0px;}
#header { padding: 0.5em; overflow:auto; }
#header #logo img {max-width: 100%;}
.archive #widgets, .page #widgets {width:100%;padding 20px;}
.grid, .grid-right {float:none;}
#scaleContainer {display: none;}
#mobilefeatured {display:block; width: 100%; margin-top:17.5%; zoom:58%;}
#mobilecarousel-hype-container { max-width: 100%; }
.page .featuredimg {display:block; }
.archive .featuredimg, .single .featuredimg, .search .featuredimg {display:block; }
.top-menu {display:none;}
.top-menu li a, .top-menu li:first-child a { }
.menu li, .footer-menu li, .sub-header-menu li {float:none;text-align:left; }
.page .menu-item-6820, .single .menu-item-6820 { display:none; }
#mobile-nav-instruct {display: none;} #search {float:none; text-align: left; margin:auto;}
#search input[type="text"] {text-align: left;}
#wrapper {clear:none; position:relative;}
.post-entry {padding: 20px; }
.post-entry h1, .post-entry h2, .post-entry h3, .post-entry h6, .post-entry div h1, .post-entry div h2, .post-entry div h3, .post-entry div h6, .entry h2 { padding-left: 0; }
.post-entry h6, .post-entry div h6 {margin-bottom: 10px; }
.summary {width:100%; margin:0; }
.thumbnail-wrapper {width: 100%; height:auto;}
.summary img {max-width:100%; height:auto; }
.summary h2 {width:100%; margin: 10px auto;}
.dates-artists {width:100%; margin:0;}
.rep {width:100%; margin:0; } #photo-rep {float:none; width: 100%;}
#vitals {float:left; clear: both; width: 100%; margin-left: 0px; margin-top:20px; -webkit-border-radius:0px; -moz-border-radius:0px; background-color:#fff; border: none; border-radius:0px; font-size: 100%; padding: 5px 0px !important; }
.info-buy { }
.programPricing { clear:both; padding-left:0px; margin-top:-20px; margin-left:0; }
#share .dates, .buy-dates-wrapper .dates { padding-left: 2em; width:75%; line-height: 1.5em;}
.home .widget-wrapper { height: auto; padding: 1em; border:none; background-color: #fff; font-size: 14px; }
.desc {float:right; clear:none;}
.home .newsblog {height: auto; padding: 1em; border:none; background-color: #fff; font-size: 14px; }
.widget-wrapper { background-color:#fff; border:none; font-size:14px; height: auto; padding: 1em;}
.bio { width:100%; }
.roster { width:100%; } #googleCalEmbed { display: none; } #googleEmbedLink {display:block;} #seating table { border: none; width:100%; margin:0%;}
#seating td {border: none;}
#seatingMobileHint {display:block;}
.sponsors { clear:both; padding: 0px; text-align:center; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; border-top: 1px solid #d6d6d6;}
.sponsors h6 { margin-top: 1.6em; }
.sponsors hr {background:#eee; border:none; clear:both; color:#f9f9f9; float:none; height:1px; margin:5px 0px; width:100%; }
.sponsors a img.alignnone { margin:5px 0px; padding:0;float: none; }
#footer .footernav {display:none; }
#footer { text-align:left; } #footer .widget-wrapper { padding:0; }
#footer h6, h6.title-concertdate { color:#fff; padding: 0 8%; margin-bottom:1em; text-shadow: none;}
#mobilecal { display:block; } #mobilecal span.calnk { opacity: 0; }
.home #widgets #cal, .page #widgets, .archive #widgets { display:block; }
.mobilecontact {display:block;} #footer .social-icons { text-align:left; }
.copyright { text-align: center; } /* The homepage featured events slider for retina displays */
#mobilefeatured { display:block; zoom:50%; }
}
Your media query is malformed:
#media screen and (max-width: 768 px)
There must not be a space between the number and the unit:
#media screen and (max-width: 768px)
The trouble with my site is that I want the nav and header to continue the entire way from one side of the screen to the other. The navigation goes from the far left of my page to the far right of the screen but doesn't go to the left of the screen and the header merely overlaps from the page a small amount to the right.
I'd love it if someone could tell me how to solve these problems. Here's my site's CSS:
/* BACKGROUND */
body {
background-color:#339999;
background-attachment: fixed;
}
*{
margin:0;
padding:0;
}
img {
border:0;
}
/* AREA */
#wrapper {
margin:0 auto;
width:950px;
background:#ffffff;
font-size:1.20em;
}
/* HEADER */
#header {
margin-top: 40px;
height: 150px;
padding: 20px 30px;
width: 100%;
}
/* PAGE */
#content {
min-height:400px;
padding:23px;
text-align:justify;
line-height:1.5;
}
/* FOOTER */
#flexifooter{
width: 950px;
background: #339999;
padding: 10px 0px 0px 0px;
}
/* MENU */
#menu {
position: fixed;
clear: both;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
padding-top: 1px;
float: left;
display: inline;
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#menu {
height:35px;
line-height:34px;
padding:0 10px;
}
/* MENU TEXT */
#menu ul {
list-style-type:none;
}
#menu li {
float:left;
}
#menu li a {
padding:0 15px;
display:block;
color:#ffffff;
font-size: 13px;
margin-right:0px;
}
#menu a {
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
list-style: none;
display: inline;
}
#menu a:hover {
color: #339999;
}
#navigation a:hover, a:visited {
color: #339999;
}
/* HEADINGS & HEADER */
h2 {
font-size:1.75em;
font-weight:normal;
color: #6CC7DC;
margin: 10px 0;
line-height:1.5;
}
#header {
font-size:2.5em;
letter-spacing:1px;
}
#header, #header a {
color:#6F6F6F;
font-style:italic;
font-weight:normal;
}
/* SCROLLBAR */
body {
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 3px;
height: 10px;
}
::-webkit-scrollbar-track-piece {
background-color: #339999;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #FFFFFF;
}
/* PREVENTING UNDERLINED LINKING */
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
A few things, if you use html5 you can use the header element and set its css to 100% width and height to whatever height you want to use. See my example below. Having the HTML will ultimately assist in helping you.
HTML
<header>
<nav>
</nav>
</header>
CSS
header {
width: 100%;
height: 5em;
}
http://jsfiddle.net/cornelas/8RXD2/
I have a question from my last post.
How to center the floating element?
and I found out my problem is from the <header> tag before my #menu tag.
If I remove everything in the header tag, it seems I can center my item1 to item3 links.
However, if I add them back, my items menu will be a bit left instead of the center.
Here is my jsfiddle.
//I want to center item 1 to item 3 links in my page...
http://jsfiddle.net/yZ4va/14/
Thanks for the help!
Like this
DEMO
CSS
body{
background-color: green;
width: 500px;
margin: 0 auto;
color: #000305;
}
a{
text-decoration: none;
color:white;
}
/* Headings */
h2 {font-size: 1.8em} /* 22px */
h2 {font-size: 1.5em} /* 22px */
h3 {font-size: 1.5em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
header#link{
text-align:center;
margin:0 auto;
}
header {
margin:.8em;
height:50px;
}
header ul{
margin:0;
padding:0;
text-align:center;
}
header li{
list-style: none;
font:bold .6em arial;
display:inline;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
section#menu{
text-align:center;
margin:0 auto;
}
nav ul{
display: inline-block;
background-color: red;
margin:0;
padding:0;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
Below is the codes to the menu bar.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center">Products</div>
</li>
<li>
FAQ</li>
</ul>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
EDIT: Its like having some space after each button but instead theres a horizontal line
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
I added below lines in your css code. I hope this is what you want.
ul{
display:inline-block;
overflow:hidden;
}
div{
text-align:center;
}
li:after{
border-right:50px solid black;
content:"";
position:relative;
left:10px;
top:-27px;
z-index:-1;
display:block;
height:1px;
}
li:last-child{
margin-right:-14px
}
Working Fiddle
Now just remove float:left in your li and add display:inline-block; and add text-align center in your ul tag
as like this
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
Demo
from your current css remove float:left; on li's and add text-align:center; and it should work:
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
Update
In that case you can change the CSS to.
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle