Not all of my text is aligning the way I want it to the second line that I want to align in at the bottom of the image still but I want it to be on the next line beneath the first. I am new to all of this CSS stuff and this project is for my history class so help is very appreciated as always!
This is my HTML:
<html>
<head>
<title>Biography</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<a href = home.html>Home</a>
<a href = bio.html>Biography</a>
<a href = campaign.html>Campaign</a>
<a href = pp.html>Political Platform</a>
<body>
<p>
<img src= images/william.jpg/ height = 300 width = 300>
Sir William Higgins was born on 02/02/1987. He was top of his class at Horn E.U.He was the number one draft choice for the MLB in 2000 and has won every golden globe award ever.
</p>
</body>
</html>
This is the code on my CSS stylesheet:
img {
border: solid 2px black;
vertical-align: text-top;
}
a {
display: inline-block;
font-family: curier;
}
p {
vertical-align: text-top;
}
There are a number of problems with your code:
The <a> tags must be in the <body> tag.
The <img> tag must be outside of the <p>.
To separate the links and the image, I put in a <br>.
All attributes must MUST be in double quotes. For example, on the href attribute, the URL must be in quotes.
Here is a working JSFiddle
Here is what the HTML should be:
<html>
<head>
<title>Biography</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
Home
Biography
Campaign
Political Platform
<br>
<img src="images/william.jpg/" height="300" width="300">
<p>Sir William Higgins was born on 02/02/1987. He was top of his class at Horn E.U.He was the number one draft choice for the MLB in 2000 and has won every golden globe award ever.</p>
</body>
Your CSS is fine.
If you also want your links to be on top of each other, add a <br> after each </a>.
EDIT: To make the links appear on top of one another, it would be better if you put the links into a <nav> tag like this:
<nav>
<li>Home</li>
<li>Biography</li>
<li>Campaign</li>
<li>Political Platform</li>
</nav>
and then style them using this CSS:
nav li {
display: block;
}
nav {
list-style-type: none;
}
JSFiddle with nav tag.
As said your markup is not valid.
If you want your links under each other, just insert a <br> after each link
Related
I was doing research and found out that you are only supposed to have one <body> tag, which after learning that I proceeded to clean up my code because I had 3 different set of body tags and by removing the tags to where I only had one set I messed it up to where it no longer aligns my footer properly.
Sorry if this is a silly issue, I am 15 and I started learning html 3 days ago at this point.
I have tried putting the footer outside of the boundary of the <body> tag and tried putting the class within a div tag right after the first footer tag.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<title> Hub </title>
<h2 style="text-align:center">Home</h2>
<p style="text-align:center"> Welcome to my test website.
<i><b><br> (Currently Under construction) </b></i>
</p>
<p> </p>
<p style="text-align:center">
<a href="https://youtube.com">
<img border=0 src="youtube.png" width="100" height="70"> </a>
</p>
<p></p>
<p class="center">
<img src="razer.jpg" width="640" height=360>
</p>
<br>
<footer class="footer">
Home
About
Contact
Projects
</footer>
</body>
</html>
Here is the css class
.footer {
background-color: white;
color: Orange;
margin: 20px;
padding: 20px;
align-items: center;
text-decoration: none;
}
I expected it to stay aligned with the center, but it ended up reverting to text with no alignment.
Welcome!
Here's a little jsFiddle to help simplify the code a bit - and just to show you how that works.
https://jsfiddle.net/sheriffderek/5Lros2h4/
Here's the basic HTML structure:
<!doctype html>
<html>
<head>
<title>My project</title>
<link rel="stylesheet" href="styles.css">
<style>
.site-footer {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Header stuff</h1>
</header>
<main>
<p>Stuff</p>
</main>
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
</body>
</html>
You'll spend most of your time in the body - and like you said - you wouldn't have more than one of those tags.
I suggest you keep you css in the css file - or in the styles tag in the head.
For your question - we basically just need to see this in order to help:
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
Your align-items: center is a flex-box declaration. You might mean text-align: center
Check out these resources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Learn about the box-model and the display types first - and then position and you'll be on the right path. Join a chat-room for something like CSS https://discord.gg/pFc6XmH
and later... when you're feeling ready - watch this: https://flexbox.io
Keep your examples as simple as possible and you'll get the most help. : )
I'm not actually what you mean, but if you want to make the a-tag to be in the middle, you can use
footer{text-align:center;}
But if you want to make each of your a-tag to be separated and in the middle. you should just make the a-tag a block element. You can put it by adding in css
a{ display:block; }
I am a first time HTML user and need help to center my current navigation bar:
http://i.stack.imgur.com/czpJr.jpg
The code for it is as follows:
<!DOCTYPE html>
<html>
<head>
<title>large background</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<!div class="navBar">
<ul>
<li><h2>ABOUT</h2></li>
<li><img src="ICON.jpg" width="60" height="60"></li>
<li><h2>MUSIC</h2></li>
</ul>
<!/div>
</body>
</html>
With the relevant parts of the external stylesheet in this image(couldn't get it to work as a code block - noob me):
http://i.stack.imgur.com/JaIah.jpg
Please help me work out to make this navigation bar appear in the center of the page, and not on the left. I have tried changing the float left in the CSS but all is does is make the nav bar appear vertically not horizontally, and it still appears on the left :(
Thanks,
Sam
to comment out HTML use this syntax (you're missing the dashes):
<div> this WILL show and be rendered </div>
<!--div> this WILL NOT show or be rendered </div-->
adding "float: left" to the li elements is forcing your elements to align to the left. To get the nav items to appear horizontally, use "display: inline-block;" instead. Also, you are using "align"... it shoudl be "text-align".
Example in codepen!
http://codepen.io/Drodarious/pen/bdmavb
U can center your element like this(see example below: with the text align center on the ul).
u could also, provide a width to the ul, for example 300px , and then add margin:0 auto; margin auto won't work on a block element without setting its width. or you should use inline-block;
(http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Ps As h1 is a block element and a is an inline element the correct way is
<h1>This is a title</h1>
, when using the header.
Though because is a block element it will take up all available space, meaning, all list items will still be underneath eachother, so specify the space it should take.
header nav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
header nav ul li {
display: inline;
}
header nav ul li a {
text-decoration: none;
}
<html>
<head>
<title>large background</title>
</head>
<body>
<header>
<nav>
<ul>
<li>ABOUT
<li><img src="ICON.jpg" width="60" height="60">
<li>MUSIC
</ul>
</nav>
</header>
</body>
</html>
I suggest reading about: http://learnlayout.com/display.html
Hope this helps you a bit.
I am having a really odd situation here. I have spent the last 7 hours researching why I cannot get display: inline; to work at all, unless it's on my main page. Nothing seems to be helping.
Here is the relevant coding.
<!DOCTYPE html>
<html>
<head>
<title>Contact Info</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="name">
<p>*****<p>
Go Back
</div>
<div class="contact">
<p>
<span style="color:#000000">By Phone:</span>
**********
</p>
<p>
<span style="color:#000000">By Email:</span>
****#****.ca
</p>
<p>
<span style="color:#000000">By Mail:</span>
<span style="color:#3300cc">***************</span>
</p>
</div>
</body>
And here is the CSS.
.name {
display: inline;
}
The result is the two items, (The name "****" and the "Go Back" link), appear one on top of each other. I have tried making it a list, but that had no effect. I tried making them both links, but that had no effect. display: inline-block; also has no effect. Nothing I do has any effect on the div class name. I tried changing the name of the div class several times no effect.
The problem here is the the <p> tag is also a block level element. One solution would be to add a style such that a <p> within the .name div is also inline
.name, .name p {display: inline;}
See https://jsfiddle.net/t0z2p9bn/
It would be better to change your html such that the stars are not contained within a <p> tag
<div class ="name">
*****
Go Back
</div>
See https://jsfiddle.net/t0z2p9bn/1/
divs should not be used for inline elements. Did you mean to use a span?
There is a typo - it shouldn't make a difference, but there's an unneeded space after "class" here:
<div class ="name">
Any tag (p>, div>, h3>) inserted as a first tag inside section> #firstentry adds empty line above header. Checked all CSS, no it's HTML. If I remove div> (marked with **** in the code sample) the empty line disappears. Same if I use any other tags, except b>, and same with other pages. I think I'm doing something wrong in the #firstentry section.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Anna Putane | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
</header>
<div id="wrapper">
<section id='firstentry'>
****<div class="entry">****
<b style="font-size:19px;">How I became</b>
<p>Like many of us, I've been dreami
The float: left; property in your CSS header selector is responsible for the empty space above the header.
float:left indicates that the header should float the following content on the left side. So the header and section should be displayed side by side. If that is so, the margin-top of your entry class goes through the section and you have the empty space above the header. Just because you have set the header to width: 100%; the containers are stacked: Here is a stripped down jsfiddle: http://www.jsfiddle.net/9D4x6/7. For much more details on the CSS box model see: http://www.w3.org/TR/css3-box.
In your demo, in the css on line 190 you have
.entry{
margin-top: 40px;
}
I commented it out here, and left the <div class="entry"> in. Is this what you wanted? http://jsfiddle.net/9D4x6/5/
When I run my (very basic) page in Chrome, it shows the title and list in the correct size, colour and position. Also the background image fits to the screen. But when I run my page in FF or IE, there is no background image and the title and list haven't got my CSS position, colour or size.
I have copied my code below. My question is: how can I make my title and list show up on my web page in all/most browsers in the correct size, colour and position to what I have set it to in my CSS? Also for the background image to be shown as well. I hope this isn't too general. Please help!
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
<title> Fifa Stream </title>
</head>
<body>
<h1 id="Title1"> <font color="grey"> Fifa </font color> <font color="red">Stream </font color></h1>
<nav class="IndexList">
<li> Home <br> <br> </li>
<li> Youtube <br> <br> </li>
<li> About Us <br> <br> </li>
<nav>
</body>
</html>
And this is my CSS:
body {
font-family: "proxima-nova",sans-serif;
background:url(fifa13messi.png);
-moz-background:url(fifa13messi.png);
background-size:100%;
-moz-background-size:100%; /* Old Firefox */
background-repeat:no-repeat;
}
#Title1 {
position:relative;
left:5%;
top:5%;
font-size: 3em;
}
.IndexList {
list-style: none;
position:relative;
left:5%;
top:40%;
font-size:2em;
font-weight: 600;
letter-spacing: -1px;
}
a {
color:white;
text-decoration: none;
}
It would a great help if anyone could explain where or why I'm going wrong.
Because <li> elements can't be children of the <nav> element - they can only be children of the <ul> or <ol> elements...
The type attribute should be text/css, not txt/css. IE and Firefox are (correctly) rejecting it for the mismatch.
First thing I want to say is try to do smart work, use some html eiditor, like dreamweaver or some other that provide hints forcodig.
Now point by point here are list of problems in you coding
Type attribute for link css should be text/css. Not. Txt/css
Try to close tags just after creating it. This will always make shure all tags are closed. Bcz your nav tagi not closed,but created two nav tags without closing them.
Li tag should be wrapped with 'o' or 'ul'
Thanks.
Your <nav> tag needs a </nav> closing tag, not a second <nav>.