I'm doing a simple test website to practice html. These are the image align variants I've tried that haven't worked:
<style type="text/css">
img {
image-align: center;
border: 2px dashed gray;
height: 200px;
width: 140px;
}
</style>
<img src="images/htmlphoto2.jpg" alt="profile pic of man wearing tie" align="middle"/>
<style type="text\css">
img {
margin-right: auto;
margin-left: auto;
}
<style type="text\css">
img {
display: block;
margin: 0 auto;
}
</style>
full code: I'm using a combination of internal style sheet and inline styling for practice.
<!-- autobiobrevio -->
<!-- 8/21/14 11:00 - 11:50 Structure completed -->
<!--8/23/14 10:00 pm - Alignment -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>biosite</title>
<style type="text/css">
h1 {
text-align: center;
}
img {
image-align: center;
border: 2px dashed gray;
height: 200px;
width: 140px;
}
</style>
</head>
<body>
<h1> Steve's Autobiobrevio </h1>
<img src="images/htmlphoto2.jpg" alt="profile pic of guy wearing tie" />
<br>
<br>
<table>
<tr>
<td>
<ul> <span style="font-family: Impact"> De moi </span>
<li> Born October 1972 </li>
<li> CT </li>
<li> blah blah blah </li>
</ul>
</td>
<td>
<ul> <span style="font-family: Impact"> Hobbies </span>
<li> Guitar </li>
<li> HTML </li>
<li> Hiking </li>
</ul>
</td>
<td>
<ul> <span style="font-family: Impact"> Fav Guitarists </span>
<li> David Gilmour </li>
<li> Muddy Waters </li>
<li> Dave Navarro </li>
</ul>
</td>
</table>
<div style="width: 800px; height: 100px; background-color: red" </div>
</body>
</html>
Thank you.
Can you provide the full html code?Anyway
First remove align="middle " and try this even if it's similar to yours
img{
display:block;
margin:auto;
}
try to add display:block to your
html :
<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie" align="middle"/>
css :
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
JSFIDDLE DMEO
I solved my problem by using the inline style tag:
But why didn't the inline style sheet work?
Try this,It Will definately work..
Image Code :
<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie"/>
Here goes the css :
<style type=text/css>
img.displayed {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>
Hop it will work for you too..
You can also try:
<style type="text/css">
img {
position:absolute;
border:2px dashed gray;
height:200px;
width:140px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
Related
So I'm trying to create a portfolio site for my students but I have a problem. Pls can someone explain to me why
The font size of the list tag and below are so small in Google chrome. If I open my code with Google chrome it seems to me there is uneven font size for text for no reason as I haven't set any font size for anything yet, pls I need help on this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
<title>programming tutorials Website</title>
<style type="text/css">
body {
background-image: url(white.jpg);
background-size: cover;
color: black;
font-weight: bold;
}
p {
display: inline-block;
position: relative;
z-index: 3;
}
h2 {
text-align: left;
}
.hello {
width: 110%;
height: 100%;
}
/* .you{
postion:relative;
top:0%;
float:right;
float:top;
transform:translatey(-80%) translatex(4%) scaley(.7);
/* margin:0px;
display:block;
z-index:-1;
opacity:0.2;
width:110%;
}
h2 h1{
font-size:100%;
border:0px;
margin:0%;
}
.boxofwel, .smile{
margin:0px;
border:0px black solid;
font-size:120%;
}
.smile{
margin:0%;
width:40%;
}
.wel{color:purple;
}
table{
margin-bottom:10%;}
ol{text-transform:uppercase;}
.float{
transform:translatey(-60%) translatex(10%)
/*(scale(1.5)*/
;
display:block;
/*position:relative;
bottom:20em;*
/*margin-top:-20px;
transform:translatey(500px);*/
}
</style>
</head>
<body>
<table>
<tr>
<td class="boxofwel">
<h2>
Hello you welcome to
<h1 class="wel">
Eddy's Programming verse </h1>
</h2>
</td>
<td class="smile"><img src="hello.jpg" class="hello">
</td>
</tr>
</table>
<p>
Mostly i will be offering tutorials on web development which include programming languages like
<!--<list>
<ol>
<li><b>HTML</b></li>
<li><b>CSS</b></li>
<li><b>javascript</b></li>
<li><b>PHP</b></li>
</ol>
</list>-->
</p>
<p>
<img src="you.jpg" class="you">
<div class="float">
In that order So what are waiting for get on board this and become a web developer
<div><img src="time.jpg" width="70%"></div>
I want you to know that ill be fully committed one helping you be the baddest programmer around
<!--<video src="vid.mp4" controls >
video aint supported
</video>
<progress >
</progress>
<button>
progress
</button>-->
</div>
</p>
</body>
You have errors in your CSS due to mismatch in commenting. Just make a class for li and increase the font size.
.li {
font-size: 18px
}
<li class="li"> HTML </li>
<li class="li"> CSS </li>
<li class="li"> Javascript </li>
<li class="li"> PHP </li>
i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html
<!DOCTYPE html>
<html>
<head>
<title>Ziad Alian</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h4>Ziad Alian</h4>
<img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<hr>
<div>
<p id="hello">Hello World! </p>
<p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
I studied Geomatics but I don't like it cause computer science is my passion.<br/>
I'm a self taught web developer, My goal is to be a fucll stack developer using
HTML5, CSS, JavaScript, React, Python and Django.<br/>
I love programming and everything that has to do with technology, the internet and writing code.
</p>
</div>
<hr>
<div id="contact">
<ul>
<li>GitHub </li>
<li>LinkedIn </li>
<li>Twitter </li>
<li>Instagram </li>
</ul>
</div>
<br>
<footer>© 2020 Ziad Alian</footer>
</body>
</html>
And this is my CSS
this where my footer element been added
footer {
background-color: black;
color: white;
padding: 0.5em;
}
Edit
i added this code
body {
background-color:whitesmoke;
min-height: 100%;
display: flex;
flex-direction: column;
}
h4 {
text-align: center;
font-size: 68px;
font-weight: 80;
color: teal;
}
.imgz {
width: 200px;
border-radius: 50%;
}
#hello {
text-align: center;
font-size: 30px;
color: teal;
}
#aboutme {
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p {
text-align: justify;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color:white;
padding: 0.5em;
margin: 0;
margin-top: auto;
}
and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom
mywebsite
You have not integrated some properties into the CSS-file.
You have not integrated the block of the element footer into the HTML-file.
New footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
Old footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
}
New footer
<footer> © 2020 Ziad Alian</footer>
These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.
You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.
Try using position: fixed to keep your footer pinned to the bottom of the viewport.
When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
bottom:0;
left:0;
width:100%
}
<footer>© 2020 Ziad Alian</footer>
I have developed a website for you with the same structure as your old website, but with only minor changes.
The source code now has a better structure.
Comments have been added to avoid losing track of the source code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>2020 Ziad Alian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<h1>
<center>2020 Ziad Alian</center>
</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<center>
<img class="imgz" src="zCmakv5P_400x400.jpg"></img>
<p>
<a href="https://LinkToTheWebsite.com">
<li> ABOUT ME</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>PROJECTS</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>CONTACT</li></a></p>
</center>
<hr>
<p>
<center style="font-size: 30px"> HELLO WORLD</style></center>
</p>
<center>
<p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
I love programming and everything that has to do with technology, the internet and writing code.</strong>
</p>
</center>
<hr>
<center>
<p>
<a href="https://LinkToTheWebsite.com">
<li> GitHub</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>LinkedIn</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Twitter</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Instagram</li></a></p>
</center>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<center>
<p><font color="#FFFFFF">© 2020 Ziad Alian</font></p>
</center>
<!-- Footer end -->
</div>
</div>
</body>
</html>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
.imgz {
border-radius: 50%;
}
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body {
background-image: url("bg.jpg");
}
.image{
margin-top:200px;
margin-left:50px;
}
h1.tx{
margin-top:100px;
margin left: 600px;
}
<title>Company's Info</title>
</style>
</head>
<body>
<img class="image" src='about.jpg' width="450" height="300" />
<h1 class="tx">About </h1>
<h2><center>Locations</center></h2>
<p><center>No 1, Triq San Gorg, St. Julian's, Malta</center></p>
<h2><center>Contact info</center></h2>
<p><center>Telephone: +(356) 2138 4066 <br> <br>E-mail: info#badassburgers.eu</center></p>
<h2><center>Opening hours</center></h2>
<p><center>Mon - Thur: 18:00 - 23:00 <br><br> Fri - Sun: 12:00 - 00:00</center></p>
</body>
</html>
Am making a website and very new to html and css. i am trying to align
text next to the image but more centered.
[image] //words next to eachother.
!(https://scontent-fra3-1.xx.fbcdn.net/hphotos-xfp1/v/t35.0-12/12946923_1103488123006439_2107255178_o.png?oh=015129c632edec86ecb8e0d3421059b1&oe=570731A7)
Try dividing the page in 2 columns. One for the .image and other for the .content. Give both display:inline-block;, max-width:50%; so that they don't break when resized (though you should make them appear one below the other in small devices. With #media queries). Apply vertical-align:middle; and voila! You are good to go.
For easier development process use Bootstrap.
* {
box-sizing: border-box;
}
body {
background-image: url("bg.jpg");
margin: 0;
}
#container {
text-align: center;
}
.image {
max-width: 50%;
display: inline-block;
vertical-align: middle;
}
.image img {
max-width: 100%;
}
.content {
text-align: center;
max-width: 50%;
display: inline-block;
vertical-align: middle;
padding: 0px 20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Company's Info</title>
</head>
<body>
<div id="container">
<div class="image">
<img src='http://i.imgur.com/bCbboKC.jpg' />
</div>
<div class="content">
<h1 class="tx">About </h1>
<h2>Locations</h2>
<p>No 1, Triq San Gorg, St. Julian's, Malta</p>
<h2>Contact info</h2>
<p>Telephone: +(356) 2138 4066
<br>
<br>E-mail: info#badassburgers.eu</p>
<h2>Opening hours</h2>
<p>Mon - Thur: 18:00 - 23:00
<br>
<br>Fri - Sun: 12:00 - 00:00</p>
</div>
</div>
</body>
</html>
Ok so I'm just playing around with web development and i'm making my personal site just to get experience. Currently I am having two issues.
I have my "About" section I can't seem to be able to move my picture in the center and making the radius 100%. It's really bugging me because it won't work. I already put the CSS border-radius: 100% and Margin: 0 auto; but nothings working. I then tried the Text-align: center; and it didn't work.
I have a solid border that extends from the "#section" ID. But I want it not to cover my footer. In the index page it includes the footer which I don't want, but on my other pages like About, and Contact it does not cover the footer like i initially intended it to do.
Also on my header I have an H1 and H3 element that goes back to my home page. My problem with it is that when I move the mouse away from the header to the left or right horizontally it still shows that there's a link even though the letters are not there. I want the link to end where the word ends.
Can somebody find out what am I doing wrong and how i can do to avoid it?
I will include my HTML index page, then About page and then my CSS.
Index page where i want to exclude the footer from solid border.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>Dalexis The Great Critic</title>
</head>
<body>
<header >
<a href="index.html" class="headersection">
<h1>Dalexis Peguero</h1>
</a>
<a href="index.html" class="headersection">
<h3>Designing Websites Since Last Month</h3>
</a>
<nav class="navsection">
<ul id="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact Us
</li>
</ul>
</nav>
</header>
<div id="section">
<section >
<div id="statement">
<h2>We are so confident in our abilites to satisfy you that we'll give you your money back if you weren't satisfied!</h2>
<h4>Get Invoces: We provide the quickest way to get people to buy your shit! </h4>
<h4>Make them happy: We'll make sure your customers are all happy! </h4>
</div>
<div id="testimonies">
<h2> Client Testimonies </h2>
<hr style="width:90%; />
<p class="paragraph"> <img src="teona.jpg" class="clients"/>He was amazing with services! He did everything right!" </p>
<h6>Home Town Loser </h3>
<hr style="width:90%; />
<p class="paragraph"> <img src="marvin.jpg" class="clients"/>"As a rapper I enjoyed his services. He made my website look hella dope and I loved it! Will return to him"</p>
<h6>MArvelous Marv</h3>
<hr style="width:90%; />
<p class="paragraph"> <img src="jon.jpg" class="clients"/>"He was quick and succint! He helped me make my own dispensary website and now all my clients are so satisfied! Thanks Dalexis! !"</p>
<h6>Another Home Town Loser </h3>
<hr style="width:90%; />
</div>
</section>
</div>
<footer>
<img src="IMG/facebook-logo.png" alt="facebook" class="socialicon">
<img src="IMG/twitter-logo.png" alt="twitter" class="socialicon">
<p>© Dalexis Industries </p>
</footer>
</body>
</html>
This is my about page where i want to center my picture and make the radius 100%.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>Dalexis The Great Critic</title>
</head>
<body>
<header >
<a href="index.html" class="headersection">
<h1>Dalexis Peguero</h1>
</a>
<a href="index.html" class="headersection">
<h3>Designing Websites Since Last Month</h3>
</a>
<nav class="navsection">
<ul id="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact Us
</li>
</ul>
</nav>
</header>
<img src="IMG/dalexis.jpg" alt="my photo" class="about-photo" >
<h3>About<h3>
<p> This is my Web Design website. If you are interested in my services you can either call me or email me. I've been desiging websites for five weeks and my costumers love their sites"</p>
<p> If you like to follow me on facebook you can find me at Dalexis.
</div>
<footer>
<img src="IMG/facebook-logo.png" alt="facebook" class="socialicon">
<img src="IMG/twitter-logo.png" alt="twitter" class="socialicon">
<p>© Dalexis Industries </p>
</footer>
</body>
</html>
CSS
body {
font-family: abel;
}
h1, h3 {
text-align:center;
}
a {
text-decoration: none;
color: #373737;
}
ul {
list-style: none;
}
img {
max-width: 100%;
}
html {
color: #373737;
background-image:url('bkg-blu.jpg');
}
/******************************
HEADER
***********************************/
}
#nav li { display:inline; border-style:groove; }
#nav {text-align:center; }
/******************************
nav
***********************************/
/******************************
SECTION
***********************************/
#statement {
text-align: center;
}
#testimonies {
text-align: center;
}
section h2 {
margin: 0 20px;
padding: 0px 60px;
}
#section {
border-style:solid;
border-width: 1px;
width: 90%;
height: 100%;
padding: 5px 5px;
margin:15px 5px 15px 100px;
}
section div p img {
font-style:italic;
color: blue;
}
.clients {
width: 40px;
height: 40px;
margin: 0 10px;
padding: 10px;
font-style: italic;
}
/******************************
footer
***********************************/
.socialicon {
width: 20px;
height: 20px;
margin: 0 5px;
}
footer img {
margin: 0;
color: fff;
clear: both;
}
.selected, a:hover {
color: grey;
}
/******************************
PAGE: ABOUT
/***************************/
.about-photo {
width: 250px;
height: 200px;
display: block;
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
The answer for question 1.
Change this
<img src="IMG/dalexis.jpg" alt="my photo">
To this
<div class="about-photo"><img src="IMG/dalexis.jpg" alt="my photo"></div>
CSS
.about-photo {
width: 250px;
height: 200px;
margin: 0 auto;
}
.about-photo img {
width: 100%;
height: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
How do i left and right align text on multiple lines, e.g.:
┌─────────────────────────────────────┐
│ Tums 29 │
│ Oxydativedecarboxilization ATP │
│ appdata C:\Users\Ian\AppData\Local │
└─────────────────────────────────────┘
e.g.:
Note: A single-line variant of this question has been asked before
Here's a sample of some attempts i've found on SO and elsewhere, and the situations where left+right align was tried:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
<UL>
<LI class='line1'><P class='left'>Tums<P class='right'>29
<LI class='line2'><P class='left'>Oxydativedecarboxilization<P class='right'>42
<LI class='line3'><P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</UL>
<DIV>
<P class='left'>Tums<P class='right'>29
<P class='left'>Oxydativedecarboxilization<P class='right'>42
<P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</DIV>
</BODY>
</HTML>
Which renders incorrectly as:
Desired rendering:
Bonus reading
HTML/CSS - Right and left align on the same line?
Cross-browser CSS for left align and right align on the same line
You just have to clear your floats. http://jsfiddle.net/P7KuB/2/
<div>
<p><span class='left'>Tums</span><span class='right'>29</span></p>
<p><span class='left'>Oxydativedecarboxilization</span><span class='right'>42</span></p>
<p><span class='left'>appdata</span><span class='right'>C:\Users\Ian\AppData\Local</span></p>
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.wrap { clear:both; }
<DIV>
<P class="wrap"><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P class="wrap"><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P class="wrap"><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
See: http://jsfiddle.net/thirtydot/HkybR/2/
HTML:
<div class="info">
<div>
<span class="left">Tums</span><span class="right">29</span>
</div>
<div>
<span class="left">Oxydativedecarboxilization</span><span class="right">ATP</span>
</div>
<div>
<span class="left">appdata</span><span class="right">C:\Users\Ian\AppData\Local</span>
</div>
</div>
Could probably be more semantic.
CSS:
.info {
margin: 16px;
padding: 8px;
background: #fff;
float: left;
font-size: 21px;
clear: both;
}
.info > div {
overflow: hidden;
text-align: right;
}
.info .left {
float: left;
padding-right: 10px;
}
<UL style="list-style-type: none;">
<LI class='line1'>Tums<div class='right'>29</div></LI>
<LI class='line2'>Oxydativedecarboxilization<div class='right'>42</div></LI>
<LI class='line3'>appdata<div class='right'>C:\Users\Ian\AppData\Local</div></LI>
</UL>
Renders as...
You may also need to change the margins of the UL element.
EDIT: I guess the clear method is a more elegant solution!
Your test case was way too complicated. Here is a working multi-line version:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear:both;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">RightRightRightRightRightRight RightRight RightRight RightRight</P>
</DIV>
</BODY>
</HTML>
CSS add
p, li { overflow:hidden; }
Example : http://jsbin.com/asulih/