When the css is embedded in the head section it works fine, but when it is in a different file, it just doesn't modify my html file. This is very frustrating. Any help please
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> The Treasure Island </title>
<link rel="stylesheet" href="/~hsono1/css/paged_media.css" />
</head>
<body>
<header>
<img src="island3.gif" alt="Island" width="500"/>
<h1>The Treasure Island</h1>
<h2>By Robert Louis Stevenson</h2>
<hr>
</header>
<div>
<h2>Table of Contents</h2>
<ul>
<ol>Chapter 1</ol>
<ol>Chapter 2</ol>
<ol>Chapter 3</ol>
<ol>Chapter 4</ol>
<ol>Chapter 5</ol>
<ol>Chapter 6</ol>
<ol>Chapter 7</ol>
<ol>Chapter 8</ol>
<ol>Chapter 9</ol>
<ol>Chapter 10</ol>
</ul>
<hr>
<h2>Chapter 3</h2>
<h3>The Black Spot</h3>
<p>ABOUT noon I stopped at the captain’s door with some cooling drinks and medicines. He was lying very much as we had left him, only a little higher, and
he seemed both weak and excited. “Jim,” he said, “you’re the only one here that’s worth anything, and you know I’ve been always good to you. Never a month
but I’ve given you a silver fourpenny for yourself. And now you see, mate, I’m pretty low, and deserted by all; and Jim, you’ll bring me one noggin of rum,
now, won’t you, matey?” “The doctor—” I began. But he broke in cursing the doctor, in a feeble voice but heartily. “Doctors is all swabs,” he said; “and
that doctor there, why, what do he know about seafaring men? I been in places hot as pitch, and mates dropping round with Yellow Jack, and the blessed land
a-heaving like the sea with earthquakes—what do the doctor know of lands like that?—and I lived on rum, I tell you. It’s been meat and drink, and man and
wife, to me; and if I’m not to have my rum now I’m a poor old hulk on a lee shore, my blood’ll be on you, Jim, and that doctor swab”; and he ran on again
for a while with curses. “Look, Jim, how my fingers fidges,” he continued in the pleading tone. “I can’t keep ‘em still, not I. I haven’t had a drop this
blessed day. That doctor’s a fool, I tell you. If I don’t have a drain o’ rum, Jim, I’ll have the horrors; I seen some on ‘em already. I seen old Flint in
the corner there, behind you; as plain as print, I seen him; and if I get the horrors, I’m a man that has lived rough, and I’ll raise Cain. Your doctor
hisself said one glass wouldn’t hurt me. I’ll give you a golden guinea for a noggin, Jim.” He was growing more and more excited, and this alarmed me for
my father, who was very low that day and needed quiet; besides, I was reassured by the doctor’s words, now quoted to me, and rather offended by the offer
of a bribe. “I want none of your money,” said I, “but what you owe my father. I’ll get you one glass, and no more.” continued... </p>
<hr>
</div>
<footer>
<p>© 2013 Hans Sono</p>
<p>Validate this page</p>
</footer>
</body>
</html>
css file
html {
margin: 0;
font: 10pt/1.56 Gill Sans, Gill Sans MT, Verdana,"Lucida Grande", "Lucida Sans",Helvetica, Arial, sans-serif;
}
body {
background: red;
margin: 0 0 0 0;
margin: 0 0 0 20%;
width:700px;
}
p {
margin-left: 3em;
}
I have both files on the right locations .
This link is very suspicious.
/~hsono1/css/paged_media.css
My guess is you want
/hsono1/css/paged_media.css
(without the tilde).
The tilde (~) is used on some platforms to indicate the root of the virtual directory and is automatically resolved by the server. It has no meaning to the browser.
The way to check is to paste it directly into the brower's address bar right after the domain. For example, if your page is at
http://MyServer.com/hsono1/MyPage.html
then the paste in
http://MyServer.com/~hsono1/css/paged_media.css
or
http://MyServer.com/hsono1/css/paged_media.css
and see what you get back.
Related
I am making a lyrics website where the lyrics are printed line by line but I want the text to be like this:-
but it comes out like this:-
So how do I set it up like that???
Here is my code for the lyrics:-
<html>
<head>
<title>Lyrics of We will we will rock you by Queen</title>
</head>
<body>
<h2 style="font-family: Arial">
Lyics of We will we will rock you by Queen (Link to the official video at the bottom of the page)
</h2>
<p style="font-family: Arial">
The Lyics Are:-
</p>
<p style="font-family: Arial">
Buddy, you're a boy, make a big noise
Playing in the street, gonna be a big man someday
You got mud on your face, you big disgrace
Kicking your can all over the place, singin'
We will, we will rock you
We will, we will rock you
Buddy, you're a young man, hard man
Shouting in the street, gonna take on the world someday
You got blood on your face, you big disgrace
Waving your banner all over the place
We will, we will rock you, sing it!
We will, we will rock you, yeah
Buddy, you're an old man, poor man
Pleading with your eyes, gonna get you some peace someday
You got mud on your face, big disgrace
Somebody better put you back into your place, do it!
We will, we will rock you, yeah, yeah, come on
We will, we will rock you, alright, louder!
We will, we will rock you, one more time
We will, we will rock you
Yeah
</p>
<a style="font-family: Arial" href="https://www.youtube.com/watch?v=-tJYN-eG1zk">The offical video of the song</a>
<p style="font-family: Arial" >Copyright © 2022 Manik Sharma (THEOP05)</p>
</body>
</html>
HTML automatically removes all white spaces. That’s why it’s not working. To make it work you need to use <pre> tag. This tag keeps the original formatting the author did within it.
<html>
<head>
<title>Lyrics of We will we will rock you by Queen</title>
</head>
<body>
<h2 style="font-family: Arial">
Lyics of We will we will rock you by Queen (Link to the official video at the bottom of the page)
</h2>
<p style="font-family: Arial">
The Lyics Are:-
</p>
<pre style="font-family: Arial">
Buddy, you're a boy, make a big noise
Playing in the street, gonna be a big man someday
You got mud on your face, you big disgrace
Kicking your can all over the place, singin'
We will, we will rock you
We will, we will rock you
Buddy, you're a young man, hard man
Shouting in the street, gonna take on the world someday
You got blood on your face, you big disgrace
Waving your banner all over the place
We will, we will rock you, sing it!
We will, we will rock you, yeah
Buddy, you're an old man, poor man
Pleading with your eyes, gonna get you some peace someday
You got mud on your face, big disgrace
Somebody better put you back into your place, do it!
We will, we will rock you, yeah, yeah, come on
We will, we will rock you, alright, louder!
We will, we will rock you, one more time
We will, we will rock you
Yeah
</pre>
<a style="font-family: Arial" href="https://www.youtube.com/watch?v=-tJYN-eG1zk">The offical video of the song</a>
<p style="font-family: Arial" >Copyright © 2022 Manik Sharma (THEOP05)</p>
</body>
</html>
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
<!DOCTYPE html>
<html>
<head>
<title>This is London</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
</head>
<body>
<div id="nav">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Getting around</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- End of nav -->
<div id="header">
<div id="header-text">
<h2>
Visiting London has never been easier with these ideas.
</h2>
<p>The capital of the United Kingdom is a thriving multicultural metropolis. The contrast between the spectacular historic sights and the lively cultural scene makes a visit to London an interesting and exciting adventure. </p>
</div> <!-- End of header-text -->
</div> <!-- End of header -->
<div id="middle">
<div id="mid-text">
<h1>- Getting around in London -</h1>
<h5>One of the world's most visited cities, London has something for everyone: from history and culture to fine food and good times.</h5>
<p>Immersed in history, London's rich seams of eye-opening antiquity are everywhere. The city's buildings are striking milestones in a unique and beguiling biography, and a great many of them – the Tower of London, Westminster Abbey, Big Ben – are instantly recognisable landmarks. There’s more than enough innovation (the Shard, the Tate Modern extension, the Sky Garden) to put a crackle in the air, but it never drowns out London’s seasoned, centuries-old narrative. Architectural grandeur rises up all around you in the West End, ancient remains dot the City and charming pubs punctuate the historic quarters, leafy suburbs and river banks. Take your pick.
Art & Culture
A tireless innovator of art and culture, London is a city of ideas and the imagination. Londoners have always been fiercely independent thinkers (and critics), but until not so long ago people were suspicious of anything they considered avant-garde. That’s in the past now, and the city’s creative milieu is streaked with left-field attitude, whether it's theatrical innovation, contemporary art, pioneering music, writing, poetry, architecture or design. Food is another creative arena that has become a tireless obsession in certain circles.
Diversity
This city is deeply multicultural, with one in three Londoners foreign-born, representing 270 nationalities and 300 tongues. The UK may have voted for Brexit (although the majority of Londoners didn't), but for now London remains one of the world's most cosmopolitan cities, and diversity infuses daily life, food, music and fashion. It even penetrates intrinsically British institutions; the British Museum and Victoria & Albert Museum have collections as varied as they are magnificent, while the flavours at centuries-old Borough Market run the full global gourmet spectrum.
A Tale of Two Cities
London is as much about wide-open vistas and leafy landscape escapes as it is high-density, sight-packed urban exploration. Central London is where the major museums, galleries and most iconic sights congregate, but visit Hampstead Heath or the Queen Elizabeth Olympic Park to flee the crowds and frolic in wide open green expanses. You can also venture further out to Kew Gardens, Richmond or Hampton Court Palace for beautiful panoramas of riverside London followed by a pint in a quiet waterside pub.</p>
<div id="img-mid">
<a href="https://goo.gl/maps/PSDhvQ25fRZBqWHC8" target="_blank">
<img src="images/Feature-images.jpg" alt="Map">
</a>
</div><!-- End of img-mid -->
</div> <!-- End of mid-text -->
</div> <!-- End of middle -->
<div id="footer">
<div class="credits">
<div class="credits_left">
<h6> Designed by Alba Heidari</h6>
</div>
<div class="credits_right"><img src="https://www.arct.cam.ac.uk/images/instagram-icon/image" class="social_icon">
</div>
</div> <!-- End of footer -->
</body>
</html>
Add this to your css file:
#img-mid{
height: 300px;
width: 300px;
}
#img-mid img{
max-width: 100%;
max-height: 100%;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
I'm essentially trying to create a div which includes a title, an image, description and some social media buttons. I want multiple instances of the same div on the website. Creating sort of like a meet the team page. However, I'm not getting everything to position properly. Using Mozilla Firefox editor, I realize the image isn't contained into the div. What could be the cause of this? I want them to line up one after the other with space in-between.
Current view of webpage:
Div not contained in webpage:
HTML snippet:
<div>
<h2> DJ Name 1 </h2>
<img class="djimage" src="dj1.png" alt="Smiley face">
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. <p>
</div>
<div>
<img class="djimage" src="dj1.png" alt="Smiley face">
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. <p>
</div>
I've taken out the social media buttons section because I don't think that is relevant at this point.
CSS snippet:
.djimage{
height:400px;
position: absolute;
margin-left:20%;
}
.about {
margin-left:50%;
text-align:left;
float: right;
width: 284px;
z-index: 1;
position: absolute;
font-size :14px;
font-family: Arial;
}
h2 {
margin-left:50%;
position: absolute;
text-align:left;
float:right;
}
After reading your code, I found that you have not closed your paragraphs correctly.
After the first paragraph, you have ended it with <p> instead of </p>, and the same for the second paragraph. This may mess up the alignment because you are initializing a paragraph inside a paragraph, twice, and not even closing the tags. Try fixing them and the images may align properly.
You can try class row:
<div class="row">
<h2> DJ Name 1 </h2>
<img class="djimage" src="dj1.png" alt="Smiley face">
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he.
</p>
</div>
Or add a div tag with class clearfix as this:
<div>
<img class="djimage" src="dj1.png" alt="Smiley face">
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he.
</p>
<div class="clearfix"></div>
</div>
CSS
.row:after {
content: "";
clear: both;
display: block;
}
.clearfix {
clear: both;
height: 0;
line-height: 1px;
font-size: 1px;
}
And you need to replace <p> by </p> at close tag position
I am trying to get my html website page to have the "Most Beautiful Theorem?" section on the right side. However, I can't figure out how to do that. Right now it is just showing up under all my other headings like normal but I want it on the right side of the page as a separate column. If you could help me that would be great. Thanks!
here's the coding I have now:
<!DOCTYPE html>
<html lang="en">
<!-- Math High home page
McLain-Graning MaKayla, CSIS 140, Fall 2015
-->
<head>
<meta charset="utf-8" />
<title>Math High</title>
<link href="css/MathHighStyles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<img src="images_MathHigh/mhlogo.jpg" alt="Math High"/>
<h2>Leonhard Euler (1707-1783)</h2>
</header>
<section>
<article>
<p>
The greatest mathematician of the eighteenth century,
<strong>Leonhard Euler</strong> was born in Basel, Switzerland. There,
he studied under another giant of mathematics, <strong>Jean
Bernoulli</strong>. In 1731 Euler became a professor of physics
and mathematics at St. Petersburg Academy of Sciences.
Euler was the most prolific mathematician of all time,
publishing over 800 different books and papers. His
influence was felt in physics and astronomy as well.
</p>
</article>
<p>
He is perhaps best known for his research into
mathematical analysis. Euler's work,
Introductio in analysin infinitorum (1748),
remained a standard textbook in the field for
well over a century. For the princess of Anhalt-Dessau he wrote
Lettres a une princesse d'Allemagne (1768-1772),
giving a clear non-technical outline of the main
physical theories of the time.
</p>
<p>
One can hardly write a mathematical equation without
copying Euler. Notations still in use today, such
as e and pi, were introduced
in Euler's writings. Leonhard Euler died in 1783,
leaving behind a legacy perhaps unmatched, and
certainly unsurpassed, in the annals of mathematics.
</p>
</section>
<aside>
<h1>The Most Beautiful Theorem?</h1>
<p>Euler's Equation:</p>
<p>cos(x) + i*sin(x) = e to the power (i*x)</p>
<p>demonstrates the relationship between algebra,
complex analysis, and trigonometry. From this
equation, it's easy to derive the identity:
</p>
<p>e to the power (pi*i) + 1 = 0</p>
<p>which relates the fundamental constants:
0, 1, pi, e, and i in a single beautiful and
elegant statement. A poll of readers
conducted by The Mathematical Intelligencer
magazine named Euler's Identity as the
most beautiful theorem in the history of
mathematics.</p>
<p>Math High: A Site for Educators and Researchers</p>
</aside>
</body>
</html>
Give the h1 element an id or a class name and add a CSS style to make the heading float.
See http://www.w3schools.com/css/css_float.asp
I searched this site for 2 days and applied probably every single example of code I found, but I can't simply move div to the bottom on my site. Here's the simpliefied code
<!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" xml:lang="en" lang="en">
<head>
<style media="screen" type="text/css">
*{margin:0;padding:0}
body{font-family:Tahoma,Verdana,Arial,sans-serif;background-color:#000;border:none;margin:0 auto}
#site{background-color:#fff;width:980px;border:0;margin:0 auto}
#whitefill{background-color:#FFF;height:inherit}
#left{width:260px;font-size:12px;height:100%;float:left;background-color:#fff;}
#right{width:720px;float:right;height:100%;background-color:#fff;font-size:13px}
</style>
</head>
<body>
<div id="site"><div id="whitefill">
<div id="left">
<div>move me to bottom!</div>
</div>
<div id="right">
<div id="main">
<p>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.
By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.</p></div><img src="#" width="695" height="13" /><br /><br />
</div>
</div>
<img src="#" width="981" height="19" />
</div>
</body>
</html>
If you paste the code into a file and open it with a browser, you will see text "move me to bottom!" displayed at the top. I need it to be displayed at the bottom of the left column. How can I do that?
Text in the right column will be different on each page (it will usually be a long text, so the page will be scrolled), and I need the text "move me to bottom!" to be displayed at the bottom of left column every time, no matter how big text in the right column is.
Thank you.
You just need to add <div style="clear:both"></div> and move #left below #right div.
<div id="right">
<div id="main">
<p>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.
By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.</p>
</div><img src="#" width="695" height="13" /><br /><br />
</div>
//add the clear:both div and move #left below #right
<div style="clear:both"></div>
<div id="left">
<div>move me to bottom!</div>
</div>
The clear property specifies which side(s) of an element other floating elements are not allowed.
You can find more detail of it here http://www.w3schools.com/cssref/pr_class_clear.asp