I'm using Bootstrap 3.3.1 thumbnail classes for images and there is white space at the top of the images. How to remove it?
My code is:
.image-thumbnail2 {
float:left;
margin-bottom: 10px;
margin-right: 10px;
width: 300px;
padding: 0px !important;
border-radius: 4px;
border: 0px;
}
.image-img-thumb2
{
max-width:300px;
max-height: 220px;
margin:0px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
width: 300px;
height: 220px;
}
<div class="thumbnail image-thumbnail2">
<img src="<?php echo URL::base();?>assets/images/<?php echo $val['folder'];?>/tmb/<?php echo $val['image_name'];?>" class="image-img-thumb2"/>
</div>
Its difficult to spot the exact problem without your entire code but it seems your problem might be related to your body:
Add this to your CSS:
body { margin:0; padding:0;}
You should reset your margins and paddings at the top of your css:
*{
margin: 0;
padding: 0;
}
Related
The app (RoR) shows a set of rows with posts info. Each row has the title aligned to the left and date aligned to the right.
I need to have a link working over all the row, not only over the text.
If I don't use float, the link works properly over all the row but I cannot establish a margin-top. If I use float, the margin-top works OK, but then the link only works over the text.
I don get what the issue is. Any ideas?
This is my css:
.post {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 40px;
border-bottom: 1px solid #BDBDBD;
}
.post a {
display: block;
text-decoration: none;
}
.post a span.title{
float: left;
margin-top: 7px;
}
.post a span.date{
float: right;
margin-top: 7px;
}
I assume your html structure is like this:
<div class="post">
<a href="#">
<span class="date">date</span>
<span class="title">title</span>
</a>
</div>
Note: I moved the date up and title down, because we're going to make the first one to float right. You can then use margin or padding as needed.
.post {
margin-left: auto;
margin-right: auto;
width: 900px;
border-bottom: 1px solid #BDBDBD;
}
.post a {
display: block;
text-decoration: none;
padding: 10px 0;
}
.post a span.date {
float: right;
}
DEMO: http://jsfiddle.net/42vdh6bL/
I want my 'header' div to sit within the 'container' div. At the moment the 'header' div is sitting above the 'container' div and I cannot seem to put it in it. Below is the coding. Thanks for the help.
HTML:
<body>
<div id="container">
<div id="header">
<h1>Title Goes Here</h1>
</div>
</div>
</body>
CSS:
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
It is inside it. Remove the background color on your header and you'll see the container's background behind.
It is inside the container, just the looks like it's on top because of the colors. Open up w/e browser tools you prefer and take a look at the container div.
It is inside your container. Adding padding or remove the background will make it more visable
jsfiddle
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
padding:20px;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
set background color to transparent or just remove it temporarily, you'll see that the header is inside there
I am trying to create a HTML layout and I have created a number of elements and given them a border etc in my CSS. I am trying to have the main 'Wrapper' centered so everything that goes inside this element are also centered.
I have tried everything, margin, align, absolute etc and nothing is working. My stays situated in the top left corner of my page.
This is my index page where the elements are:
<!--#include file ="inc.heads.asp"-->
<html>
<head>
</head>
<body>
<div id ="divWrapper">
<div id ="divHeader">
<img src="Images/title.png">
<br>
<div id ="divNavBar">
<br>
<div id ="divContent">
</div>
</div>
</div>
</div>
</body>
</html>
and this is my CSS:
body {
background-color: #300;
}
#divWrapper {
margin: 0 auto;
width: 800px;
}
#divHeader {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divNavBar {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divContent {
float: left;
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
If someone could possibly shed some light on why none of the things I have tried work and what a possible solution could be.
Thanks!
#divWrapper{
margin-left:auto;
margin-right:auto;
}
Should do the trick.
Just add margin: 0 auto to the contents of #divWrapper:
For example, add to your CSS:
#divWrapper * {
margin: 0 auto;
}
If you only want the div elements to be centered, use:
#divWrapper div {
margin: 0 auto;
}
You can see a working demo here > http://jsfiddle.net/gu7Sr/
Also, as a side note, try to avoid using <br /> for creating your layout. It won't scale well and you'll have a tough time redesigning in the future!
I think this is what you want. Link : http://codepen.io/anon/pen/Ihzxp
<body>
<div id="divWrapper">
<div id="divHeader">
<img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png">
<div id="divNavBar">
<div id="divContent">
Stuff
</div>
</div>
</div>
</div>
</body>
and
body {
background-color: #300;
}
#divWrapper {
width: 100%;
}
#divHeader {
width: 600px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
text-align:center;
}
#divNavBar {
width: 550px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 15px;
margin: 5px auto;
}
#divContent {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
}
More just a comment to BenM's answer, but I don't have the reputation to comment yet.
Pretty sure just:
margin:auto;
will do the trick by itself.
Seriously what is the point of all those wrappers? Just do this:
body {width: 800px; margin: 0 auto; }
Hi I'm just wondering if anyone can help me out. I'm new enough to web design, and I'm having some problems with my CSS.
Basically I cant figure out how to correctly nest my divs/boxes without having overflow issues! I have tried using overflow: hidden; but this still hasn't worked, I've also tried floating the child elements either left or right to see if it would help but still no luck!
My css looks like this:
#customerReg {
width: 47%;
height: 480px;
float: left;
background: #FFF;
padding: 10px 10px 10px 10px;
display: inline;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#customerInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
#participantReg {
width: 47%;
height: 480px;
float: right;
background: #FFF;
padding: 10px;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#participantInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
My HTML Is as follows:
<div class="contentbody" style="border:#FF0066 solid 2px;">
<div id="customerReg" style="border:#33CC00 solid 2px">
<div id="customerInfo">
<p>Customer Registration
</p>
</div>
<!-- End of customerReg --></div>
<div id="participantReg" style="border:#33CC00 solid 2px">
<div id="participantInfo">
<p>Participant Sign Up</p>
<p> </p>
</div>
<!-- End of participantReg --></div>
<!-- end .contentbody --></div>
What im aiming for is so have two rounded boxes side by side with two smaller boxes inside these boxes. I tried to post an image but it wouldnt let me! What im getting is that the two inner boxes are both spilling out on the right side of the outer boxes if that makes sense??
Can anyone tell me where im going wrong and what i can do to correct this as ive spent hours trying to find an answer and cant figure it out!
The parent div set:
overflow: hidden;
OR
#customerReg, #participantReg{
float:left;
}
.contentbody:after{
content: '.';
clear:both;
visibility: hidden;
*zoom:1;
height:0;
display:block;
}
if you set the width of the first div the boxes ar side by side:
look this fiddle
.contentbody{
width:990px;
border:#FF0066 solid 2px;
}
If I put an image inside a paragraph tag without aligning works fine. If I align it image goes outside paragraph. Problem is that Image is MUCH larger than text.
<div id="main-paper-bg">
<div id="content">
<h1>After School Program</h1>
<p><img class="left-only" src="images/bgi/after-school/main-img.jpg" width="450" height="630" alt="Main Img" align="left">Coming Soon</p>
</div>
</div>
And CSS
#main-paper-bg {
width: 740px;
padding: 30px;
display: block;
float: left;
margin-bottom: 40px;
}
#content {
background: black;
height: auto;
text-align: left;
margin-left: auto;
margin-right: auto;
padding-right: 30px;
padding-left: 30px;
border: 1px solid #999;
}
p {
line-height: 160%;
padding-top: 0;
padding-bottom: 30px;
font-size: 12pt;
}
img.left-only {
border: none;
margin: 10px 10px 10px 0;
padding: 0;
}
You have a close-parentheses in your styles that may be breaking things: "background: black);"
you don't need align="left" in your <img> tag.
The align attribute is also deprecated: use css to set width height, align and other features. In this case, you don't need to align it left, since the default value for text-align is already left.
like so: http://jsfiddle.net/SebastianPataneMasuelli/equ8p/1/