I can't get any pics or links of pics to show. I tried using multiple
links and pics. Nothing works. All files in the same folder, and CSS
connected. I don't know what to do any more.
HTML
<!doctype html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset= "utf-8">
<title> portfolio website </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<html>
<body>
<section class:"main">
<div id="container">
<div class:"header">
<nav>
Home
About
Portfolio
</nav>
</div>
</div>
</section>
</body>
</html>
CSS
Body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.main{
height: 100%;
width: 100%;
margin: auto;
background-image: url("rockets.jpg");
background-repeat: none;
background-size: cover;
}
Wrong:
<section class:"main">
<div class:"header">
<nav>
<a href:"index.html">Home</a>
<a href:"About.html">About</a>
<a href:"Portfolio.html">Portfolio</a>
</nav>
</div>
</section>
Answer:
<section class="main">
<div class="header">
<nav>
Home
About
Portfolio
</nav>
</div>
</section>
NOT ":" YOU MUST USE "="
Related
I want to realise this effect on website Link of video
my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Resto</title>
<link rel="icon" href="favicon/logoB.ico">
</head>
<body>
<main class="container">
<nav class="menu">
Burger
Sandwich
Chawarma
Salades
BBQ
Boissons
</nav>
<div class="central" dir="ltr">
<div class="logo">
<img src="images/logoB.png" alt="Logo">
</div>
<p class="text">Decouvrer des Saveurs exquises</p>
<div class="pictures">
<img src="images/burger.jpg" alt="Hamburger">
</div>
</div>
</main>
<footer>
<p>©*Copyright*****Chez MED***2023</p>
<p><img src="images/loc.png" class="localisation" alt="Adresse">2152 ** Boulevard des ULYSSES</p>
</footer>
</body>
</html>
my css:
.container{
position: relative;
z-index: 1;
box-shadow: 0 2rem 4rem #f3ebe0;
}
footer{
position:sticky;
bottom: 0;
padding: 15vmin 2rem;
background-image:url("images/fries.jpg");
background-repeat: no-repeat;
background-size: cover;
}
the result is
my page
My footer
the problem is my footer is visible under the body
can I get some idea to fix this problem?
I try to add an effect on my first page the footer should be under the main content who get the z-index
I'm following a tutorial online but I can't my HTML code to CSS (nothing happens when I change the details in css file. I have both files placed in the same folder. My CSS is in style.less file
Since I only starting with this, I think maybe the problem is in the syntax but I can't figure out what it is exactly
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>1st project</title>
<link rel="stylesheet" href="./reset.css"/>
<link rel="stylesheet" href="./style.css"/>
<link rel="stylesheet/less" type="text/css" href="style.less"/>
</head>
<body>
<div class="top">
<div class="top_content">
<img src="/base/materials/4.png"/>
<div>
<h3>Web Development Course</h3>
<span> Learn to code with basic paths</span>
<button>Browse course</button>
</div>
</div>
</div>
<div class="top_sub-content">
<nav>
<ul>
<li>Home</li>
<li>Careers</li>
<li>Blog</li>
</ul>
</nav>
<img src="/base/materials/5.jpg"/>
</div>
<footer>
<div>
<img src="/base/materials/4.png"/>
<h3>Join the list</h3>
<span>Sign up for the list</span>
</div>
<div>
<div>
<input placeholder="Enter your email"/>
<button>Subscribe</button>
</div>
<span>We won't spam</span>
</div>
</footer>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
}
.top {
display: flex;
.top_content {
flex: 1;
}
.top_sub-content {
background: #33A3EF;
flex-basis: 40%;
img {
max-width: 100%;
}
}
}
If both files are in the same location, remove the dot and slash from the beginning of the link
Before
<link rel="stylesheet" href="./style.css"/>
After
<link rel="stylesheet" href="style.css"/>
.main_banner {
background-image: url("../images/main_banner.png");
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<heading>
<title>
**********
</title>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
</heading>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>
<body>
<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>
I have a div tag in my HTML assigned a class of main_banner.
For some reason, I cannot get my image that is specified in my stylesheet to display.
I have my main project folder which contains the following: index.html, images (folder), and styles (folder). My image, main_banner.png, is located in my images folder.
What am I missing?
.main_banner {
background-image: url('../images/main_banner.png');
}
Assuming you have referenced your style sheet correctly, you will need to specify a width and height in your CSS. The DOM only sees your block elements as empty. Once you give a height and width your image will show up.
.main_banner {
background: url("../images/main_banner.jpg");
/*background: url("https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=");*/
width: 100%;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>
**********
</title>
<link type="text/css" rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>
<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>
I am having trouble getting my Pure CSS styling to work so that I can create a Menu on the left side of my webpage. This is what I get when I open the file. I am using Flask also just in case that is relevant.
This is what my site looks like:
And this is the code that I am using to create this file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- Check Compattibility with Pure CSS -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Check Compattibility with Pure CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Check Compattibility with Pure CSS -->
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<title>Home</title>
</head>
<style>
.custom-restricted-width {
/* To limit the menu width to the content of the menu: */
/* display: inline-block; */
/* Or set the width explicitly: */
width: 10em;
}
</style>
<div class="pure-menu custom-restricted-width">
<!-- Home -->
<span class="pure-menu-heading">My Site</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">Register</li>
</ul>
</div>
<body bgcolor="black" text="white">
<div class="container">
<div class="pure-u-24-24">
<img src="/static/images/Logo.png" class="pure-img" />
<h1>Welcome Home</h1><br><br><br>
<p>Please continue to check back for updates!</p><br><br>
<p>More comming soon...</p>
</div>
</div>
</body>
</html>
I am new to Pure CSS and I am trying to create an elegant menu that is on the side of the page similar to what you will find on the Menu Page on their website: https://purecss.io/menus/
First of all your menu needs to be within the <body></body> tags. See it here:
<body bgcolor="black" text="white">
<div class="pure-menu custom-restricted-width">
<span class="pure-menu-heading">My Site</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">
Home
</li>
<li class="pure-menu-item">
<a href="newuser/register" class="pure-menu-
link">Register</a>
</li>
</ul>
</div>
<div class="container">
<div class="pure-u-24-24">
<img src="/static/images/Logo.png" class="pure-img" />
<h1>Welcome Home</h1>
<br>
<br>
<br>
<p>Please continue to check back for updates!</p>
<br>
<br>
<p>More comming soon...</p>
</div>
</div>
</body>
To create a similar sidebar menu as PureCSS has just add the following:
.custom-restricted-width {
width: 10em;
height: 100vh;
position: fixed;
z-index: 9;
bottom: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
and for the container you can add:
.container {
padding-left: 15em;
}
Here's the full code:
<head>
<meta charset="utf-8">
<!-- Check Compattibility with Pure CSS -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Check Compattibility with Pure CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Check Compattibility with Pure CSS -->
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<title>Home</title>
<style>
body {
background-color: black;
color: white;
}
.pure-menu {
width: 10em;
height: 100vh;
position: fixed;
z-index: 9;
bottom: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.container {
padding-left: 15em;
}
</style>
</head>
<body>
<div class="pure-menu custom-restricted-width">
<!-- Home -->
<span class="pure-menu-heading">My Site</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">Register</li>
</ul>
</div>
<div class="container">
<div class="pure-u-24-24">
<img src="/static/images/Logo.png" class="pure-img" />
<h1>Welcome Home</h1>
<br>
<br>
<br>
<p>Please continue to check back for updates!</p>
<br>
<br>
<p>More comming soon...</p>
</div>
</div>
</body>
</html>
I am learning HTML and CSS and i have problems with positioning.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
</html>
And this is my CSS code:
#main{
text-align: center;
}
I cant align my text, how do i do this with HTML and CSS?
To horizontally center a block element (like div), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
text-align:center !important
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main" class="center">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
best to use a class when applying across many divs.