I have background style of #bg_inner as background:transparent url(../images/bg_inner.jpg) repeat-x scroll center top;. But only part of it appears. Any idea why?
Test link:
http://www.aslanyurek.com/inner.asp?Section=myaccount&SubSection=signin
It's because #bg_inner is only the size of #header, which is 35 pixels. There's nothing to display the background in once #bg_inner's block is drawn. See, you have the inner form set to float left, which brings it outside of #bg_inner. Basically, you've shortened your own header section.
You should just define your background properties on the body element itself and remove #bg_inner entirely. Either that or remove the float:left; property from the form element.
Related
I'm confused in some CSS trick. The scenario is painted below. In the 2nd container is a plugin like http://workshop.rs/projects/coin-slider/
I want to move that 2nd container up (the green one), to be connected with the menu bar. The purpose is, I want the Image Logo overlaping the 2nd container. How can I achieve that ?
I tried simply set the negative value of the margin-top property of the 2nd container but it causes that the div's are moved.
This should do it:
#container-2 {
display:block;
position:relative;
top:-0px /* <-- Put actual value here */
}
It would be easier if you could post you css code.
Somes possibilites:
set "image logo" margin-bottom to a negative value and make sure container#1 height isn´t preventing the bottom container go up.
or set both containers position: absolute and then set property top to match the desired result.
I would go for a position: absolute for the image logo.
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.
When I try to move the div #planet up (I change margin-top from -76px to -86px) my whole site "lifts up".
You can view the page here (and see the problem) http://rssreaderbg.net/pubsubbub/example/cssexam/index.php
It's because a div is a block element, so it stretches from one end to the other. So when you change the top of that particular div, you're changing the tops of all the following divs.
See the trick (an oldie but a goodie) at the bottom of this page http://css-tricks.com/the-css-box-model/ (as a for instance) to see how this works and to find out how to duplicate it for yourself.
try to add height parameter to "icons" div... when you change that margin now, size of parent div(icons) is affected and whole site moves up because that div changed height
just apply padding-top:10px; for the #container
Remove all margin of the class .iconss
Use position:absolute on #icons and set the position:relative in the class .iconss
Now, use top and left css property to set the icon position.
Cleber.
id=icons are above the id=nav. When you edit the top margin of an element in id=icons it effect id=icons. When id=icons goes up the others goes up too. I suggest you to use position css for icons and nav too.
background-position: -200px 0;
one site says it crops an image from the bottom and displays the rest part
..another site is saying its shifting the image to the left..what exactly does it do ?
I am trying to implement CSS Sprites..having problem due to this positioning thingy...this is what I have implemented so far...its not working right..I have few links and I want a diff part of the image to be displayed when mouse is moved over a particular link...I am geting output as the whole image being displayed..it wont even crop it..I tried so many things like changing positioning, adding divs..what not..now I am so lost , I dont even know where I began..Could someone plz point out what am I doing wrong here ? Why is the image not getting cropped..sure something is wrong with this positioning X,Y values....
here's the code:-
<style type="text/css">
#sprite ul{background:url(images/image.jpg) no-repeat;
width:728px;height:1225px;display:block}
#ID1{background-position:0 -1000px}
#ID1:hover{background-position:0 -1000px}
#ID2{background-position:0 -1000px}
#ID2:hover{background-position:0-800px}
#ID3{background-position:0 1000px}
#ID3:hover{background-position:0 -600px}
#ID4{background-position:0 1000px}
#ID4:hover{background-position:0 -400px}
#ID5{background-position:0 1000px}
#ID5:hover{background-position:0 -200px}
#ID6{background-position:0 1000px}
#ID6:hover{background-position:0 -200px}
</style>
HTML:-
<div id="sprite">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</div>
background-position: -157px 0; will shift the image 157 pixels to the left. It will not be cropped.
The main problem from your code is that you are setting the background image on the ul, but then changing the background position on the links. So your background position rules will have no effect as the links don't have a background. You want to instead set the same background image on all of the links, probably with something like:
#sprite ul a {
background-image: url(images/image.jpg);
background-repeat: no-repeat;
}
along with some appropriate dimensions, and then take it from there.
one site says it crops an image from the bottom and displays the rest part ..another site is saying its shifting the image to the left..what exactly does it do ?
If in doubt, trust the specification; horizontal position comes before vertical position.
#sprite ul
If you want to show part of an image as the background to a list item or anchor, then you have to set the background on that element. Here you are just putting the entire image as the background to the list itself, and everything else is placed on top of it.
Instead you need to put a copy of the image on each link.
#ID2:hover{background-position:0-800px}
You need a space between the two values
The background-position property is a composite property of background-position-x and background-position-y, so the first value is the horisontal position and the second value is the vertical position.
The position is the top left corner of the image in relation to the top left corner element, so a negative x value means that the image is placed to the left of the element, in effect cropping the image from left.
(So, the site saying that the image is cropped from the bottom has both the value order and direction mixed up.)