Im just getting in to web dev (mainly an iOS, Java, c# programmer). I have a simple problem bt it is anoying.
<div id="banner">
<img src="Styles/Banner.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
I have a banner which is a simple image (.jpg) and I want to overlay some text. The problem is positioning the text over the banner. I dont realy want to use apsolute positioning. I would like to have both the image and the text centered. The problem is I ony seem to be able to overlap the text over the image when using apsolute positioning, which will be effected if the window is resised. Whats the best/simplist way to do this.
Just Like to thank all of you for being so helpful. GC
Live demo
Hey now i think you should want to this
HTML
<div id="banner">
<img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
Css
#banner{
position:relative;
background:green;
padding:10px;
}
img{
vertical-align:top;
}
#bannerText{
position:absolute;
top:20px;
left:10px;
background:red;
}
Demo
You have to give the parent element (#banner) a position: relative; to make the absolute position of its child (#bannerText) dependent on the banner position and not on the window border.
If you can use image as background instead of <img> tag using css like following example
#bannerText
{
background: url("Styles/Banner.jpg") no-repeat center center;
width: 123px;
height: 123px;
text-align: center;
}
If you don't want to use Position:
if you want to use <img> then go with "feeela's" ans
Related
I am trying to make a slider. How can I put one image into another image and
put text and a small image in that image(the last one)? I have put one image into another one with no problem by giving position:relative in for main div and giving the second image position:absolute. But the third part (putting small image and text in that image) is tricky. I gave the container of image and text position absolute, but it is positioned out of the image div. Maybe a small example could help. Thanks
#maincontainer{
width:650px;
margin:0 auto;
margin-top: 25px;
position: relative;
}
#image1container
{
width: 650px;
margin:0 auto;
margin-top: 25px;
position: absolute;
top: 95px;
left: 137px;
}
#image2container{
position:absolute;
}
You could try using the background-image CSS property of <div> elements in HTML. Your HTML would look like this:
<div id="maincontainer">
<div id="image1container">
<img src="small-image.jpg" alt="Small image />
<p>Text in image</p>
</div>
</div>
And your CSS would look like this:
#maincontainer {
background-image: url('main-container-image.jpg');
}
#image1container {
background-image: url('image1-container-image.jpg');
}
From here, you could use CSS to position the elements as needed.
I am trying to place a child div over the top of its parent div (including its content)
<div id="footer">
<div id="footer-container">
<div id="icon"></div>
</div>
</div>
#footer {
height:50px;
border-top:3px #666 solid;
margin-top:50px;
}
#footer-container {
height: 30px;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
}
#icon {
height:30px;
width:30px;
background-color:#666;
}
Now it works if the content of <div id="icon"> is text but if you place a background image in the div it does not. Is there any way to make this work? This maybe explains it better
http://jsfiddle.net/4QxL7/
EDIT
Apologies. It was working all along. I was using PNG's for the images which have 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help
I just tried two methods and they both worked using an oversized image from my site...
<div id="footer">
<div id="footer-container">
<div id="icon"><img src="image url here" width=30 height=30/></div>
</div>
</div>
http://jsfiddle.net/ZkxSM/
and
#icon {
height:30px;
width:30px;
background-color:#666; /*unnecessary now probably...*/
background:url('image url here');
}
http://jsfiddle.net/b6QyX/ (image needs to be resized before hand for this to work maybe... or width and height can be set in the html of the div)
There's nothing actually wrong with your jsfiddle..
Apologies. It was working all along. I was using PNG's for the images which has 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help
My framework is spitting out html in the wrong order for my layout. I could change it but for other media the order is correct. Currently I have a simple line of javascript to transport the html but I was wondering if there was a css alterative.
Here is the simplefied exaple. The first example is how it should work, the second is what I have now. I'd like to know if the same layout can be accomplished on the second example, the desired version wihtout using the javascript
http://jsfiddle.net/SPgyA/1/
<div id="wrap">
<div id="right" class="somediv">
div right, dont know height in advance
</div>
<div id="main">
main text, dont know height in advance<br />
main text, dont know height in advance<br />
main text, dont know height in advance<br />
</div>
</div>
<div id="desired_wrap">
<div id="desired_main">
main text, dont know height in advance<br />
main text, dont know height in advance<br />
main text, dont know height in advance<br />
</div>
<div id="desired_right" class="somediv">
div right, dont know height in advance
</div>
</div>
the javascript:
$("#desired_right").prependTo("#desired_wrap");
the css
#wrap,#desired_wrap{
width:200px;
margin:10px;
padding:10px;
border:1px dashed grey;
}
#right{
float:right;
}
#desired_right{
float:right;
}
.somediv{
color:red;
width:100px;
background-color:#eee;
}
Here the way to handle this with only CSS and without changing your HTML order, by adding a small additional html attribute*:
*In my opinion, this is only possible way to get this work, because the floating behavior, specified by the w3c, can't work this way without adding at least one html attribute.
HTML
<div id="desired_wrap">
<div id="desired_main" data-placeholder="my box text">
main text, dont know height in advance<br />
main text, dont know height in advance<br />
main text, dont know height in advance<br />
</div>
<div id="desired_right" class="somediv">
my box text
</div>
</div>
Now, we're placing the text from data-placeholder via the :before, before #desired_main via the content css property.
This way, the height of the generated element will be exactly the same as the height from #desired_right, because they contain the same text.
CSS
#desired_wrap{
width:200px;
padding:10px;
position: relative;
}
.somediv {
width: 100px;
}
#desired_main:before {
content: attr(data-placeholder);
float: right;
width: 100px;
}
Positioning #desired_right absolute to the right top, will simulate a float right, like in your first, working example:
CSS
#desired_right{
position: absolute;
top: 10px;
right: 10px;
}
Works well in:
Internet Explorer 8+
Firefox 3.6
Chrome 17+
Safari 5+
Live demo: http://jsfiddle.net/SPgyA/3/
If you want to align the inner .somediv to the top right you need to add position:relative and absolute
#wrap,#desired_wrap{
position:relative;
}
.somediv{
position:absolute;
top:0px;
right:0px;
}
EDIT:
Just realised that with that change the text no longer flows around the div...
I have a problem. The designer I hired did not separate out the logo and the header and its to late to get it done from him.
so I have a header image which has the sites logo in it. I want to make this logo clickable. You can see the site here: http://www.stopsweats.org/
The code for the logo tag is:
<div id="header">
<p id="logo">
</p>
Here is the CSS, added as per comments
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
padding-top: 2em;
z-index: -1;
}
So how can I make this into a valid link.?
I don't want to add any visible text as it will look ugly.
I will change the #logo width and height and placement as an overlay on the image. Hope fully that should be ok among all browsers.
The easiest thing to do is make the a take up some space. It's already properly positioned, so there's only a little bit to do.
Remove these css width and height properties:
#logo a {
width:1px;
height:1px;
}
Then add a little text to the a:
StopSweats
The text won't be displayed because you have text-indent: -9999px applied to that a, but the block will be about the right width and height to cover the banner image area.
Write like this:
HTML:
<div id="header">
</div>
CSS:
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
z-index: -1;
width:1000px;
padding-top:10px;
}
#logo{
display:block;
width:245px;
height:60px;
margin-left:90px;
}
http://jsfiddle.net/rEFRw/
Esiaest way to do according to your structure I would prefer to put your logo image directly into your html instead of background-image through css. If you would like to do than only need to add image tag between your anchor tag (....) just change your css and html according to below code..
CSS
#header {
border-color: transparent;
height: 108px; /* change according your logo image height */
padding-top: 2em;
z-index: -1;
}
HTML
<div id="header">
<p id="logo">
<img src="http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg" alt="logo" title="go back to home" width="logo width here" height="logo height here" />
</p>
</div>
Check your logo image url properly and make sure you endup your header div tag where it is in your current html file.
Also if your #logo id has width and height value set than change accordingly.
#logo a{display:block; height:XXpx; width:XXpx; text-indent:-999px;}
you may have to adjust some css of other tags also. but it will work
I've used Blueprint to prototype a very simple page layout...but after reading up on absolute vs. relative positioning and a number of online tutorials regarding vertical positioning, I'm not able to get things working the way I think they should.
Here's my html:
<div class="container" id="header">
<div class="span-4" id="logo">
<img src="logo.png" width="150" height="194" />
</div>
<div class="span-20 last" id="title">
<h1 class="big">TITLE</h1>
</div>
</div>
The document does include the blueprint screen.css file.
I want TITLE aligned with the bottom of the logo, which in practical terms means the bottom of #header.
This was my first try:
#header {
position: relative;
}
#title {
font-size: 36pt;
position: absolute;
bottom: 0;
}
Not unexpectedly, in retrospect, this puts TITLE flush left with the left edge of #header...but it failed to affect the vertical positioning of the title. So I got exactly the opposite of what I was looking for.
So I tried this:
#title {
position: relative;
}
#title h1 {
font-size: 36pt;
position: absolute;
bottom: 0;
}
My theory was that this would allign the h1 element with the bottom of the containing div element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.
At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!
don't go changing positioning or floating of the blueprint classes. That will mess up the framework.
What you are trying to do is going to be difficult, because what you are trying to do (I assume) is align the baseline of the type with the bottom of the image. There is no easy way to determine the baseline of type via CSS. So getting them aligned is going to be entirely dependent on the particular font that loads for your user. If your image is 50px high, you could start by setting the line height of your h1 to 50px and then tweak from there. But understand that there will be variance from browser to browser, font to font.
You're probably better off making your headline part of the image then use some image replacement techniques to hide the text.
Give this a go and let me know if it is what you are trying to achieve?
HTML:
<div id="container">
<div class="logo">Logo here</div>
<h1>TITLE</h1>
</div>
CSS:
#container{
background-color:#ccc;
position:relative;
width:300px;
height:200px;
}
.logo{
width:110px;
height:40px;
background-color:#ff0000;
margin: 0 auto;
}
#container h1{
font-size:120%;
font-weight:bold;
text-align:center;
}
Here's a live demo: http://jsfiddle.net/jrLL2/