I am working on a project and for some reason I cannot get the banner placed in the position I want. There is code I am looking at hat has it set how I want to be:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<header>
<h1>
<a href="index.html">
<img src="images/logo.png" alt="logo">
<!--<div>-->
They're Animals
<!--</div>-->
</a>
</h1>
</header>
</div><!--.container-->
</body>
</html>
and the CSS that works for my ideal banner is:
/* *************************************
Base
************************************* */
body {
background-color: #dfeff0;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}
header a { color: #ad235e;}
header a:hover { color: #000000;}
h1 {
color: #ad235e;
font-size: 14px;
}
h1 a:hover img { opacity: 0.7;}
/* *************************************
Modules
************************************* */
.container {
margin: 0 auto;
width: 90%;
max-width: 960px;
position: relative;
}
I have tried copying the CSS to put in my project (and the html) and it still does not work.
With actual text and more information in there it flows perfectly.
I guess something that might be more helpful is the code I have tried on my own:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<div class="container">
<header>
<h1>
<img src="images/banner.png" alt="banner">
<!--<body background="images/banner.png" alt="banner" >-->
Home Page
</h1>
</header>
</div>
and my attempt at CSS:
h1
{
text-decoration:underline;
text-align:center;
}
h1 img
{
height: 40%;
width: 40%;
margin: 0px 10px;
padding: 5px;
float: left;
}
.container
{
width: 80%;
max-width: 960px;
margin:0px auto;
}
I guess the simplest way to put this is I am trying to get my banner to be an appropriate size (though I can manage that by editing the width and height) to the left of my h1 without pushing everything making it seem that it is "alone".
I am not sure exactly what you want to do. But I am guessing as you are using float:left you are maybe facing problem with the class "container".
I believe you can add one line in your .container CSS and fix the problem.
overflow: auto;
Related
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;
So i have been trying to remove the space between my div elements and iframe to no success for an hour. Any help will be greatly appreciated. This is what I have done so far.
css:
h1 {
text-align: center;
color: white;
}
.d1 {
border-style: none;
background-color: blue;
}
iframe {
width: 50%;
height: 50%;
display: block;
margin: 0;
}
Here is my html: I am trying to to remove the white space between the the 2 divs elements on the top and bottom.
<!DOCTYPE html>
<!-- By Christian Soto -->
<html>
<head>
<meta charset="UTF-8">
<title>Event Driven JS</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="d1">
<h1>Using JavaScript to Change the HTML</h1>
</div>
<iframe id="section">
<!-- Will be loading different html pages into here -->
</iframe>
<div class="d1">
<h1>Christian Soto</h1>
</div>
</body>
</html>
You need to remove the default margin from the <h1> tag,
all HTML headings have a default margin style.
h1{
text-align: center;
color: white;
margin: 0;
}
this is the footer
#footer {
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
bottom: 0px;
top: 99%;
}
#copyright {
float: left;
font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin {
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
}
<div id="footer">
<div id="copyright">
© 2016 copmpany
</div>
<div id="linkedin">
Follow us on
<a href="https://www.linkedin.com/">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
This how it looks like. This how it should look like. I don't want to use position:absolute and I want to make it work on all screens, and all pages of the website. If i use absolute, then when I'm using the phone it will go down too much.
I have tried everything, including using .container{ max-height:140%;} and put the footer 99% that distance but didn't work, nothing worked. I can't use fixed position because on the services page that I linked to, the height goes to 130% on some screens.
This page will never work exactly the way you want it to because it isn't valid. You can only have one <!doctype html>, one <html>, one <head>, and one <body> on a page and in that particular order.
This is a waste of time until you fix that problem first. Run your page through this: VALIDATOR
<!doctype html>
<html>
<head>
<!--<link>, <script>, <style>, <title>, <meta> are typically here.-->
</head>
<body>
<!-- Your content <div>, <p>, <span>, etc. goes here.-->
</body>
</html>
Your page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Services</title>
</head>
<body>
<div class="index_wrapper">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>
<body>
<!------CONTENT------>
</body>
</html>
<div class="container">
<div class="service_title">
</div>
<table>
<!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES---->
</table>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="footer">
<div id="copyright">
© 2016 Tycron Solutions
</div>
<div id="linkedin">
Follow us on <a href="https://www.linkedin.com/company/tycron-solutions">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
</body>
</html></div>
</body>
</html>
You can change position:absolute; to position:fixed;
Check the code in this link: https://jsfiddle.net/4qyojap2/
#footer{
background: #F3F5F6;
position: fixed;
width: 100%;
height: 30px;
padding:20px;
bottom: 0px;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}
Your css says :
bottom: 0px;
top:99%;
This is not needed as your div already is at the bottom of your HTML.
The footer will position correctly if you suppress these two lines.
New CSS here :
#footer{
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}
Have you tried this
#main-body{height:100vh;}
<header role="header">
<nav role="navigation">
Home
</nav>
</header>
<div id="main-body">
this is the main body
</div>
<footer role="footer">
this is the footer
</footer>
or you can use jQuery on it like,
//declare height of the "#main-body"
$("#main-body").css('height' : $(window).height()+'px');
Hope this help. Cheers!
Hello apologies for what may come across as a silly question as I am still fairly new to HTML & CSS. I want to avoid using Javascript if possible to solve this solution.
My issue is the text "Still working on it". On the various laptops / desktop screens and android phones tested I've had no issue with it the entire text field being centered. However on iphones I am assuming that it centers the first letter of the string "S"? Below is an example of what it looks like on iphone devices:
Below is my HTML and CSS code respectively, if anyone could guide me in the right direction to sorting this issue I would very much appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>Elias Malik</title>
<link rel="stylesheet" href="main.css">
<link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<link rel="shortcut icon" href="diamond.ico">
</head>
<body>
<div class="bc">
<h1>Still working on it</h1>
</div>
<footer class="mainFooter">
<div class="socialmediaFooter">
<img class="focus" src="facebook.png"</img>
<img class="focus" src="instagram.png"</img>
<img class="focus" src="linkedin.png"</img>
</div>
</footer>
</body>
</html>
and
html
{
background: url("devbc.jpg") no-repeat center center;
min-height:100%;
background-size:cover;
}
body
{
text-align: center;
min-height:100%;
}
.bc h1
{
text-align: center;
font-family: "Damion", cursive;
color: white;
font-size: 4.6vmax;
position: fixed;
top: 42%;
left: 51%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.mainFooter{
width: 100%;
margin: center;
margin: auto;
position: fixed;
bottom: 0;
font-size: 5px;
float: center;
}
img
{
max-height: 10vmax;
max-width: 5vmax;
}
The website is:
https://eliasmalik.com
I'm not sure if it will fix it on your phone, but try to take out the left:51% and your transform property on your .bc h1 css and instead add a width:100%
I would like to have the text My homepage in the middle of the box I made. I saw an example on a web site but this does not work properly, as the text is on the left. How can I fix the code?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div style="width: ???px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto;">
<h1 id="begin"> My homepage </h1>
</div>
You see also: Block-level and inline elements
HTML
<div id="container">
<h1>My homepage</h1>
</div>
CSS
#container h1 {
text-align: center;
}
I also recommend reading: Descendant selectors, Child selectors and Adjacent sibling selectors
One simple line of CSS:
#container > h1 { text-align: center; }
<h1> is a block level element, so you can simply style it with text-align in your CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1 id="begin"> My homepage </h1>
</body>
</html>
Maybe setting all text to be centered at the beginning and decide later what you want not centered,
* { text-align: center;
margin: 0;
padding: 0;
}
you could also center some or all elements at the beginning with the universal selector (*).
Or fix initially any propoerty that is very common on your page.
You can simply style h1 with css text-align :
text-align: center;
You don't need to wrap your h1 into div because h1 is a block level element
DEMO : http://jsfiddle.net/Vinyl/Ltqyfwn0/