JSFiddle: http://jsfiddle.net/jYSYW/
I would like to put the pink menu at the bottom right of header .container. I did try to use position: relative; and aboslute but wihtout success...
Any clues ?
I also want NOT to apply the ul/li css to the bootstrap dropdown if possible.
Thanks
PS: This is a shortened version of my theme.
I added
header .container{
height: 80px;
position: relative;
overflow: hidden;
}
nav.pull-right {
position: absolute;
bottom: 0;
right: 0;
}
and it works.
here is a new fiddle for you: http://jsfiddle.net/dMu5y/
Like this? :)
Added:
.container nav.pull-right {
position: absolute;
right: 0;
bottom: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
Related
Issues I have had
I have not been able to scroll down on my site.
No solutions I ave found work.
Info
My site is execlinux.glitch.me
The CSS files and HTML can be found by going to glitch.com and searching execlinux
I found the solution:
in your CSS file you have a ".text" element which has the fixed position property. It's wrong!!! it should have the relative position like the below:
.text {
position: relative;
top: 100px;
left: 50px;
}
the css below is incorrect:
.text {
position: fixed;
top: 100px;
left: 50px;
}
You could try changing fixed to relative, however if you do there will be other issues you will face.
If you use the following css:
.text {
position: relative;
top: 100px;
left: 50px;
}
you will find that the contents of your <div class="text"> scrolls over the top of your navigation menu and is not left justified.
Perhaps try
.text {
position: relative;
top: 100px;
left: 50px;
z-index-1;
width: 90%;
}
html {
height: 100%;
width: 100%;
overflow: visible;
}
Tested these changes and while not perfect, they achieve a somewhat satisfactory result.
I have a problem with some CSS ,maybe someone can help me out .
I dont see any margin or padding there that will be the problem.Only that the height is to big or something.
I am using wordpress Sydney theme.
This is the website.
How can i get the space out between the banner and the content of the page ?
Here is a screenshot of what i mean.
Thank You.
#sf-slider-overlay {
position: absolute;
top: 230 px;
z - index: 999;
width: 1170 px;
margin - left: auto;
margin - right: auto;
}
you only have to do this..
Position : absolute
Will work ☺
There is one element (#sf-slider-overlay) with wrong position.
#sf-slider-overlay {
position: relative;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
Change it to,
#sf-slider-overlay {
position: absolute;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
So Simple just add below code to custom css style of your theme
#sf-slider-overlay {
position: absolute;
}
Your problem will be solved or put above code in your page css.
That's because the space isn't caused by any margin or padding. The space is caused by an element that has been moved out of the way using position relative.
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: relative;
top: 230px;
width: 1170px;
z-index: 999;
}
If you change this to have a position:absolute; it fixes the extra space that you had.
Like this:
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 230px;
width: 1170px;
z-index: 999;
}
You may have to fiddle with the positioning slightly to get it right, I noticed that once absolute has been set, the word "Domestic" sits right on the edge of the screen, so perhaps add a left:2em; to the property, or even padding-left:2em;
You are using position: relative; in the element #sf-slider-overlay. position: relative; takes an element out of the float, but the space remains there.
You can use position: absolute; but have to set the left property to get the same result as now:
#sf-slider-overlay {
position: absolute;
left: 50%;
translate: translateX(-50%);
}
I am trying to build a checkout progress meter as in the below fiddle Fiddle Link Here
The problem here i am facing that horizontal lines are not in place. Kindly help. I want this as to be displayed as below
To show timeline code is as below
.checkout-broken .timeline {
height: 0;
width: 50%;
position: relative;
top: 31%;
z-index: -1;
border: 1px solid #005387
}
You could set the position to absolute:
.checkout-broken .timeline {
height: 0;
width: 50%;
- position: relative;
+ position: absolute;
top: 31%;
z-index: -1;
border: 1px solid #005387
}
For removing the gaps between the .step elements you can use float: left; instead of the display: inline-block.
http://jsfiddle.net/62de75kt/
I don't know why you don't want to use z-index to hide it (since I think it's the easiest way) but you can change the alignment to achieve your result. See the fiddle : http://jsfiddle.net/tga7dbbu/
Here's the part of CSS which has been changed :
.checkout-broken .timeline-r {
right: -20px;
}
.checkout-broken .timeline-l {
left: -20px;
}
.checkout-broken .step {
padding: 0 25px;
margin:0 10px;
}
Of course you can tweak it further but the principle is still the same.
It's better to use :after content
Demo:
http://jsfiddle.net/b32yL29e/7/
I have 3 buttons that I need to stay fixed in the lower right corner of the page.
Example.
But when I set position:fixed , it goes straight up to the top (which is also fixed).
How can I make them stay down there, yet when I scroll up to follow me?
Thank you!
Add position: fixed; bottom: 0; ,and remove the top:0;,the bottom property sets the bottom edge of an element.
Try this code:
DEMO
#buton{text-align:right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
}
Remove
top:0
and set
bottom:0; position: fixed; right: 0;
#buton {
text-align: right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
right: 0;
}
See Fiddle Demo
Wrap everything in a container and give it position relative
make #buton absolute with bottom:0
keep myButton independent of any position
working demo
html,body{
height:100%; /* important */
}
#conatiner {
position: relative;/* added*/
height:100%;/* important */
}
#buton {
text-align:right;
width: 100%;
z-index: 100;
position: absolute;/* added*/
bottom: 0;
}
The problem is with top:0; Since you need the buttons to stay fixed in the lower right corner of the page you should use bottom: 0;position: fixed;
Update the below part
#buton{
text-align:right;
height: 100px;
top: 0;
width: 100%;
z-index: 100;
}
to the one given below,
#buton{
text-align:right;
height: 100px;
bottom:0;
position: fixed;
width: 100%;
z-index: 100;
}
It will work like a charm.
Have made some changes, see the demo..
UPDATE :
See demo
i've look around online and tried various ways to go about this, but haven't managed to find one technique that works for me. i'd like my website's background image to be centered, fill the entire browser screen, and work with responsive design.
is there an easy technique, besides the CSS3/background-size: cover? that just didn't work at ALL for me (not sure why...).
LIVE DEMO
body{
background:url(img.jpg) center center fixed;
background-size:cover; // CSS3 *
}
Note: CSS3. For other old browsers please make it as ugly as possible! ;)
If you're not opposed to a solution involving HTML in addition to CSS, you can simulate the background-size: cover behavior with an img tag.
HTML:
<body>
<div id="image-matte">
<img src="..."/>
</div>
... Page content below ...
</body>
CSS:
#image-matte {
position: fixed;
top: 0%;
left: -50%;
width: 200%;
height: 200%;
}
#image-matte img {
display: block;
margin: auto;
min-height: 50%;
min-width: 50%;
}
/* Covers the image to prevent pointer interaction */
#image-matte:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
EDIT: To get a vertically AND horizontally centered background image, you'll need to create a table/table-cell relationship between the wrapper div, and an inner div that holds the image itself... The HTML and CSS would look like this:
HTML:
<div id="image-matte">
<div>
<img src="..."/>
</div>
</div>
CSS:
#image-matte {
position: fixed;
display: table;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
text-align: center;
}
#image-matte div {
vertical-align: middle;
display: table-cell;
}
#image-matte img {
position: relative;
text-align: center;
min-height: 50%;
min-width: 50%;
}
/* Covers the image to prevent pointer interaction */
#image-matte:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Working example: http://jsfiddle.net/qkpvb/
To work nice on all browsers, I'd suggest this solution using jQuery :
HTML
<img src='./templates/lights3.jpg' alt="bg" id="bg"/>
CSS
#bg {
position: fixed;
top: 0;
left: 0;
z-index: -5000; // Yes I always overdo ^^ (that's not very clean)
}
.bgwidth {
width: 100%;
}
.bgheight {
height: 100%;
}
JQUERY
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
This solution would be responsive and resize your background image relative to the size of browser window.
Try to add this html tag inside tag or css in the link:
<img src="img/beach.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg