I'm having issues with the margins in browsers (other than Firefox) on this page:
http://jumpthru.net/newsite/commentary/
Here is the CSS:
#container3 {
float: right;
margin: 0 -240px;
width: 100%;
}
#content3 {
margin: 0 210px 0 -45px;
width:500px;
}
#primary, #secondary {
left:920px;
overflow: hidden;
padding-top: 40px;
position:absolute;
width: 220px;
}
Kind of a strange way to build up the page..
I recommend you to create a 2 column layout in main2..
Left for menu and right for the comments header, with beneath that the content and the recent comments div..
And, start using clearfix: http://www.positioniseverything.net/easyclearing.html
I fixed the issue in Chrome by changing this CSS:
#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}
I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.
add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.
#main2 {
position: relative;
...
}
#primary, #secondary {
right: 0;
...
}
EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.
Related
I need a horizontal scrollbar to show on my website when I make the browser window smaller. When I put {overflow-x:auto;} I get a scrollbar instantly even when browser is maximized, and I get like 100 pixels of blank space of my body on the right side.
body {
padding: 0;
margin: 0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
Try to use this
body {
padding:0;
margin:0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y:scroll;
margin-right: -10px;
overflow-x:hidden;
} `
If you still face any issue. Can you please share fiddle link where I can check and provide you more accurate solution.
If you want to show the scrollbars only when needed, then you need to use overflow:auto, for more reference please have look here.
The structure of the page is quite messy so I won't go into fixing the structure, but will provide the answer how I got the horizontal bar to show.
The problem is in the div#navbar child elements. And the way you are using margin and padding properties. For some information how to use them have look here.
The div#ctu element has the margin-left property active which expands the element outside its inherited sizes.
#ctu{
margin-left:20px --> padding-left:20px;
}
#ft{
position:absolute; ---> position:relative;
padding-left:10px --> padding-left:0px;
}
.container{
overflow-y: scroll; ---> overflow-y:auto;
overflow-x: hidden !important; overflow-y:auto;
//OR
overflow:auto;
}
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
I have a website which is 960px wide and want to put a picture outside of that on the right side.
Vimeo have done it on there homepage: http://vimeo.com
you can see a drawing of an origami bird that sticks outside the website width
without causing the screen to get horizontal scrollbars
How do they do this?!
origami bird Floating outside of Vimeos layout
New answer:
After some further inquiry, it seems that a critical aspect was that the box/image would not cause horizontal scroll-bars, while the content would. This was an interesting trick applied by vimeo, and was quite sneaky.
It has to do with a combination of min-width on body, and overflow-x: hidden on a non-immediate parent of the box/image. When combined with position: absolute, and a negative right, this achieves the desired result.
HTML:
<div id="wrap">
<div id="width_wrap">
<div class="crane"></div>
</div>
</div>
CSS:
body
{
min-width: 960px;
}
#wrap
{
overflow-x: hidden;
}
#width_wrap {
position: relative;
width: 960px;
height: 400px;
}
.crane
{
position: absolute;
width: 200px;
height: 200px;
right: -40px;
}
Here is a minimal Fiddle, with outlines such that you can see what's going on: http://jsfiddle.net/rUj8s/2/
Original answer:
The position: absolute answers will most likely work, but will also take the image/div out of the normal flow of the document. This might not be what you want.
What you probably want is a negative margin-right:
.your_picture {
margin-right: -30px;
}
Or, perhaps position: relative, and a negative right
.your_picture {
position: relative;
right: -30px;
}
Or, lastly, position: relative, and a positive left
.your_picture {
position: relative;
left: 30px;
}
This is why negative margins and relative positioning exist. To move things relative to where they would normally lie.
.your_picture {
position:absolute;
/* this needs to be negative to have the image sticking outside of the width */
right:-30px;
}
#parentDiv{
position: relative;
}
#your_picture {
position:absolute;
right:-30px; /*change it to a number that you like */
top: 30px; /*change it to a number that you like */
}
html markup would go like:
<div id="parentDiv">
<div id="your_picture"></div>
</div>
In the picture below, I am wanting to place the driftwood/bomb image over the image directly above it; hence, I want to remove/collapse the "space" between these two divs. The gap, however, is not caused by the markup itself, because as you can see the "bomb" is making the picture bigger on the height.
I would like to position the navigation bar on the "header" (so the brown top of the navigation is just below the header bottom), so the gap disappears. These images are meant to overlap.
I assume this can be done using CSS. But how? Whatever solution needs to work cross-browser.
HTML:
<header></header>
<nav></nav>
CSS:
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
}
Maybe a negative margin?
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
margin: -90px auto 0;
}
http://jsfiddle.net/NmUfT/
Relative positioning could fix this for you:
nav {
position: relative;
top: -20px;
}
place the div inside the header div.
nav {
position: relative;
bottom: -30px;
}
A top-margin with a negative value is indeed what you seek. If the nav would disappear beneath the header, you should change the nav's z-index. Try different numbers: 100, 1000, 10000 etc.