I have 2 wrappers, one inside the other, as per html below. The first wrapper contains a tile which scrolls down. Wrapper 2 has an image 940 X295px. Works beautifully in IE5 & IE8, but in IE7 the footer jumps up to wrapper2 and the text extends down, underneath and below.
This is my html:
<div id="wrapper">
<div id="header"></div>
<div id="wrapper2">
<div id="maincontent"></div>
<div id="navigation"></div>
</div>
<div id="footer"></div>
</div>
I have moved the closing div's everwhere with no success.
My css for the above divs are:
body {
margin-top: 0px;
padding-top: 0px;
background-image: url(../images/body_vert_tile.gif);
background-color: #C8BE86;
background-repeat: repeat-x;
}
#wrapper {
background-attachment: scroll;
background-image: url(../images/wrapper_horiz_tile.gif);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
width: 940px;
}
#wrapper2 {
background-image: url(../images/wrapper_2.jpg);
height: 295px;
margin-right: auto;
margin-left: auto;
background-position: left top;
}
#header {
width: 940px;
background-image: url(../images/header.jpg);
height: 345px;
margin-right: auto;
margin-left: auto;
}
#maincontent {
float: right;
width: 630px;
padding-right: 70px;
padding-left: 10px;
margin-top: -10px;
}
#maincontent_home {
float: right;
width: 420px;
padding-right: 10px;
padding-left: 10px;
margin-top: -10px;
}
#secondary_content {
float: right;
width: 190px;
padding-right: 70px;
margin-top: 30px;
padding-left: 20px;
}
#footer {
background-repeat: no-repeat;
background-position: left bottom;
width: 940px;
text-align: center;
clear: right;
background-image: url(../images/footer.jpg);
height: 145px;
margin-right: auto;
margin-left: auto;
#navigation {
float: right;
width: 130px;
padding-right: 10px;
padding-bottom: 10px;
background-repeat: repeat-y;
background-position: right top;
padding-top: 5px;
}
I'm pulling my hair out. Should I just ignore IE7? I'd really like to overcome this. The only way around this I have found is to have wrapper 2 sit below the header and close before the main content. I then set -ve margins at the top of the content and nav the same size as the height of the image in wrapper2. It worked, but i don't know if I should be doing things like this.
Your help would be greatly appreciated.
It would be great if you could provide an URL to check this behavior, but i would add a :
<div style="clear:both;"> </div>
after the closing of the navigation DIV
BTW, I your are not using any CSS reset, you should. I use blueprint, but there are many.
Alejandro suggested I remove the height of Wrapper 2 and add: background repeat: no repeat;
When I did this the image disappeared, but when I changed the height property to min:height: 295px; it worked beautifully. Thankyou Alejandro for pointing me in the right direction
Related
I've got a DIV with a BG image, and I want to center just 2 paragraphs both vertically and horizontally within that DIV. Here's the code:
Code:
#dark-table-carol {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
background-image: url(http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/carol-candy-carts-quote.jpg);
height: 600px;
background-repeat: no-repeat;
background-position: center bottom;
margin: auto;
/*
position: absolute;
background-size:contain;
top: 0;
left: 0;
bottom: 0;
right: 0;
*/
}
<div id="dark-table-carol">
<h3 id="dark-table-head-style" align="center">"It was like Scott reached into my head and saw exactly what I wanted to achieve. He brought my ideas to life very quickly!</h3>
<p id="dark-table-paragraph" align="center">
Carol Davies - Carol's Candy Carts
</p>
</div>
I've tried a few things, obviously vertical-align:middle;, setting padding to 50% for top & bottom, but no luck.
Any advice would be great :) Thanks!
Scott
You can add the following two styles to your image container.
display: table-cell;
vertical-align: middle;
https://jsfiddle.net/h3qh9pgu/
I've been looking the whole day for a better solution as the one I gave you will not work for me. Alas, I can't find answers. Hope this works for you. It worked in the fiddle.
I prefer to use top bottom left and right properties to center elements.
Change these values to check out how it behaves. And remember to add margin and position properties as shown below.
#container{
position:relative;
width:300px;
height:300px;
border:dotted 1px #33aaff;
}
#child{
width:50px;
height:50px;
background-color:#ff55aa;
position: absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
}
<div id="container">
<div id="child"></div>
</div>
#dark-table-carol {
display: table;
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
background-image: url(http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/carol-candy-carts-quote.jpg);
/*background-size:contain; */
height: 600px;
background-repeat: no-repeat;
background-position: center bottom;
margin: auto;
/*position: absolute;
top: 0; left: 0; bottom: 0; right: 0;*/
}
.inner {
display: table-cell;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
<div id="dark-table-carol">
<div class="inner">
<h3 id="dark-table-head-style" align="center">"It was like Scott reached into my head and saw exactly what I wanted to achieve. He brought my ideas to life very quickly!</h3>
<p id="dark-table-paragraph" align="center">
Carol Davies - Carol's Candy Carts
</p>
</div>
Hey I was just trying to put two divs beside each other, like I've done hundreds of times by using "float: left" but it's simply not happening. The second div just sits below the first.
Here's the code:
<div id=wrapper" style="overflow: hidden; width: 1000;">
<div id="box1" class="greybox">
Right
</div>
<div id="box2" class="greybox">
Left
</div>
</div>
and the css:
#box1 {
margin-top: 70;
margin-left: 85;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px
float: left;
overflow: hidden;
}
#box2 {
margin-top: 70;
margin-left: 30;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}
Any help would be much appreciated.
You're missing a double-quote around your "wrapper" id.
I discovered this by attempting to make a fiddle out of your code, which highlighted the error. (Hint: make a fiddle for us next time)
You also had some errors in your CSS, and your widths were all weird.
Fixed:
<div id="wrapper" style="overflow: hidden; width: 1000;">
<div id="box2" class="greybox">Left</div>
<div id="box1" class="greybox">Right</div>
</div>
#box1 {
margin-top: 70;
margin-left: 85;
width: 200px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px;
float: left;
overflow: hidden;
}
#box2 {
margin-top: 70;
margin-left: 30;
width: 40px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}
You can either float both boxes left to have them side by side, or float one right.
Why something will happen? item's auto float is left.
Maybe you mean to
float: right;
try this one ^^
Usually this is a problem when the width of the second element will not fit horizontally within the parent. Does the greybox class add any padding?
Also, in your paste the wrapper id is missing a quote. This would give the parent no width if it was styled via a stylesheet include rather than inline and yield the problem I describe.
Also, the box1 styles have a syntax error in padding. All styles below wouldn't take effect. This should be your fix.
You have lots of typos in your code. Missing double quotes and semicolons. Additionally you forgot many times to give your values also an unit (like px).
If you'll fix all these errors all work as expected - see jsFiddle
why u put overflow:hidden to #box1 and #box2 ? do u know the use of {overflow:hidden;}
u already put overflow:hidden to main wrapper
see this
<div id="wrapper" style="overflow: hidden; width: 1000px;">
<div id="box1" class="greybox">
left
</div>
<div id="box2" class="greybox">
Right
</div>
</div>
and the css
#box1 {
margin-top: 70px;
margin-left: 85px;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px;
float: left;
background:orange;
}
#box2 {
margin-top: 70px;
margin-left: 30px;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
background:green;
float: left;
}
see the jsfiddle
You should clean that code up mate. Lots of errors, missing (px's), semicolons, quotes, etc...
<div id="wrapper" style="overflow: hidden; width: 1000;">
<div id="box1" class="greybox">Left</div>
<div id="box2" class="greybox">Right</div>
</div>
#box1 {
width: 440px;
height: 450px;
padding: 1px 20px 0 40px; /* Order = Top, Right, Bottom, Left */
margin: 70px 0 0 85px; /* Cleans up your code by eliminating margin-top, margin-right, margin-bottom, margin-left and same applies with padding */
float: left;
overflow: hidden;
}
#box2 {
width: 20px;
height: 300px;
padding: 1px 0 0 0;
margin: 70px 0 0 30px;
overflow: hidden;
float: left;
}
Demo : http://jsfiddle.net/ZFTzY/5/
I'm trying to create a dynamic icon using css sprites. here's what I keep getting:
So I actually have a couple of questions about what's going wrong:
Why is the icon (the box with the cross) not overlapping the purple boxes?
Why do the purple boxes have a 2px space between them?
EDIT
Here is a jsFiddle: http://jsfiddle.net/hWhUb/
here's the relavant css i'm using:
.icon {
position: relative;
width: 87px;
}
.icon .icon-type {
position: absolute;
left: 0;
}
.icon .brigade, .icon .icon-type {
background-image: url('img/play/splitbrigades.png');
}
.icon-hero {
width: 87px;
height: 71px;
background-position: -11px -11px;
background-repeat: no-repeat;
}
.brigade-purple-left {
width: 27px;
height: 71px;
background-position: -287px -12px;
display: inline-block;
background-repeat: no-repeat;
}
.brigade-purple-middle {
width: 30px;
height: 71px;
background-position: -334px -12px;
display: inline-block;
background-repeat: no-repeat;
}
.brigade-purple-right {
width: 28px;
height: 71px;
background-position: -384px -12px;
display: inline-block;
background-repeat: no-repeat;
}
and the html:
<div class="icon">
<div class="brigade brigade-purple-left"> </div>
<div class="brigade brigade-purple-middle" style="width: 22px;"> </div>
<div class="brigade brigade-purple-right"> </div>
<div class="icon-type icon-hero"> </div>
</div>
can anyone explain to me what I'm doing wrong, and possibly how I could achieve my result in a better way (if possible)?
add float: left to .icon .brigade
.icon .brigade {
float: left;
margin: 0;
}
this should fix everything you need or get you in the right place to finish it off!
the spacing between the purple boxes is because you were using display: inline-block; and the white space in your markup between these divs, generates that spacing.
the icon is not rendered "above" the boxes because it's missing the top: 0; declaration
You should use this. It must contain top.
.icon .icon-type { position: absolute; left: 0; top:0}
Live :
http://jsfiddle.net/hWhUb/1/
I have a odd problem while working on a small site.
I can't get my wrapper to wrap around all of my other divs correctly. My code looks like this:
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
</div>
</div>
<div id="content">
<div id="text">
<form></form>
</div>
<div id="contact"><img />
<map name="Map" id="Map">
</map>
</div>
</div>
<div class="clear"></div>
</div>
</body>
And the CSS:
body {
margin: 0px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
}
#wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
}
#header {
height: 560px;
width: 1190px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/Header.jpg);
background-repeat: no-repeat;
}
#menu {
width: 640px;
position: relative;
left: 350px;
top: 115px;
}
#content {
width: 1190px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 10px;
}
#text {
width: 550px;
float: left;
margin-bottom: 20px;
position: relative;
left: 180px;
}
#contact {
float: left;
margin-bottom: 20px;
position: relative;
left: 230px;
top: 50px;
}
.clear {
clear: both;
}
The wrapper seem to wrap on some of my pages but not all, and if I specify the size of the image in #contact it will fail on the other pages aswell. However, it does wrap the #text div.
Am greatly pleased for any help!
Best Regards
Robert
The position: relative; style attached to the contact div is messing up the wrapper near the bottom. If you remove that style and then switch out the offsets to be margins instead, the wrapper div now wraps correctly across all the content divs. I have set up an example with your code here:
http://jsbin.com/eqecev/2/edit#preview
Add overflow:auto; to your wrapper div's CSS.
Hows it going.
Im just started to learn a bit about joomla and Im trying to get my divs to align vertically when making a template.
The problem is that the right div is way down the bottom of the page on the right hand side and the center div is aligned at least 1 character height below the left div which is the only one correctly aligned. I also cant see the footer div (maybe because the image is plain black along with the text.)
The left, right, center and footer div are within a container div. I previewed it in firefox and although the container image and borders are exactly where i want them, the div contents are all over the place.
Heres the css code, any help with this would be great. Ill also paste the Div ids and structure below the css awell.
Thanks in advance.
body{
margin: 0 auto;
background-color: #000000;
background-repeat: repeat;
text-align: center;}
#container {
width: 900px;
height: 759px;
margin: 0 auto;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
background-repeat: no-repeat;
background-image: url(../slices/images/images/content-slice.jpg);}
#searchbox{
}
#header{
width: 900px;
height: 104px;
background-repeat: no-repeat;
background-image: url(../slices/Sf-Head-slice.jpg);
margin: 0 auto;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
text-align: left;}
#header2{
width: 900px;
height: 108px;
background-repeat: no-repeat;
background-image: url(../slices/searchboxwithplayer-slice.jpg);
margin: 0 auto;
border-left:5px #ffffff solid;
border-right:5px #ffffff solid;
text-align: left;}
#footer{
width: 900px;
text-align: left;
margin: 0 auto;
height: 28px;
background-repeat: no-repeat;
background-image: url(../slices/images/footerslice.jpg);}
#left{
text-align: left;
margin: 0 auto;
width: 220px;
height: 752px;
float: left;}
#right{
text-align: left;
margin: 0 auto;
width: 220px;
height: 752px;
float: right;}
#center{
text-align: left;
margin: 0 auto;
height: 752px;
width: 400px;
}
Heres the divs
<body>
<div id="header">this is the header</div>
<div id="header2">this is header2
<div id="searchbox">this is the searchbox
</div>
</div>
<div id="container">this is the container
<div id="left">this is the left column</div>
<div id="center">this is the center column</div>
<div id="right">this is the right column</div>
<div id="footer">this is the footer</div>
</div>
</div>
</body>
The reason the columns aren't lining up beside each other is because the center column isn't floated. The margin: 0 auto also isn't helping things. The rule with floating columns is to make sure that the sum of all element widths you want beside each other is <= the width of their container. In your case you'll be ok because:
220 + 220 + 400 < 900
Once you float all the columns and then clear with the footer, you should be in business. I also changed how your footer background image is repeating based on the name (I'm assuming it's a thin slice that you want to tile horizontally).
#footer{
clear: both;
text-align: left;
height: 28px;
background: url(../slices/images/footerslice.jpg) repeat-x top left;
}
#left, #right, #center {
text-align: left;
height: 752px;
width: 220px;
}
#left {
float: left;
}
#right {
float: right;
}
#center{
float: left;
width: 400px;
}
I have no experience with Joomla and my CSS knowledge is to crude to supply a real answer, but if you want a working multi column layout you should definitely take a look at YAML (not the YAML language, thats another thing). Maybe you can take their CSS partky or as a whole. Even if you can't, their documentation is very descriptive and will teach you a lot about the caveats related to multi column layouts.