<!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>
Related
My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 1 year ago.
I am trying to make my footer sit at the bottom of the page.
This is my code:
<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
<style>
#container{
height: auto;
width: 100%;
}
</style>
</head>
<body style="margin: 0px;>
<div id="container">
<header style="background-color:black;
color: white;
text-align:center">
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site!
<footer style="background-color:black;
color: white;
text-align:center">
121 Fredway St.
Cartown USA
</footer>
</div>
</body>
</html>
But this is what my webpage looks like:
I thought the container id style would make the container div 100%.
This gets me every time. What is the simple way to do this?
UPDATE
This is what I did to fix
<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
<style>
body{
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header{
height: 5vh;
padding-top:5;
background-color:black;
color: white;
text-align:center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
.spacer {
flex: 1;
}
</style>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site!
<div class="spacer"></div>
<footer style="background-color:black;
color: white;
text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>
</body>
</html>
Now it looks correct like this:
You can use vh (view height) for your body in your css file.
Visit W3 School
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freds Cars, Trucks & Jeeps</title>
<style>
#container {
height: 100vh;
width: 100%;
}
header,
footer {
height: 10vh;
}
main {
height: 80vh;
}
</style>
</head>
<body style="margin: 0px">
<div id="container">
<header style="background-color:black;
color: white;
text-align:center">
Fred's Cars, Trucks & Jeeps
</header>
<main>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site!
</main>
<footer style="background-color:black;
color: white;
text-align:center">
121 Fredway St.
Cartown USA
</footer>
</div>
</body>
</html>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
Why there is a space between two <hr> tags?
When I make the width of <hr> tags, it didn't work. I made it 49%, but there is still a space between the two <hr> tag. How do I remove the space from the <hr> tags?
Here is the HTML and CSS code:
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left">
<hr id="right">
</body>
</html>
You can use single hr with gradient background instead.
* {
margin: 0;
padding: 0;
}
body {
background-color: #181818;
color: white;
}
a {
text-decoration: none;
}
h1 {
text-align: center;
color: #3ea6ff;
}
.home {
font-size: 3em;
background-color: #202020;
}
#night {
color: #f34601;
}
#mare {
color: #3ea6ff;
}
hr {
display: inline-block;
background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%);
height: 2px;
width: 100%;
border: 0;
}
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr>
check the code. This is really a better answer (imo) occam's razor
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left"><hr id="right">
<h1> OR YOU CAN DO THIS</h1>
<hr id="left"><!--
--><hr id="right">
</body>
</html>
Float :
Using float:left; on both of the hr's seem to work.
Flex :
I don't recommend doing this though. What I'd do is wrap the 2 hr's into a div and add display: flex; on it. And in the children I'd add flex-grow:1;
If i'm not mistaking it should grow the 2 hr's to take all the space in the div evenly. It will also work better with the rest of the page rather than using float which can sometimes mess everything up (from my own experience).
<hr id="left">
<br>
<hr id="right">
You can put a br between the hr
a br means a break.
Check this link to see more
https://www.w3schools.com/tags/tag_br.asp
I have three boxes/containers on a single row of my webpage.
The first box, the blue box is 2px away from the browser edge on the left, while the last box, the purple box is 2px when I inspect element.
image of boxes
However it does not look like this on the web page and looks uneven:
http://jamesbsite-com.stackstaging.com/
I have read all about the box-model but I am still unable to get equal spacing even though I have set a 2px margin on both the left and right.
Please advise as to what is causing this?
The .call-outs-container is the parent container and the .call-out is the child
and they are being applied to these divs:
#
amendment
complete code below
#
<!doctype html>
<html>
<head>
<title>James' page!</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
hr {height:1px; border:none; color:#000; background-color:#000;}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited{
color:green;
}
body { margin: 0;}
.ClearFloat {
clear: both;
}
.call-outs-container
{
max-width: 2000px;
margin: 1px 1px 1px 1px
}
.call-out {
padding: 5px;
margin-left: 2px; margin-top: 40px; margin-right: 2px; margin-bottom: -5px;;
width:30%;
float:left;
}
.call-out:nth-child(1) {background-color: #c0dbe2;}
.call-out:nth-child(2) {background-color: #cdf1c3;}
.call-out:nth-child(3) {background-color: #ccb9da;}
.call-out:nth-child(5) {background-color: #c0dbe2;}
.box{
border:10px solid #CC3F85;
width:400px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/NkyEOrQiGMQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen target = "test1"></iframe>
<div class="call-outs-container">
<div class="call-out">
<h4>Feature1</h4>
<p> hello</p>
</div>
<div class="call-out">
<h4>Feature2</h4>
<p>Nanking</p>
<p>new tab</p>
</div>
<div class="call-out">
<h4>Feature3</h4>
I am interested in history.
</div>
<div class = "ClearFloat"></div>
<div class="call-out">
<h1>James's page!</h1>
</div>
</div>
<div class = "ClearFloat"></div>
<h2>A few facts about me</h2>
<img src="me.jpeg" width="400">
<p>I like web desigm.</p>
</body>
</html>
div{
text-align:center;}
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 50px;
margin: 20px;
float: right;
}
</style>
</head>
<body>
<div>Welcome Page</div>
<div>Welcome Page2</div>
</body>
</html>
I would recommend using flexbox in this situation. It will make controlling things much easier. No need for float.
First, you need to add display: flex to .call-outs-container.
Next, specify that the items will fill the axis evenly by adding flex: 1 1 0 to .call-out
.call-outs-container {
display: flex;
}
.call-out {
padding: 5px;
margin-right: 2px;
flex: 1 1 0;
/* margin-left: 2px;
margin-top: 40px;
margin-bottom: -5px;
width: 30%;
float: left; */
}
.call-out:nth-child(1) {
background-color: #c0dbe2;
}
.call-out:nth-child(2) {
background-color: #cdf1c3;
}
.call-out:nth-child(3) {
background-color: #ccb9da;
}
<div class="call-outs-container">
<div class="call-out">
<h4>Feature1</h4>
<p> hello</p>
</div>
<div class="call-out">
<h4>Nanking</h4>
new tab
</div>
<div class="call-out">
<h4>Feature3</h4>
I am interested in history.
</div>
</div>
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>