My site is centrally aligned in a div container #980px width. I need a div gutter on the left and one on the right for clickable banner ads but i don't want them within the scrollable container.
To explain more clearly, if the screen res goes down to 980px I don't want to see the ads or a scroller - just my container. If it goes down less than 980px I want to see a scroller (as I do now) for the center container.
The gutters are only for wider screen users and should not be included in the scroll. I don't want to use media queries as I want part of the ad to show either side if the screen resolution is nearly wide enough.
I'm stuck how to do this. Do I position absolute the container and position relative the gutters? Do I need to use overflow?
Check this fiddle: http://jsfiddle.net/ezy2J/1/
Be aware that unless the iframe is wide enough the banners won't show in the fiddle, so make sure to resize the html iframe in the fiddle.
You can use position: relative on the container and then position: absolute on the banners to get them to stay outside the container.
I've used media queries to hide, show and resize the banners (drag the iframe width for the HTML). You'd probably use display: block and display: none for compatibility instead of opacity: 0 and opacity: 1 but it looks nicer for these purposes!
something like that?
learn about position: absolute
dont forget about position: relative on parent container
Related
I have set a div to position: fixed in order to maintain a top fixed header. The problem is that the moment that you set a div to postition: fixed; or position: absolute; it's like that div is no longer considered when spacing the content and the content that used to be just below that content is now overlayed. One way to fix this is to wrap in a div and set a fixed margin or height, but what is the margin is not fixed?
When the browser is resized, the height of the fixed div increases, meaning that the fixed height/margin that I implemented no longer suffices. Please have a look at http://littegiant.myfreelancer.co.za. You will see that I added a bunch of <br> in order to assert a fixed-height differential so that the content does not overlap, but that this is no longer enough when the browser width (and thus the header height) changes. I have seen that this is a problem when used the Bootstrap, navbar-fixed-top as well. There HAS to be a way to assing a fixed div and still keep it in mind when populating the other content and scrolling...
Original Width:
Adjusted Width:
There HAS to be a way to assing a fixed div and still keep it in mind
when populating the other content and scrolling...
There is not. What you are observing is (and always has been) part of the CSS spec. absolute or fixed positioned elements are taken out of the normal document flow meaning non-child elements are not affected by them.
Why not use conditional CSS to change the positioning of the overlapping navbar if the window is resized or if the device has a lower resolution.
#media only screen and (max-device-width: 480px) {
#topHeader{
position:relative !important;
}
This appears to give things some room to breathe. You will need to make your slider responsive though, it seems to be dipping off screen.
I hope this helps.
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
I've been trying to make a horizontal web page. However I don't want to keep setting the width to a certain width to accommodate the content that is floated is there a way to have the Div automatically re-size to the content that it contains? This way all the content is floated or "horizontally" scrolling? I'm using width:"specific size" but as soon as I have too much content it overflows is there a way to not have that happen and also where I don't have to specify a specific width size?
EDIT:
What I want is the whole website to be horizontally scrolling. I don't want just the specific div itself to have scrollbars, but I want the div to be able to adjust it's width to accommodate the content no matter if I have 3 divs within it or if I decide to add 6 divs later into the div.
For example what I want is like this. (Where even if I have more content it won't drop to the next line) I mean can this be achieved with css alone?) I specifically want that effect where the whole website is scrolling not just the div I don't know exactly if that website is doing that. Basically I want the whole website to scroll horizontally not just a scroll bar on the specific div itself.
For example vertically if you have more content you can keep scrolling down that is what I want, but I want that in a horizontal scroll of the website is that even possible?
Here is my code Jfiddle Code which is for tumblr but I want this for more than just tumblr. As I'm thinking of doing this for a regular website but where I manually will add more list items or Divs. I just want to see if there is a way to have the width adjust to the content so the floated content doesn't drop to the next line.
I think what you need is display: inline-block;
Like this: http://jsfiddle.net/ZDJbH/
Check this fiddle , is that what you need
div{
width:auto;
overflow:auto;
white-space:nowrap;
}
Set the css width property to auto
#yourDiv {width : auto;}
1.display:inline-block
2.float:left or float:right Because it will destroy line box.
3.position:absolute；（and without top, left or position:absolute) May be need to know information to use it.
Basically, I am looking for a way to center a container that is 1600px within a container that is 940px.
I want the page to stay centered at all times, and the main content of the site is 940px wide. I have an image that is 1600px, and just adding the image forces the image to align left with the 940px container and overflow to the right 660px. See the image below for an example.
What I want is the image to center within the 940px container, and save for adding multiple background images, which really isn't pre IE8 friendly, I am at a loss.
I've never really had to do this before, so I've never run into this problem.
Right now, I have the page set to a master container of 1600px. This works, but when you open the page, the page starts at the far left of the 1600px container and the main content appears uncentered.
Example 2 below is what I am looking for.
Any help is greatly appreciated. Thanks guys and gals!
Or you could just center the 1600 container relative to the Page using the following attributes:
left: 50%;
margin-left: -800px;
You can use javascript to get the width of both divs, then take the difference between the two (1600-940=660px). Divide that by two for centering (330px). Then position the container left that amount (-330px).
You can set a negative margin on the image. You can use Javascript to compute the actual number, but if it's always going to be 1600 within 940, then you can set a negative margin of 330px.
(Container width - Content width) / 2 = Left Margin
#container img { margin-left: -330px; }
I have created a layout in CSS/HTML with the following structure:
Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.
Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.
I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.
I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.
How can I make this website generally full-screen but scroll when below a minimum size threshold?
Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?
So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/
It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.
Try this: overflow-x: auto;
It will try to put a horizontal scroll bar once the content exceeded the size of its container.