I am getting a horizontal scrollbar; I don't need to set overflow-x to hidden as only one page might really still need the scrollbar. the point is that I don't understand why the scrollbar appear.
html {
min-height: 100%;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
font-size: 14px;
font-family: 'itcmd' !important;
}
body {
margin-bottom: 50px;
display: flex;
flex-direction: column;
background-color: #F3F3F3 !important;
background-repeat: no-repeat;
}
as you see in some whitespace in red recatangle appear though there is nothing to show
the only way to avoid the scrollbar is by setting margin-right=15 in the css for html
html {
min-height: 100%;
margin-left: 0px;
margin-right: 15px;
padding: 0px;
font-size: 14px;
font-family: 'itcmd' !important;
}
why am I getting the scrollbar? is there a way to setup my css correctly to utilize the full width while avoiding scrollbar unless I need to
Some of your content is taking more width than it should which is causing the scrollbar. Check if you have used negative margin. You can try adding overflow hidden on inner divs one by one using dev tools until you find the culprit.
Or else share the complete code.
Can you try to add margin and padding 0 to both html and body
html, body{margin:0;padding:0;}
Related
I have a problem that I just can't wrap my head around, it might be because that I'm tired. I'm using Ryan's Fait sticky footer which I'm sure the most of you are familiar with. I use it regularly and never had any problems with it until now. The design that I'm working has a footer with several inner child elements.
One of the elements .newsletter is using padding or margins to make a wide gap so that a background image can be placed on the body. This is causing a overflow even when entering the correct height. Deleting the padding corrects the problem. I know that using overflow: hidden is an option but I'd rather find out the cause.
Screenshot with margins or padding set within the news letter element:
Screen without margins or padding set in the news letters:
Not working CSS:
body {
background: #212121;
color: #ddd;
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
height: 100%;
}
.maincontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -424px;
width: 100%;
}
.mainfooter, .push {
height: 424px;
width: 100%;
}
.newsletter {
padding: 1.875rem 0 1.875rem;
}
.newsletter-fix {
background: #000;
padding: 3rem 0 1rem;
color: #ddd;
}
Working CSS:
Simply changing the following values from those mentioned above to the following resolves the issue but I want the padding, or margin gap between the newsletter.
.maincontainer {
margin: 0 auto -394px;
}
.mainfooter, .push {
height: 394px;
}
.newsletter {
padding: 0;
}
What if you put background-color : black to your .mainfooter instead of putting the background-color to the different element inside your footer?
It would seem that I'm extremely tried and stupid! I thank everyone for taking the time to take a look but it seems its as simple as a user error.
The problem was because I was counting from the very first bit of colour, in this case background: #000 on the .newsletterfix and not taking into consideration of the invisible padding above it. Stupid, me.
Example:
If you go here you will see at the very bottom a light gray box that says "Partners". While the site is in full screen mode everything looks correct but when you edit your browser and make the width smaller then it switches to have an image on each line. It appears to happen when the max-width of the DIV gets below 1000px which you can see from the below I have the CSS set to be a max-width of 1000px or 95% of the browser width. Any ideas on how I can fix this?
.footer-full-row {
padding-left: 20px;
width: 95%;
max-width: 1000px;
margin: 0px auto 0px auto;
color: #fff;
background:gray;
}
In your responsive.css file, you have media queries that set all img elements to display: block;. You could override that using something like
.footer-widget img {
display: inline-block;
}
If I understand you right, you want the images to not display in a separate row each, so you need to add this css property to .textwidget img :
.textwidget img{
display:inline-block;
}
This will make it wrap anyway,in order to leave the size of the images as is, but you'll not get each picture in a separate ligne, it'll be wrapping according to the need of the page.
In your style.css change:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
}
to this:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
display: flex;
}
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
I am trying to place some buttons in my top bar where you can choose the display language. Those buttons should have full height in the top bar like the other buttons:
But for some reason I can't get those buttons to full height:
Here is a fiddle with my html and css setup: http://jsfiddle.net/gLgwm/1/
I tried using the following CSS which does not work:
#CtlLanguageSelection,
#CtlLanguageSelection a {
line-height: 35px !important;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
Also tried setting min-height and height to 100% and 35px, did not work.
The a is an inline element, so it takes much space as the text. Make it an inline-block
http://jsfiddle.net/gLgwm/4/
#CtlLanguageSelection a {
line-height: 35px !important;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
display: inline-block;
cursor:pointer;
}
Add this:
#CtlLanguageSelection a {
height: 100%;
display: inline-block;
}
If we set them to height: 100%; and give them display: inline-block it will work just fine.
DEMO HERE
Note: If you don't want that little gap between them (caused by inline-block) you can do this:
<a id="CtlChangeLanguageDE">de</a><a id="CtlChangeLanguageEN">en</a>
Just a little trick to sort it, there are many other ways so you can look them up if needed.
DEMO HERE
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}