I'm trying to remove the whitespace around my header photo, which should cover the entirety of the page. I'm running a local server on my computer (localhost) to test this PHP file.
I've already tried all of the relevant answers I could find here on Stack Overflow. I've looked up multiple threads and done the following:
1) reset the CSS styles by changing margins and padding to 0
2) surrounded the image tag with body tags, which should now be reset
3) Changed the width setting to 100% and height to auto
index.php:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="container">
<img class="image"
src="https://cdn.shopify.com/s/files/1/0533/2089/files/header-
design-position-absolute_fcabc9a2-0fdb-4057-a6fb-f84f16840eba.png?
v=1507118933" alt="Header Picture">
<div class="name"> ⏤ NAME ⏤ </div>
<div class="tagline"> traveler. consultant. developer.</div>
</div>
</body>
<html>
style.css:
* {
margin:0;
padding:0;
}
/* container holding both the header photo and text */
.container {
position: relative;
text-align: center;
color: white;
}
/* main header image */
.image {
filter: drop-shadow(8px 8px 10px gray); filter: contrast(75%);
width: 100%;
height: auto;
}
/* name text */
.name {
position: absolute;
top: 17.5%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 600%;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
/* tagline text */
.tagline {
position: absolute;
top: 23.5%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 200%;
font-family: "Comic Sans MS", cursive, sans-serif;
}
All I want is for there to be no white space around the picture such that it stretches across the page. Instead, I keep getting white space around the edges that I can't get rid of.
Upadte I'm implementing some of the changes now and seeing why suddenly this simplified version works. It must be something in the rest of my code (which I have not included) Let me reupdate this code with the rest of it first.
This works fine when tested locally and on jsfiddle. However your HTML is missing a <head> tag. The CSS <link> should go inside of it.
My first suggestion here is to use the background-image CSS property as then you gain more control over the image box, and you can then set the actual page body or section to render the image.
.your-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
One thing to note is that the <img> tag is included in screen readers while background images are not, making your website more user-friendly to those who use screen readers as the background here is less relevant to the content.
One thing to think about is that all HTML elements have their own predefined margins and padding as well as other attributes based on the browser they are rendered in, an example of this is the 8px margin placed on the <body> element by default in most browsers, which can be overwritten in your code by being explicitly defined.
Just as a side note, there are some libraries that assist with the incongruencies between our different browsers and how they render our elements, I would take a look at normalize.css which is a great CSS only library with plenty of documentation.
It seems that the problem in your image so, try to crop the image.
* {
margin:0;
padding:0;
}
/* container holding both the header photo and text */
.container {
position: relative;
text-align: center;
color: white;
}
/* main header image */
.image {
filter: drop-shadow(8px 8px 10px gray); filter: contrast(75%);
width: 100%;
height: auto;
}
/* name text */
.name {
position: absolute;
top: 17.5%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 600%;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
/* tagline text */
.tagline {
position: absolute;
top: 23.5%;
left: 40%;
transform: translate(-30%, 50%);
font-size: 200%;
font-family: "Comic Sans MS", cursive, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style=" background-color: #000000">
<div class="container">
<img class="image"
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Header Picture">
<div class="name"> ⏤ NAME ⏤ </div>
<div class="tagline"> traveler. consultant. developer.</div>
</div>
</body>
<html>
Related
My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}
I'm fairly new to coding, have been at it for a few hours for a month now. For the past few hours I've been stuck with the problem that can be seen in the two pictures I attached. I've tried searching for answers and various methods such as min-width, display:flex, adjusting the font-size from autoscaling with vw and using rem. I just want my text to stay inside of the laptop screen no matter what screen size I'm viewing it on. I know I could use the easy way and just photoshop the photo with the text but I want to learn how to do it with coding for future projects as well. I do want the picture to scale a bit so it can be viewed on for example a phone in an ok size. Can you help me please?
body {
margin: 0;
text-align: center;
}
h1 {
color: #66BFBF;
font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
font-size: 5vw;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-container {
background-color: #ccf2f4;
padding-top: 50px;
position: relative;
}
.laptop {
width: 50%;
height: 50%;
}
<section>
<div class="top-container">
<img class="laptop" src="img/laptop.png" alt="cloud-img">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Nhien</h1>
<h2 class="dreamer">just a gamer with big dreams.</h2>
</div>
</section>
You can also access the website from www.nhienweb.com
You should add the image to the background of the section or the div.
For this answer, I am adding it to the section background.
<section>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Nhien</h1>
<h2 class="dreamer">just a gamer with big dreams.</h2>
</div>
</section>
In the HTML, I have removed the laptop img from html and will add it in the css. I will position the cloud as absolute.
And here is the css for this code
body {
margin: 0;
text-align: center;
}
h1 {
color: #66BFBF;
font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
font-size: 5vw;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-container {
background-color: #ccf2f4;
padding-top: 50px;
position: relative;
}
.top-cloud {
position: absolute;
top: 0;
left: 0;
/* Positioned it relative to the top-container */
}
section {
background-image: url([your path to img relative to the css file]);
background-size: cover;
/* bg size to cover makes it what you want gives it full width at any screen */
}
If this doesn't help comment and ask me.
I applied this code to the CSS so it is working now. Don't think that this is the correct way to solve the problem but it seems fine when I tested my website on my mobile. Thanks for your trouble and time!
#media (max-width: 591px){
h1{
top:30%;
}
}
So how to vertically and horizontally center an anchor tag link? No div or any parent elements used. i just want to center it as in the following image.
This is how i want it to look like.
And this is my code:
<html>
<head>
<style type="text/css">
body{
background:#000;
}
.link{
font-size:40px;
}
</style>
</head>
<body>
<center><a class="link" href="#">BornExplorer</a></center>
</body>
</html>
If you are going for a full page setup with a a single link you could setup the centering using line-height:100vh which means that the line height is 100% of the page height.
html,body{width:100%;height:100%;margin:0;}
body{
background:#000;
line-height:100vh;
}
.link{
font-size:40px;
line-height:1;
display:inline-block;
}
<center><a class="link" href="#">BornExplorer</a></center>
If the width and height of the anchor tag box are fixed, it's pretty trivial. Assuming you want to position the tag relative to the viewport:
html { background: black; color: white; }
.centered {
/* size */
width: 10em;
height: 1em;
/* positioning */
margin-left: -5em; /* -(width/2) */
margin-top: -0.5em; /* -(height/2) */
position: fixed; /* relative to viewport */
left: 50%;
top: 50%;
/* just aesthetic styling */
text-align: center;
color: white;
font-weight: bold;
background: rgba(255,255,255,0.3);
}
<a class="centered" href="#">Centered</a>
A site I'm working on doesn't appear to show certain graphics. For example using IE and firefox my site appears fine, however using Safari I get nothing but a blue background, the site in question is:
http://www.huntspillfederation.co.uk/
Doing it for a school and my web design skills are that great (as you can tell!)
I guess its the CSS thats the problem, in which case the error is somewhere in this code:
<style type="text/css">
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -100; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
.stretchw {
width:100%;
}
#cloud1 {
position: absolute;
left: 50px;
top: 50px;
z-index:-99;
}
#cloud2 {
position: absolute;
right: 50px;
top: 50px;
z-index:-98;
}
.bottom {
background-image: url("images/hill3.png");
background-position: left bottom;
background-repeat: repeat-x;
position:absolute;
bottom:0px;
left:0px;
width: 100%;
height: 263px;
border: none;
overflow-x: hidden;
z-index:-97;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #666;
}
h1 {
color: #000;
font-size: 35px;
font-family:Palatino Linotype;
font-style:italic;
}
</style>
Any help much appreciated!
:)
It looks like your negative z-index's are the cause of the problem. Start at 0 and go higher for the elements that you want to appear in front of the background.
You don't need to use the container_bg1.jpg image in your background div. To your body tag, add:
background-color: #67b8ed;
Then remove the background div and image. You no longer need them at that point, and it's one less div and image to potentially conflict with everything else displayed on the page.
Don't apply a dynamic height and width to your images. I see the clouds stretching based on the height of the window.
Images are appearing just fine to me in Safari, Chrome, IE and Firefox.
I am making a website with css and jquery. One of my script is to show a text at a specific location on a mouse click. The text is displayed good in google chrome at its intended position. but in IE9 and FF17 they are displaced from the intended position. My background image is such that it fits to the size of the window of the browser.
I am attaching the screenshot which will give a better idea. Also I am writing the code. maybe only a small tweak is required but I do not get it. Please help me in this.
This is the comparison between chrome and IE. the right one is chrome which is the right one. FF and IE display at same positions.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
*Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin-top: 0px;
padding-top: 0px;
top: 0px;
margin-left: 0px;
padding-left: 0px;
left: 0px;
}
body {
overflow: hidden;
}
#background {width: 100%; height: 100%; display: block; position: absolute; z-index:1;}
.content {
visibility:hidden;
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
}
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
<div><img id="background" alt="background" src="tot1.png"></div>
<div class="content" id="thought_text">Here goes the text<br></div>
There is a simple hack that will work in IE9 for vertically centering elements. It uses the transform: translateY property to adjust an element within another element. We can apply a class to our inner element like so:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You'll need to add the appropriate vendor prefixes. Here is a great article on this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Firstly, for fixed positioning, use: top, bottom, left, right attributes instead of margin-top, margin-right..
Secondly, you've applied same z-index'es on siblings.
Thirdly, use of img element for background this way is not the best solution.
You should go for CSS background-image for body or text-div wrapper, stretched to 100%.
Full solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image:url(http://25.media.tumblr.com/6d28260f10f17c0d2eab47398fd855f6/tumblr_mj9ha54DuW1rub5xuo1_1280.jpg);
background-position: top center;
background-repeat:no-repeat;
}
.content {
top: 40%;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
border-style: none;
}
#thought_text{
left: 25%;
right: 25%;
color:#000;
}
</style>
<body>
<div class="content" id="thought_text">Here goes the text<br></div>
</body>
</head>
Consider removing #thought_text{} block in css file and combining it in the .content {} block to avoid overriding of attribute values
or
adding !important directive to the attributes
and also change
margin-top: 40%; to some fixed value such as margin-top: 250px; which ensures the top positions as same in all the browsers.
As I understand, you stretch image to whole page and want to center your block with text. You have 50% width (100% - 25% margins from both side) and 40% top margin.
With position:fixed you have top and left properties to set position relative to page.
.content {
position:fixed; /* taking it over the page */
z-index:2; /* and over the image */
left:25%; /* move to 25% from left */
width:50%; /* and setting width */
top:40%; /* move to 40% from top */
font-size:1.5em;
opacity: 0.697;
}
And you can remove
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
You get original bug because top/bottom margin and padding in percents calculates from width not height according to spec.
this is just an idea , hope that useful .
<style>
#background {
background:url('tot1.png') no-repeat;
width: 100%;
height: 100%;
position: absolute;
z-index:1;
}
</style>
<div id="background">
<div class="content" id="thought_text">Here goes the text<br></div>
</div>
You can use a bit of javascript to detect if IE or Firefox are present, and then change the margin/position of the text accordingly.
function detectBroser(){
if (navigator.userAgent.indexOf("Firefox")!=-1)
return "Firefox";
else if (navigator.userAgent.indexOf("MSIE")!=-1)
return "Internet Explorer";
}