As you can see from the picture i want my float: right, div box that contains this video to like "be there" and not floating there, i mean i want the hr line and commentsystem(the whiteblack boxes you see) under the video, i suck at explaining but if you dont follow please comment..
heres my css
#sctryclip{
float: right;
border: 2px solid #FF3399;
display: inline-block;
}
Try placing a
<div style="clear:both"></div>
box beneath your video box (before your "<hr />")
or maybe try this:
<hr style="clear:both" />
Before I start trying to answer this, I better me make sure that I understand what you are trying to do. You want both the hr and all of the comments to appear directly underneath the video. How wide do you want the left/right columns to be?
Set the containing div to
overflow: hidden;
If I understand you correctly, you want the "hr" to be under your video, just like a division in your layout?
If so, the problem most likely isn't at your "hr" css! It seems to me that your writing your "hr" out of place, and because of that you aren't able to place it where you wish. I believe this because your picture shows the "hr" before the video and floated to the right, leaning to the video.
Another thought, if your using some kind of container with absolute/relative position... that can mix up your results :)
Never the less, a link or your code for that area would help solving that problem, a picture lets imagination grow ;)
Related
this is my first time asking a question so please forgive me if I'm not asking the right questions. I'm having a problem with my website and I'm pretty sure it's somewhere in the divs and containers. I'm trying to keep the navigation at the top and I want to put some content underneath. The problem is the content isn't showing up. Also, I made a "spacer" id to push the text down where I wanted it. I'm not really sure how to align the text at the bottom without it. If anyone could help with that also, I would appreciate it.
I don't know which parts I should post so if it's any easier, I can just post the links to the page and the .css.
The page is:
http://www.preferredcaskets.com/Untitled.html
The CSS is:
http://preferredcaskets.com/nav.css
Again, forgive me if I'm not asking the right questions. It's late and I'm a little confused at the moment.
Thank you.
You've put your background in an <img> tag, and given it position:fixed, which automatically places it on top of your other content. Quick fix: add 'style="z-index:-1;" to the <img> tag. A Better way is to add it as a background to your body (and also more semantically correct, since the background is not part of your content).
css:
body{
background-image: url("images/bg.jpg");
}
Try display inline in spacer
#spacer {
height:110px;
width:auto;
display:inline;
}
JSFiddle - http://jsfiddle.net/a4enG/
Hi Guys i'm new to CSS and wondering how do you take out the space on the left, right, top, bottom. i don't have cellspacing nor cellpadding.
Please see picture attached, the red arrow points to the space i want to take out. Hoping to stretch it to cover the space, but i don't know how to? i would appreciate the help thanks :)
Space that i want to take out is pointed by the red arrow
image: http://postimg.org/image/9xikjm2dz/
depends what your code looks like, theres many ways of going about it, i can list a few but without knowing your code i cant give you an exact.
#container{
width: 100%;
margin: 0;
that would be my best go at it without seein your code
<div class="orange_area">
<div class="white_Area">
</div>
</div>
<style>
.orange_area{width:100%;}
.white_area{width:100%;margin:auto}
</style>
I'm having a tuff time centering the navigation of my website with the content body. I'd like the navigation to center with that instead of the browser because it looks like its a bit left of the content body and doesn't quite look right.
Is that possible. http://www.bryananthonylewis.com/ Just a simple blog with Twitter Bootstrap.
I think you're on the wrong track here..
a quick scan using chromeinspect shows me you use span8 offset 2 for your main content (the first element within your container element right beneath #modal-contact), and i think you're main content is a bit to the right and not the header to the left.
my quick fix:
remove the offset,
and get a css style on that content with:
float: none;
margin: 0 auto; /*replace 0 for top margin*/
putting a width to the container as Pankaj suggests might work too, although you might loose dynamic width changes provided by bootstrap this way... didnt check so i might be wrong on that part
update
another update to clarify
remove previous fix.
in the container element right beneath your #modal-contact add a wrapping div,
not at the top of your page like i think you did...
<div class="container">
<div class='row'>
<div class="span8 offset2">
blogcontent here
</div>
</div>
<div>
woops code tags were missing here
i get a feeling this should do the same thing.
and i also believe that the header needs the same fix. but i'm not 100% sure, so pls try and comment if it works or not. this update is based on the official docs
bootstrap documentation
if things don't work, forget about my suggestion and stick to what works
There is no problem with your header. Actually your content below is not centered and this is happening because of unwanted div with classes "span8 offset2 middle" right under div.container. Fix this by removing that div altogether and overriding .container in your css file by
.container {
width:777px;
}
an example of same edits inside web inspector of chrome
If you refer to the following screenshot:
You will see that everything is lining up perfectly except, the icon does not have a width that is calculated in the centering. You obviously want the icon TO have width.
So how can we do that?
Perhaps add something to the i tags like so:
i {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
}
UPDATE:
The screenshot above points to the problem. After a media query, the site goes into tablet mode and the navigation is off. Now, back to work!
This is some html and css, you can see what it does:_ (The first box is really the one that matters)
http://jsfiddle.net/rcGsH/2/
The problem is to make this work properly with the image there, I have to use some tricks to get it to work properly that don't seem very good... like
floating the img left or right so it's not really taking up space.. (is there another way around this? or is it fine how i'm doing it?)
.ad img {
height: 175px; width: 175px;
float: left;
}
And making another wrapper div around the text inside the ad_info div and setting it to bottom: 175px so that the text stays in the transparent part... is there another way to this as well?
If anyone has proper fixes to these problems or these are fine please tell...
OR I have another idea where i could put the image as a background image with JQuery, (since the image will come from php), i have a good idea of how that would work but could anyone tell me which solution is better?
Thanks!
There is a lot of ways to do this, you are doing right (maybe some extra divs), but I thinks this is what you are looking for:
Boxes, images and captions
Like an extra, they use a little bit jquery, to animate the boxes ;)
I'm having trouble figuring out how to make the my pictures div show in the right place
here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do
here is how it really looks a the of the page and at the `!
as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.
I can't figure out where the extra space is coming from
additional
there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits
The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.
(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)
You have top: 200px; in the CSS of your pictures div
Hard to tell with the JSFiddle but:
div.pictures {
position:relative;
top:200px;
width:90%;
margin:auto;
background: rgba(255,255,238, 0.25)
}
Looks like that top:200px; rule is adding significant space.
try putting a <br style="clear:both;" /> at the end of the div!
Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.