So I new to html and want to make a website with 2 pages a home page and a contact page.
and I just want to know how do you use the same Style.css file for then 1 page?
Do just write in the Style.css:
***#Home body;
#Contact body;***
For ease of explaining, i have created 2 divs in one page. But you can create homepage and put "homepage" div in it and "contact" div on another page
.homepage {
/* All css needed for homepage will come here */
}
.contact {
/* All css needed for contact will come here */
}
<!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.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="homepage">
page 1 content
</div>
<div class="contact">
contact content
</div>
</body>
</html>
Related
I have 2 files.
1.index.html
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div>Hello World</div>
</body>
</html>
main.css
div::after{
content: "123";
color: red;
font-size: 20px;
}
When I opened it, it shows like this:
I don't know why 123 is in the wrong place.
You are using live-server which injects additional content, including div elements into the page.
Your CSS select all div elements.
You could change your selector to be more specific (e.g. to select divs that are members of a particular class and then add a matching class attribute to the div you want to select).
I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS page
<!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.0">
<title>Document</title>
</head>
<body>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>
I am saving my code and refreshing it. I dont think I did anything wrong. I am trying to make a Parallax website, I didn't add it yet because the image itself couldn't even load.
This is the code. It's not loading in any way. Completely white.
.img-1{
background-image: url("Image1.jpg");
margin-left: auto;
margin-right: auto;
}
Not so important but here's HTML section of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="parallax.css">
</head>
<body>
<div class="img-1">
</div>
</body>
</html>
Your div is of 0 height - background-image doesn't give it any height.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<html>
<body>
<!--Title and Banner-->
<header>
<title>
<h1>Flip 'n' Sell</h1>
<title>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>`
Here is my html for my page so far
and here is my css. As you can see, all that I have done is styled it to where the default margin and
padding is nonexistent. What when I load this up and look at the webpage, there's nothing, nothing at all. What am I doing wrong. I still new to this all by the way.
* {
margin: none;
padding: none;
box-sizing: border-box;
}
Move the opening <html> tag to under the Doctype declaration before the <head> tag, and change or remove the <title> tag from your body.
The title tag is defining a title for the entire document (what's shown on the browser tab) and may be causing some confusion when rendering the page.See W3 School's post on the title tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Title and Banner-->
<header>
<h1>Flip 'n' Sell</h1>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>
The fix was your title tag was not terminated. Needed the corresponding </title> but in reality the title tag does not belong there and should be removed as I did in my example.
First off, my website is: http://www.volunteeringnews.com
On the website I want white to continue to the bottom of the website but he is now cutting it just after the background image.
I could offcourse make my img 10000 px high but that seems to create a very big image in size.
So far I tried creating a new Div to go around the background divs but then he just goes over the background divs.
I tried z-index but that did nothing.
I tried to use the IMG from HTML and not CSS but that got my img out of line. (I have the background split in two images for the top and the main section).
I've been on it all day and hoped that someone might be able to help me out.
ps.I'm sorry if this is kind of a noob question but I am only on building websites for a few months.
Thank you!
#head{
margin:0px;
height:215px;
background-image:url(../img/background/background_01.gif);
background-repeat:no-repeat;
width:100%;
}
#mainc {
margin-top: 0px;
width:90%;
position:absolute;
background-image:url(../img/background/background_02.gif);
background-repeat:no-repeat;
min-height:100%;
add
background-color:#fff;
to your #mainc and #head as well ;)
just by adding
background-color: #FFFFFF;
to your #mainc style should do the trick
First off start by cleaning up your html which currently looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering News- All your volunteering news plus a database to look for your own advernture. - Cheap and free</title>
<link href="css/styles.css" rel="stylesheet">
<link href="wordpress\wp-content\themes\twentytwelve\style.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
</head>
<!--body-->
<body>
<div class="topnav"></div>
<header><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
<div class ="sql">
</div>
</head>
<body>
<div id="wrapper">
<img src="img/form/background.jpg" class="stretch" alt="" />
</div>
<div id="head">
<div class="logo">
<img src="img/head/logo.png">
</div>
<div class="menu-top">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="navigation">
<ul id="nav" class="drop">
<li>Home</li>
You have multiple doctypes, multiple html tags, multiple head tags, multiple css declarations. This will never work properly.