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.
Related
What I mean is, my image gallery (that a made using html code from a premade template that I found in the internet) is like this, all pictures have different sizes:
But with Instagram, they all look the same size:
My question is: How do I make all images have the same size? Is there a already made template somewhere?
Edit: It seems that even if pictures have different sizes, which is expected, Instagram kinda "crops" the image and shows only a portion of it to keep the same size, but not making it distorced. This is what I want...
Set a specific height and width to all the images, You can do this using CSS:
<style>
img {
height: 100px;
width: 100px;
}
</style>
This Should Help
body{
background: black;
}
.style{
float: left;
padding: 10px;
}
img {
height: 150px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
</body>
</html>
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>
I have added some bootsstrap to my django template and that works fine - but yet when I add my own css and it doesn't have an effect on the page; no errors are produced.
I have a personal web app with a dir static/personal/images/bg01.png
The image isn't loading and the ul isn't being put inline.
views.py:
def index(request):
return render(request, 'personal/home.html')
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deps</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
background-image:url('{{ STATIC_URL }} personal/images/bg01.png');
li{
display:inline;
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/images/bg01.png' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>Programming, Teaching, Entrepreneurship</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
In your style block, the background-image property isn't nested within a selector. If you wanted that to also be applied to the html/body, just move it up into the curly braces (and add a semi-colon after the height property); otherwise, add an appropriate selector to apply the property to instead.
You may also need to remove the space after {{ STATIC_URL }} so you don't end up with a space in the image path.
<style type="text/css">
html,
body {
height:100%;
background-image:url('{{ STATIC_URL }}personal/images/bg01.png');
}
li {
display:inline;
}
</style>
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;
}
I have the following issue.
I have a headline in a jumbotron with Boostrap. Now I want to dock a image centered to the bottom.
I tried some other ways shown on stackoverflow but nothing seems to work.
Here is the code: http://jsfiddle.net/S298j/3/
Code Issue:
<div class="jumbotron-main">
<h1>
HERE IS MY HEADLINE
</h1><br>
<h2>
HERE IS MY SUB HEADLINE
</h2>
<img src="imageskIsFb.png"/>
</div>
Try this:
Wrap your img in a container like so, with the class of "center-block".
<div class="center-block">
<img src="http://i.epvpimg.com/kIsFb.png" />
</div>
This will center align the img below the heading text.
Next add some custom styling. This code gets you close. Play with the dimensions.
.jumbotron-main img {
width: 100%;
max-width: 600px;
}
<html>
<title>test</title>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron-head {
background-color: #242729;
height: 80px;
margin: auto;
background-size: cover;
}
</style>
</head>
<body style="background-color: #C6491A;">
<div class="jumbotron-head">
<h1 class="text-center" style="font-size:80px;color:white;">Guild Hosting</h1>
</div>
<div class="container">
<h1 class="text-center"style="color:white;">HERE IS MY HEADLINE</h1>
<h2 class="text-center"style="color:white;">HERE IS MY SUB HEADLINE</h2>
<img src="http://i.epvpimg.com/kIsFb.png" style="padding-top:170px;padding-right:50px;" align="middle"/>
</div>
</body>
</html>