I am trying to show a horizontal top bar with logo image in the middle of it. Image is on the left of the page and vertically in the center. How would I get image at center of the topbar?
Here is my code:
<div class='topbar'>
<img src="../../img/headerlogo.png" class="topbarlogo"/>
</div>
CSS:
div.topbar {
height: 80px;
width: 100%;
background-color: #000000;
margin-top: 0px;
}
.topbarlogo {
display: block;
position: absolute;
}
You've spelt your class wrong in the css, 'topbor' should be topbar.
Additionally add:-
margin-left: auto;
margin-right: auto;
Get rid of the rules for .topbarlogo and simply set the text-align:center rule for your div.
jsFiddle example
You need to clear the floats. Create the following div below:
<div style="clear:both;"></div>
Should do the trick.
Related
I am creating a website, and I have an image at the top of my page. The image size is 1920x650 pixels. I am trying to code this correctly, and would like to know what is the best practice for placing images inside divs with heading text overlaying the image? I want the image to always be at 100% width, too.
Currently, I have tried this code, but when the image is at width:100%, and max-height: 600px; the size of the div cuts off the bottom of the image and butts up at the bottom of the heading text. I think it has something to do with my margin of the heading text. I am using a margin-top: -150px; for the heading, to achieve the text in the location where I want it to overlay on the image. Here is my code:
html:
<div id="welcome">
<img src="img/welcome.jpg" alt="Welcome">
<h2>Welcome to my website</h2>
</div>
with the css:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
}
#welcome img{
width: 100%;
}
#welcome h2{
margin-top: -150px;
color: #B0171f;
}
If I remove the margin-top: -150px; from my heading, the image fills up the div. Any help would be appreciated with what I am trying to achieve. Thank you in advance.
You should use the position instead of negative margin:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
position: relative; /* applied for parent div */
}
#welcome img{
width: 100%;
}
#welcome h2{
position: absolute;
top: 50px; /* change what position you need */
z-index: 2; /* higher than image layer */
color: #B0171f;
}
You can set the image as a background to the div welcome.Adjust the background-position to place the image at the desired position in the div using the css property
background-position
html
<div id ="welcome">
<h2>Welcome to my website</h2>
</div>
css
#welcome {
width:100%;
height: 600px;
overflow: hidden;
background:url('http://media1.santabanta.com/full1/Football/Football%20Abstract/football-abstract-9a.jpg') no-repeat;
}
#welcome h2 {
color: #B0171f;
}
DEMO
Read more on background-position
Using the CSS background-image property, you can achieve this with very little code. Just make it the background-image of the h2 itself.
HTML:
<h2 id="welcome">Welcome to my website</h2>
CSS:
<style>
#welcome {
width:100%;
background-image: url("http://www.tilemountain.co.uk/media/catalog/product/cache/1/image/1000x/040ec09b1e35df139433887a97daa66f/p/r/prismatics_prv4_victorian_maroon_200x100-1600.jpg");
color: #B0171f;
}
</style>
http://jsfiddle.net/#&togetherjs=DfmkLBOPVu
I don't think this is identical to the look you're currently going for, but it's a better foundation for what you're trying to do.
I'm trying to center an element of a precise size on a background that is built specifically for it, in order to make it appear seamless.
In the following code, #window represents the browser's window size in pixels (change it to anything). #background obviously refers to the background image I'll be using, and #positionMe is the object I want to fit on the background. I want the background to always be centered in the browser even if the window is resized, and I want the kitten to always be centered in the black box on the background.
As you can see below, the problem is that the background isn't centered on the viewport to begin with; it's centered based on total width of the browser. And when you resize the screen, it doesn't adjust accordingly.
HTML:
<div id="window">
<div id="background">
<img id="positionMe" src="http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg" />
</div>
</div>
CSS:
#window {
background-color: red;
width: 1280px;
height: 720px;
}
#background {
background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
width: 500px;
height: 500px;
margin: 0 auto;
}
#positionMe {
position: relative;
top: 174px;
left: 154px;
}
This Fiddle demonstrates my issue.
Using a combination of display:table-cell and vertical-align:center will center your image vertically. In addition, you can simply use text-align:center to center your image horizontally.
http://jsfiddle.net/reinmcha/XtQ37/10/
Might need to do a little adjusting to keep the background div centered. So, we add another div and set to display:table. The "table cell" will fill the whole thing. Now we center the table with margin: 0 auto.
Final Product:
http://jsfiddle.net/reinmcha/XtQ37/20/
Might need to do some updating to get the image to center perfectly with the border (since it has width...)
Here's my go at it.
I hope you are aware there are tons of articles on this topic. Search around. You'll find your answer :)
You basically have two options, one would be using a div to display an image and making the image a centered background like so:
<div id="window">
<div id="background">
<div id="centerMe"></div>
</div>
</div>
with css:
#centerMe {
width: 100%;
height: 100%;
background: url('http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg') no-repeat center;
}
or for a pure css solution:
#background {
background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
width: 500px;
height: 500px;
margin: 0 auto;
text-align: center;
}
#background:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#centerMe {
vertical-align: middle;
}
I have a hard time to get background on both side of my page:
Style
.left {
background: url(wax.png);
width: 15%;
position: absolute;
left: 0px;
height: 100%;
}
.right {
background: url(wax.png);
width: 15%;
position: absolute;
right: 0px;
height: 100%;
}
.middle{
margin: 0 auto;
}
HTML
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
Result
Its close to what I am trying to achieve but the right image is misplaced.
Also the backgrund is not repeated vertically
background: url(wax.png) repeat-y 0 0;
To get the vert repeat.
Do you have something positioned relative? That input text field is probably pushing down the right div unless you have something else positioned relative?
If you're going to use position:absolute, wrap it all and use position:relative on that wrapping div.
Otherwise, you could use the body tag or even the html tag but it's probably better to use a wrapping container.
im not really sure what you are trying to do it looks align to me but for repeating image is this background: url(wax.png); background-repeat: no-repeat
Its close to what I am trying to achieve but the right image is
misplaced.
Add top:0 to the .right class
Also the backgrund is not repeated vertically
As others have mentioned add repeat-y in the background property value
background: url(wax.png) repeat-y
Maybe you just want to place your middle inside one div with the background repeated in both direction and middle having background white
html:
<div id="background">
<div id="content">
this was middle
</div>
</div>
css:
#content{
margin: 15%;
background: white;
}
#background {
background: url(wax.png);
}
How can I keep my red box on top line when the center div has a very wide content?
When The centered div has much content, the red div goes to another line.
Do you know why this occurs?
Take a look at my code:
http://jsfiddle.net/5dC6T/3/
The issue is in the way that you've ordered your <div> elements. Try:
<div>
<div class="red-box"></div>
<img class="photo" alt="" />
<span>Name</span>
<span>Data</span>
<span>City</span>
</div>
CSS:
/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }
I've made these modifications to your current code: http://jsfiddle.net/Wexcode/38qYS/
Use this CSS:
#QuadroEvento div.TopoEvento div.euvou{
height: 90px;
width: 90px;
background-color: red;
position: absolute;
right: 0px;
margin-right: 0px;
}
The key being: position: absolute;
You can also use position: fixed; etc., see here for more details: http://www.w3schools.com/cssref/pr_class_position.asp
I have .jpg as footer that is 8x76 its just a simple line with height 76px and gradient blue color. I would like to put a logo on it. What's the best way to do that?
This is my CSS:
#light_footer_wrapper {
height: 110px;
background: url(../images/light_footer_repeat.jpg) repeat-x top left;
position: relative;
}
#light_footer_logo {
position: absolute;
top: 8px;
left: 600px;
height: 110px;
}
#light_footer {
width: 960px;
margin: 0 auto;
padding-top: 10px;
}
HTML:
<div id="light_footer_wrapper">
<div id="light_footer_logo"><img src="../a/images/logo.gif" /></div>
<div id="light_footer"></div>
I cant locate my logo now on my footer .jpg. but when I zoom in and out the logo moves around :S I want it locked
You could also set a background-image of the logo for #light_footer if you didn't want an extra div, but an extra div might give you more control.
#light_footer_wrapper is the full width of the browser, so when you resize, your logo will move with it.
You should put the image inside of #light_footer, make #light_footer position:relative, and then tweak your left and top values on #light_footer_logo.