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%
Related
I am trying to put the input textfield inside my image. I already put my code inside my flexbox however the flexbox is working and responsive but when i do try to put the textfield inside the image. Its not working.The problem is even i try to make the input position to relative its still not display inside the image and not responsive. Can someone help me
body {
background-image: url(images/loading_bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
.box {
width:80%;
min-height:80vh;
margin:auto;
border:1px solid;
display: flex;
align-items: center;
justify-content: center; /* not really needed with auto margin on img*/
margin-top: -80px;
}
.box input {
position:relative;
width: 20%;
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
margin-left: 50%;
}
.box img {
position: relative;
display: block;
width: 80%;
min-width:100px;
max-width: 450px; /*actual image width*/
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/loading_bg.png);
}
}
<!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Six Revisions">
<meta name="description" content="How to use the CSS background-size
property to make an image fully span the entire viewport.">
<link rel="icon" href="http://sixrevisions.com/favicon.ico"
type="image/x-icon" />
<link href="http://fonts.googleapis.com/css?
family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<link rel="stylesheet" href="presentational-only/presentational-
only.css">
<link rel="stylesheet" href="responsive-full-background-image.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="presentational-only/presentational-only.js"></script>
</head>
<body>
<header class="container">
<section class="content">
<div class="box">
<input type="text" name="name" placeholder="name">
<img src="http://via.placeholder.com/350x250" width="350"
height="250" alt="missing image">
</div>
<p><a class="button" id="load-more-content" href="#top">Load some
content</a></p>
</section>
</header>
</body>
</html>
Is this what you're looking for??.. i have put image and input in 1 div .outer.
Made it position relative and and the input absolute and adjusted it accordingly.
thanks
body {
background-image: url(images/loading_bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
.box {
width:80%;
min-height:80vh;
margin:auto;
border:1px solid;
display: flex;
align-items: center;
justify-content: center; /* not really needed with auto margin on img*/
/* margin-top: -80px; */
}
.box input {
position: absolute;
width: 20%;
height: auto;
margin: auto;
/* margin-left: 50%; */
z-index: 1;
top: 50%;
left: 0;
transform: translatey(-50%);
}
.box img {
position: relative;
display: block;
width: 80%;
min-width: 100px;
max-width: 450px;
height: auto;
/* margin: auto; */
}
.outer{
position: relative;
width: 350px;
margin: auto;}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/loading_bg.png);
}
}
<!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Six Revisions">
<meta name="description" content="How to use the CSS background-size
property to make an image fully span the entire viewport.">
<link rel="icon" href="http://sixrevisions.com/favicon.ico"
type="image/x-icon" />
<link href="http://fonts.googleapis.com/css?
family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<link rel="stylesheet" href="presentational-only/presentational-
only.css">
<link rel="stylesheet" href="responsive-full-background-image.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="presentational-only/presentational-only.js"></script>
</head>
<body>
<header class="container">
<section class="content">
<div class="box">
<div class="outer">
<input type="text" name="name" placeholder="name">
<img src="http://via.placeholder.com/350x250" width="350"
height="250" alt="missing image">
</div>
</div>
<p><a class="button" id="load-more-content" href="#top">Load some
content</a></p>
</section>
</header>
</body>
</html>
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;
Here's my code
header img{
width:10%;
vertical-align: middle;
}
header h1{
text-align: right;
display:inline;
position: absolute;
}
header {
width : 100%;
height: 1% ;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href = "css\main.css" >
<link rel="stylesheet" href="css\responsive.css">
</head>
<body>
<header>
<div class = "container-fluid">
<img src="https://pixabay.com/static/uploads/photo/2015/12/15/09/31/badge-1093966_640.png" alt="">
<h1>KUNAL MEHTA</h1>
</div>
</header>
<section>
</section>
<footer>
</footer>
<script src = "js/main.js"></script>
</body>
</html>
What i am talking about is that i want the h1 to go to right and they both should align in the center of the parent Element.i am using BOOTSTRAP so answers with bootstraps are encouraged
Well, you can always use flex for that- And I truly recommend using it, since it makes the solution much cleaner and easier to maintain. Please note I only had to change the container element for making this solution, and clean the h1 margin.
.container-fluid {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px
}
.container-fluid h1 {
margin: 0
}
header {
background: red;
}
header img{
width:10%;
}
You can read more about it here
I'm going to try to explain this the best that I can. This picture represents the layout I'm trying to achieve.
I'm trying to have a navbar on the side. I'm using bootstrap so this is about a col-md-3 for row layout. I'm able to get it into my document, but what I am having a hard time with is layering this nav bar on top of the body tag.
I have a body tag that has an image set to the background with no-repeat and background-size 100% and all of that. But it always covers the nav bar. How can I get the navbar (as well as other elements) to layer on top of it. I was hoping that I could do this with z-index, but after half an hour of playing around with this, I think maybe I don't understand z-index nearly as much as I thought it did.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class = "navWrap row">
<div class = "col-md-3">
<div class = "brand">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Heres my CSS:
body {
background-image:url(img/carousel-lifestyle.jpg);
background-size: 100%;
position: fixed;
background-repeat: no-repeat;
position: fixed;
z-index: -1;
}
.col-md-3 {
background-color: white;
position: absolute;
z-index: 1;
}
.brand {
background-image:url(img/Screen%20Shot%202015-10-26%20at%205.38.31%20PM.png);
background-size: 100%;
background-repeat:no-repeat;
width: 75px;
height: 200px;
padding:20px 100px 20px 10px;
margin-left: 25px;
}
Thanks in advance!
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;