I am trying to make use of the transition css rule but my problem is all the content inside the div is bunched together when the transition is idle and not being moused over. Once you mouse over the content in the div, or the title in my example, is stretched out to full form.
Is there a way to make the title stretch out on one line the way it should look while the box is not being moused over?
Here is a jsfiddle of an example of my code: http://jsfiddle.net/3W2hC/
.title {
width:420px;
text-align:center;
Thanks in advance.
EDIT: I was able to do this. By adding a width. However, there is now a scroll bar. How do i go about removing the scroll bar?
If you want the content to be cut off inside of the div, just give your div overflow:hidden in your css.
In your case it will be:
#main {
overflow:hidden;
...
}
Here's a fiddle: http://jsfiddle.net/3W2hC/1/
Related
I have at the top of my page a div dedicated as a top bar. I want the position to be fixed so that it stays in the same place when scrolling. BUT.. once I apply the fixed positioning, all of the content moves up by about 30px (the size of the bar) and sits behind the bar making the header appear smaller in height than what it should be.
Once the css for position:fixed is removed from #topbar the content moves down to it's desired place
code via codepen: http://codepen.io/Hafkamp/pen/jabmE
css
#topbar{position:fixed}
To the #topbar, add CSS:
#topbar{
top:0;
}
Also, to the #header add:
#header{
margin-top:30px;
}
This way, your #topbar will stick to the top of the page and the following html will be pushed down by 30px(the height of the #topbar)
Just give the margib top to the header of 30 px
On my site, I want to have a 'div' at the bottom of the page. It has no fixed height, but should always start '200px' from the top of the page.
The problem I am having is that when the content of the 'div' is very long, it's background doesn't expand when you scroll down.
Here is my code: JSFiddle (updated)
I have tried working with height=auto and border=auto, but then the 'div' doesn't stretch to the page bottom when there is less content and you don't have to scroll down.
Update:
Sorry for miss expressing my problem: I need the 'div' to have position: relative because I need it to be positioned in the center of the page with left=10% and right=10%.
I also updated the JSFiddle.
Update 2:
I guess there is no perfect solution to this problem. What I will end up doing: Having two 'divs'. The first div will have the page content on it and will not show the background when there is less content; the other div will be behind the content-div and won't scroll at all, but it will show the background for the div in front when there is less content.
I've changed some 'design' from your original to be able to satisfy your requirement.
First, here's my jsfiddle
#top {
height:200px;
background:#FFF;
}
body {
background:red;
margin:0;
padding:0;
}
What I've done is I've set the whole page background to red. Made the #top height 200px with white background, so the #bottom would be 200px apart from the top. Now the trick I've done is, the #bottom is actually isn't touching the bottom if it has less content, but what you see is the illusion from the body's background and #bottom's no background.
Change it to position relative will work in your example fiddle.
add height: auto; to your div's css
EDIT:
and remove bottom: 0;
I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
my main container div can be refreshed, so its content is being hide/shown. When my container div is hide, my footer shoots up.
the html structure looks like the following:
Note that i already tried this:
And it doesn't seem to work, the footer div will still shoot up when the container div is hidden.
Nor can i set a height on the container div because i want the content div height to stretch 100%.
Any ideas? Thanks in advance.
Use this css:
#yourdiv {
position:fixed;
bottom:0;
}
This will make it stick to the bottom :)
Sticky footer is excellent for keeping the footer where it should be.