I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div
Related
So, i'm making this page:
http://www.fasade-petek.si/
The header has 3 images (logo, text, facebook) - this is inside :
<div id="FB_GPlus_logo">
<a href="http://www.facebook.com/5ekdoo" target="_blank">
<img src="img/Facebook_Logo.png" width="40px" height="40px"></img>
</a>
</div>
<div id="logo">
<img src="img/logo.png" height="80" width="214"></img>
<img src="img/Napis.png" height="80" width="448"></img>
</div>
logo and text (image) are positioned using margins, facebook is float:right.
#FB_GPlus_logo {
float: right; /* add this */
position: relative;
padding-top: 35px;
}
#logo {
/* border: 1px solid #FF0004; */
/* Na sredino */
display: table;
margin: 0 auto;
overflow: hidden; /* if you don't want #second to wrap below #first */
padding-right: 170px;
}
#logo a {
padding-right: 250px;
}
Everything looks good if you have widescreen, but if you resize a window a little, the logo and text will go under each other, what is the best way to fix this? I would be happy if it would just stay where they are and you would have to scroll (left and right), or is there any better way to fix this? I'm sure the header would look bad if you would be viewing it on a mobile too (portrait).
What i wanted to do is:
Text (image) should be in the center of the header
Logo should be a little to the left of the text (image) (like 200px to the left of the logo)
Facebook logo should be on the right
Basically, you want the logo between the left corner and the text image. To achieve perfect symmetry, you need to change your markup.
Change the html to this :
<div id="logo">
<img src="img/logo.png" height="80" width="214"></img>
<img src="img/Napis.png" height="80" width="448"></img>
<div id="FB_GPlus_logo">
<a href="http://www.facebook.com/5ekdoo" target="_blank">
<img src="img/Facebook_Logo.png" width="40px" height="40px"></img>
</a>
</div>
</div>
Now select all the elements inside the #logo div and make them all float left and with a proportional width
#logo > a, FB_GPLUS_logo {
float : left;
width:33%;
min-height:80px;
text-align:center;
}
This should create three divs with a width of 33% thereby almost occupying the header and all the content in the divs will be center aligned. As a last point, because all the elements are floats you may need to apply this '.clearfix' class to the parent div in which all theses three divs reside.
.clearfix:after {
content :'';
clear:both;
display:block;
}
I am wondering if it is possible to keep an img inside a div always centered regardless of the browser size? By being centered I mean that the left/right sides of the image gets cropped to ensure the image stays centered without modifying the height. Also, is it possible to prevent the horizontal scroll bar from appearing when the browser width is less then the image width?
I'm sure this is really easy to do if my image is located in a background-url tag in CSS, but because this image is being housed inside the SlidesJS carousel the image has to be from an img tag.
At the moment, I have used margin:0 auto; to keep the image centered as long as the browser width is larger then the image. Once the browser width shrinks, the image does not resize with the shrinking browser size. I also have yet to figure out how to remove the horizontal scroll bar when the browser width is too small.
This is what I'm trying to achieve: http://imgur.com/Nxh5n
This is an example of what the page layout is suppose to look like: http://imgur.com/r9tYx
Example of my code: http://jsfiddle.net/9tRZG/
HTML:
<div id="wrapper">
<div id="slides">
<div class="slides_container">
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 200px;
margin: 0 auto;
}
Try this: http://jsfiddle.net/9tRZG/1/
#wrapper {
max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
margin: 0 auto;
}
#wrapper img{
width:100%; /* the image will now scale down as its parent gets smaller */
}
To have the edges cropped, you can do this: http://jsfiddle.net/9tRZG/2/
#wrapper {
max-width: 600px; /* so this will scale down when the screen resizes */
margin: 0 auto;
overflow:hidden; /* so that the children are cropped */
border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}
#wrapper .slides_container{
width:600px; /* static width here */
position:relative; /* so we can position it relative to its parent */
left:50%; /* centering the box */
margin-left:-300px; /* centering the box */
}
#wrapper img{
display:block; /* this allows us to use the centering margin trick */
margin: 2px auto; /* the top/bottom margin isn't necessary here, but the left/right is */
}
Jeff Hines linked putting image always in center page where ShankarSangoli explained how to achieve this.
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
I am not sure about the align center looks proper to me as for the scroll bar.
You can use the following:
overflow-x: hidden;
I have an image that should be positioned near the bottom of the screen. I have a main image that is the background image and will resize with the browser size. I need the image over the background image to be 20-30px from the bottom no matter what size screen or if the screen is resized. (Image also must be centered.)
I am not sure how to go about doing this. What is the best way to do this?
Here is the code I have tried:
.bottom{
position:absolute;
margin-left: -355px; /* Image is 710 in width */
left:50%;
bottom:-20px;
}
That code has the image centered on the page properly but not 20px from the bottom. Also I have content below the image and I want the content to stay below the image but it currently comes up over the image.
HTML:
<img class="bottom" src="src-path.png" alt="Text" />
<p style="clear:both;"> </p>
<!-- More Content here that consist of img and p tags. -->
I guess to position the image 20-30 px from the bottom you can use css property
margin-bottom:30px; or 20px what ever value suits you.
for aligning at the center use vertical-align:middle Please do share the code that the thing is more clear. Hope I answered it correctly.
CSS Together must look like:-
margin-bottom:30px;
vertical-align:middle;
You better use a CSS file, in which you declare a footer to be at the bottom of your page. Then put your image in your page, with class of that CSS and id of "footer". Clear enough?
Here is the way I finally did this:
CSS:
.image_block {
/* Size of image is where the width/height come from */
width: 710px;
height: 500px;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/*Nothing Specified */
}
HTML:
<div class="image_block">
<img src="src.png" alt="Alt Text" />
</div>
I have a <div> containing an image and some text. The image is supposed to come at the left corner and the text is supposed to come in the center of the <div>. But the text is coming off a little off-center to the right due to the width of the image.
How do i fix it??
<header>
<img id="searchBoxProp" src="/resources/images/searchBoxProp.png">
<div class="title">RECIPE SEARCH</div>
</header>
header #searchBoxProp { margin: -16px 0 0 2px; width: 43px; float: left; }
header .title { text-align: center; margin-left: 0 auto; }
You could set the image as background of the <div class="title"> and then set text-align:center in order to align the text properly.
The HTML could be just:
<header>
<div class="title">RECIPE SEARCH</div>
</header>
And the CSS:
div.title {
background-image:url('/resources/images/searchBoxProp.png');
background-repeat:no-repeat;
text-align:center;
}
You will also need to set a fixed height (equal to the image), and finally set the width you wish.
Set header to position:relative, and #searchBoxProp to position:absolute. Absolute positioning takes the element out of the layout, so it won't affect the text postion. The relative positioning on header makes sure that #searchBoxProp is positioned relatively to header, instead of the browser window.
header {
position:relative;
}
#searchBoxProp {
position:absolute;
left:0px; /* set to your needs */
top:0px; /* set to your needs */
}
Best practice is to use a background image however if not you can use position absolue like this.
header{position:relative;}
header .title { position:absolute; width:100%; display:block; text-align:center; }
I am writing a website in Html using CSS; in my website I have a text logo that I want to place in the top center size of the site, I am using CSS as indicated below
background-color:#4d5152;
position:fixed;
width:970px;
top: 0%;
padding-right:200px;
padding-left:200px;
My question is, how can I position my logo in the upper center and have the left and right size of the logo the same color of the logo without righting the values to the padding left and right; so it will be generic for all computer monitor size and browsers
hope I am clear enough
Thank for the help
Typically, I would write something like this:
HTML
<html>
<body>
<div id="wrapper">
<h1 id="logo">My Company</h1>
</div>
</body>
</html>
CSS
#wrapper {
width:960px; /* Width of the containing 'wrapper' or content area */
margin:0 auto; /* This will center the wrapper. 0px margin on the top and bottom, and 'auto' on the left and right (let the browser decide the amount of margin). */
}
h1#logo {
text-align:center; /* If you don't define a width the h1 will be 100% as its parent (#wrapper). This centers the text. */
}
Here's an example showing this: http://jsfiddle.net/V5Cff/1/embedded/result/