Okay, I try to change the font-family inside the <nav> tag, and it won't change, I've tried another property of font, like font-weight, font-style, font-size, and It works, but font-family. Why the heck this is happened? I can't figure out.
This is the html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css" media="screen">
<title>One Piece | Petualangan Tiada Akhir</title>
</head>
<body>
<div>
<header>
<hgroup>
<h1>One Piece : Petualangan Tiada Akhir</h1>
<h2>Luffy dan Kawan-Kawan Mugiwara Pirates</h2>
</hgroup>
<nav>
<ul>
<li>beranda</li>
<li>daftar isi</li>
<li>kontak</li>
<li>profil</li>
<li>privacy</li>
<li>disclaimer</li>
</ul>
</nav>
</header>
<section>
<h2>Section</h2>
</section>
<footer>
<small>© Contoh Makalah Mahasiswa Font: Oswald, Source Sans Pro Powered by Blogger Template by :]</small>
</footer>
</div>
</body>
</html>
now the CSS :
*{
font-family:calibri;
margin:0px;
padding:0px;
}
header{
padding:10px;
margin-left:auto;
margin-right:auto;
background-color:#0fcdcf;
}
header h1{
text-transform:uppercase;
font-size:2.5em;
font-family:Imprint MT Shadow;
}
header h2{
font-size:1.5em;
font-family:Giddyup Std;
}
nav{
padding-top:10px;
text-transform:uppercase;
font-size:0.9em;
font-family:times new roman;
font-weight:bold;
font-style:normal;
}
nav li{
list-style-type:none;
margin-right:5px;
display:inline;
}
body{
background-color:#d7d5e0;
}
div{
width:80%;
margin-left:auto;
margin-right:auto;
box-shadow:10px 5px 10px #888888;
}
section{
padding:10px;
margin-left:auto;
margin-right:auto;
background-color:white;
}
footer{
padding:10px;
margin-left:auto;
margin-right:auto;
background-color:white;
}
Thanks in advance.
To make above example work, select a tag and change font-name it works, I guess to apply font family some text should be present in that element
nav li a{
font-family:arial;
}
You should show your code.
Anyways, this should work:
<nav style="font-family: xxx;">
Related
In my header, I added a zone where it shows a text. The problem is that the text doesn't get smaller on smaller devices so not all the text appears in its box. I would like to make the text fit in the box (get smaller so everything enter the box)
body{
margin:0;
padding:0;
font: 15px/1.5 Montserrat,sans-serif;
color:white;
background-color:#212121;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
header #top-info{
background-color:#263238;
min-height:50px;
border-bottom:1px solid #546E7A;
}
header #top-info #online{
background-color:#558B2F;
float:left;
min-height:50px;
min-width:330px;
}
header #top-info #online p{
margin:0;
padding:0;
padding-top:12px;
padding-right:10px;
font-size:18px;
font-weight:bold;
text-shadow:1px 1px 1px #212121;
text-transform: uppercase;
}
header #top-info #online img{
padding-left:10px;
padding-right:10px;
padding-top:8px;
float:left;
width:10%;
}
header #top-info #online span{
color:#7CB342;
}
header #top-info #btn{
float:right;
margin-top:12px;
}
header #top-info #btn a{
text-decoration: none;
color:white;
text-shadow:1px 1px 1px #212121;
text-transform: uppercase;
}
header #top-info #btn img{
width:15%;
vertical-align: middle;
}
header #top-info #btn ul{
margin:0;
padding:0;
}
header #top-info #btn li{
float:left;
list-style-type:none;
}
header #navigation{
background-image:url('../img/background.png');
background-repeat: no-repeat;
}
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px){
header #online{
float:none;
text-align:center;
width:100%;
}
header #top-info #online img{
display:none;
}
header #top-info #online p{
margin:0;
padding:0;
text-align:center;
margin-right:26px;
margin-top:10px;
}
header #top-info #btn{
margin:auto;
text-align:center;
margin-bottom:10px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<meta name="description" content="Menoria siteweb officiel">
<meta name="keywords" content="menoria, pvpfaction, minecraft, 1.7.10, launcher">
<meta name="author" content="Simon Bolduc">
<title>Ménoria | Serveur 1.7.10</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7cOpen+Sans:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<section id="top-info">
<div class="container">
<div id="online">
<img src="https://dev.menoria.com/img/online.png"/>
<p>Il y a <span>416</span> joueurs en ligne</p>
</div>
<div id="btn">
<ul>
<li>
<a href="#">
<img src="https://dev.menoria.com/img/login.png"/>
Se connecter
</a>
</li>
<li>
<a href="#">
<img src="https://dev.menoria.com/img/register.png"/>
S'inscrire
</a>
</li>
</ul>
</div>
</div>
</section>
<section id="navigation">
<div class="container">
<div id="logo">
<h1><span>M</span>enoria</h1>
<p><span>Ménoria</span> | Serveur Minecraft <span>1.7.10</span> sous launcher</p>
</div>
<nav>
<ul>
<li>
Accueil
<p>Page d'accueil</p>
</li>
<li>
Forum
<p>Communautaire</p>
</li>
<li>
Jouer
<p>Nous Rejoindre</p>
</li>
</ul>
</nav>
</div>
</section>
<section id="bottom-info">
Vous avez un problèmes? Contactez-nous sur le Teamspeak. <span>ts.menoria.com</span>
</section>
</header>
</body>
</html>
The problem appears there: Problem
I've tried to modify this with a media with custom width but I can't find how to correct this...
Well, my first idea is not about adjusting font size, I would handle this flaw from a different angle: remove min-width: 330px; on header #top-info #online and the text will naturally flow to the second line. You could align it as you wish.
Alternatively, add something like
#media only screen and (max-width: 374px) {
header #top-info #online p {
font-size: 14px;
}
}
to the end of your styles.
use font size 100% on all your text, it will respond according to the text size if it doesn't, you can tweak the font size with css media queries like this
<style>
#media screen and (max-width: 820px) {
header #top-info #online p{
font-size:14px; //edit this font size to fit your taste and also just copy and paste and use the sample format to tweak other codes. IF you want to add more css text to reduce size add in the media query
}
.container{
width:100%;
margin:auto;
overflow:hidden;
}
header #top-info #online{
background-color:#558B2F;
float:left;
min-height:50px;
}
}
</style>
I am making a simple website and the writing I did in html in my div is showing up but the CSS is not effecting it.(ex. no colored box is showing up.)
this is the html
<div id=“hello”>hello</div>
this is the css
#hello {
background:#ccc;
width:200px;
height:200px;
}
this is the full code
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>
html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
}
body {
background:#Fff; margin:0 ;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}
#header {
width:100%;
height:170px;
background:#Fff;
}
#logo {
float:left;
width:400px;
height:40px;
margin:30px;
background:#Fff;
color: #000;
font-size: 40px;
line-height:38px;
}
span1 { font-size: 30px;
line-height: 18px;
}
#navbar {
height:40px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:20px;
}
#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}
#banner {
background-image: url(pics/babypic.png);
background-repeat: no-repeat;
background-size:100%;
height:445px;
padding:20px;
clear: both;
}
#left_col {
float:left;
width:819px;
padding:20px;
height:600px;
color:#000;
background:#F0F8FF;
font-size:20px;
}
h1 {
font-size:35px;
text-align:center;
font-weight:300;
margin-top:50px;
}
p {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}
#right_col {
float:right;
width:400px;
height:600px;
color:#000;
background:#F0F8FF;
padding:20px;
}
h2 {
font-size:35px;
text-align:right;
font-weight:400;
margin-right:75px;
}
h3 {
font-size:25px;
font-weight: 200;
margin-right:70px;
margin-left:50px;
line-height:40px;
margin-top:30px;
text-align:right;
}
#hello {
height: 200px;
width: 200px;
background-color:#ccc;
}
#footer {
height:450px;
background:#F0F8FF;
float:bottom;
clear:both;
font-weight:100;
font-size:25px;
}
h5 {
font-weight:100;
font-size:25px;
margin-left:250px;
margin-right:250px;
line-height:40px;
}
#footer ul1 {
margin-left:400px;
list-style:none;
width:40%;
display:block;
}
h4 {
text-align:center;
margin: 70px;
font-weight:;
}
#end {
height:200px;
}
</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li>contact </li>
<li>gallery |</li>
<li>fees & insurance |</li>
<li>hours & location |</li>
<li>services |</li>
<li>about |</li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id="banner"></div>
<div id="left_col">
<h1>
What People Are Saying
</h1>
<p>
“Thank you so much for your kindness and support. We sincerely appreciate your assistance and professional courtesy” —C.S
</p>
<p>
“He is very understanding, explaining things very well and has patience with kids. I highly recommend him. —C.G
</p>
<p>
“Thank you so much for your guidance and wisdom.” —K.R
</p>
</div>
<div id="right_col">
<h2>
Call Us Today!
</h2>
<h3>
set up an appointment
<p2> 1-805-563-0167
</p2>
</h3>
<div id=“hello”>hello</div>
</div>
<!-- blurb area -->
<!-- footer -->
<div id="footer">
<h5>
Dr. Brewer has been practicing pediatrics in Santa Barbara since 2002.
The office is a solo practice–patients always see Dr. Brewer. <p>
The practice offers:</p>
</h5>
<ul1>
<li>•newborn hospital care</li>
<li>•well child care</li>
<li>•school, camp and sports physicals</li>
<li>•acute sick visits</li>
<li>•immunizations </li>
<li>•lab testing</li>
<li>•developmental or behavioral concerns</li>
</ul1>
</div>
</div>
<div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>
There's just a little error in your div: If you look closely at the quotes around "hello" and the other quotes in your HTML file, they're not the same kind of quotes!
In the Firefox debugging tools (image), you can see that this causes the browser to interpret the class of the div incorrectly.
<div id=“hello”>hello</div>
vs
<div id="hello">hello</div>
Here's what your HTML looks like when it's fixed! (Just make the quotes different)
final_image
(Disclaimer: I just signed up on the site so my reputation isn't high enough to create in-post images :P, sorry about that)
The double quotes you are using around the "hello" are different than everywhere else in the HTML.
If you re-type those double quotes it'll work.
Here is how the quotes look like to the browser.
1) Shows how "hello" shows up in a code editor but 2) and 3) show what the browser sees. Notice the extra pair of "? Tricky!
DEMO of the problem
#hello {
height: 200px;
width: 200px;
background-color: #ccc;
}
<h3>BAD HELLO</h3>
<div id=“hello”>hello</div>
<h3>GOOD HELLO</h3>
<div id="hello">hello</div>
try to give it width and height..
div {
height: 200px;
width: 200px;
background-color:blue;
}
Make sure to link the HTML file to the CSS file. You do that by adding a link tag to the top of the HTML file, like this:
<link type="text/css" rel="stylesheet" href="style.css" />
Where style.css is, you should write the path to your CSS file.
i'm beginner in CSS and i try to do somethings but i encountered some problems and here is my problem
i have this peace of CSS code to repeat a background horizontally but i want background to cover just what i wrote not more (there is extra color shown under what i write , i can't upload my photo)
<!DOCTYPE html>
<html>
<head>
<style>
.Container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.Container_5 {
float:left;
}
#Title {
font-size:68px;
font-family:sans-serif;
}
.Container_11{
float:left;
color:white;
}
li{
list-style-type:none;
display:inline;
padding-left:15px;
color:white;
font-size:20px;
font-family:sans-serif;
margin-top:30px;
}
nav{
margin-left:150px;
text-align:right;
margin-top:30px;
margin-right:250px;
}
body{
min-width:960px;
background-image:url("bg.png");
background-repeat:repeat-x;
}
</style>
<body>
<div class="Container_16">
<div class="Container_5" id="Title">Book.me </div>
<div class="Container_11"><nav>
<ul>
<li>one</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav></div>
</div>
</body>
</head>
</html>
To apply background image to facebook link only, use this css:
#title > a {
background: url('bg.png') repeat-x;
}
Because you are giving the background to body. I see you have <div class="Container_16">
in which you have all your text. So you can set the background to that div only.
CSS
body{
min-width:960px;
}
.Container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
height:100px;
background-image:url("image.png");
background-repeat:repeat-x;
}
DEMO
i have a stack right now when i explore HTML5 and CSS3 , i try to create a expand and collapse menu but i have problem when menu pull down a border bottom from css3 not pull down too, how can i solve it?
i post my code for you can easy to see and correct for me, tks!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
$(function() {
$('#MainMenu').click(function(){
$('.sub').slideToggle();
});
});
</script>
<title>Admin Control Panel - TBB Rocking Crew</title>
</head>
<body>
<div id="dHeader">
<header> </header>
</div>
<div id="dBody">
<aside>
<article class="asideBoxTitle"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </article>
<article class="asideBoxTitle"> <a href="#"> <img src="img/world.png" class="ico"/>
<ul id="menu">
<li id="MainMenu" class="asideTitle">WorldWide</li>
<li class="sub">Chapterz</li>
<li class="sub">Memberz</li>
</ul>
</a> </article>
<article class="asideBoxTitle"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </article>
</aside>
<!-- end aside-->
<section> </section>
</div>
</body>
</html>
==============================
#charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
aside{
width:240px;
background:#f5f5f5;
position:absolute;
top: 58px;
bottom:0;
border-right-width:1px;
border-right-style:solid;
border-right-color:#e2e2e2;
}
.asideBoxTitle{
height:40px;
line-height:40px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.asideBoxTitle a{
text-decoration:none;
float:left;
}
.asideTitle{
color:#000;
text-decoration:none;
margin-left:20px;
margin-top:-10px;
vertical-align:middle;
}
.asideBoxTitle ul{
display:inline-table;
list-style-type: none;
margin: 0;
padding: 0;
cursor:pointer;
}
.sub{
display:none;
color:#000;
text-decoration:none;
margin-left:20px;
vertical-align:middle;
}
.sub:after{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.ico{
vertical-align:text-top;
margin-left:10px;
}
#dHeader{
background:#20638f;
height:58px;
width:100%;
}
The problem is that you're specifying the height of each item at 40px. They must stay at 40px. They won't move. You are currently making the <a> tags move dynamically, and that will work, but just for the stuff inside the <a> tags; the parent object won't be affected.
A simple way to solve this is to simply set the height attribute of the <article class="asideBoxTitle"> elements to be a min-height instead and remove the float properties from the child <a> tags so that they affect the position of their parent's next sibling. Like so:
.asideBoxTitle{
min-height:40px;
line-height:40px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#e2e2e2;
width:100%;
}
.asideBoxTitle a{
text-decoration:none;
}
Here's a JSFiddle. Regards.
My code has been validated by w3school yet it still displays differently in IE and firefox.
My link bar allong the top seems to cascade down in IE but displays in a stright line (as it should be ) in Firefox!!!
My HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="lbf.css">
<title>Love British Film</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="main_container">fegerfg
<div id="header">
<div class="logo">Love British Film.com </div>
</div>
<div class="nav_bar">
<ul class="nav_list">
<li class="odd">Home</li>
<li class="even">Reviews</li>
<li class="odd">Forums</li>
<li class="even">Videos</li>
<li class="odd"><a href="index.html" >Downloads</a></li>
<li class="even">News</li>
<li class="odd"><a href="index.html" >Fun bits</a></li>
<li class="even">Contact us</li>
</ul>
</div>
<div class="main_text">
<div class="header">HEADER FOR MAIN CONTENT</div>
Main content!!
</div>
<div id="film_of_day">Film of day </div>
<div id="poll_of_week">asdnasdljasasdasfdasfasfas</div>
</div>
</body>
</html>
And My CSS code
body
{
background:url(bg.jpg) no-repeat #FFF center top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px auto auto auto;
}
div {
margin: 0px;
padding: 0px;
width: 0px;
}
#main_container{
width:1200px;
height:auto;
margin:auto;
padding:0px;
}
#header{
position:relative;
width:1200px;
height:170px;
background:url(header.jpg) no-repeat center;
background-position:0px 0px;
margin:auto;
padding:5px;
}
.logo{
width:auto;
height:auto;
font-size:20px;
position:relative;
top:80%;
text-align:right;
}
.nav_bar{
width:1200px;
height:50px;
}
ul.nav_list{
list-style-type:none; float:left; display:block; width:1200px;
margin:0px; padding:0px;
}
ul.nav_list li.odd a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left;
background-color:rgb(147,216,255);height:40px; line-height:40px; color:rgb(168,100,63);
}
ul.nav_list li.even a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; color:rgb(168,100,63);
height:40px; line-height:40px;background-color:rgb(26,142,165);
}
a.odd:link, a.odd:visited {
display:block;width:133px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; }
ul.nav_list li.even a:hover{background-color:#A29;}
ul.nav_list li.odd a:hover{background-color:#F99;}
a.even:link, a.even:visited {
display:block;width:133px; text-align:center; float:left;height:40px;text-decoration:none; background:url(images/home.png) no-repeat left; color:#676d77;}
a.even:hover{
color:#FFFFFF;
}
.header{
width:500px;
text-align:center;
margin-bottom:50px;
}
.main_text{
display:inline-block;
float:left;
width:600px;
height:600px;
background-color:rgb(147,216,255);
}
#film_of_day{
float:right;
width:340px;
height:250px;
background-color:rgb(147,216,255);
}
#poll_of_week{
margin-top:50px;
float:right;
width:280px;
height:250px;
outline:solid;
padding:1px;
}
Welcome to the real world.
IE and Firefoy interpret CSS different from each other. This was always a problem, and it will always be ! If you want to reduce different behaviours or looks, you could try to use a so called CSS reset.
What is a css reset ?
This is a simple css file, which resets every positioning, padding,margin, everything that comes by default from the browser to zero. So you can ensure that most of your styling will be interpreted the same. Sure still it will not alway be the same, but it helps you to put it in the right direction. You could also use GridLayouts for positioning, which is also a great tool and works and looks the same in the most browsers.
http://meyerweb.com/eric/tools/css/reset/
http://960.gs/
And just a hint, open it with opera,chrome, elder verions of IE, safari and you will be astonished that it also looks different ;-)
You are floating your a tag inside your li tag which isn't good practice and causing your problems.
You should float your li tag and leave your a tag un-floated inside as the link
See: http://jsfiddle.net/ZmhzA/1/