Image of what i plan to do:
Need help to actually add those kind of text box so i can type in it. i am currently only using field set but i have no ideal on how to give it a location. If anyone have any ideal on how to do it please do teach me..
-A beginner at codding.
<html>
<head>
<title>Assignment 2 </title>
<!-- -->
</head>
<body>
<center><h1 Style=color:Lime> Movie review<h1></center>
<img src="movie logo.jpg" width="200" height="200" border="2" alt="Logo">
<br>
<fieldset>
Commedy movie
</fieldset>
<hr>
<center>
For more Movies Review click here.
</center>
</body>
</head>
you will have to learn to use some tools and there are many different way to do that. You can use html tables to position blocs where you want or the framework bootstrap or flexbox.
For basic stuff I think flex box should be faster for you: an example:
<!DOCTYPE html>
<html>
<head>
<title>Assignment 2 </title>
</head>
<body>
<div style="display: flex; justify-content: center">
<div style="height: 100px;width: 100px; background-color: aqua; margin: 15px;">Bloc 1</div>
<div style="height: 100px;width: 100px; background-color:coral; margin: 15px;">Bloc 2</div>
</div>
</body>
</html>
Related
Hi I am very new to html so I am having trouble understanding the examples online.
I want text either aligned under my images or to the right of the image. (see picture for reference)
Here is my current html code
<!-- reference https://stackoverflow.com/questions/35755237/displaying-3-images-in-a-row-with-text-underneath-in-bootstrap -->
<!-- https://www.w3schools.com/howto/howto_css_image_center.asp -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<section class="part2">
<div class="container">
<div class="row">
<div class="text-center">
{% for element in range(size) %}
<img alt="" class="resize-image" src=" {{url_for('send_image', filename=image_names[element])}}" style="width:20%">
<p>{{test[element]}}</p>
{% endfor %}
</div>
</div>
</div>
</body>
</html>
You should use "text-align: right;" in your css. If you haven't learned css yet, you absolutely should. Html is only meant for the structure of your site, while css is for the styling.
I'm just trying to make my CSS work with my HTML code but it's not working for some reason. I think I did everything correctly...maybe its just my browser? I'm on a mac using TextWrangler, testing with Safari/Chrome. Here is the code:
<!DOCTYPE html>
<html>
<head>
<div id="heading" name="heading" title="topbar">
<h2> Welcome to our website </h2>
<style type="text/css">
#bottom{
width:70px
color:green
align-content:center
}
</style>
</head>
<body>
<div id="bottom" name="bottombar" title="bottombar">
<h2>Welcome to our website </h2>
</body>
</html>
You cannot put <div> in the head section, here is the modified code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#bottom{
width:70px;
color:green;
align-content:center;
}
</style>
<title></title>
</head>
<body>
<div id="heading" title="topbar">
<h2>Welcome to our website</h2>
</div>
<div id="bottom" title="bottombar">
<h2>Welcome to our website</h2>
</div>
</body>
</html>
You forgot the closing semi-colons in the css ; and also forgot to close your divs, hope this helps.
There are so many things wrong:
Your head should not contain div tags
You forgot semicolons at the end of your CSS attributes
div should be closed (</div>)
Your divs are missing their closing tags i.e. </div>
I'm also not sure why you duplicate the div in the head. it should only be in the body.
I'm doing a sample webpage, but the results aren't coming along as I'd planned. What's supposed to happen is a black rectangular header box is supposed to show. I'll give you the sample code.
HTML CODE / learningcss.html
<!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">
<head>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
</head>
<p>
We are creating this page to see how to make a better looking website.
</p>
<p>
We are creating this page to see how to make a better looking website.
</p>
<div id="header">
This is a paragraph
</div id="header">
<body>
<div id="column 2">
<h1>The Header</h1>
</div>
<div id="Column 2">
This is a basic CSS<br>
<br>
Tokyo<br>
</div>
<div id="Column 3">
<h1><a href="<a href="http://gymforgeeks.userecho.com/http://gymforgeeks.userecho.com/">
This is GymForGeeks
</h1>
<p>
This is just a sample page using CSS.
</p>
<p>
Yet another sample text content.
</p>
</div>
<div id="footer">
Copyright Queensborough
</div>
</body>
<body>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: <a href="mailto:someone#example.com">
someone#example.com</a>.</p>
</footer>
</body>
</html>
div.css
#Header {
background:#000;
height:100px
}
#header {
color: white
}
You have to close an opened div with only </div> not </div id="header">
CSS is is casesensitive so you have to use #header not #Header
And you can combine those two definitions:
#header {
background:#000;
height:100px;
color: white;
}
Hope i could help a little.
I cleaned up your mess a little further:
http://codepen.io/anon/pen/qacAg
Explanation:
after you closed the </head> you have to open a <body>
this is how a working link looks like: TEXT
you should only use id's for unique areas or divs not multiple times - use classes instead <div class="THECLASS">THE CONTENT</div>
dont use spaces in classes or id names it will create multiple classes
Your code is totally wrong:
1) body is the starting element, after /head, and that is the last element before /html and use it only once.
2) When you close the div, no need to add id.
3) Id should be one string
4) You use a href badly
5) You do not close your css
See this: http://jsfiddle.net/7uggw2x6/1/
HTML
<!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">
<head>
....
</head>
<body>
<p>We are creating this page to see how to make a better looking website.</p>
<p>We are creating this page to see how to make a better looking website.</p>
<div id="header">This is a paragraph</div>
<div id="column_1"><h1>The Header</h1></div>
<div id="column_2">This is a basic CSS<br><br>Tokyo<br></div>
<div id="column_3">
<h1>This is GymForGeeks</h1>
<p>This is just a sample page using CSS.</p>
<p>Yet another sample text content.</p>
</div>
<div id="footer">Copyright Queensborough</div>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: someone#example.com./p>
</footer>
</body>
</html>
CSS
#header {
background:#000;
height:100px;
color: white;
}
This is the valid version of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS Tutorial 1</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>We are creating this page to see how to make a better looking website.</p>
<p>We are creating this page to see how to make a better looking website.</p>
<div id="header">This is a paragraph</div>
<div class="column-2">
<h1>The Header</h1>
</div>
<div class="column-2">This is a basic CSS<br><br> Tokyo<br></div>
<div class="column-3">
<h1><a href="<a href="http://gymforgeeks.userecho.com">This is GymForGeeks</h1>
<p>This is just a sample page using CSS.</p>
<p>Yet another sample text content.</p>
</div>
<div id="footer">Copyright Queensborough</div>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: someone#example.com.</p>
</footer>
</body>
</html>
Some things you should know:
you should not have multiple elements with the same id
any HTML page can only have 1 body element
id must be string and should not contain spaces. e.g. column-3
any HTML tag (p, div, footer, span, ..) must be inside <body></body> tag
use classes if you want to apply same style to multiple elements
In order to make your elements appear in columns you will need to use a grid framework (getbootstrap.com, 960.gs, ..) or create your custom CSS that will order your elements:
e.g. style.css:
.column-2 {
float: left;
width: 20%;
}
.column-3 {
float: left;
width: 30%;
}
This is only an example. You will need to do some digging until you get to your desired grid.
You should use in your CSS-File following style:
#header {
background-color: #000;
color: #FFF;
height: 100px;
}
You can learn the Basic of HTML and CSS at www.w3schools.com.
I hope I could solve your problem.
Regards
t.koelpin
you have a few problems. The structure of your html is incorrect. the footer element goes inside
the body tag. You have to have a closing tag for your divs and your content goes in the middle.
<!DOCTYPE html>
<html>
<head>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
<!-- this section is for loading scripts, css and metadata -->
</head>
<body>
<!-- this section is for content -->
<div class='header'>
Header text
</div>
<footer>
<!-- footer tags are HTML5 Tags and should be used with the HTML5 doctype -->
</footer>
</body>
</html>
The css
#header {
background:#000;
height:100px;
color: white;
}
My name is Will and I'm coding a website for some folks. I've ran into a bit of an error. No matter what sort of code I use, the website will not adjust it's self correctly to the page. For example, this is what it looks like on a large screen:
http://i.stack.imgur.com/B5KLX.jpg
Generally, looks alright. However, the massive space in between the two elements on the sides are awful and create an enviroment of poor contrast and spacing in my opinion.
Here is how it looks on a small screen:
http://i.stack.imgur.com/y0HFI.jpg
Also generally looks alright. Accept for the missing scroll bar that should be to the right. The picture taken from the smaller computer is how I'd like the site to look on all computers, though I need a scroll bar for it.
Here is the code for that page:
<HTML>
<HEAD>
<h1><font color="#000000" size="+1"><marquee direction="right" bgcolor="green" scrollamount="3">Website BETA: Version 1.0</marquee></font></h1>
<link rel="stylesheet" type="text/css" href="css.css">
<div class="fadeIn">
<center>
<div style="display: inline-block;" id="red">
<h1>Hinte's </h1>
</div>
<div style="display: inline-block;" id="white">
<h1>Liberty </h1>
</div>
<div style="display: inline-block;" id="blue">
<h1>Theatre</h1>
</div>
</center>
</div>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='active'><a href='art.html'><span>Art</span></a></li>
<li class='active'><a href='biography.html'><span>Biography</span></a></li>
<li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>
<link rel="shortcut icon" href="favicon.ico">
</HEAD>
<br>
<br>
<br>
<body background="grayscale.jpg">
<div style="position:fixed;top:20em;left0em;right:4em;" id="text60">
<p>Gary Edward Hinte</p>
</div>
<div style="position:fixed;top:26em;left0em;right:7em;" id="text30">
<p>American Political Artist</p>
</div>
<div style="position:fixed;top:22em;left:1em;right:40em;">
<img class="grayBox" style="border: 0px solid black;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;" width="600px" height="500px" src="JulianA.jpg">
</div>
</body>
<title>HLT - Home</title>
</HTML>
<html>
<head>
<title>HLT - Home</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--All of your content in here-->
</body>
</html>
I would appreciate if you put the stylesheet too, also, don't copy and paste your whole document. Just the parts you are having trouble with
I would recommend a few HTML and CSS tutorials. You have the wrong idea. a body element is where ALL the content goes besides imports and stuff. The head element is where imports and titles and stuff go, NOT CONTENT YOU WANT TO DISPLAY.
And lastly, I'm confused on why you're even using a stylesheet. It seems you're using all these old methods for styling in HTML. Such as: center and font and you're apply most of your styles directly into the element.
To center it like you want on your smaller picture. I would add a max-width: 1280px; to your styles, or make a container DIV with a specified width around all of your content in your body section.
Hope this helped
Try creating a wrapper and putting your div's in the BODY like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>HLT - Home</title>
</head>
<body>
<h1><font color="#000000" size="+1"><marquee direction="right" bgcolor="green" scrollamount="3">Website BETA: Version 1.0</marquee></font></h1>
<div id="wrapper">
<div class="fadeIn">
<center>
<div style="display: inline-block;" id="red">
<h1>Hinte's </h1>
</div>
<div style="display: inline-block;" id="white">
<h1>Liberty </h1>
</div>
<div style="display: inline-block;" id="blue">
<h1>Theatre</h1>
</div>
</center>
</div>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='active'><a href='art.html'><span>Art</span></a></li>
<li class='active'><a href='biography.html'><span>Biography</span></a></li>
<li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>
<link rel="shortcut icon" href="favicon.ico">
</HEAD>
<br>
<br>
<br>
<body background="grayscale.jpg">
<div style="position:fixed;top:20em;left0em;right:4em;" id="text60">
<p>Gary Edward Hinte</p>
</div>
<div style="position:fixed;top:26em;left0em;right:7em;" id="text30">
<p>American Political Artist</p>
</div>
<div style="position:fixed;top:22em;left:1em;right:40em;">
<img class="grayBox" style="border: 0px solid black;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;" width="600px" height="500px" src="JulianA.jpg">
</div>
</div> <!--closing wrapper-->
</body>
</html>
And add this to your css file
#wrapper {
width:1200px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
Im sorry but your website is setup all wrong. try this.
<html>
<title>Page Name</title>
<meta tags />
<styles that you need to link to />
<body>
anything you want people to see goes here!!!
<scripts go here />
</body>
</html>
Also it is impossible to help you with out your css and for your elements to be properly displayed they must be put like I showed you.
If you want your site to look the same or somewhat the same you need to use %%%% to style your elements so they are responsive to the window size.
To align your elements look into useing: position, margin, padding, left right top and bottom.
I want to link my css code with the html code for my website. I am using Aptana Studio 3. It appears to work, but when I preview it in Aptana my css styling does not show up. Here is my code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
And my css code:
.body {
font-family: cursive;
}
When I preview it, the css style doesn't show up.
All my files are saved in the same folder so I don't know why this is not working. Thanks in advance for your help.
.body refeers to a container with a body class, if you want to be applied to the body tag remove that dot
body { font-family: cursive; }
.some its applied to class="some"
#some its applied to id="some"
some its applied to <some></some>
You can not set the font family in the body.
Html code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left" class="navagation">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
Css:
.navagation{
font-family: cursive;
}