html / css positioning images - html

im looking to position my image in the middle of the screen, maybe a little bit to the left or right, but am looking for help on how to position the image to wherever I feel, also correct my html / css if you believe I am making it too hard / incorrect - many thanks in advance - Miles
Edit: for those wondering what this page is, it's an entrance page with a background image and another image that says "enter here" which is hyperlinked to the index of my actual website.
<html>
<head>
<title>Enter</title>
<link rel="stylesheet" href="style1.css">
</head>
<body background="index1background.jpg">
<div id="enterhere">
<p><a href="index2.html" title="Enter Here"><img src="index1enter.png"
alt="Enter Here"</a></p>
</div>
</body>
</html>
css:
#enterhere {
position: middle;
}

img {
margin-left: auto;
margin-right: auto;
display: block;
}
Then you can add padding in order to adjust left and right. The text-align: center does not work in this case.
Edit: If you want to go even shorter, here's a shorter version.
margin: 100px auto 0 auto;
This snippet includes a margin-top of 100px. Here's how it works. Instead of using the keywords margin-top, margin-right, etc, we use the main keyword, just margin. Then the positions:
margin: [top] [right] [bottom] [left];
This works for the padding aswell.

Use the text-align property used in case to place your image where ever you want

If you choose to place the image in the css take a look at the properties "background-size" and "Background-position".
I'd you choose to bring the images into an img tag specify the position with the container above. There are two ways to handle that. Flexbox and css grid (check the w3 website for awesome details). After the positioning with one of these methods you can adjust the position of your image with the property "margin" which you will set in the image's css.
Make sure it has a reason where you will place your images - css or html. Images placed in html should be relevant to the content (like product pictures). Css placed images should be unnecessary for the content (like decoration images).

Related

Html Div Link covers an entire background row

I just made a div-link with an image src. Almost everything is ok nevertheless the image-link-div, although its positioned just where i want to it to be, covers (as a link) an entire row from left to right, like it is using an entire line. Any object I put near the code gets placed after (above) or before (bottom) of this invisible link row. Any help ?
**The image its just the Google homepage logo on every navigation:
white background
properties:
width - 70px
height - 38px (auto stretched on paint, saved as .jpg)
CSS:
.box4
{
margin-left: 0%;
margin-right: 80%;
display: block;
}
HTML:
<div class="box4" onclick="location.href='https://www.google.cl'" style="cursor:pointer;"> <img src="Imagenes/Google.jpg"> </div>
In short, the problem with your div-link :
<div> uses by default display: block, you don't need to define it for divs
all of your other "boxes" use float: left which reduces width of block to it's minimum if width is not specified and removes what you call "invisible link row"
learn more about display and float attributes, it's hard to create a layout if you don't know absolute basics of CSS

Vertically Centering Links in inside Div

http://www.fccorp.us/index.php
The vertical column to the left is my site menu system. The column is a div with a height:100%, and the different details are div's laid over it.
The buttons are DIV's with blank buttons as backgrounds, with links on them. I have two different size buttons, the big one 60px tall and the small one 30px. Using CSS can I get the links to be centered vertically regardless of the height of the button's DIV?
I've looked here and used a few CSS sites & Android Apps. The site here suggests I can't, but I can't understand why the CSS group would not create a vertically centering function since it seems so needed.
Am I just missing something or am I really trying to get something that isn't available with CSS?
Based off your site, you can use line-height to adjust the vertical positioning of the text.
Try applying this to your 30px tall links:
line-height: 30px;
And this for the 60px tall:
line-height: 60px;
Additionally, you should not be nesting <div> tags within <a> tags.
Use this:
.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}
That will center all of your links.
On another note, currently you have the following structure:
<a href="#">
<div>text</div>
</a>
That is invalid HTML. I'm not a "HTML must be valid at all times" type of guy, but when you can fix it that easily, I think it wouldn't hurt making it valid. You should use the following:
<div>
text
</div>
Add this to your CSS. It will work regardless of the height of your buttons:
.menubar a div {
display: table-cell;
vertical-align: middle;
}

How do I make a header that remains in the top at all times?

I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test

Clip images with HTML and CSS

I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js

CSS HTML figure padding

I am trying to use CSS and HTML to insert an image into a webpage.
I have the following on CSS:
#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
padding-top:475px;
}
and in my HTML, I have:
<div id="maintext">
<p> my page </p>
</div>
<div id="eDTP"></div>
Although this works, I have a big white space on the top and bottom of the images, which I do not want. I tried adjusting the padding values, but that does not seem to really help.
Could anyone please point me in the right direction to get rid of these white spaces?
I would remove the padding top. That should eliminate the problem. I'm not sure why you would need such a high amount of padding between them.
EDIT - Just read that you say the padding hasn't helped you. Any chance of a link to the url? Or a live example somewhere to see the issue in more detail?
Make sure that the line-height of the figure or surrounding element is set to line-height:1;
The only size that you have specified is the padding. The size of a background image doesn't affect the size of the element. You should remove the padding, and specify width and height for the element so that it's the same size as the image.
Unfortenately there is no way to do that in HTML/CSS. Only way of doing this is inserting the values on your server or client-side by javascript. You should really do it with <img> tags inside your <div> element like so.
Make sure you point to the right location of the image you want to show relevent to folder where it is being called.
http://jsfiddle.net/gKFAT/
Here you try to show an image as a background for a div. Is there really strong reason not to use html like above?
<div id="maintext">
<p> my page </p>
</div>
<div id="eDTP">
<img src="eDTP.png">
</div>
If so, you need to specify the dimentions of your di, 'cause it doesn't auto fit the background size (no surprise here, I think).
Try
#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
width: 120px; //background image width here
height: 150px; // and height here
}
Your biggest problem is width and height. Also, how do you want this image displayed? Do you want it below the text, on the side of the text, etc? In modern browsers, a div is fully collapsed, and its height is equal to 0. Its width, by default, is 100%. IE7 and older does not work this way for the height.
You need to specify, not padding, but width and height for your div container, eDTP, that is, if you wish to have the background image added via CSS. If you wish to have an image populate eDTP using the img tag, then you do not have to specify the height.
By the way, the reason you see your image with the padding is based on something called the box model. Padding extends the visible region of background color, a background image, and others. The padding you have is functioning like you have a height assigned to its container. But as I said before, this is a very bad way to do this. Add this to your eDTP declaration:
#eDTP {
background: url(eDTP.png) no-repeat center;
width:500px; /* Change this value to the width of your image */
height:475px;/* I assume this is the height of your image */
}