I'm working on a website for a girlfriend of mine.
But I'm stuck positioning a the logo.
Here is the website I'm talking about:
http://xntriek-test.s3-website-eu-west-1.amazonaws.com/
I tried using z-indexes but don't work. I also tried setting an background image for the body.
But then I'm to limited with sizing the image.
I'm using Twitter bootstrap to put this thing together.
At the moment this is the class I'm using for the logo:
.logo{
position: absolute;
top: 25px;
left: 25px;
height: 45%;
width: 30%;
z-index: 1;
}
At the moment I'm positioning the image in a span along side the main content.
But because I'm using position: absolute this wouldn't make a difference were I put it.
If any body has any ideas how I could solve this, maybe a different approach then I'm doing right now. Any help welcome!
You need to modify your CSS along the following:
<div class="span6 offset3" style="position: relative; z-index: 1">
z-index affects positioned elements, so just add position: relative to your span of interest.
I would create a special class "z-wrap" and modify the style sheet.
<div class="span6 offset3 z-wrap">
In CSS style sheet:
.z-wrap {position: relative; z-index: 1}
Reference: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index
Note You may have to adjust the value of z-index depending on any z-index value you may have set in the logo container.
First you are distorting the logo with your css, if you want your image to be responsive position it in an responsive element, position this absolut and let the image adjust it's size.
#logoContainer {
position:absolute;
top:25px;
left:25px;
width:30%;
z-index:-1;
}
img.logo{
width:100%;
height:auto;
}
your html should look something like this:
<div id="logoContainer">
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>
Put this right after the opening of your body tag and not in some other elements.
By putting it in other elements the logo inherits their z-index and you can only influence it's z-positioning inside the parent but not on the overall page.
One thing to remember when using the z-index attribute :
Only the elements placed using their "position" attribute (relative, absolute or fixed), can be affected by the "z-index".
So if you want to fix your issue, either put your logo as a background image, either use position in the CSS of the content.
Related
If I have 2 div tags:
<div id="parentDiv">
<div id="childDiv"><!-- other html --></div>
<!-- parent div html -->
</div>
I want the content of <div id="childDiv"> to overlap the content <!-- parent div html -->.
Reason (in case this looks like bad code design to anyone):
I need a hack workaround in google sites, I cannot add custom code on the sidebar nav, only in the main html space, I want to float a div that takes no space and relatively position it over the side bar to get around the forced limitation.
I can do everything except stop the childDiv from taking up space in it's bastardized main-page container.
You can give it a position absolute, and navigate it with margins.
#childDiv {
position: absolute;
margin-top: -100px;
margin-left: -100px;
}
How about a simple
#childDiv {height:0; overflow:visible;}
But you probably want it to have a background colour, hm? Hm.
#parentDiv {
position: relative;
}
#childDiv {
position:absolute;
top:0;
left:0;
width:100%;
}
If you need to bump the content around, or overlap stuff that is 'outside' of the sidebar, you can use negative margins to increase the width of the childDiv or move it up (to cover padding or margins you can't override).
If you need to make the #childDiv cover the entire #parentDiv, you can use a bit of JavaScript to set a min-height on childDiv, then add a colored background or something to cover any content.
var parentHeight = jQuery('#parentDiv').height();
jQuery('#childDiv').css('min-height',parentHeight + 'px');
You have to take the childblock out of the flow. The best way to do this is position: absolute on the child div and position: relative on the parent div.
I have been fiddling around with this for some time now, but I still don't understand how it should be done.
I would like the image to be maximized (100%/100%) in the background of the itemtemplate div, but right now it just makes it fit inside the div which is 250px/250px.
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img style="-ms-grid-row-span: 2;" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle">
</h6>
</div>
</div>
Any ideas ? thx.
You can position the image absolutely and set the height and width to 100% in your CSS files.
.itemtemplate > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Just make sure you remember to position the parent div and the other children of .itemtemplate relatively:
.itemtemplate, .itemtemplate > div {
position: relative;
}
The parent needs to be positioned relatively to ensure the img is positioned within that element. The other children of the parent need to positioned relatively to ensure that they are drawn above img (as positioned elements are drawn after static elements). If you have trouble seeing the other child elements then you can set their z-index.
Working example: http://jsfiddle.net/sjsNJ/
Need to use CSS background-image.
div.itemtemplate
{
background:url(PATH_TO_IMAGE);
background-size:100% 100%;
background-repeat:no-repeat;
}
See site below for more info.
http://www.w3schools.com/cssref/pr_background-image.asp
I am not familiar with the attributes you are using. But, in order to use an image for the background. There are couple of ways.
If it is <body> or <table> you can also define them by using doing something like this
<body background="link/to/image.jpg">
But the global way, which every element supports would be to define them using CSS
<div style="background-image: url("link/to/image")">...</div>
Now, coming to the image part
Whenever you are using a background image,
It is never going to re-size to fit the container. Unless you use CSS3.
/* CSS3 Snippet to resize a background */
div
{
background-image:url("link/to/image");
-moz-background-size:80px 60px;
background-size:80px 60px;
background-repeat:no-repeat;
}
If the container is big, it will start repeating itself to fill the area. Which can be controlled to repeat or not repeat. Like
div {
background-image: url("link/to/image");
background-repeat: no-repeat; /* similary repeat-x and repeat-y */
}
However, what you are trying to use in using a <img /> to act as a background, which is semantically wrong and I do not recommend it.
I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
http://jsfiddle.net/RprTY/
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
div{
float: left;
position: relative;
}
img{
vertical-align: bottom;
}
#smallone{
top: 0;
left:0;
position:absolute;
}
As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.
Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.
I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.
The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.
http://jsfiddle.net/36QPG/1/
<div class="image">
<img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
<div class="image">
<img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
</div>
</div>
It's worth mentioning that I can't change the HTML code set up.
I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.
Thank you in advance.
html:
<div id="bottom">
<div id="top"></div>
</div>
css:
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}
I frequent a website called GOOD and I love one aesthetic style in particular; how the navigation bar extends its colours across the background of the website. You'll see what I mean if you visit the site.
In CSS, how could I replicate this in the most simply way possible? I've tried all sorts of things with z-index/margins/float and it simply isn't happening.
Just put A div (position'd absolute) in the back with the menu in it and put another div, with the actual content in it over that.
Little example:
<html>
<body>
<div style="position: absolute; top:200px; left:0px; width:100%">The menu here, at A 100% width</div>
<div style="position: absolute; top:0px; left: 0px;">The content here.</div>
</body>
</html>
That should work!
Hope that helps.
Its all about position: absolute. The nav container which holds all of those links is given this CSS property which removes it from the normal flow of the page. It has top: 165px to set it where it is positioned. Each of the links are given the display: block property which means they will fill their parent which in this case is 100% of the width. A span tag is then used inside the 100% width links to set the text where it is.
Hy, i'm really stuck. I'll go step by step and hope to make it short.
This is the html structure:
<li class="FAVwithimage">
<a href="">
<img src="pics/Joshua.png">
<span class="name">Joshua</span>
<span class="comment">Developer</span>
<span class="arrow"></span>
</a>
</li>
Before i paste the css classes, some info about the exact goal to accomplish:
Resize the picture (img) by 57%. If it cannot be done with css, then jquery/javascript solution. For example: Original pic is 240x240px, i need to resize it by 57%. That means that a pic of 400x400 would be bigger after resizing.
After resizing, the picture needs to be centered
vertical&horizontal inside a: 68x90
boundaries. So you have an LI element,
wich has an A element, and inside A we
have IMG, IMG is resized by 57% and
centered where the maximum width can
be of course 68px and maximum height
90px. No for that to work i was adding
a SPAN element arround the IMG.
This is what i was thinking:
<li class="FAVwithimage">
<a href="">
<span class="picHolder"><img src="pics/Joshua.png"></span>
<span class="name">Joshua</span>
<span class="comment">Developer</span>
<span class="arrow"></span>
</a>
</li>
Then i would give the span element: display:block and w=68px, h=90px. But unforunatelly that didn't work.
I know it's a long post but i'v did my best to describe it very simple. Beneath are the css classes and a picture to see what i need.
li.FAVwithimage {
height: 90px!important;
}
li.FAVwithimage a, li.FAVwithimage:hover a {
height: 81px!important;
}
That's it what's relevant. I have not included the classes for: name,comment,arrow
And now the classes that are incomplete and refer to IMG.
li.FAVwithimage a span.picHolder{
/*put the picHolder to the beginning
of the LI element*/
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 90px;
diplay:block;
border:1px solid #F00;
}
Border is used just temporary to show the actuall picHolder. It is now on the beginning of LI, width and height is set.
li.FAVwithimage span.picHolder img
{
max-width:68px!important;
max-height:90px!important;
}
This is the class wich should shrink the pic by 57% and center inside picHolder
Here I have a drawing describing what i need:
alt text http://lookpic.com/i/169/2U12JC16.jpeg
I don't know what you're talking about with the 57% - from your example, you want to scale to fit within 68x90, not 57% specifically. As far as I can tell, using max-width and max-height works for that (though won't work in IE6, and I don't think there's a non-JS workaround for that). But why do you expect it to be centered?
The easiest way to center an image you don't know the size of, when you do know the size of the parent, is to set on the parent:
text-align: center;
line-height: 90px; /* height of parent */
vertical-align: middle;
One problem with this though, is that if the user increases the font size, the line-height increases along with it, making the image(s) not centered vertically anymore.
For the absolute positioning, I assume you have position: relative on the li? Also, you could probably use float: left; instead (but of course you'd need an element with clear: left; at the end of the li then).
As far I can remember (out of the web dev world for a while), a is an inline element and you can't set its height. You could try adding a display:block to a elements.