I've set up my stylesheet to have a container (#container) holding the header/content/sidebars/footer/etc and I've put that in a main wrapper (#mainwrapper). The effect I'm trying to achieve is similar to College Humor's website; the ads on the side. I'd like to have a division on the left and right of the container. What I've done is set it up like this.
<div id="mainwrapper">
<div id="leftwall"></div>
<div id="container"></div>
<div id="rightwall"></div>
</div>
Basically, I want to be able to put an image (or bg image) in the leftwall and rightwall divs, however, I don't want it to trigger the x-scrollbar. I only want it visible if the viewer's resolution is high enough. Otherwise, just display #container.
I've set them to float: left, so that they appear on the left and right of the container, but I'm a stuck as to how to make them appear as a background image.
The reason I want to do it this way is that I already have a background image and I want to keep it optimized. So, instead of having a large image that spans 960+ pixels (#container width), I can have 2 images that are 100px wide. (the width of #leftwall and #rightwall)
I hope this is understandable and thanks to anyone trying to help in advance!
Have a good day, Brian.
I understand what you want. These days new media queries has been added to make these type of design.
You can define it in your css files for a particular resolution or mobile devices.
#media screen and (min-width: 1080px){
#leftwall, #rightwall{display:block;}
}
#media screen and (max-width: 1024px){
#leftwall, #rightwall{display:none;}
}</pre>
Below is the link where you can learn how to use these queries.
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Hope This Helps,
Cheers,
I am not sure what you want to achieve; maybe you could show how your css look like so far but have you tried by giving a min-width to the external containers?
I set up a fiddle with what I think you're trying to achieve, you'll just have to change some numbers to fit your needs: http://www.jsfiddle.net/KrfVR/14/
Adjust the size of the result box to see the side divs appear/disappear.
Related
Hi I don't know how to solve this...
I want the element marked with a red rectangle in the images to move depending on the size of the screen ALIGNED to the containers below ALL THE TIME. I'm making a responsive website with the different media screen instances but I want to be sure that this element keeps in the same alignment all the time. How do I do that? No JS please.
http://www.awesomescreenshot.com/image/58399/669844960fdd9761084f64bae5d29112
since you haven't provided any code for what you have so far its difficult to help you. However, I think I understand what you need and you need to specify some width constraints to accomplish this:
you will need a container inside the header that will have the same width as the content below. Here is a working fiddle
css {
width: X%;
}
I have a navbar and footer than I grabbed and customized from Bootstrap's site. I now want to have a background imagine, but I'm unsure how to do this. I know if I wanted to have just an imagine, I could put it in a div between the navbar and footer and set play around with height:100%; width:auto; so that it resizes with the browser (although this doesn't work perfectly without some modifications) but I don't know how to do this if I have body { background-image: url('...'); } I have a large resolution picture in there right now, and on a 1080 screen it doesn't scale down, it just shows 1080px of the original imagine. Is there anything in Bootstrap or CSS tricks I can use? This might be trivial to some but I am new to this, just finished Codecademy courses which introduced me to Bootstrap and now I'm trying some stuff on my own.
So to recap I want to have 16:9 ratio of a large picture, if the browser becomes to narrow, I want the height to stay the same and start "cutting off" the left/right sides of the image so that the center of the image is still in the center of the browser. Likewise for vice versa. the height:100%; width:auto; doesn't quite work because if the ratio is wrong, it stretches the image.
I also want to have a different picture if the website is accessed from a screen-reader, but that's a project for another day. Let me know if I need to clarify anything, and thanks in advance
Use your CSS this way to make the background responsive.
body {
background-image: url("myimage.jpg");
background-size: cover;
}
Then when the page becomes "too narrow" use media queries to switch the background-size properties to actual width and height that work the way you have in mind.
I'm looking for a way to put two portrait images on the same line, and keep them there, even if I resize the window, they should resize too...
Any idea how I can accomplish this?
Note: I'm looking for this info to use on tumblr.
OK, so your question is a bit weird and hard to understand. Might wanna fix that.
If you're just wondering how to make the images stay on a line and resize with the browser window, you can assign them a width value with a % property.
Like this:
JSFiddle
img {
width:30%;
/*
eventually max-width and/or min-width
*/
}
I'm struggling trying to get images responsive in a container and it's driving me bonkers. I've looked at many different answers and the only one that seems to work is just making the image set to 100% of the width of the container (not using max-width), but I don't want to set the image at 100% all the time. Here's what I got:
HTML
<div id="interior_banner" class="title_pic">
<img src="assets/images/portraits_header-24.png" />
</div>
CSS:
img{max-width:100%;border:3px solid #fff}
.title_pic{text-align:center;margin:0 0 1em;}
Now setting the img to just width:100% works, but I really want this banner to flex only when it doesn't fit the container. I don't want it to size before then.
What am I missing? I know it's something.
Thanks in advanced!
With out a live demo this is a little harder but I'll give it my best go.
I think you're on the right path. Currently isn't the image it's regular width? It should shrink when the container gets small enough. But if the container is bigger than the image the image won't scale up.
Or do you want the image to scale up? More info would be awesome.
Atm I'm doing my first attempt at a website, recently got a new job which requires me to learn some basic HTML&CSS so for a starters I set myself up to duplicate an exsisting site.
The question/problem is:
I wanna make 3 columns at 100% height, the left and right being scaleable to 0 upon downsizing the browserwindow, while the middle column is containing the actual content of the site, min-width at 60%. At lower resolutions im planning on implementing media-things in my css to remove the left n right columns when the resolution goes below a certaint limit.
I've set html&body&all to hight & width 100%.
I'm trying to do something a bit like here: The site im trying to duplicate
My current attempt can be found here: My attempt
Some code for the lazy ones that don't wanna inspect the site:
<div id=all>
<div id=leftmargin></div>
<div id=wrapper>
<div id=header></div>
<div id=nav></div>
<div id=content></div>
<div id=rightmargin></div>
</div>
</div>
Since im very new to web development, please excuse me if you need more info.
My problem is in essence that "leftmargin' and 'rightmargin' overlaps the 'wrapper'-div. I'd very much like that to be in the center of the page and then make the margin-divs 'expendable' at lower resolution by css.
I hope I made myself relatively clear, thanks in advance.
Kind regards
Mike
I'd avoid using a div for the sole purpose of creating a margin space. Instead, let your side bar content create the margin you're looking for. The content is overlapping the margin because it's not contained within the margin div. You'll need to tweak how the main content is centered by using "margin-left: " the same size as the sidebars or some other way, but it'll improve your overall structure.
As for text overlapping the container at small sizes, remove the "width: 18.8%;" and "white-space: nowrap;" from #lefttop and "max-width: 18.8%;" from #leftnav. This will let the text be the full width of the gray container on the left, and the words will wrap if the line doesn't fit.
Finally, to get rid of the side bars at small widths, as jerrylow recommended, use
/* screen sizes smaller than 750px apply these styles */
#media screen and (max-width: 750px) {
#leftnavwrap {
display: none;
}
#shortcut {
display: none;
}
#content {
width: 100%;
}
}