So I'm also a total noob with CSS, and I'm getting confused on how to center my logo. It worked on my footer but not on my text / logo.
Also, how to fix that small bit on the left of my footer, I already set the .footer width to 100%.
Thanks!
Screenshot:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Konvoy</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<!-- <link rel='stylesheet' href="/css/normalize.css"> -->
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
<header> <!--<div id="logo">--> <h1><img src="/assets/Konvoy Logo.png" width="350"/> <!--</div>--> </h1>
<div class="description" style="margin-top: 0px;">See each other in any situation. Geolocation App For Everyone.</div>
</header>
<div class="content">
</div>
<!-- <div class="app">
<div id="infobox" class="infobox"></div> -->
<!-- <div id="map">To get this app to work you need to share your geolocation.</div>
</div> -->
</div>
<div class="footer" style="padding-top: 30px;"><center> 2013 All Rights Reserved. Team Konvoy </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/js/lib/leaflet.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/application.js"></script>
</body>
</html>
CSS:
html, body {
height: 100%;
background: url('../assets/landing_page_bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #666;
#font: 14px/18px 'Bariol', Arial, sans-serif;
}
.container{
}
header {
text-align: center;
position: center;
width: 100%;
padding-top: 150px;
}
.description {
font-weight: 300;
font: 24px 'Bariol', Arial, sans-serif;
color: #006794;
text-align: center;
}
.content {
}
.footer {
clear: both;
position: fixed;
height: 80px;
width: 100%;
background-color: #039686;
font: 16px 'Helvetica', Arial, sans-serif;
color: #FFFFFF;
font-weight: 100;
}
Use this,
HTML
<h1 id="logo"><img src="/assets/Konvoy Logo.png" width="350"/>
CSS
h1#logo {
width:350px;
margin:10px auto;
}
Try this:
<img src="/assets/Konvoy Logo.png" width="350" style="position:absolute;left:50%;top:100px;margin-left:-175px;"/>
Also, adding a CSS Reset sheet to your page will help solve many problems, such as default page margins.
http://www.cssreset.com/
try this
html, body {
height: 100%;
background: url('../assets/landing_page_bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #666;
#font: 14px/18px 'Bariol', Arial, sans-serif;
margin:0;
padding:0;
}
.footer {
clear: both;
position: fixed;
height: 80px;
width: 100%;
background-color: #039686;
font: 16px 'Helvetica', Arial, sans-serif;
color: #FFFFFF;
font-weight: 100;
bottom:0;
}
This may help you to keep footers at the bottom of the page.
.footer {
position:absolute;
bottom:0;
width:100%;
}
Reference: How to keep footers at the bottom of the page
Demo
There are several ways one can center an element in css.
If the element's width is known we may center it using margin: auto;
If there is a need to use absolute or fixed positioning and the width of the element is known then we can center it like so:.logo {
width: 350;
position: absolute;
left: 50%;
margin: 0 0 0 -175px; // width/2
}
Using text-align: center; on the parent container.
In this case - make sure the parent container and its children are in the normal flow (not floated and not positioned). And the child element needs to be inline or inline-block.
Edit:
And one more thing: in your header tag you first open a div, then an h1 tag, but the closing order is not correct. You need to close the h1 first and only then the div ;)
Related
My hero image isn't appearing, but the text is. All my files are in the same folder and I'm using the relative path VS Code gave me.
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am Matthew Moyes</h1>
<h3>And I'm a Motivational Speaker</h3>
<button>BOOK ME</button>
</div>
</div>
<h3>Page content..</h3>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>
</body>
</html>
This is the CSS:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background: url("/city.jpg");
background-color:#cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
h3 {
text-align:center;
}
p {
text-align:center;
}
The part I'm having issues with is the .hero-image tag.
I tried putting it in another folder and making a new path as well as re-downloading the image. I also added and removed dots and slashes in the code.
Remove slash from your path like this:
background: url("city.jpg");
And not like this:
background: url("/city.jpg");
No matter what I do, I cannot get my image in the .container div to show up properly when formatting with CSS. Only the top ~10% of the image is showing. If I put the img tag in HTML it will work perfectly. But I want to format in CSS, not HTML, and in such away that it is mobile-first compatible. What I want is for the image to be centered and larger than it's currently displaying. Here is my HTML:
<!DOCTYPE html>
<html lang="en-US">
<link rel="stylesheet" type="text/css" href="RABstyle.css">
<title>Home</title>
<meta charset = "UTF-8">
<meta name="author" content="Beth Bennett">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<div class="icons"><p>Icons</p></div>
<ul class = "buttons">
<button id="LogIn" type="button">Log In</button>
<button id="SignUp" type="button">Sign Up</button>
</ul>
</header>
<div class="container">
<h2 class="intro">America's source for....</h2>
<ul class="selector">
<li class="active">Ds</li>
<li>Cs</li>
<li>Or</li>
</ul>
</div>
</body>
</html>
And here is my CSS:
* {
box-sizing: border-box;
margin: 0px;
padding:0px;
font-family: Calibri, Helvetica, sans-serif;
}
body {
background-color:#ffffE0;
}
header {
background-color: #AA0000;
height: 75px;
padding: 15px;
}
.icons{
float: left;
margin-left: 100px;
}
.buttons {
text-align: right;
margin-right: 300px;
}
.container {
background: url("HomePageImageFinal.svg") no-repeat;
background-position: center top;
background-size: 1500px 1000px;
}
Add px - it doesn't have any measurement unit now - or 100% to your width and height attributes (depending on your needs)
I added a background-size:cover to your code and it worked, with another image, because you didn't provide the SVG:
.container {
background: url("http://lorempixel.com/200/200/") no-repeat;
background-size:cover;
background-position: center top;
height: 2000px;
width: 2000px;
}
Here's the fiddle
You can try
background-size: 100% 100%; or
background-size: contain; or
background-size: cover;
depending on what you are trying to achieve.
Also, if you have floats inside your container than you need to clear these. The container won't have any height with floating elements inside. Unless you specify a fixed height of course.
When I resized the "logo" as I wanted it, it does not longer align in center of the page, now it's in the left when I added those 2 last .logga.
So this is my code:
body {
background-image: url(http://i.stack.imgur.com/iOkRy.png);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.logga {
width: 200px;
height: 120px;
}
.logga img {
width: 100%;
height: auto;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="logga" align="center">
<img src="http://i.stack.imgur.com/iOkRy.png" alt="Hello">
</div>
</body>
</html>
It aligns to the center of the containing div. If you need the div to center. The parent element needs to have a width property and then the child element would need margin-left: auto and margin-right: auto;.
Example fiddle here:
https://jsfiddle.net/8yhsr5ba/
You can solve this with CSS by specifying margin:0 auto; for the .logga class.
.logga{
width: 200px;
height: 120px;
margin:0 auto;
}
That lets the browser calculate even spacing on each side of the element automatically. Note: although deprecated, it could also be centered with HTML by using <center></center>
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div class="logga" align="center">
<img src="logga.png" alt="Hello">
</div>
</center>
</body>
</html>
Try this. You'll get your image centered.
body {
background-image: url("bg2.jpg");
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.logga {
width: 200px;
height: 120px;
margin-left: auto;
margin-right: auto;
background-color:white;
}
.logga a{
display:block;
}
.logga img {
display:block;
width: 100%;
height: auto;
}
<div class="logga">
<img src="http://7-themes.com/data_images/out/62/6983929-fall-nature-photography.jpg" alt="Hello">
</div>
The align attribute is not supported in HTML5. Use CSS instead, like this:
.logga {
width: 200px;
height: 120px;
margin: 0 auto; /* this places .logga in the center of the body */
text-align: center; /* this centers inline elements inside .logga, you don't necessarily need it */
}
just use margin:auto; in style.
I'm currently making my personal website and I struggling when it comes to images and smaller screens. I basically want to position a portrait image of me in the middle of the screen above the header text and make it stay there when using a smaller screen size. I've tried position: relative and similar solutions but I just can't get it to work.
I basically want to position it above the header text and make it automatically scale when using different screen sizes. I also want it to have a fixed width and height.
Here's the code:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Oskar Yildiz</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="main.css"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="wrapper">
<div id="bg" class="background-div">
</div>
<div id="header" class="container">
<div class="row">
<div class="col-xs-12">
<img class="img-circle" src="files/portraitcrop.jpg" />
<h1 id="main-title" class="page-title">Oskar Yildiz</h1>
<h2 class="page-description" style="font-style: normal;">
Welcome
</h2>
<h2 class="page-description">
Young tech enthusiant, web developer and content creator.
</h2>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#main-title").fadeIn();
</script>
CSS:
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
/*background-image: url("./files/bg.jpg");*/
}
.background-div {
background-image: url("./files/background.jpg");
width: 100%;
min-height: 100%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
left: 0;
display: table;
background-position: center;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
#header {
display: table;
position: relative;
}
.page-title {
text-align: center;
text-transform: uppercase;
color: white;
margin-top: 330px;
font-size: 2em;
margin-bottom: 0px;
}
#header h2 {
margin: 0;
}
.page-description {
text-align: center;
color: white;
padding-top: 8px;
font-style: italic;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 150%;
}
.portrait {
}
img {
padding: 0;
margin: 0;
min-height: 30%;
min-width: 30%;
}
.oskar {
width:100%;
height:100%;
background-size: cover;
display: table;
background: #222 no-repeat center center;
background-color: #222;
background-image: url("./files/bg.jpg");
}
You can use the class img-responsive on your images. So, for instance
<img class="img-responsive" src="path to image" alt="image of me"/>
however in the comments you mentioned you don't want it to take up the entire screen from left to right, so a solution to fix that issue is to use the already included, grid system.
lets say you wanted the image to take up 50% of the page on all devices. You would use code like this.
<div class="col-xs-6 col-xs-offset-3">
<img class="img-responsive" src="path to image" alt="image of me"/>
</div>
What this code does is simple, it makes a div that on extra small (xs) devices is 6 columns. 6 columns is half of the grid since the grid consists of 12 columns, and is thus 50% when you use 6 columns. Then we added the offset class to xs that pushes the content over 3 columns to the right, which centers the image and makes it so that the other 50% of the page is in the spacing 25% on the left, and 25% on the right.
Using the grid system as I have done here will let you control the spacing around the image, but having a fixed width and height is not possible to accomplish what you want.
I hope this helps you with your issue, if you need any more assistance, i'll be here to help. :)
I'm trying to make my paragraph (#home) move to the middle of the greyed box, but it won't move no matter what. I've tried changing the margin to padding, and making the margin up and down, or even making it ridiculously high, like 1000. Please Help. Here's my code:
Html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="BrokenRecordNew.css" />
<title>Broken Record</title>
</head>
<body>
<div id="tabsattop">
<p id="home">Home</p>
<a href="BrokenRecordNew.html"><img id="logo" src="http://www.freevector.com/site_media/preview_images/FreeVector-Antique-Record-Player.jpg"><a>
</div>
</body>
</html>
CSS:
html {
background: url("http://theband.hiof.no/band_pictures/band_mfbp_back.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#tabsattop{
background-color: black;
opacity: .8;
margin-top:-7px;
margin-right: -5px;
margin-left: -5px;
width: 1274px;
height: 75px;
}
#logo{
height: 75px;
margin-left:550px;
display:inline-block;
}
#home{
margin-left: 10px;
display:inline;
color:white;
font-size:25px;
font-family: sans-serif;
}
By using display:inline, you've removed the ability to apply margin or padding to it. Remove display:inline (or use display:inline-block instead) and you should be good to go.