As you can see i have a image A and image B now when i click on object 1 an iframe comes up as shown in image B but object 2 goes to the bottom how can i fix this with CSS please help.
By making the iframe position: absolute you can take it out of the flow of the document and stop it from forcing your other elements down the page.
Something like the following should achieve what you are looking for I believe:
.header iframe {
position: absolute;
top: 20px; /* this should be the height of your top (black) bar */
left: 0;
}
Assuming you want to have them on the same line, all you need to do is enter code here display: inline; to both of your objects, then to move them to other spots on the same page use the 4 ways to move them: padding-top, padding-bottom, padding-left, and padding-right. For example:
.object1{
display: inline;
padding-top: 100px;
}
Related
I have created a top navigation with these styles below:
div.topnav
{
position: fixed;
width: 100%;
height: 50px;
display: inline-block;
}
And I want to render a object, but that is being displayed behind my top bar, check it out on the image below:
What can I do to fix this?
From the image you provided I believe that what is happening is that your <p> is being rendered behind your topbar
if you add something like:
p {
margin-top: 60px;
}
you should be able to see it!
I'm using 60 because it would be 50 from the topbar height + 10 for a small padding
Got this resource from a friend , fiddled around the codes
i want to move this bar down because it is blocking the text, when i add padding-top you can see the image what happened.
#header .header-btn-collapse-nav {
outline: 0;
display: block;
position: relative;
z-index: 1;
}
Thank you
bar
try using margin-top: 100px; instead of padding.
Padding creates "inner spacing" in between the parent and child elements, whereby margin is responsible for "outer spacing".
If you want to move the button downwards, without it taking up more screen space, you'll have to use margin-top: 100px; instead
On my site http://richardclifford.net/, whenever a user clicks the one-page #id elements it goes to the very first piece of content the and ignored all the container padding and h2 margin-top to look like this
I'd want it to scroll to include the padding or have an offset like this.
I've add an offset on my scrollspy but that is not fixing it and not sure how I can fix this.
add margin-top: -50px;padding-top: 50px; to target id it works
#work,#about,#contact,#copyright{
margin-top: -50px;
padding-top: 50px;
}
You can use margin-top and padding-top for this with out affecting to the front side of the website. Try to add -50px to margin top and 50px to padding top. This will fix your issue.
One common way is to add invisible pseudo elements to the original target elements of the links via CSS, like this:
#work::before {
display: block;
content: " ";
margin-top: -60px;
height: 60px;
visibility: hidden;
pointer-events: none;
}
This will "extend" the element with that ID in a way which causes the anchor to be 60px above the main element (can be any value), without causing any other visible changes.
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
I have an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap