At the top of this webpage, there are two elements in the main content area (white background): an image and a logo box.
The logo box is floated right and the image has a right-margin which is sufficiently large to accomodate the logo box and a little padding. However, if you make your browser window sufficiently narrow, the logo box slides underneath the image. What I would like to happen is that the horizontal space between the two decreases to a minimum of 6 pixels, and if the browser window is made any narrower, horizontal scrollbars appear.
Is there any way that I can achieve this without resorting to a completely 'frozen' layout, i.e. setting a fixed width on the main content area?
Thanks,
Don
The css min-width property does what you want. Doesn't work in IE 6, though. For that some JavaScript can help out if it's really necessary.
Set the white DIV's min-width to the size of the image + the border.
Related
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
I've made an Image of what I want to archieve.
The logo resizes on different screen resolutions and the actual navigation container is just as long as the <li>'s.
The bottom border needs to reach to the lower left edge of the logo.
The logo itself has a shadow below, so the border cant be full width.
What I've got so far is that the nav itself has a border which then only reaches to the last <li>
This is a quick mockup:
http://jsfiddle.net/2x6hddv8/
Here's most of it -- they just called my flight!
http://jsfiddle.net/8k45z7nL/
I'd avoid the skew for maximum browser compatibility.
I'm wrestling with two unruly elements - a navigation menu and background bar (kept separate to deal with an opacity issue). Their positions are fixed so they stay visible during scroll. Their widths, which should mimic their parent's, is set with a 100%. Unfortunately, when the window is stretched narrow enough their width extends outside of the parent.
This is a diagram of the html:
<html>
<body>
<content>
<nav-bar>
<nav-menu>
...
</content>
</body>
</html>
Showing should be easier than describing, so here's a link to the page:
http://www.seanoneill.us/test/index.html
When the browser is stretched beyond the max-width of the content, everything looks fine. When the browser is made narrow, the right end of the nav-bar and nav-menu breaks out of the content width. In other worts, the right edge of "Contact" should be inset from the right edge of the content div by 20px of padding. The best way to see this is to scroll down a big so the menu covers an image and the semi-opaque nav-bar is visible. Then stretch the browser to the max-width of the content and wiggle it back and forth over that threshold.
Can anyone tell me how to keep the nav-bar and -menu inboard of the content div?
I've held off listing any of the css here since there are a handful of elements involved and I have no idea which is the critical one. I'm hoping it's acceptable to just post a link.
Thanks so much for reading.
You have content { min-width:700px }, and with your nav floated right, it will stay there.
If you can remove the min-width it will fix itself, or you can move .nav-manu outside of the .content container and, if you don't wrap it with something else that has min-width, it will honor the width of the body/window
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
I'm essentially trying to design my header and footer how it's done at StoreEnvy. They have a large (2400px wide) header and footer, which are always centered. When you resize the page horizontally, th same part stays centered, but new parts of the image are exposed along the end of the browser window.
I've tried setting up my document like this, but I can only either 1) Get the image the resize to fit the entire window, or 2) have scroll bars totaling the width of the images.
ANy idea what I may be missing??
Thanks!
Make the image a CSS background and center it. Then it will crop as expected. There are other methods but this is the easiest.