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>
Related
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.
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Please do bear with me I am aware this is mind-numbingly basic but I need to start somewhere and I both can't find an answer and can't find a reason why.
My nav bar does not correspond to my div's border and this is less of a problem but how do I get it so that the nav bar and the header don't overlap when I use the border because as of now the div border is only working on the header.
you need overflow hidden to container.
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
overflow: hidden;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Have you thought about adding a 5px top margin to your nav bar, this will account for the 5px border... I think. I'm also still learning. Best of luck, I'll be watching.
Also you always want body to be the outer most thing of what is rendered on the page. So any containers need to be inside of it.
Problem is a) your body tag is in the wrong place (should start just before head, and end just before html tag and b) there is no height declaration on the container.
Adding this code to the CSS:
html,body {
background-color:Lavender;
height:100%;
}
div.container {
width:100%;
height:100%;
border:2px solid purple;
}
and having this to html should work.
<body>
<div class="container" style = "border: solid yellow;">
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</div>
<br class="clear" />
</body>
</html>
I have worked very hard on this website but i have ran into an annoyance that I cannot seem to figure out! I am using Mozilla Firefox and unlike other webpages, when I zoom everything moves out of place! Usually that only happens when you resize but for some reason it is doing it for zoom also!! How can I fix this? Here is the code bellow:) Thanks! P.S. My zoom is at 90%, if there is a way to automatically set the zoom of browser when the user opens the page, please let me know!
*{margin:0; padding:0;}
.container{
width:100%;
height:100%;
background-image:url(backgrounds/background4.jpg);
background-size: cover;
overflow:hidden;
}
body{
width:100%;
}
.mainHeader{
width:100%;
height:100px;
background-color:rgba(0,0,0,0.6);
/*background-color:#182418;*/
/*opacity:0.7;*/
}
.mainHeader nav ul{
margin-right:70px;
float:right;
}
.mainHeader nav ul li{
display:inline-block;
margin-top:30px;
margin-right:20px;
}
.mainHeader nav ul li a{
text-decoration:none;
font-family:Arial;
font-size:25px;
color:#ACACAC;
margin-right:30px;
}
.mainHeader nav ul li a.active{
color:white;
}
.mainHeader nav ul li a:hover{
color:white;
}
.mainHeader img{
margin-top:-25px;
}
.mainArea .panel{
margin-left:25%;
margin-top:2%;
width:50%;
height:620px;
background-color:rgba(0,0,0,0.6);
}
.mainArea .panel h1{
color:white;
font-family:Arial;
padding:50px;
padding-left:60px;
text-align:center;
}
.mainArea .panel p{
color:white;
font-family:Arial;
padding:30px 50px 50px 50px;
text-align:center;
font-size:25px;
}
.mainArea .panel form{
margin-right:33%;
position:relative;
top:-5%;
float:right;
}
.mainArea .panel form .name, .email{
width:300px;
height:40px;
border-radius:10px;
margin-bottom:40px;
background:rgba(0, 0, 0, 0.55);
border:none;
padding-left:20px;
font-family:Arial;
font-size:20px;
color:gray;
}
.mainArea .panel form .body{
resize:none;
width:300px;
height:200px;
border-radius:10px;
margin-bottom:40px;
background:rgba(0, 0, 0, 0.55);
border:none;
padding-left:20px;
font-family:Arial;
font-size:20px;
color:gray;
padding-top:20px;
padding-right:30px;
}
.mainArea .panel form .submit{
width:90px;
height:43px;
background:rgba(0, 0, 0, 0.55);
border:none;
font-family:Arial;
font-size:20px;
color:gray;
padding-top:-3px;
border-radius:10px;
margin-top:-5px;
margin-left:100px;
}
.mainArea .panel form .submit:hover{
cursor:pointer;
}
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="contact.css">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jqueryui.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
</head>
<body>
<div class="container">
<div class="mainHeader">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><a class="active" href="#">Contact</a></li>
</ul>
</nav>
<img class="logo" src="logo.png">
</div>
<div class="mainArea">
<div class="panel">
<h1>Welcome to our contact page!</h1>
<form action="php/mail.php" method="POST">
<input type="text" value="Name" name="name" class="name"><br/>
<input type="text" value="Email" name="email" class="email"><br/>
<textarea name="message" class="body" rows="4" cols="50">What would you like to ask?</textarea><br/>
<input type="submit" value="Send!" class="submit">
</form>
</div>
</div>
</div>
</body>
</html>
And here is the background named background4.jpg Also, if you try to run the code snipet on this site it will get messed up because of the way stack overflow is laid out and because it needs the background image. So copying to a text file would work best.
if your elements get dispersed while zooming or re-sizing your browser window
use min-width and min-height for the containers
that will make them stay in the right way you like them
try to add this line :
.mainArea .panel {
min-width: 790px;
}
Unfortunately there isn't an universal way for browsers to zoom everything. At least not without a whole lot of scripting.
In my opinion it's also pretty weird to design a website and force browsers to 90%.
Zooming isn't what people do a lot (on desktop). Why not design a page at 100%?
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;">
I just started learning HTML and just created this static:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/classes.css">
<link rel="stylesheet" type="text/css" href="../css/ids.css">
<title>Total Devastation</title>
</head>
<body>
<h1 class="header-main">Total Devastation</h1>
<div id="mainmenu">
<ul>
<li>
Hello!
</li>
<li>
How
</li>
<li>
Are
</li>
<li>
You
</li>
</ul>
</div>
<div id="body-main">
<p>
Hi there! Welcome to this newly created static RPG.
</p>
</div>
</body>
</html>
I want to make the h1 container (class header-main) touches the edges of the screen like it touched the right-side here
And here is the css part:
body {
background:#aaa;
}
.header-main {
background:#555;
font-family:calibri;
font-size:32pt;
color:#eee;
text-align:center;
margin-left:0;
padding:10px;
width:100%;
}
By default body will have margin of 8px set it 0..so your h1 container touches the screen
Css
body{
background:#aaa;
margin:0;
padding:0;
}
if you want h1 to touch the top of browser... set the h1 margin to 0
.header-main {
background:#555;
font-family:calibri;
font-size:32pt;
color:#eee;
text-align:center;
margin:0; /*changes done */
padding:10px;
width:100%;
}
Make margin, padding to 0 in html,body tags
html, body
{
margin: 0;
padding: 0;
}
DEMO
try this
body {
background: #aaa;
margin: 0;
}
h1 {
margin: 0;
}
.header-main {
background: #555;
font-family: calibri;
font-size: 32pt;
color: #eee;
text-align: center;
margin-left: 0;
padding: 10px;
width: 100%;
}
<h1 class="header-main">Total Devastation</h1>
<div id="mainmenu">
<ul>
<li>
Hello!
</li>
<li>
How
</li>
<li>
Are
</li>
<li>
You
</li>
</ul>
</div>
<div id="body-main">
<p>
Hi there! Welcome to this newly created static RPG.
</p>
</div>
What is happening here is simple, your browser automaticly adds 8px margin to the entire document, so when you remove this from your html by the following CSS:
html{
margin: 0;
}
Your problem should be solved.
Just add this css:
body{
margin:0
}
h1{
margin:0
}
Because of the default css of browser.
.header-main {
background:#555;
font-family:calibri;
font-size:32pt;
color:#eee;
text-align:center;
margin-left:0;
padding:10px;
width:100%;
position:relative;
left:0;
top:0;
}