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>
Related
This is the webpage I am designing using Bootstrap. For the life of me, I can't figure out what is causing that small blank space to the right of the screen, which makes the website be scroll-able horizontally. Would anyone take a look please?
Your help is much appreciated.
This image is causing your problem
You can set that img with width: 100% that will make your UI fit again. (It also depends what you're expecting from your designs)
Try using * { outline: 1px solid black } to see which element is overflowing your site. This should help you to identify it.
Above both methods are usable to get answer as well as to identify the problem by using border. and I would suggest you to always insert width and height of the image and also insert some text inside alt:""; so if your image will not load you may see this text so you can find the problem for the same.
for this you can add width: 100% and height: auto;
Thanks,
Happy Coding...
I'm having some layout issues with a design I'm doing here:
http://testing004.compoundeyedesign.com/
I'm trying to replicate the video/search box layout on Airbnb's homepage. In fact, I'm using their video in my page at the moment. The problems I'm having are screengrabbed here. But basically they are:
How do I get the purple box with the form to overlap the video or at least appear without a gap?
How do I keep the video from getting so tall on desktop browsers that the purple box and text below gets pushed below the fold?
I've experimented with the CSS and HTML, trying to improve what I have, but what you see now is the best I can get. Any pointers to push this in the right direction would be welcome.
Thanks! Russell
If you want the purple box to be on top of the video, you need to use position: static;. Basically something like:
#purplebar {
position: absolute;
width: 100%;
top: 100px;
}
<div class="wrap">
<div id="video"></div>
<div id="purplebar"></div>
</div>
If you are just trying to connect the two elements (remove the white) use your inspect element tool to find out what margin/padding is causing the difference, and remove it.
How do I make multiple columns with equal heights that has a border between each section AND keeping it responsive... (see image below). I know you can use a background image if you have two columns but when theres more, the whole responsive part goes going.
EDIT: heres a jsfiddle I've made: http://jsfiddle.net/kF9LA/
What about two bg images, one with a border 1/3 from the left, and one with a border 1/3 right from the right? Then apply them in a pair of containers with background-position:33.3% 0; and background-position:66.6% 0;, respectively.
Similar to using a single image with a border in the middle, and background-position:50% 0;
Edit:
After running a quick test this seems to work, and it's fluid/responsive.
HTML
<div class="container">
<div class="bg1">
<div class="bg2">
<div class="content">...</div>
</div>
</div>
</div>
CSS
.container {width:100%; border:2px solid #000;}
/* Tile a 2x1 image for the border */
.bg1 {background:url(img/border.png) repeat-y 33.3% 0;}
.bg2 {background:url(img/border.png) repeat-y 66.6% 0;}
Edit 2:
Removed height:200px; from .content and added some text content to the demo, to show that the height can grow based on the content. Replaced the two bg images with a single 2x1 image.
You can take a look at the solution from Matthew James Taylor:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I've got a couple of answers in a similar thread here. The best way to do this depends entirely on if you need the user to visually see the divs are the same height. If your final site will look like this mock-up (the only visual cue being the borders), you don't necessarily need to use MJT's method and instead could use a background image, like this.
As stated in the comment in the link above, this method won't work for horizontally fluid layouts, but if you have a fixed-width layout, you can use the background image for as many columns as you like. Just make sure you're math is right :)
However if your layout needs to be completely fluid, MJT's method is best. It requires extra mark-up, but is bulletproof.
The simplest way to achieve this is just to use a table with bordered cells, but if you have a lot of time on your hands, the CSS approach suggested by #nebulousGirl is the way.
I keep staring with firebug at this page:
http://www.comehike.com/outdoors/parks/park.php?park_id=54603
and I can't figure out why the right side is overlapping with the bottom div. It might be because it is past midnight for me, but could anyone tell what is going wrong there?
Thanks,
Alex
Remove the
height:325px;
in the containing div, that comes after <!-- End of photos from this park -->. Note that it's always a bad idea to manually add style information to HTML, you should rather use classes for that.
Also, some of the syntax looks garbled:
<div width:400px;">
should be:
<div style="width:400px;">
You have a DIV with a height set of 325px;
<div style="height:325px; width:400px;">
<p></p><h2>Hikes Coming Up In The Area</h2><p></p>
.....
Removing the height or setting overflow:hide/scroll in CSS will fix this.
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 ;)