would appreciate your input on this. Im quite new to CSS, so can't figure out where I've gone wrong with this.
Here's the link to the website: https://test.irinamccann.com
The problem is this: either the top-header, or video containers are bigger than the screen. The rest of the content is fine though.
First noticed on older Firefox, now I see that when you scroll the site to the side, there's a big white section on the right hand side.
Just don't know where it's coming from???
Custom CSS thats been added, that might be causing the issue (??)
.site-brand-inner {
position:absolute; height:100%; width:100%;
display: table;
}
.site-logo {
display: table-cell;
vertical-align: middle;
text-align:center;
}
#masthead {line-height:89px
}
your .site-brand-inner div has width 100% with absolute position. So it's width will be that of screen but as it has some left margin it will need space in right side and that makes it scrollable to right.
Remove the width 100% in your index page at line number 168 you'll be good to go.
.site-brand-inner {
position:absolute; height:100%; width:100%; //remove this width
display: table;
}
Related
I have just started to learn Web-development. So I would be glad to get this silly doubt sorted out.
In the following CSS-code
{
background-color: grey;
}
.container {
display:flex;
flex-wrap:wrap;
width:100%;
min-height: 150px;
background-color: blue;
}
A div element of class"container" is created. I have given min-height in the idea that when the browser window is expanded, the container will also expand since the min-height:150px is present. But the container element remains of the same height(150px) irrespective of the expanding browser!
I have added the output image along with dev-tools screen
So using PHP I am displaying a page of images. I have a div tag for containing these pictures.
What Im trying to do, is alternate positioning these images on the left and right side of the browser.
So entry 1 is positioned on the left
scrolling down
entry 2 is positioned on the right
etc.
If my div container is style="position:relative;width=100%"
How do I make my images alternate hugging the left and side of the browser?
There are several possible ways, one would be the following:
CSS:
div img{
float:left;
clear:both;
}
div img:nth-of-type(2n){
float:right;
}
Check the Example
If you dont want them alternate that way, use
div img{
float:left;
clear:left;
}
div img:nth-of-type(2n){
float:right;
clear:right;
}
Depending on the browsers you have to support (Internet Explorer 8 and lower don't support that selector), use a class on all even images and replace :nth-of-type(2n) with that class.
for the left-huggers:
style="float:left;clear:left;"
and for the right-huggers
style="float:right;clear:right;"
...though if your container is not wide enough to fit more than 2 images across, you won't need the "clear" declarations.
Set float: left; when index%2 == 0 and float: right; when index%2==1
index being an index variable of a loop iterating over your images.
In a similar vein to the other answers
div img:nth-child(even) { float: right; clear: right; }
div img:nth-child(odd) { float: left; clear: left; }
Demo: http://jsfiddle.net/GL667/
I am not sure whether the padding on the bottom (look for the red pixels below the photo) is set on the image, or on the content div, but I want to get rid of it. A jsFiddle of my issue is here: http://jsfiddle.net/FERUs/
Add display: block to your images css:
#picture {
max-height:100%;
max-width:100%;
display: block;
}
More info here.
This problem has been perplexing me for a while now, and I've tried researching it but so far I've just turned up sites that tell me how to center things but that's not the problem. The problem is that while #content looks like it's centered, when the page takes up more than one screen it causes the #content to appear about 5px to the left of where it appears when it is less than one screen in height. Is there a way to fix this without forcing my shorter pages to reach the bottom screen or beyond?
Here's how I'm centering my content:
body {
margin: 0;
padding: 0;
}
#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}
I'll admit that there's a couple more divs in there, but I don't that's really relevant to this problem...
#asc99c is right.
The scroll bar is causing your problem.
When it appears, it pushes everything over.
To solve this (if you must), you could make your pages taller than 100%. Something like
body, html{
height:100%;
}
div{
height:101%;
}
With div being your main content div.
Example: http://jsfiddle.net/jasongennaro/7NYnS/
The following CSS will force the vertical sidebar to appear, even on pages that are shorter than the viewport height. This will prevent the horizontal shift that you're noticing.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Via http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/
Two problems, both caused by IE7
www.myvintagesecret.com
1) I have a Div called .postheader that holds the title and another div called .clip . As you can see, the clip should hover over the content and not push it down. (use any other browser to test). Its currently giving me a huge gap when it should only go as long as the text does.
.postheader {
background:url(images/posthead.png) no-repeat;
min-height:100px;
max-height:600px;
padding-right:25px;
overflow:visible;
}
.clip {
width:214px;
height:275px;
float:right;
position:relative;
}
Any ideas? I can make the max height smaller, but that causes the .clip div to be cut off.
2) In the sidebar, there are a bunch of items called .sidebaritem. They have a background image that is only not showing up in IE7. I can't figure this one out.
.sidebar-item
{
background:url(images/sidebar.png)top center no-repeat;
font-size: 12px;
margin-bottom: 20px;
padding-left: 18px;
padding-right:10px;
padding-top:8px;
min-height:200px;
}
1) Try this. I think using position:absolute instead of float:right will solve the problem.
.postheader {
background:url(images/posthead.png) no-repeat;
position:relative;
}
.clip {
width:214px;
height:275px;
position:absolute;
top:0;
right:25px;
}
2) Hmm.. It could be the space after closing ).
background:url(images/sidebar.png) top center no-repeat;
3) Response to comment: In that case... You should redo the background. Create wrappers with backgrounds only and put your content inside. Clip should be the top div inside wrapper and float to right. Do something like...
<div class="itemTopBg"><div class="itemBottomBg"><div class="itemLeftBg"><div class="itemRightBg">
<div class="clip">...</div>
... content with no bg... just text...
</div></div></div></div>
I think I solved 1) with these changes
.clip drop float right, change position to absolute, and give it a right of 0.
.postheader add position relative
.postheader h2 width of around 400px
Seemed to work in IE7 and firefox, not sure how it looked in other browsers though.