I'm trying to get my images to align horizontally but I seem to be doing something wrong but I have no clue what the problem is.
Here's the JSFiddle: http://jsfiddle.net/ByDAA/4/
Here's the CSS:
.imgcontainer img {
display:inline-block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
margin:0px 37px 0px 0px;
width:175px;
height:175px;
}
You should wrap each img and p with a div and use float:left. Example: fiddle
You're seeing line breaks because you explicitly put them there with <br> elements.
To achieve the intended effect, put the images and their subtexts in a separate container (div or article) and apply the display:inline-block style to that element.
try :
float: left;
and change your css - remove unneded properties
Might this be what you are after? http://jsfiddle.net/taneleero/ByDAA/7/
Assuming that you would like the "Let Us Sell It" to align with each image I added containers around each image + the text and set them to inline-blocks. For the container I assigned text-align:center so the inline-blocks would align to the center. Also I changed to images do display:block to force the text below the image.
.container {
position: absolute;
margin: auto;
width: 100%;
text-align:center;
}
.imgcontainer img {
display:block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
width:175px;
height:175px;
}
span {
display:inline-block;
margin:0px 37px 0px 0px;
}
You need to wrap each image and text element in a specific element (a div or figure).
A figure is probably best as it allows the use of the figcaption element inside it for the text.
Each figure is set as display:inline-block and vertical-align: top and the container is set to text-align:center
Codepen Example
Related
I am nearing completion of my site http://csgoshack.com/shop/
I need to do one thing and this is to put a white box in the center of the screen so I am able to see the site.
I tried to do this by photoshoping a white box onto the background image but that didn't work.
How would I go about doing this?
.whitebg {
width: 1250px;
padding: 10px;
border: 1px solid black;
margin: 0;
background-color:#ffffff;
margin:auto;
position: absolute-center;
top:0;
}
First you would need to design your box using CSS and call it in using HTML.
HTML:
<div class="body-content">Insert Lists, Text, and other body content here</div>
CSS:
.body-content {
width:80%;
height:80%;
top:10%;
position:absolute;
background-color: white;
margin-left:auto;
margin-right:auto;
}
Adjust the width, the height, the positioning, and the colors to your specifications. I wouldn't change the margin-left and right because that centers the div inside of the body ( unless you don't want it exactly centered ).
Hope this helped!
My webpage has a footer with 4 separate footer cols. They are separated by a 5px margin on the right and left side. They also have a green background. The Footer (containing element) has a red background but does not appear. I validated the HTML and could not find a problem with XHTML markup so I'm assuming it's a CSS woe.
Fiddle:
http://jsfiddle.net/48dk6/
Footer CSS declarations.
/* footer and descendants */
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
}
/* footer col styling/positioning */
.footerCol {
background-color:green;
width:180px;
float:left;
margin:10px 5px 10px 5px;
}
Add overflow:auto to your #footer CSS:
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
overflow:auto;
}
jsFiddle example
This will restore the behavior you seek, which is caused by the children .footerCol divs being floated. Floating those child divs removes them from the normal flow, so the parent behaves as if there is nothing for it to contain.
Add overflow: auto; to #footer.
When you float items inside a block element you often want to use overflow: auto or else the enclosing element gets whacky and won't show up unless you specify a height and width (which you usually don't want to do)
#footer {
font-size: 1.3em;
margin-top: 10px;
clear: both;
background-color: red;
overflow: auto;
}
In fact, you should have a height set for your footer, see jsFiddle
height:240px;
JSFiddle:
http://jsfiddle.net/48dk6/6/
Remove the floating and simply display the elements as inline-blocks
.footerCol {
background-color:green;
width:180px;
display: inline-block;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
The containing floats problem can be solved with 2 approaches:
Adding something with clear after the floats (the most common solution is clearfix with clearing pseudo element).
Making the container create new Block Formatting context. The most popular ways are setting to the container overflow:hidden/auto, display:table, display:inline-block (+ width, if necessary), or floating the container itself.
All approaches have their advantages and limitations, so choose what fits better in your case.
There is a proposal to add min-height:contain-floats value to solve this, but it isn't supported by browsers yet.
I am trying to add a carousel-like animation to my photographic calculator
I am extremely new to javascript/html/css so I have been having some troubles doing this. :)
My idea was to fill in each table row with divs generated from an array, with all but the three divs beeing hidden by overflow:hidden of the outer container.
Here if my test jsfiddle:
table {
width:80%;
background:#ffff00;
border: 1px solid black;
position:relative;
overflow:hidden;
}
.test {
width:33.3333%;
height:100%;
background:cyan;
text-align:center;
vertical-align:center;
float: left;
position: relative;
left:0%;
top: 0px;
}
The problem is if I try to add more than 3 divs (set n=4), they wrap to the next line while I want them to stay on the same line. If I use absolute positioning then I can't use the overflow hiding (or can I?).
I am hoping there is an easy solution to this. Help?
The float: left causes elements to wrap when filling all available horizontal space. What you need to do is arrange your divs inline and make elements in your carousel not wrap:
http://jsfiddle.net/Wdnw9/19/
CSS
#box { white-space: nowrap; }
.test{
...
display: inline-block;
}
I need to give access to the users to upload what ever pixels they want but it will be over 100x100 for their profile pic. The pic will be contained in SQUARE box.
But the problem is, when I upload a 100x100 or sizes similiar to that, it works good as expected. But when I upload an image with the pixels of 640x360 or anything similar to that sort (or widescreened), the image is scaled into the box well but however, it is not vertically aligned. I want the vertical-align to be in the middle, so how do I do that?
CSS:
#imgbox {
height:100px;
width:100px;
overflow:hidden;
border:solid 1px #000;
margin-left:10px;
margin-top:10px;
}
#imgbox img {
width:100%;
position:relative;
//I want the vertical align of the image to be in the center
}
Here: http://jsfiddle.net/ZdW9h/1/
A couple things -
Use a class for your imgbox elements, IDs are used for selecting a single element in a given document.
Secondly, I suggest using one div with background-image properties, this way you can position it relatively.
HTML
<div class="imgbox" style="background-image: url(http://plants.montara.com/ListPages/FamPages/showpix/ranunculaS/aqufor_a.JPEG)"></div>
<div class="imgbox" style="background-image: url(http://pictures.inspirationfeed.netdna-cdn.com/wp-content/uploads/2010/06/Evolution_by_will_yen-500x500.png)"></div>
CSS
.imgbox {
height: 100px;
width: 100px;
overflow: hidden;
border: solid 1px #000;
margin-left: 10px;
margin-top: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
JSFiddle
If you set a line-height on your container div, you can then use vertical-align on the image to position it. Also, you should use max-width and max-height to make sure the image is always contained within the box (assuming that's what you want).
http://jsfiddle.net/ZdW9h/7/
And here is the updated CSS:
#imgbox {
height:100px;
width:100px;
line-height: 100px;
overflow:hidden;
border:solid 1px #000;
margin-left:10px;
margin-top:10px;
}
#imgbox img {
max-width:100%;
max-height: 100%;
vertical-align: middle;
}
Just set the width and height attributes on img to 100: http://jsfiddle.net/ZdW9h/4/
Resizing images in this way is generally not the best idea, though. If you can resize the image with some sort of image library like GD I'd recommend doing that first. It will save you some space on your server too.
This thing should fix your problem:
#imgbox img {
width:100px;
height: 100px;
position:relative;
}
Let me know if you are looking for something else.
You can try :
#imgbox { display:table-cell; }
Hello I have a wrapper div around three float div, I want to wrap the wrapper around these divs,but I can't completely wrap them, I have given a top :25px to the floating div ,so this div overflow exacltly 25 px below the wrapper,
Here is my page http://jsfiddle.net/vpcxP/ ,see how floating div overflow the main container div at the bottom
PS:I don' t want to give overflow:hidden
have you tried adding padding to the bottom of #mainContainer?
For #mainContainer instead of height:auto use overflow:auto
#mainContainer
{
overflow:auto;
width: 835px;
margin:0 auto;
position:relative;
top:50px;
background-repeat:no-repeat;
background-image:url("Images/mainContainerBG.jpg");
box-shadow: 3px 10px 20px 5px #000;
}
you also may need to adjust the width. Set it around 900px.
You seem to have redefined style for .column. remove that property and use this for column.
.column
{
width:280px;
height:452px;
top:25px;
float:left;
left:5px;
box-shadow:3px 10px 7px 3px #4f4848;
background-color:#2c2b2b;
margin-left:5px;
}