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.
Related
Here's what I have: 1000px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com/scroll
When I resize the browser window (anything less than 1000px should generate a horizontal scroll bar, right?), the scroll bar doesn't come up, as you can see in the image below.
What should I do to make the scrolling bar appear? (Nevermind the slideshow, I'm still working on it.)
JSFiddle: http://jsfiddle.net/vBjeg (Not every image is working, but I believe the most important here is the CSS.)
I appreciate all your thoughts!
Remove overflow: hidden from .row
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
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.
In my web site I am trying to lay out I am trying to get my page to have a left side sidebar/menu area with the main content area to the right. I want my main content area to stop at the right edge of the screen, so I tried to give the area a width: 100%, but this doesn't seem to work right. It seems to be 100% width, but then shifted to the right (and thus going off the side of the screen.
The code and result can be found at http://jsfiddle.net/KallDrexx/xmmSV/5/
How can I accomplish this to keep all the text in the page?
For your main-area, remove the width:100% and position:absolute, replace the left:160px with margin-left:160px and you're done.
It's because #main-area is set to 100% width, which will be 100% of the container (which is this case is body. So, it will be 100% of the page width. But because you're moving it left 160px, it's actual position is 100% of the body + 160px.
Does the layout need to be fluid? If not, you can just set the width of #main-area in pixels.
You can try to replace the: width: 100% with right: 0px of main-area.
Basically this tells that the right side of the box should be 0px to the left of the parent.
Now the main-area is still able to scale with the page width.