I am trying to style my page but nothing happens. I think that my css code is wrong. This is my html code:
<!DOCTYPE html>
<html>
<head>
<ul>
<li>About</li>
<li>Contact</li>
<li>Download Links</li>
</ul>
<link rel="stylesheet" type="text/css" href="style.css/">
<div id="footer">
<div class="container">
<div class="column">
<h4>My Links</h4>
<p>
Facebook
<br>
Youtube
</p>
</div>
<div class="column">
<h4>My Story</h4>
<p></p>
</div>
</div>
</div>
</head>
</html>
This is my css code:
#header-nav li {
display: inline;
padding-left: 20px;
}
#header-nav {
display: block;
float:right;
margin-top:0;
}
#header {
background-color: #1abc9c;
height: 150px;
line-height: 150px;
}
.container {
max-width:1000px;
margin:0 auto;
}
#header-title {
display: block;
float: left;
font-size: 20px;
font-weight: bold;
}
#header a {
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
#header a:hover {
color: #222;
}
I keep my files in desktop in a file:
Where is a problem in my code?
Please do write your code in a readable format, indentation is very important not only to yourself, but to everyone who might read it ESPECIALLY when you are asking people where the problem may be as it would ease the process for everyone, that would be appreciated.
Problems I have noticed:
In the HTML file:
The "head" tag is used for meta-data; document title, linking to CSS file and other information that is not displayed on the page.
All of the nested tags in the "head" should be instead be nested on the "body" tag except for the "link" tag.
I don't understand why there is an empty paragraph tag.
In the CSS file:
The last slash in your href attribute is what is causing trouble, removing it will link the CSS to the HTML (If the file is in the correct directory).
You are referencing nonexistent elements by using "#header-nav", "#header", "#header-title" none of which are valid ID names.
Your html needs tidying up:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<ul id="header-nav">
<li>About</li>
<li>Contact</li>
<li>Download Links</li>
</ul>
</div>
<div id="footer">
<div class="container">
<div class="column">
<h4>My Links</h4>
<p>
Facebook<br>
Youtube
</p>
</div>
<div class="column">
<h4>My Story</h4>
<p></p>
</div>
</div>
</div>
</body>
</html>
You also need to make sure you refer to your classes in the css file. At the moment I can only see .container. You don't have header id anywhere in your html.
I can see a couple of errors in your code-
You haven't linked your CSS file to your HTML
Your HTML body is missing and instead all the codes are there in the head
In your CSS file, you haven't referred to classes or containers, you have used # which is used for referencing ids which are not in your HTML code.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I have some simple html and css styling and I am creating a site with articles and pictures. I don't understand why my third picture isn't aligned with the other photos. It's slightly higher, though it seems like the same size. How can I get it to to be aligned properly? I don't believe I'm doing anything differently with my third article/picture, so I don't understand why it looks different.
index.html
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(dog.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(chocolate.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(cat.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
There's a few issues going on here, like duplicating an ID. That being said, you can get what you want by adjusting the width and using vertical-align: top;
Fiddle here: https://jsfiddle.net/harcfs0u/40/
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(dog.jpg)"></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(chocolate.jpg)"></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(cat.jpg)"></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br /><br />
<center>©2017<br />
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif;
font-weight: 300 !important;
margin-bottom: 0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
.top-stories {
vertical-align: top;
}
section {
padding: 0;
margin: 0;
max-width: 32%;
display: inline-block;
}
article {}
.article-image {
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
In the section class of CSS file, Try using display property with inline-flex. I am attaching you stackblitz link here.
https://stackblitz.com/edit/js-c9mqfu
section {
max-width: 33%;
display: inline-flex;
}
The reason is that the vertical alignment of inline-blocks is by default at their baseline, which in this case is the last line of your text. To fix that, add vertical-align: top to the CSS for section:
section {
max-width: 33%;
display: inline-block;
vertical-align: top;
}
(And as I wrote in the comments, don't use an ID more than once - use a class instead)
u can know the differ between grid and flex in this link differ between flex and grid
section {
max-width: 33%;
display: inline-flex; // or used display: inline-grid;
}
I just removed extra text in 3rd image p and then your code worked fine
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://upload.wikimedia.org/wikipedia/commons/7/70/Chocolate_%28blue_background%29.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location ... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
my left sidebar has no structure and I want it to be like a menu with a background color. I also have no idea how to make the changes in CSS so I can change the width and height...etc
here is the code for the sidebar
<div class="sidebar">
<nav>
<h1>Menu</h1>
<ul>
<li><strong>Home</strong></li>
<li><strong>Workshop </strong></li>
<li><strong>Team </strong></li>
<li><strong>Resources </strong></li>
<li><strong>Publication </strong></li>
<li><strong>Opportunities </strong></li>
</div><!-- /sidebar -->
CSS syntax can be called for in three ways.
Internal CSS: <style> tags, which must be underneath a <head> element that precede your <body>.
External CSS: Linking external CSS with just the CSS syntax, void of any HTML tags. You connect the two documents with a <link> tag using the href attribute
Block-level/Inline elements: CSS can be placed inside of block-level elements and inline elements (a list of which appear here)
Here is how to color your sidebar's background using the first method:
<head>
<style>
.sidebar {
background-color: gray;
}
</style>
</head>
And here's one way to add containers/boxes around your sidebar using the first method:
<head>
<style>
.box {
background-color: #eee;
margin-top: 5px;
padding: 10px;
text-align: center;
}
.sidebar {
display: block;
width: 150px;
font-family: Arial, sans-serif;
}
.row:after {
clear: both;
content: "";
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="sidebar">
<div class="box">
<strong>Home</strong>
</div>
<div class="box">
<strong>Workshop</strong>
</div>
<div class="box">
<strong>Team</strong>
</div>
<div class="box">
<strong>Resources </strong>
</div>
<div class="box">
<strong>Publication</strong>
</div>
<div class="box">
<strong>Opportunities</strong>
</div>
</div>
</div>
</body>
I'm not sure if this is exactly what you're looking for, but you can change the font, margins, and padding underneath the <style> tag however you want.
Also, I would suggest going through w3school's CSS introduction just to familiarize yourself with how it all works. Another tip: Make sure all of your starting tags have the necessary end tags! For example, in the code you wrote a closing </ul> and </nav> are missing.
When i click on
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
the image not display on Div Id=light but in a new page ;
fails to find a solution.
<html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- scripts -->
<link href="style1.css" rel="stylesheet" type="text/css" media="screen" />
<head>
scrollmenu1.light{}
</head>
<body>
<!-- div destination -->
<div id="light">
<img src="images/thumbs/9.jpg" height="190px">
</div>
<div class="scrollmenu1">
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
<img src="images/thumbs/8.jpg" height="190px">
<div class="caption">Caption 1</div>
</a>
<a href="images/full/4.jpg">
<img src="images/thumbs/4.jpg" height="190px">
<div class="caption">Caption 2</div>
</a>
</div>
</body>
</html>
CSS
/* sezione diapositive */
.images{
text-align:center;
margin:10px auto;
}
.images a{
margin:0px 3px;
display:inline-block;
text-decoration:none;
padding: 3px;
color:white;
}
.images a:hover {
background-color: blue;
}
/* scroll zona 2 */
div.scrollmenu1 {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu1 a {
display: inline-block;
color: white;
text-align: center;
padding: 3px;
text-decoration: none;
}
div.scrollmenu1 a:hover {
background-color: blue;
}
A link is an anchor that takes you to a place or location specified by the address, in this case the address in the href = " ". Sorry if that seems too obvious for you but I feel like I needed to remind you of it for the sake of clarity. With that being said, unless you make your code go to a certain div when you click on a link, it won't just magically do it by itself. You can redirect you page to the div you want by specifying the address in the href attribute of the link you click as in here:
<div class="scrollmenu1">
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
<img src="images/thumbs/8.jpg" height="190px">
<div class="caption">Caption 1</div>
</a>
<a href="#Id-Name-Of-The-Div-You-Want-To-Go-To-On-Click">
<img src="images/thumbs/4.jpg" height="190px">
<div class="caption">Caption 2</div>
</a>
</div>
Notice the difference in the href attribute in your link that I changed. This will redirect you to the div. However, like other have pointed out in their comments, you can't just make the image you clicked on to magically appear in the div you want by just having it in between your "a" tags like that. You need some javascript or other ways for that. By default, links don't work like that. Also, doing some research before posting questions is a good practice. It will help you learn things better.I hope that helped
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
I'm currently in the process of creating a HTML/CSS layout for a Kiosk-style site.
However, I am having a few issues making the alignment of the images and text to work exactly how I want.
The logo and header should be fixed in the same place across every page, whereas I might need to expand the amount of buttons on-screen.
Here is the illustration of an example: Example Image, where:
Black box represents logo
Blue boxes represent individual buttons
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="style.css">
<html>
<body background="background.png">
<div id="logo">
<img src="logo.png">
</div>
<br>
<div id="icons1">
<img src="button-wmcweb.png"></a>
</div>
<div id="icons1">
<img src="button-appointments.png"></a>
</div>
<div id="icons1">
<img src="button-prescriptions.png"></a>
</div>
<br>
<div id="icons2">
<img src="button-somccg.png"></a>
</div>
<div id="icons2">
<img src="button-patient.png"></a>
</div>
<div id="icons2">
<img src="button-nhschoices.png"></a>
</div>
</body>
</html>
CSS:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
#icons1 {
display: inline-block;
}
#icons2 {
display: inline-block;
}
Is using inline blocks the best practice for what I'm trying to achieve?
Any help would be much appreciated.
I have created for you a JSFiddle with what you want as a starting point.
Click for the full screen mode for the fiddle.
There is the full code below for the ease of referencing.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="background.png">
<div id="logo">
<div id="logoimg">
<img src="http://cs614926.vk.me/v614926650/93b6/n9S5OGKt8L0.jpg" />
</div>
<div id="logotext">lorem ipsum</div>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
</body>
</html>
style.css:
body {
text-align: center;
}
#logoimg, #logotext, .row > img {
display: inline;
}
#logo, .row {
margin: 30px 10px;
min-width: 1000px;
}
#logotext {
min-width: 320px;
vertical-align: top;
font-size: 36px;
padding: 0 20px;
}
img {
width: 320px;
resize: noresize;
}
a:link {
text-decoration:none;
}
For more info on HTML/CSS, consider checking the following w3school tutorials: HTML and CSS.
Your HTML was wrong in a few places. No opening <a> tag, multiple id's with the same name, and the <link> for the css needs to be inside the <head></head> tags, as shown below.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Is this what you're looking to achieve?
http://jsfiddle.net/Q8gVL/