I'm designing a web site
http://zinzinzibidi.com/TurkAntivirusResponsive/Anasayfa
It has a white space problem at right side.
http://www.responsinator.com/?url=http%3A%2F%2Fzinzinzibidi.com%2FTurkAntivirusResponsive%2FAnasayfa
You can see there is an extra "scroll X" area at 320px width;
My CSS file: http://zinzinzibidi.com/Areas/TurkAntivirusResponsive/Content/css/style.css
I can't see any wrong code at my CSS.
How can I fix it?
I was check you site, extra "scroll x" area is in all format
try to avoid width and fixed width
use width=100% instead
Ok, you put
html {
font-family: sans-serif;
overflow-x: hidden;
}
its hide scroll but not solve your problem
1st you menu
.nav-mobile {
margin: auto;
position: relative;
width: 320px; <-- delete or put 100%
}
next line
.nav-mobile-button {
border-bottom: 1px dotted #777777;
cursor: pointer;
font-weight: bold;
height: 60px;
line-height: 60px;
margin: auto;
position: relative;
text-align: center;
transition: all 0.2s ease-in-out 0s;
width: 320px; <-- delete or put 100%
}
That's just some of your lines to manage experiment whit your css
you have some padding that force some div sections out of screen
Related
I am currently trying to make an animation with a welcome message. I want it to be placed in the verticalmiddle of my div. I transform it from a big font to a small font and it seems like the big fonts height is still affecting the positioning or am I wrong?
#barbar{
height:10%;
width: 100%;
background-color:rgba(79, 79, 90, 0.92);
bottom: 0;
position: fixed;
z-index: 3;
}
.hello{
color: black;
font-family: "Times New Roman";
text-align: center;
animation: ease;
animation-name: gas;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration:2s;
position: fixed;
font-size: 100px;
bottom: 700px;
margin-left: -20%;
white-space: nowrap;
}
#keyframes gas{
from { font-size: 500px; bottom: 700px; margin-left: -20%;}
to { font-size: 12px; bottom: 0; margin-left: 15%;}
}
<div id = "barbar">
<h3 class ='hello'> Welocme User </h3>
</div>
As you can see my h3 is inside the div but it still somehow doesn't end up where I want it to be placed. to bottom:-x% is not the soulution im looking for.
Add "margin-bottom: 0;" to your h3 tag.
By default, the browser adds a margin of 1em to h3 elements. Since the "em" unit is relative to font-size, when you add "font-size: 100px" to your element you also get 100px of margin.
I suggest using a CSS reset. It will clear all the browser's defaults, preventing it to add unwanted styles on your page. It also makes sure that your page will look exactly the same in all browsers since different browsers use different defaults. I suggest using meyerweb reset on all your pages.
I am working on this site - http://agencymaiclientpages.com/phononic/cms/
One of the requirements is that footer goes to the bottom of the page. I know there are height:100% values on body and html required, but whichever combination I tried (there are several element within content area) - it just doesn't work. I tried putting all the main content into 100%, nothing, tried several elements within stack, still nothing. What am I doing wrong? Or perhaps, what am I missing?
I even tried to remove some of the elements (#primary) so the stacking isn't so "high", but the footer either goes below the screen (so scrolling is required) or stays just below the main content area.
You need fixed positioning. This will ensure your footer is at the bottom of the page:
.site-footer {
position:fixed;
bottom:0;
width:100%;
max-width:100%;
}
But be careful, if the window height is 'small', it will cut of the main content. So depending on your main content, you could only apply the fixed positioning after a certain vertical height, for example something like this:
#media (min-height:600px) {
/*fixed positioning here*/
}
Something like:
.site-footer {
color: #ddd;
font-size: 14px;
font-size: 1.4rem;
text-align: center;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -120px;
}
?
Your question needs more info...
The footer comes to the bottom.
CSS :
.site-footer {
bottom: 0;
position: absolute;
width: 100%;
left: 0;
right: 0;
font-size: 1.4rem;
text-align: center;
color: #ddd;
}
Remove padding and margins from some places so that all the main contents come in one page . for example:
.site-footer {
padding: 1em 0;
}
.menu-main-container {
margin-top: 30px;
}
p {
margin-bottom: 1.5em;
}
Because your footer doesnot have any background color so when main content div is bigger the footer overlaps it and doesn't look good.
Try this code, it will help :
.my_footer {
position : absolute;
bottom : 0px;
color: #0f0;
padding : 0 auto;
font-size: 16px;
font-size: 1.0rem;
text-align: center;
left: 50%;
}
The position: absolute; and bottom : 0px; will make the footer to be placed at the foo of the page.
The page on my website is not scrolling. If there are more content than screen can fit you can not actually see it because scroll is not working. I'm not and CSS guru and I don't know if the problem is actually with CSS or HTML.
I've spend some time trying to understand the problem but i'm not a CSS guru so I hope someone can help me. The page is using tweeter-bootstrap and custom theme for it (which i did not write). When I don't include theme CSS file scrolling is working fine.
Part of my theme CSS file:
body {
color: #000;
font-family: 'Play', sans-serif;
font-size: 16px;
line-height: 25px;
background: #e0dbcd url('../images/bg.jpg');
letter-spacing:0.2px;
overflow: hidden;
}
remove overflow: hidden; from body in the bootstrap-theme.css file.
For someone who was in my scenario, this could be happening because of height: 100% for html, body in angular-material.css. Remove it and you're good to go.
Remove overflow: hidden; from body as #Nabbit suggested or set overflow: scroll;
Edited:
The overflow property controls what happens to content that breaks outside of its bounds. By default, the property is visible i.e. content is not clipped when it proceeds outside its box.
overflow: hidden; means overflowing content will be hidden.
overflow: scroll; this is similar to hidden except users will be able to scroll through the hidden content.
This may not be relevant for anyone, but i'm going to comment it here anyway - I was using a
pseudo :after
element on the body, and had applied
position: fixed
below a certain viewpoint to the css, however I had put
.classname
and not
.classname:after
on the element. I'll post the CSS below. what this did was fix the position of the page so it could not scroll.
full CSS that's relevant:
body {
background-color: #5c2028;
color: #ffffff;
min-width: 100%;
min-height: 100%;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
overflow-x: hidden;
}
body.bg{
background-image: url('../img/background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-clip: none;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
body.bg:after{
content : "";
background-image: url('../img/hildasball_7_d_s_bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-clip: none;
display: block;
position: fixed;
top: 0;
left: 0;
opacity : 1.0;
z-index: -2;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
/*width: auto;
height: auto;*/
}
#media (max-width: 767px) {
body{
min-height: 800px;
}
/* Initially, i put body.bg not body.bg:after, which made things not scroll and i ended up getting confused as hell */
body.bg:after{
position: fixed;
}
.floatContact {
float: none;
}
}
I agree will all above said, something to add I recently discovered in my code is the following CSS added.
* {
-moz-transition: .5s ease-in-out;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
This also can interfere with the HTML & body scrolling. So I would recommend adding this transition effect in the specific component you desire to have the effect rather than on the HTML & body.
I have a problem trying to work out a small test menu with the (for me) "new" css3. The menu should be in the footer which always is on the bottom of the View port. However, I would like to mess around with the transition effects css3 offers therefore I want to grow a point of the menu when you :hover it.
The menu points are set to float:left in a relative menu div. The transition does as intended except the height transition enlarges the element downwards and (obviously as it is the footer) out of the page.
Instead I would like the menu points to grow upward. To solve this i could change the float:left to position:absolute and add bottom:0, but I would have to horizontal position every menu point (hyperlink) manually which I would like to avoid. Since the Menu size (number of menu points) should be variable and I also don't want to use and JavaScript, I am clueless.
Here is the css and the html:
<div id="footer">
<div class="menu">
menp1
menp2
menp3
menp4
menp5
menp6
</div>
</div>
and the css:
#footer {
position: absolute;
background-color: #497044;
bottom: 0px;
width: 100%;
height: 45px;
padding: 5px; }
div.menu {
position: relative;
height: 45px;
width: 480px;
left: 50%;
margin-left: -240px; }
div.menu a {
float:left;
width: 80px;
height: 50px;
border: 3px dashed;
margin-left: 5px;
text-align: center;
-moz-transition: height 2s; }
div.menu a:hover {
background-color: white;
height: 100px; }
thanks for the advice!
http://jsfiddle.net/nqCgu/2/
You mean something like this?
You can use a negative margin-top value and margin-top transition to achieve this. Add:
div.menu { ...
transition: margin-top .2s;
-moz-transition: margin-top .2s;}
div.menu a:hover {
margin-top:-50px;
background-color:white;
height: 100px; }
I want to display a noscript warning when users have javascript disabled, in the same way StackOverflow does.
I use this html:
<noscript>
<div id="noscript-warning">
Este sitio funciona mejor con JavaScript habilitado. Descubrí
cómo habilitarlo.
</div>
</noscript>
and this css:
#noscript-warning
{
font-family: Arial,Helvetica,sans-serif;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 101;
text-align: center;
font-weight: bold;
font-size: 12pt;
color: white;
background-color: #AE0000;
padding: 10px 0;
display: block;
}
#noscript-warning a
{
color: #FFFFC6;
}
#container
{
width: 98%;
margin: auto;
padding: auto;
background-color: #fff;
color: black;
border-style: solid;
border-color: #3E4F4F;
border-width: 1px 2px 2px 1px;
line-height: 130%;
}
where #container is the main content element of my template.
When the noscript tag is visible, it appears in front of some content. I don't want that, the content should be displayed below the warning.
How can I do that?
If you want the behavior of position: fixed AND need to push the initial content down from the top, you can include a second div in your noscript area. Give this div visibility: hidden and a height equal to the height of the div with position: fixed.
The problem is with you setting position: fixed on the warning. You can't really expect the page's content to move around that, since you're fixing it to the top of the browser window. What would happen when you scroll down? The whole page's content rearranges itself to go around the warning?
Do you want the warning to be stuck at the top of the browser window even if they scroll? If not, position: fixed isn't what you're looking for.