I am writing a website and am having an odd problem.
#Text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
body {
margin:0;
}
<!DOCTYPE html>
<html>
<head>
<title>SomeTitle</title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<img src="someUnimportantImage.jpg" height="100vh">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
</body>
</html>
My problem is that when I load my page in google chrome (I haven't tried other browsers),
there is a mysterious white space at the top that I can't get rid of
the <html> element doesn't fill the browers height, and therefore
setting the images height="100vh" makes it fill the <html> element, but not the page.
What I need is for <html> to fill the page and for the white space at the top to disappear.
EDIT
I got the whitespace to disapear by using the code at meyerweb.com/eric/tools/css/reset.
When you use viewport units, you don't need to worry about the height/width of the <html> element. However you should move the inline height="100vh" into the CSS instead. And I don't see any "mysterious white space at the top" since you already set body{margin:0;}, it might be caused by your other styles if you still see it.
img {
height:100vh;
}
And be aware, CSS class/id names are case sensitive, #Text and #text are not the same.
body {
margin:0;
}
img {
height:100vh;
}
#text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
<img src="//dummyimage.com/500">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
Edit: The white space might be from the <p> tag, as it has some default top and bottom margin from the browser.
Related
Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>
I've been looking for a CSS grid with 100% width and height and no margin/padding on the borders (I want some element to stick on the left and right of the browser window when I'm in regular desktop mode). I can't seem to find one that suits my need: I checked out bootrstrap but it seems way too complicated because I only have to make a simple landing page
Here's a basic format you can use, with some quick CSS/HTML examples. Hope this helps.
In your body, you can apply the .sectional class to any element you want. Be sure to give your contents inside anything with the .sectional class appropriate margin/padding. Use the classes for colors by using any that are color names as background-colors and any with 'fc' as font-coloring.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example - full width</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<style>
*, html, body {box-sizing:border-box; -moz-box-sizing:border-box;}
body {width:100%; height:100%; margin:0em auto; font-size:100%;}
.sectional {margin:0px; padding:0em 0em 0em 0em; width:100%; overflow:hidden;}
.black {background-color:#000000!important;}
.black-fc {color:#000000;}
.blue {background-color:#0000FF; }
.blue-fc {color:#0000FF; }
.coral {background-color:#FF7F50; }
.coral-fc {color:#FF7F50; }
.dark-gray {background-color:#505050!important;}
.dark-gray-fc {color:#505050;}
.gainsboro {background-color:#DCDCDC!important;}
.gainsboro-fc {color:#DCDCDC;}
.midnight {background-color:#252525!important;}
.midnight-fc {color:#252525;}
.scarpa-flow {background-color:#E8E8ED!important;}
.scarpa-flow-fc {color:#E8E8ED;}
.soft-blueberry {background-color:#BCC6CF!important;}
.soft-blueberry-fc {color:#BCC6CF;}
.tomato {background-color:#FF6347!important;}
.tomato-fc {color:#FF6347;}
.white {background-color:#FFFFFF!important;}
.white-fc {color:#FFFFFF;}
.inside {width:97%;margin:0em 1.5% 0em 1.5%;}
.align-left {text-align:left;}
.align-right {text-align:right;}
.align-center {text-align:center;}
.pad-vertical {padding-top:3em;padding-bottom:3em;}
</style>
</head>
<body>
<main class="sectional dark-gray">
<div class="inside white-fc">
<h1 class="scarpa-flow-fc">This is some text.</h1>
<p>This is some paragraph text...</p>
<p class="coral-fc">This is some more text...</p>
</div>
</main>
<section class="sectional align-center scarpa-flow">
<div class="inside midnight-fc">
<h1 class="blue-fc">This is some text.</h1>
<p>This is some paragraph text...</p>
<p class="tomato-fc">This is some more text...</p>
</div>
</section>
<h2 class="sectional pad-vertical midnight soft-blueberry-fc"><span class="inside">A Section Heading</span></h2>
</body>
</html>
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.
You misunderstood me in my previous message so I post a new with an example.
Assume the following that you float for example an image left and some div to the right containing for example which browser you use and date + time and some other things perhaps.
Now you want also to display a name for the company centered between these two floats on the same row. The text of the company in between should always be centered even when you make the browser width smaller.
In this example I can't make the text to be placed centered between the two floats.
It doesn't matter if I put the text in inline element or block element.
I have tried both. In this example I have a p tag.
It doesn't work to use text-align:centered when you have elements that are floating.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style type = "text/css">
#imageone
{
float:left;
}
p#right
{
float:right;
}
div p
{
text-align : center;
}
</style>
</head>
<body>
<div style="background:red">
<p>My company</p>
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
</div>
</body>
</html>
This is relatively simple to do if any two of the elements are fixed-width. You can implement it by using position: relative on the containing element, and position: absolute on the children (the blocks to be aligned left, right, and center).
See this jsFiddle for an example.
You could put your company name after the floated elements in the html:
<body>
<div style="background:red">
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
<p id="name">My company</p>
</div>
</body>
Adding margin 0 to p#right also ensures it will appear vertically centered with the other elements:
#imageone
{
float:left;
}
p#right
{
float:right;
margin: 0;
}
div #name
{
text-align : center;
}
}
See a fiddle here: http://jsfiddle.net/WDrVK/1/
Can you style the center element as margin: 0 auto;?
As in this example: http://bluerobot.com/web/css/center1.html
I'm looking to make a custom CSS webpage, but I'm having difficulty getting all the pictures to show unless I make the min-height around 900px. The index code looks like this,
<head>
<style type="text/css">
#import url("stylesheets/mystyle.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Small Biz Labs</title>
</head>
<body>
<div class="wrap">
<div class="conatiner" align="center">
<div class="header">
<center>
<img src="images/logo.png" width="200" height="100" />
</center>
</div>
<div class="text">
<h1>Maybe a header</h1>
<p>some text</p>
</div>
</div>
</div>
</body>
</html>
and the CSS code looks like this...
/*
Document : mystyle
Created on : Jul 18, 2012, 1:12:14 PM
Author : someguy
Description:
Purpose of the stylesheet follows.
*/
html {
background:url(../images/bodybackground.jpg) repeat;
margin:0px;
max-height:100%
}
body {
background:url(../images/paperbackground.jpg) repeat-y center;
margin:0px;
margin:0px;
max-height:100%;
}
.wrap {
background:url(../images/new_backdrop.png) repeat-x center bottom fixed;
margin:0px;
min-height:1050px;
}
.container {
max-width:600px;
}
.header {
}
.text {
text-align:left;
max-width:600px;
padding-left:10px;
}
I'm trying to get the bottles to float over the two textures I made. Allowing for text/images etc. to be placed in the smaller lighter version of the paper texture. So far I can only make this happen if I set the max-height large enough. Any suggestions on how to adjust my code?
The images I'm using can't be posted until I get more points, but if you want to see them let me know and ill shoot you the jpgs and the one png (the one that floats).
If you want to see a semi live version
jsfiddle: http://jsfiddle.net/wKtGv/
Try adding height:100%; to both body and .wrap
http://jsfiddle.net/wKtGv/13/