Body properties such as different font works but div tag properties like in #mainpic or #header just don't work
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
#mainpic {
<img src="../image/cutmypic.png";
alt="image not found";
/>background-position: "centre";
position: absolute;
bottom: 0;
center: 0;
}
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“ content”>/div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
Okay first up: use classes not IDs. Good css never has any ids in it (except for some very very specific cases)
Secondly, you got html in your css, so that does not work.
Thirdly, you cannot nest css selectors. Instead of
.wrapper {
/* some css */
.element {
/* some css */
}
}
you have to write
.wrapper {
/* wrapper css */
}
.wrapper .element {
/* element css */
}
Close all brackets properly in the CSS code, move the img tag from the CSS to the HTML code and don't use invalid properties or values ("centre", "center") in your CSS.
Also, you are using lots of typographical quotes in your codes. You have to replace all these with regular quotes - it won't work otherwise.
body {
font-family: Calibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"><img src="../image/cutmypic.png" ; alt="image not found" ; /></div>
<div id=“ content”></div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
/*center:0;*/
}
#header {
color: white;
}
<body background="image/bg.jpg">
<div id=“container”>
<div id=“header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“content”></div>
<div id=“navigation”> a link to the other web page</div>
<div id=“footer”> contains your name and student number</div>
</div>
</body>
The 1st your problem is that you have several typos.
For example, <div id = “content”>/div>.
The 2nd problem is that you can not use HTML tag in CSS.
The 3rd problem is that there is no syntax center in CSS.
And when you use background-position, you don't need to use " " , and you should write center NOT centre.
Related
I found a post about modifying text size specifically for mobile in a specific div, like this:
#media only screen and (max-width: 480px) {
.news {
font-size: 5px;
}
}
I can't get that to work however for the site I'm messing with. I'd like the font size to be smaller when opened on mobile. While I wonder if I have to set a viewport meta in the html, every time I do this A, it doesn't fix it, B, it totally destroys the balance of my site, clipping tons of information, which I really don't like. So, the only way I'm going to be able to use a viewport right now, is if it doesn't mess with the zoom factor at all. Not sure if that's the issue though.
Really appreciate any help on this. Full code:
css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-weight: 1;
font-family: 'rationale';
background:black;
}
#newsusa {
position: absolute; /*makes it relative to the html element, (the first
positioned element).*/
width: 100%; /*makes the element 100%, to center it. */
left: 0px;
top: 200px;
}
.news {
color: white;
font-size: 18px;
}
li {
list-style-type: none;
}
#media only screen and (max-width: 480px) {
.news {
font-size: 0.8em;!important;
}
}
#media only screen and (max-width: 280px) {
.news {
font-size: 0.8em;!important;
}
}
xhtml:
<?php include 'global.php';?>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mobiletest.css">
<link href='//fonts.googleapis.com
/css?family=Iceland|Rationale|Quantico|VT323|Dorsa' rel='stylesheet'
type='text/css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3
/jquery.min.js'></script>
<div id="newsusa">
<h1 class="appear-later">News</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usnews', 'ignore'); ?></ul>
</div>
<div class="spacer2">
</div>
<h1 class="appear-later">Tech</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usatechnews', 'ignore'); ?></ul>
</div>
<div class="spacer2">
</div>
<h1>Business</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usamoneynews', 'ignore'); ?></ul>
</div>
</div>
</html>
You're going to need to add the
<meta name="viewport" content="width=device-width, initial-scale=1">
to your header. If you consider the following code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.page-header{
font-size: 16px;
color: red;
}
#media (max-width: 430px) {
.page-header{
font-size:100px;
color: green;
}
}
</style>
</head>
<body>
<h1 class="page-header">Hello</h1>
</body>
</html>
The media query only works once you have the viewport meta tag defined. I know that's probably not what you want to hear, but I think that's your solution.
I'm making bootstrap skeleton for a WordPress site on top most header section I had video background which is working fine when I added another section content from that section overlapping to header section
my site looks like
my code looks like
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
body {
font-family: 'Roboto', sans-serif;
}
/* ======================= Header ======================== */
#background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
opacity: 0.78;
}
.header .text-contant {
margin-top: 40%;
}
.header .text-contant h1,
.header .text-contant p{
color: #fff;
}
.header .text-contant h1 {
text-transform: uppercase;
font-family: 'Sansita', sans-serif;
font-weight: bold;
}
.header .text-contant p {
letter-spacing: 1px;
}
.header .text-contant i {
padding-top: 33px;
color: #fff;
}
#media(max-width:992px) {
.header .text-contant {
margin-top: 50%;
}
}
#media(max-width:768px) {
.header .text-contant {
text-align: center;
}
}
#media(max-width:480px) {
.header .text-contant {
margin-top: 80%;
}
}
#media(max-width:320px) {
.header .text-contant {
margin-top: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Boilerplate</title>
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Sansita:400,700" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ===================== HEADER ============================= -->
<section class="header">
<video autoplay loop muted poster="/img/pexels-photo-27884.jpg" id="background">
<source src="/vdo/River%20-%206815.mp4" type="video/mp4">
</video>
<div class="container text-contant">
<div class="row">
<div class="col-sm-8">
<h1>My WordPress</h1>
<p>Just Another WordPress Theme</p>
</div>
<div class="col-sm-3 col-sm-offset-1">
<i class="fa fa-chevron-circle-down fa-4x" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<!-- ===================== MAIN ============================= -->
<section id="article">
<div class="container">
<div class="row">
<div class="col-md-8">
<article class="blog">
<div class="blog-meta-detail">
<i class="fa fa-clock-o" aria-hidden="true"> February 17 2017 </i>
<i class="fa fa-user" aria-hidden="true"> cannelflow</i>
<i class="fa fa-folder" aria-hidden="true"> Music,Tech</i>
<i class="fa fa-tags" aria-hidden="true"> Tag 1,Tag 2</i>
</div>
<div class="blog-title">
<h2>Sample Blog Post 1</h2>
</div>
</article>
</div>
<div class="col-md-4">
<aside class="sidebar"></aside>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/js/jquery-3.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
thanks in advance
I would suggest to use a fixed height for the video, using media queries to change the video height as you reduce the windows width (for mobile and tablets websites). Then the best way to position the html over the video is using flexbox. For cropping the video you can user margin-top : <0px;
You code is too complicated and I can not fix it, you should have posted an example of your problem and then we could help.
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
Hi well I basically want to move down my logo div which is inside my topBar div however when ever I use padding or margin it moves the whole top bar down or the logo just repeats its self (and yes I have tried background-repeat: no-repeat)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="logo">
<p>chattrd</p>
</div>
</div>
</body>
</html>
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
}
.topBar {
background: #0C3;
height: 40px;
}
#logo {
background-image:url(../images/logo.png);
height: 26px;
width: 121px;
overflow: hidden;
display: block;
text-indent:-999px;
}
The reason it is behaving this way is that you are using the image as a background. If you want to carry on with this approach, the easiest way to be able to move it vertically is to place another div before the #logo-div like so:
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="spaceDiv"></div>
<div id="logo"></div>
</div>
</body>
The height of the spaceDiv can be used to move the #logo-div using the following CSS:
#spaceDiv{
height:6px;
}
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.