I'm trying to make a menu for a mobile landing site.
The problem I'm having is that the items inside the divs are being set to height bigger than the containing div, which is screwing up the vertical align. I've tried many different things in order to manually set a height, but nothing is working. I've also tried setting margins and padding to 0. Nothing has worked.
Code:
<div id="menu">
<div><span><h4><a class="menuItem" href="find-us.html">Find us</a></h4></span></div>
<div><span>Promos</span></div>
<div><span>Events</span></div>
<div><span>Gallery</span></div>
</div>
http://jsfiddle.net/milkman15/r6VDe/1/
You can set a min height on the div and remove the css for the span inside
http://jsfiddle.net/mx28a/1/
#menu div{
font-size:2.5em;
width:93%;
height:14%;
margin-top:7%;
display:inline-block;
background:rgba(000,000,000,0.6);
text-transform:uppercase;
min-height: 60px;
}
I added the min-height as the last item. Since the divs are set using percents, when the height of the screen becomes smaller your div's height also becomes smaller. Your font are simply too large for the divs so it bleeds out when you reduce the height of the window. By setting a min-height, you can stop this from happening
Related
Keeping the w/h:auto resizable ability of an img when its parent is set to display:table and the parent's w/h is not 100%? It seems obvious that if the parent's w/h is not set then its child's w/h:auto makes not much sense. My point is, I want to keep the "resizable ability" of an img if it is inside figure/img/figcaption. Description of the problem:
Big images in a gallery we may want to resize to fit the window size if bigger. If it is just an image it can be done easily setting the image's w/h to auto (and maxw/maxh to 100%), with adding margin:auto we get it even nicely centered. But how to achieve the same with figure/img/figcaption altogether? As we want the figcaption's width to match the width of the image dynamically on the fly (not in px) we need to set figcaption display:table-caption (plus caption-side:bottom) and figure display:table. But once we set the figure display:table and its w/h is not set (or is set to auto, otherwise figcaption width will not match the img's), image w/h:auto don't work any more (not much surprisingly) and we get a not desirable 100% of w/h of the img (will not fit into the window if bigger). Is there any CSS only solution how to keep w/h:auto of the img or somehow achieve the same resizable ability if it is inside figure/img/figcaption?
There are many great approaches out there of how to center or resize elements or images, for example here <codepen.io/shshaw/full/gEiDt> or here <codepen.io/dimsemenov/pen/jhsJL>, but these and many more elsewhere don't work with a set of figure/img/figcaption (or I was unable to make it work). I am troubling myslef with it literally for days long with no clear answer.
In other words, what I need: A figure/img/figcaption set is centered altogether, they will resize if the image is bigger than window size, figcaption must match the width of the image width. All should be done with CSS and without setting anything in px.
So <img> and <figcaption> all go inside a <figure> element. All three are block elements.
You would just set the height and width of your <figure> element, then add a margin auto like you said.
Then set in your css:
img {
width: 100%;
height: auto;
}
figcaption {
text-align: center;
width:100%;
}
And now your image and your caption will always be the width of the figure element, the text will always be centered under the image, and the larger element will always be centered on the page.
EDIT: Adding 100% as a width or height to something means "100% of the parent element". So if you set a width/height for your figure element, the elements inside can be 100% and they won't break the element. Again, all three are block elements already, so you don't need to re-declare them as display: table-caption or whatever. Just use the strength of the block element as it is.
EDIT 2: OKAY. Here's what you need:
Set the figure to a specific height and width in CSS.
Then set the img and figure inside your fig caption to: width: 100%; height: auto;.
Your html looks like this:
<body>
<figure>
<img src="">
<figcaption>Some Text</figcaption>
</figure>
</body>
Now you need a media query in your CSS to handle the size of <figure>
#media screen and (max-width: 600px) {
figure {
width: /*Whatever width you want*/
height: /*Whatever height oyu want*/
}
}
Then repeat your media query for different break points.
If you still think I'm wrong, make a codepen or fiddle with an example and I'll help you from there.
EDIT 3
Here is a JSFiddle demonstrating that you can make a responsive image and element using relative measurements in % and maintaining the image centered to the things around it.
http://jsfiddle.net/o2rv4t9h/1/
When I resize the browser window my navigation bar div drops below the search box div.
How can I stop the nav bar moving and keep it in the same place? The footer behaves itself and its structured in the same way?
Here's a link...
http://www.signport.co.uk/test/asg_template3.html
Thanks!
This happens because your menu does not have a width specified. Whereas you footer behaves because it has a width specified( div with id footerleft)
I'm testing on Chrome now, removing the width:100% you have set on the navigation bar div (wrapper_menu_full class) seems to do the trick. This 100% refers to its size compared to the containing div (#mainmenu3).
If this still doesn't work on IE7, try setting both divs inside #mainmenu3 to display:inline, although now I'm testing on Chrome it doesn't seem to make any difference.
REPLACE YOUR CSS
#mainmenu3 {
height: 150px;
line-height: 20px;
list-style-type: none;
overflow: hidden;
width: 100%;
}
YOU WILL GET THE DESIRE OUTPUT
You're using floated elements on both divs (searchfilter and menu).
When you are using the floated elements, and the width of the last of the floated element exceed parent's width, it goes moves to the next line (belov).
Put this into your css to make it work as you want:
#mainmenu3{position:relative;}
#search4{position:absolute;top:0;left:0;}
.wrapper_menu{position:relative;top:0;left:310px;}
So most of this site so far uses auto centering (the container and nav have margin-left/right:auto) and things seem to go all well and dandy except for the footer.
When I resize the size of the window everything is filled nicely except when I scroll horizontally the footer seems to be cut off on the right side.I've read that this may be a browser bug. Though it occurs in IE and chrome and firefox so it could just be sloppy coding (I am a big newb).
Here is the css:
#footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
}
/*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
min-width:1000px;
}
/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
#footerContent ul{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#footerContent li {float:left; width:250px; }
Just to reiterate it works fine when the browser is full screened or resized. But after you resize and you use the horizantal scrollbar to scroll all the way right then the background image is cut off.
I've tried width:100%, min-width, width:1000px; but none of those seemed to work.
http://postimage.org/image/3so264fnb/
Regarding your comment about Stackoverflow being similar
(at least as of 4-29-2012)
The issue on stackoverflow seems to be that the footer contains another div element, footerwrap, that has a width: 960px set to it, but footer itself has no width setting. A div is basically designed to simply "group" block level content. It is a common misconception that a div expands with it's content. Actually, a div expands to its parent if an explicit width is set on a parent. If there is none, then it fits the browser window. This is what you (and stackoverflow) is experiencing.
To get the div to relate to the content width, you must either:
Explicitly set the width or min-width of the container. So, if stackoverflow set a min-width: 990px (the 960px of the footerwrap + the padding of 15px on each side) on the footer that wraps footerwrap, then its problem is solved.
Set the container div to float, as a floated element wraps its content.
Take a look at this example fiddle. Note the first two div's experience the same issue you are seeing. If you shrink or expand the size of the iframe window in the fiddle, the first two div's will contract or enlarge with it, but still leave blank space on the horizontal scroll. The third and fourth div's have had my fixes above applied. The fifth div is to show the fact that the inner div, if not defined in width, will expand to the width of a container that has an explicit width set.
As a side note, it may work (I have not tested in many browsers, but FF 11 worked) to actually just add a float: left to the body element in those cases where the body does not have a set width. As this example shows, it seems to be effective in causing the first two div's to behave just like the 3rd and 4th divs.
I hope this helps.
Original Answer
It is a little unclear what can be done because there is some information lacking. Here are some things to look for:
Is your background-image wide enough (or can it / should it have a background-repeat: repeat-x applied to make it wider if needed)?
Does your footer width (1000px) match your upper content width? If footer is constrained narrower than what the upper content area (or header, etc.) is allowed to be, then it's background will not align.
That's the best I can do without seeing more of your html and css for the page, and not knowing the size of the image and your intention for how it is to function.
I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.
The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container
Is there any creative solution out there to take the height of a child element that's absolutely positioned?
Example below has NO height declared on the main container.. nothing's holding it open.
http://dhut.ch/test/santos/
Thank you!
Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.
So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789
Which as percentage would translate into something like:
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.
This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.
I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.
To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.
I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.
I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:
div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.
Remove the absolute position. I would avoid inline styling as well.
I've got a div that has many listitems in a verticle rows (over 200). Depending on the screen resolution the container div should resize to fit the screen and create a vertical scroll bar and horizontal scroll bar for side scrolling - however; using overflow:auto or even overflow:scroll the list items are not cut to fit within the container div and a horizontal scroll bar is not added. So I have a container that is roughly 700px in width and listitems that are roughly 1000px wide and these list items are hanging over the edge of my container (on the right side) by 300px. What can I do to fix this?..here is my CSS for the container...
#report-box #report-text{
position:relative;
height:96%;
width:1200px;
overflow:auto;
font-size:12px;
color:#000;
margin:0px 0 0 0;
}
My listitems are styled in my HTML as follows:
<li class='_1' style='width:100%; float:left; position:relative;'>SOMEDATA</li>
You can probably set a max-height on the container.
I'm not sure what the problem was but instead of forcing that to work I made an additional container inside of the original container and specified overflow:auto to that and somehow it is now working.