I have an issue I can't figure out. I'm hoping for a CSS expert:)
http://pensacolachiropracticspinalcenters.com/
I've created a bootstrap carousel. The html blocks go like this.
<div #HomeBannerPane> (position:relative)
<div #home-carousel></div>
<div #HomeBoxWrapper (position:absolute;)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
</div>
</div>
Actual CSS
/*Home Carousel and 3 Green Boxes*/
#HomeBannerPane{position:relative; left:-16%;}
/*#home-carousel{position:relative;}*/
#HomeBoxWrapper{
width: 75%;
position:absolute;
bottom:0px;
left:16%;
z-index:10;
}
.homebox{
width:33%;
float:left;
max-height:340px;
min-height:159px;
padding-top:21px;
padding-right:30px;
padding-left:30px;
padding-bottom:30px;
overflow-x:hidden;
overflow-y:hidden;
color:#FFFFFF;
}
.homebox h2{margin-bottom:15px;}
.homebox p{
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size:13px;
}
#HomeBoxFirst{background:#7CBA3D;}
#HomeBoxSecond{background:#43A140;}
#HomeBoxThird{background:#008238;}
I have the bottom of #HomeBoxWrapper zeroed out to the bottom of the #HomeBannerPane which is where the Carousel fits into. #HomeBannerPane has a z-index to sit on top of the carousel.
The problem I am having is when the slides rotate, it kicks the #HomeBoxWrapper and all three boxes down during the transition. I am completely stumped. I really need it to quit doing that. Any suggestions?
Thanks
If you make .carousel-inner height a bit smaller, say 660px instead 667px then the #HomeBoxWrapper not kick the three boxes inside it.I don't know exacly why, but i tested with Firebug and it works on Firefox 32. Hope it help.
Related
I've got a strange 1px line that appears at the bottom of my page, but only in mobile. It does not do this on desktop. The footer for some reason is adding an extra 1px line at the bottom of the page in mobile, but, again, not on desktop even though it's the same code. It does this on all the mobile browsers I have installed. However, if I remove the footer, there is no 1px line. For some reason the footer causes this 1px added line in mobile.
You can see a comparison of mobile and desktop in the image below. I made the background color of the page red so you can see the line showing on the left on mobile. At the right, on desktop, same code, there is no offset.
The salient code around this area is very simple and would be:
* {
margin:0;
padding:0;
font-family:'Encode Sans', sans-serif;
color:#2b2b2b;
}
body {
background:red;
}
.content {
width:90%;
margin:0 auto;
}
#footer {
height:3em;
line-height:3em;
background:rgba(51,128,0,0.75);
}
#footer a {
margin-right:0.5em;
font-size:0.9em;
text-decoration:none;
color:#fff;
}
<div id="footer">
<div class="content">
TopPrivacyTerms
</div>
</div>
Thats a part of body so if you increase the height of the footer then it will not display.
Or
Just remove the red color from the body.
I'm having a hard time trying to figure out where the extra space is coming from in my h1 tag. I have reset the CSS padding and margin to 0, and set the line-height the same as the font size, and i expect the text to have no space above or below, within the tag, and to be vertically centered (redundant, but at least vertically centered with minimal space above and below.... a few pixels at most).
Here is my html:
<h1>THIS IS A TEST</h1>
Here is my CSS:
h1 {
margin:0;
padding:0;
background-color:#FC9;
font-size:3em;
text-transform:uppercase;
line-height:3em;
}
Here is a fiddle illustrating the issue
What am i doing wrong? Is it something obvious? (sorry, if so).
I've spent hours trying to resolve this, as it messes up my layout in a larger design.
thanks in advance for any help anyone can offer.
you have placed the css for class lineheighttest to set the line height 3em.Remove that then it will be working fine.
The space is appearing from this rule of css:
.lineheighttest {
line-height:3em;
}
If you want to put that rule then may be you want to set negative margin on spacer.
Explanation:
When you set the font-size to font-size:3em; you set it to 3x the size of the body font size.
When you set the line height to 3em for the H1 line, you are setting it to 3x the font size.
h1 {
margin:0;
padding:0;
background-color:#FC9;
font-size:3em;
text-transform:uppercase;
font-family: 'Khula', sans-serif;
font-weight:300;
vertical-align:middle;
}
.lineheighttest {
line-height:.75em;
padding-top:2px;
}
.spacer {
height:30px;
background-color:#6BC7D0;
}
<h1>THIS IS A TEST</h1>
<div class="spacer"></div>
<h1 class="lineheighttest" >THIS IS A TEST</h1>
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
My html code is
<html>
<body id="body">
<div id="content">
<div id="head1">
<h3 id="cpsir">CPSIR-CM</h3>
</div>
</div>
</html>
Css code is
#body{
background:#0F657D;
}
#content{
width:1000px;
height:740px;
background:#E2E2E2;
margin-left:auto;
margin-right:auto;
}
#head1{
width:auto;
height:60px;
background:#626262;
margin-top:-10px;
}
#cpsir{
font-family:Verdana, Helvetica, sans-serif; font-size:24px;
color:#F4F4F4;
padding-top:10px;
}
I'm trying to fit the head div tag to the top of the body. But which is not fit perfectly. So, I'm used the negative px for it., but which result is differ to the different browser. For example, In the torch browser margin-top:-10px gives what i expect , which is change into the Internet Explorer. What can i do?
Start with:
html, body{
margin:0;
padding:0;
}
And then you shouldn't need the negative margin on #head1
A starter tip i got once when optimizing for different browsers:
*{
margin:0px;
padding:0px;
}
that way all elements are rendered the same in every browser, since IE have one way of putting small margins here and there, as do Firefox, Chrome, etc.
You can just put margins on elements afterwards
Right now my code for my screen looks perfect, but for some reason everytime I change to browser size from full screen to a smaller window all my nav bar moves underneath eachother under the header div and other things as well. If I was to add things in the footer as well how can I set it up so that the page stays the same no matter how you resize it. I don't mind if its fixed on only a full screen mode.
Another issue is that when I asked a friend to check the websites on his laptop it was all messed up because of screen resolution I think, but when I saw it on my monitor it looked completely fine. So I am confused and have no idea how to fix this issue. I have researched as much as I can, but everything I tried didn't work.
So all I am trying to do is make sure that the website is fixed and is only viewable in full screen. If I resize it to smaller then you can't see parts of the page and that's all.
If you could please help me that would be great!
http://jsfiddle.net/thNRs/ ---------------->JSFIDDLE DEMO. You can see the problem right away using this.
HTML CODE:
<body>
<div id="page">
<div id="header">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer">
<!--<h4>WNG Product Development Engineering (US)</h4>
Circuit
Contact Us-->
</div>
</div>
</body>
CSS CODE:
html, body
{
padding:0;
margin:0;
height:100%;
}
#page
{
min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
position:relative;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img
{
float:left;
display:inline;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active
{
color: #FFFFFF;
text-decoration: none;
}
/*#footer h4
{
left:20px;
top:-10px;
position:relative;
text-align:left;
font-weight:bold;
font-family: Sans-serif;
float:left;
color:#fff;
margin-left:20px;
}
#footer a, a:visited, a:hover, a:active
{
color::#fff;
text-decoration:none;
position:relative;
left:1025px;
top:10px;
text-align:left;
font-weight:bold;
font-family:Sans-serif;
float:left;
margin-left:20px;
}*/
/* NAVIGATION BAR CODE */
#navigation
{
position:absolute;
top:60;
left:500;
right:0;
bottom:0;
width:60%;
height:24px;
background-color:#115EA2;
min-width:100px;
text-align:center;
padding:10px 20px;
}
#navigation a
{
font-size:20px;
font-weight:bold;
font-style:Sans-serif;
margin:10px 0;
height:18px;
padding:12px 10px;
color:#FFF;
text-decoration:none;
}
#navigation a:hover
{
background-color:#333;
}
A good solution to problems with the page shifting when the window resizes or when someone does a ctrl + mouse wheel up/down type of page zoom is to set sizes of things on the page using the em unit. For example:
height:12.5em;
not...
height:200px;
width:60%;
etc...
1em == 16px by default. If you change the font size to a new em I think it can mess things up so as long as you're not doing that you're fine.
Set all containers except for the outermost containers to a definite size and use em units as they are calculated based on the font size or something so when you zoom the page everything stays the same relative size and you don't get messes. When I say outermost container I am referring to the ones directly inside the main tags, body, header, etc... set those with:
margin:auto;
width:(desired)%;
because they are on the outside, they only change in reference to the edge of the display area so when you zoom in and out, the outer edge buffer of the page just collapses and the things in the center appear to shrink and enlarge from the center.
So get a calculator, and start converting things like width:1300px; to width:81.25em.
One last note. em units round to 3 decimal places. ie. 2px = .125em exactly but 1px =/= .0625em you would use .063em.
Something to this effect?
The biggest issue was that you didn't have a minimum width for your menu, so it would keep shrinking until it stacked on itself.
#navigation {
float:left;
width:60%;
height:24px;
min-width:1000px;
text-align:center;
padding:10px 20px;
}
Add fix width to the #navigation. It has percent value now, so its width will counted from the body's width (60%).
If the #navigation's width narrower than the elements' width sum, the elements will start to fall to the second row.
The #header's width is "97.5".
Without measurement type (px, percent or some else) it will be ignored by the browsers (it will be 100%).