I've got a strange problem with Chrome, Firefox and obviously IE.
I'm building a WordPress theme for my portfolio site/blog and everything has been okay, up until today when I viewed the site in chrome and suddenly there was a large white bar at the bottom of the page, when the page is viewed in Firefox/IE it shows a double sidebar.
here is the page http://iamdannygreen.com/?p=5
Please excuse the ugly header in firefox, havent yet bug fixed all browsers.
Any help would be greatly appreciated.
Thank you
Fix your header and remove overflow-x: hidden from body and it'll work just fine.
By fix your header, I mean, what is this...?
margin-left:-1000px;
padding-left:1000px;
padding-right:1000px;
margin-right:1000px;
If you want the header background to span the width of the window, move it outside of #wrapper and put another wrapper inside for the content (so the content stays centered).
<div id="header">
<div class="wrap">content here</div>
</div>
<div class="wrap" id="content"> body stuff here </div>
.wrap {
width: 500px;
margin: 0 auto;
}
#header {
background-color: #CCC;
}
#content {
background-color:#FFF;
}
DEMO.
Related
I am attempting to create a footer tag to change the background color of it.
footer {
display: block;
background-color: #92a8d1 !important;
}
<footer>
<div class="container-fluid" name="footer">
</div>
</footer>
Code
Code
Could someone help me fix the code for CSS color displays on the footer?
I cant comment yet so will just answer here. You might not have a height for your footer, that is why it is not showing. Try setting a height like:
footer {
/*display: block;*/ /*remove this, footer is already a block element*/
height: 200px;
background-color: #92a8d1 !important;
}
This might help. You can send a sample/plunk of your code in order for us to help you better.
This is because the footer does have to be inside the body. After the body comes only the closing html-Tag.
If you want a footer for your page, add it before the closing body Tag. This is the same behaviour as if you would have a p-tag in another p-tag. The browser auto corrects your errors and places them next to each other.
If I got your question right this should work :
<footer style="background-color: #92a8d1;">
<div class="container-fluid"> </div>
</footer>
I think the background-color is overwritten by an other style.
I'm developing a theme for Tumblr and the scrollbar isn't appearing for some reason? This is the url for the blog.
The code for the theme can be found on the page source from the right click (all but the html as it gets messed up by Tumblr filling in the {} blanks)
<body>
<div id="titlebox">
<div id="title"><b>{Title}</b><div>
{block:IfHeaderImage}<img src="{image:Header}" class="avatar"/>{/block:IfHeaderImage}
<div id="description">{Description}</div>
{block:Pages}{block:HasPages}<div id="pages">{Label}<br></div>{/block:HasPages}{block:Pages}
</div>
</div>
<div id="postholder">
{block:Posts}
<div id="post">
{block:Photo}<img src="{PhotoURL-400}" alt="PhotoAlt" class="photo">{/block:Photo}
{block:Text}{block:Title}{Title}{/block:Title}{Body}{/block:Text}
</div>
{/block:Posts}
Try:
body {
overflow:auto;
}
The theme is in a way the the height is small therefore the scroll bar disappears.
If you have to have a scroll bar try this by adding it under the <style type="text/css"> tag :
html {
height: 110%;
margin-bottom: 0.01em;
}
There's a few funny things going on here.
'sidebar' has position 'fixed', which prevents the any new content from being seen even with overflow: auto.
What you can do is remove position: fixed from 'sidebar' and 'postholder'. give 'postholder' overflow: scroll and set body's overflow: auto to hidden (this removes the second scrollbar)
html, body{
overflow:initial !important;
}
Can someone help me I'm searching for css/html code example:
I have a webpage with 3 buttons(top, middle, bottom) each specified to 1 div section on my page, lets say my first div section is in the middle of that page div id='middle'.
If I click this button(middle) my page would automatically scroll down from the top
of my page to the div #middle section.
same for the other buttons refered to div id='top', and div id='bottom'
Thanks in forward! I really couldnt find any solution on the internet.
Is there a way to keep my buttonlist on a fixed position so it stays on screen while
moving through sections?
try this:
<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
For something really basic use this:
Go To Middle
Or for something simple in javascript check out this jQuery plugin ScrollTo. Quite useful for scrolling smoothly.
There is a much easier way to get the smooth scroll effect without javascript.
In your CSS just target the entire html tag and give it scroll-behavior: smooth;
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: black;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
<html>
Click Here to Smoothly Scroll Down
<div id="down">
<h1>You are down!</h1>
</div>
</html
The "scroll-behavior" is telling the page how it should scroll and is so much easier than using javascript. Javascript will give you more options on speed and the smoothness but this will deliver without all of the confusing code.
HTML
Top
Middle
Bottom
<div id="top">Top</div>
<div id="middle">Middle</div>
<div id="bottom">Bottom</div>
CSS
#top,#middle,#bottom{
height: 600px;
width: 300px;
background: green;
}
Example http://jsfiddle.net/x4wDk/
Try this:
Scroll to top
If you want smooth scrolling:
html {
scroll-behavior: smooth;
}
I have a problem using a clickable adverting skin as background of my Wordpress site. My site is this: http://www.tvindiretta.com. If you scroll down any page of my site you will see that the top of the background covers the content and mess all up... I think that I should add a white background in foreground. I really need your help, I'm a noob in CSS and programming.... I read about this parameters googling for...
display: block; ??
text-indent: px; ??
overflow: hidden; ??
z-index:22 ???
...but I don't know how to solve this problem... Here is my Wordpress theme CSS file http://www.tvindiretta.com/wp-content/themes/videoplus/style.css Thanks a LOT for any help in advance
P.S. This site: IMPRONTALAQUILA.ORG in certain pages shows the same ad and also other similar skins without any bug or problem... how can I get the same result? I want the background to be fixed so that users see it browsing any part of the page
Remove fixed from
background: white url(http://www.affiliago.it/accounts/default1/banners/SKIN_BAKECA.jpg) no-repeat fixed;
In your body style.
UPDATE:
Add in your css:
.myClass{
background-color:white;
width:994px;
margin:0 auto;
}
And add those styles to:
<div class="clear"> to <div class="clear myClass">
<nav> to <nav class="myClass">
<div class="wrap"> to <div class="wrap myClass">
I'm having some trouble with a header in a webpage. It has several pages, and in one of them there are several big pictures. In that particular page I have observed that the header div moves a few pixels to the left, which is very obnoxious when changing between pages.
I know that the problem disappears when I remove the first picture (id="problem1"), or one of the divs with two pictures ((id="problem2" and "problem3")), but I can't figure out what's happening.
I'm using this css code to produce two colums:
.contenedor { overflow: auto; }
.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}
And this one for the header:
#header {
height: 100px;
background: #0072b8;
font-family: Arial;
font-size: 16px;
color: white;
}
This is the header that magically changes its possition:
<div id="header">
<img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;">
</div>
And this is the code that defines one of the divs that have two colums:
<div class="contenedor">
<div class="div1">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
<div class="div2">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
</div>
You can see the rest of the code and its result here:
JSFiddle
What puzzles me the most is that if I leave just 2 of the problematic elements, the div position is the right one, the same one that in all the other pages that doesn't have these pictures, but when I add the third one it moves.
This is happening because you have a scroll bar on some pages but not on others and your DIV elements are set to 'auto' so they expand the available browser space (which as im sure you know changes when the browser is resized, or in this case when the presence of a scroll bar changes the available space).
To fix this, it would be easiest to just design the page with
html {
overflow-y:scroll;
}
This will make sure that a scroll bar is on the page at all times and the page size won't change over it.
I believe the problem is that you have a scroll bar on the problem pages. Your content is longer then the height of the browser window. When your content is higher than the window a scroll bar is added to the page. This is unavoidable.