![this is the way it should look like][1]
I have no idea how to write CSS for the image that need to be in bcg or div, that will be aligned with right side of content and header. This image has to go from right side of content to left side of browser window.
Lets say browser window is 1900px wide and content is 1100px center aligned.
Image is aligned with the right side of browser window.
I want to write it the way when you change width of browser window, image needs to stay right aligned and left part need to 'disappear' like when you do that with background image and change size of div.
No stretching of the image is aloud, as well as no horizontal scroll.
It need to look like this http://city.tolteam.com/2.html - site will look like this http://city.tolteam.com/ac.jpg
Any help is appreciated. Thx.
Use
float:right; width:50%; /* or a fixed width if you dont want the image to shrink or stretch */
Say like
float:right; width:400px; /* The actual image width */
Which would keep constant size all the time irregular of browser resizes.
Related
Can you help me what CSS code does this webpage used?
http://www.meetme.com/
Specially on the pictures? I mean not all the pictures, I'm talking about the "mid div" or the content area. Well the webpage has 3 parts right?
header
body/content (mid div)
footer
here is my default image Default Zoom
but when I zoom it all out there are more remaining pictures. So If I make a w:1000px wrapper the webpage is centered but the remaining left and right pic wouldn't show up.
but if i make a w:100% wrapper the remaining image will show up(not sure though) but when you zoom it out it goes to the upper left corner.
Do youg et my point? :) It's too hard for me to explain I've been thinking of it about 2hours.
Maybe this would help a little. Let's just say
The header has 1000px
The body has 2000px
The footer has 1000px
So how will be the width of my wrapper(?) if 1000px well the bodyarea will overlap and the horizontal scroll will show up. and if my wrapper has 100% width. When my webpage zoom out it will go to the upper left corner also my logo will be messed up too. Also the horizontal scroll will show up too.
I want how the picture equally show up to the left and right when zoomed out.
I'm not sure if you want this, but you can margin: 0 auto; a wrapper or container and they will center in the middle of your screen when you give them a width.
Here is a example (this will always center in the middle): http://jsfiddle.net/MWtpn/ If this is wrong, sorry.
EDIT:
You can see the sourcecode when you press F12 or inspect a element. The #site_container on http://www.meetme.com is 952px;. They are using overflow-x: hidden; you cannot scroll to left or right now. That gives the effect that you want I think.
I'm trying to take an image and center it on the screen. Lets say the image is the full width of your screen, say 1400px ---
When you resize the browser window, I'm trying to get the image to crop but stay centered as the browser window gets smaller.
Is this possible with css?
I tried a few things with overflow:hidden - no success.
I would take a look at background-size and then just center it vertically and horizontally.
http://css-tricks.com/perfect-full-page-background-image/
I have a div that is centered on my website using margin: auto;
but for some reason if i start to shrink the width of my browser the div i showed in the image below begisn to move left with the browser, and wont stay in its position. I have tried using the position: thing but it doesnt seem to be working for my issue.
How can i get this div to stay centered and not move with the browser?
You can see the issue here on My Website
If you trysh rinking the browser width beyond a certain point that div just begins to move and isnt centered anymore.
Its a problem because people with small resolutions will not see the website right.
The div that seems to be having the issue is main-frontpage
change to min-width of your #footer to the same as the .jflow-content-slider & #main-frontpage (1050px) and then at least your content slider will not overlap the text at the bottom.
EDIT: looking again at your setup, just change the width of your #main-frontpage to the same as #footer #content-wrapper - 1240px. Really this is way too wide and it should be 960px wide but unless you change the width of your footer content this the only way to do it
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.
I am trying to display a cropped center area of an image and have it work for different size images.
I had success setting a fixed width for the div containing the image and using overflow:hidden property, this works the way I'd like it to except this only shows the leftmost part of the image and the right side is hidden.
What I'd like is to display the center part of the image and have the left and right sides of the image hidden.
I'd go with the approach of making it a background image
.imghider {width:100px; background-image:url(./qed.jpg); background-position:center center;background-repeat:no-repeat;}
<div class="imghider"> </div>
As for different sizes you could use several classes or CSS expressions (or server side css generation)
I hope this helps.