I'm working on a browser-compatible navbar with rounded corners using DIVs and rounded images. I had it working perfectly in FireFox, only to discover that IE butchers it (of course).
The only problem I'm having now is getting my content DIV (navBody) to stretch to match the height of the side images. In both browsers now I have this:
http://img80.imageshack.us/img80/5088/40128898.jpg
<div class="navWrapper">
<div class="navLeft"></div>
<div class="navBody">
Login/Register
</div>
<div class="navRight"></div>
</div>
.navRight
{
float: left;
width: 12px;
height: 25px;
background: url('/images/nav/tabright_off.png');
}
.navLeft
{
float: left;
width: 12px;
height: 25px;
margin-left: 3px;
background: url('/images/nav/tableft_off.png');
}
.navBody
{
float: left;
background: #DDDDEE;
white-space: nowrap;
font: bold 12px Verdana, sans-serif;
padding-top: 5px;
overflow: hidden;
}
.navWrapper
{
float: left;
height: 25px;
display: inline;
}
I tried adding 5px padding-bottom to navBody, but this only works on FF and not IE due to box model issues. Setting navBody to a fixed height (tabs should be 20px high) seems to do nothing. Any ideas?
Try adding a
<br style="clear:both" />
To the bottom of the navBody div and see if that helps things.
Not sure why adding a height of 20px in the CSS isn't working (on navBody), that would be my first guess. You could instead try making it height: 25px (to match the sides) but then change the line-height to push your text down (instead of the padding-top).
Another option (that would change the actual design of your nav) would be to set a width on all the nav items. Rendering engines in general prefer to have width set on any floated elements.
Found the issue - FireFox was adding the padding-top (5px) to the 20px height I set to get a total of 25px; IE was not so the height stayed at 20px. Fixed it by making the height 25px by default and compensating in Firefox by cropping out the overflow in the wrapper div.
Related
I have a footer that has three rows. Row one is two divs floated left. Row two is a 'divider' line that is 100 width of the footer. Row three will be 3 more divs floated left.
The problem is on the first row. I have a margin-top:40px; for the middle line. The first floated element sits on top as it should but the second floated element ( which is going to be a text box and has padding inside ) sits on top fine WITHOUT padding, but when I put the 10px padding in, it sits 40px above as it should, but adds extra margin to the elements around it.
.footer {
background-color: #172135;
padding: 40px;
}
.footer-links {
margin: 0px auto 0px auto;
float: left;
}
.middle-line {
width: 100%;
border: 1px solid #1889b4;
padding: 0;
margin-top: 40px;
}
.newsletter {
padding: 10px;
border: 1px solid #188ab4;
width: 300px;
font-family: 'rBblack';
font-size: 12px;
color: white;
text-transform: uppercase;
float: left;
}
<footer class="footer clear" role="contentinfo">
<div class="footer-row-1 clear">
<div class="footer-links">
stuff
</div>
<div class="newsletter">
Sign Up For Our Newsletter
</div>
</div>
<div class="footer-row-2 clear">
<div class="middle-line"></div>
</div>
<div class="footer-row=3 clear">
more stuff
</div>
</footer>
**** PLEASE NOTE ***** The code snippet is not an accurate representation as css reset and clearfix is missing so not correct. Someone else edited this and put it there....
Unless you tell it to, the browser will make the element the width you specify, and then add on the padding etc
If you set the border-sizing property this will prevent it from happening;
box-sizing: border-box;
Try adding that to your CSS declaration
You can compensate for the shifting by of the padding by adding either margin-top:-10px; or position: relative; top: -10px; to .newsletter.
.footer {
background-color: #172135;
padding: 40px;
}
.footer-links {
margin: 0px auto 0px auto;
float: left;
}
.middle-line {
width: 100%;
border: 1px solid #1889b4;
padding: 0;
margin-top: 40px;
}
.newsletter {
padding: 10px;
margin-top: -10px; /* negative or padding value - readjusts position back up */
border: 1px solid #188ab4;
width: 300px;
font-family: 'rBblack';
font-size: 12px;
color: white;
text-transform: uppercase;
float: left;
}
<footer class="footer clear" role="contentinfo">
<div class="footer-row-1 clear">
<div class="footer-links">
stuff
</div>
<div class="newsletter">
Sign Up For Our Newsletter
</div>
</div>
<div class="footer-row-2 clear">
<div class="middle-line"></div>
</div>
<div class="footer-row=3 clear">
more stuff
</div>
</footer>
After reviewing what you said about my old, now competently irrelevant answer, i think i found what your issue is.
padding:10px;
adds padding to ALL 4 sides. it is functionally equivalent to
padding: 10px 10px 10px 10px;
the newsletter div is now significantly Taller than the other stuff in the same div, and the browser is forced to compensate by making the container div bigger. the container div gains 20 pixels in height when you do this, which would appear to add additional margin to the other elements.
to remove this, you would instead want to use either of these
padding: 0 10px;
padding: 0 10px 0 10px;
as per http://www.w3schools.com/cssref/pr_padding.asp
either will add padding to the LEFT and RIGHT sides equal to 10px, but the top and bottom will remain 0. the newsletter div will no longer be over-sized, making the container div bigger, which will make it appear there is margin for the others.
Edit (additional options):
however, if you want to keep the top and bottom padding, your have 3 main options.
1) add the padding to the other div inside the parent as well as newsletter. they will line up with newsletter, and have the extra space above and below. you would likely want to shrink the middle div's height to compensate for the increase.
2) to completely remove the newsletter from its parent div. set the width of newsletter and its parent div so that they add up to 100% including padding and borders, or use box-sizing:border box, and float both left so that they line up horizontally. now you can make newsletter as big as you want, and it will not affect the others.
3) you fix the height of the parent div,so that newsletter can be bigger than its parent div, however this tends to cause problems with layouts if your not careful, as it may overlap.
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I have a website in which I want to have a similar layout as Stackoverflow regarding browser window resize.
So I have the following CSS :
#site-container {
margin: 0px auto;
text-align: left;
width: 100%;
zoom: 1;
position: relative;
}
body {
font-family: arial, helvetica, sans-serif;
font-size: 81.25%;
background-color: #fbf9ef;
}
#div-menu {
display: inline;
}
#header {
width: 990px;
height: 80px;
margin-left : 127px;
margin-right : 127px;
margin-bottom: 12px;
margin-top: 20px;
border-bottom: 1px solid #c0c0c0;
}
#content {
width: 990px;
margin-left : 127px;
margin-right : 127px;
}
However when I resize my browser Window it does not behave like Stackoverflow, somehow Stackoverflow seems to be Floating and automatically reduce margins according to the browser window size.
Thanks
Step 1
Set your #site-container element's width to a fixed value (e.g. 990px), rather than to 100%. Currently, it automatically fills the window, leaving no room for any margin. StackOverflow uses a fixed value of 980px. I believe your site uses 990px.
Alternatively, you can set your container to have table-like layout with display:table;. This way it will stretch dynamically according to the width of its content. In this case, there's no need for any width declaration.
Step 2
Remove the fixed margins from your #header and #content elements. They are redundant and distort the position of the whole layout. The parent #site-container will have enough margin for them both.
You should use margin-left: auto; margin-right: 0 to make block element to center, not fixed margin values.
I have a menu bar the is centered on the screen. To the left I have a element as well as one to the right. These have background images that tie the menu bar to the rest of the graphical layout.
The problem is that there are white spaces between the tags. Here is the CSS:
#menu_items {
display: inline-block;
position: relative;
margin: 0;
padding: 6px;
top: -9px;
height: 15px;
background-color: #75784D;
}
#swoop_left {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_l.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
font-size: 0px;
border: solid red 1px;
}
#swoop_right {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_r.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
border: solid red 1px;
}
The images themselves are 140px x 21px (w x h).
I can't float them because the menu won't center. I can't use
font-size: 0px;
on the parent container because it won't display the menu items, and setting the menu-items to
font-size: 1em;
afterwards doesn't fix the issue.
Anyone have a solution that will work in all browsers and doesn't rely upon JS?
NOTE: The borders of the two elements are for layout purposes only and won't be in the final code.
How exactly are the items in the menu generated? In the div that contains the menu are you using an unordered list?
If you are then one possible solution would be to add the left and right images to the :first-child and :last-child elements of the list using css. You would no longer need the two extra div elements and so could just concentrate on the single menu container.
There are four ways which i know & which you can use to remove the whit space.
1) as you said give font-size:0; to your parent DIV & define the font-size:15px; to your child divs.
2)You have to write your mark up in a single line like this:
<div class="parent">
<div>1</div><div>2</div><div>3</div>
<div>
Instead of this
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
3) Not that good solution but some time effective. Give margin-letf:-5px in your div. Like this:
div + div{margin-left:-5px}
4) At last you can use float instead of inline-block;
set background color to check your div width and height and you can use margin-left: with negative value to stand your div perfectly.
I have a div which contains two nested divs, one that specifies a height of 65 pixels (header), the other which specifies the height as 100% (content) and it is supposed to take the rest of the space veritically. When the page renders, there is a scrollbar on the right because of the height specified of 65 pixels of the header.
What am I doing wrong mixing percents and pixels? I must be missing something. How do I fix this so the content section uses the rest of the page space and I do not have a scroll bar?
Here is the ASP .NET markup and CSS I am using:
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div id="header">
<div style="float: left; height: 100%"><img align="top" alt="" src="~/images/Logo.gif" runat="server"/></div>
<div style="float: right; height: 100%">
<div id="outer" >
<div id="middle">
<div id="inner">
<asp:Label runat="server" ID="ApplicationName" Text="Application" CssClass="appname"></asp:Label>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="100%" Width="100%"
DynamicResize="True" CssClass="junk">
<panes>
<ig:SplitterPane ToolTip="Navigation Pane" runat="server" Size="20%" CollapsedDirection="PreviousPane" Locked="true">
<Template>
<asp:ContentPlaceHolder ID="NavigationPlaceHolder" runat="server">
<ig:WebDataTree ID="NavTree" runat="server" EnableHotTracking="true"
Height="100%" OnNodeClick="NavTree_NodeClick" SelectionType="Single"
InitialExpandDepth="1"
Width="100%" BorderWidth = "0px"
EnableAjax ="true">
<AutoPostBackFlags NodeClick="On" NodeCollapsed="Off" NodeExpanded="Off" NodeEditingTextChanged="Off" />
</ig:WebDataTree>
</asp:ContentPlaceHolder>
</Template>
</ig:SplitterPane>
<ig:SplitterPane Tooltip="Content Pane" runat="server" Size="80%">
<Template>
<asp:ContentPlaceHolder ID="SiteContentPlaceHolder" runat="server"/>
</Template>
</ig:SplitterPane>
</panes>
</ig:WebSplitter>
</div>
</div>
html
{
padding: 0px;
margin: 0px;
border: none;
width: 100%;
height: 100%;
font-family: verdana;
font-size: x-small;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
text-transform: none;
float: none;
}
body
{
border: none;
padding: 0px;
height: 100%;
width: 100%;
border: none;
margin: 0px;
}
form
{
border: none;
margin: 0px;
padding: 0px;
border: none;
height: 100%;
width: 100%;
}
span.appname
{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 18pt;
font-weight: bold;
font-style: normal;
color: #FFFFFF;
padding-right: 10px;
}
#header
{
background: #295984;
width: 100%;
height: 65px;
overflow: hidden;
}
#content
{
display: inline;
width: 100%;
height: 100%;
}
#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; text-align: right;} /* for explorer only */
#inner {width: 100%; margin-left: auto; margin-right: auto;} /* for all browsers*/
#inner[id] {position: static;}
The simplest solution is to move your header into your content...then it will take up space within the content block, rather than above it.
If that is not an option, there are a variety of solutions that could solve the problem. Here is a list of a few:
1) Absolutely position the header, with z-index of say 10. Give the content div a padding-top of 65px, with a z-index of 1. The header should cover the upper padded area of the content div. This will work great with very rigid designs that don't have any dynamic widths that grow/shrink with the width of the browser window.
2) Explicitly position the top, left, bottom, right of your content div. Specify no width or height. In this case, the top, left, bottom, and right are calculated based on the inner padding edge of the containing block of the content div. Again, this works great in rigid site designs. Should work in IE7/8, but will be problematic with IE6 and earlier.
3) Use a negative top margin og -65px on the content div. Use a top padding of 65px to compensate. This can be problematic with IE7 and earlier, and sometimes FireFox gets wonky with negative margins. There are hacks that can solve the problem, just search the net. This should work for rigid or fluid layouts.
There are a lot of resources for CSS design on the net. If the above options do not work, some searches on the net should bring up some resources.
Try reading this article first... it is about Conflicting Absolute Positions in a CSS template and somehow it addresses the kind of problem you are talking about.
At the moment you have 2 divs with a total height of 100% + 65px so it should have a scrollbar
You can't really do what you are trying with just divs without resorting to css hacks. The simplest and most browser compatible way to do it would be to enclose it in a 2 row table. Set the table height to 100%, first td height to 65px, second td height not specified. Some people are against resorting to tables for layout but if you are going to use css incorrectly anyway then why not?
Although, it would be better to use a design just with one div above the other. Dynamically adjusting content to the browser doesn't work well anymore due to the wide varation of screen sizes.
(100% + N) > 100% - there's no such thing as "the rest of the space" in CSS unfortunately.
When you say 100% it means exactly that, so your best bet is going to be either jrista's options 2 or 3 (imho abs positioning is to be avoided). I also think you might want to google position:fixed.
You can use calc() function in CSS. For header height: 65px. For content height: calc(100% - 65px). Use CSS variable for header height so in future if you wanna change, you just have to change in place.