I could find a work around for this if I wanted but it seems wrong and am trying to learn to code in a neater way.
Basically I have a div with 3 images in it, the div is 700px, and each image is 220px,
So thats 660px with two 20px gaps left and right of the centre image, and the outside images going all the way to their end of the div.
Is there a quicker way of doing this without setting up seperate ids for each image?
.contentpictureblock { float:left; }
.contentpictureblock img {
margin-right:20px;
}
<div class="contentpictureblock">
<img src="http://...">
<img src="http://...">
<img src="http://...">
</div>
Doing the above^ pushes the third image to the next line, which is understandable. I know I could always make seperate divs for each image, and adjust the margins for each one but Im just wondering is there a quicker one off overflow type command that I could apply to the above? It would mean the right margin would be on all the images but would have no effect on its positioning in the last image.
Thanks for the help.
Use last-child selector:
.contentpictureblock img {
margin-right: 20px;
}
.contentpictureblock img:last-child {
margin-right: 0;
}
Modify the last image with an additional class:
<img src="..." class="last">
CSS rule:
.contentpictureblock img.last {
margin-right: 0;
}
Negative margins on the div.contentpictureblock will also do it. If there's a possibility that you will have more than 3 images, then this is what you will want to do.
div.contentpictureblock { margin-left: -20px; overflow: hidden }
Related
I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.
How can I modify the HTML/CSS so the chevrons are placed on the same line as the date?
<div class= "dater">
<div class="chevron-left">
<img src="glyphicons-225-chevron-left.png"/>
</div>
<h2><%= #todie %></h2>
<div class="chevron-right">
<img src="glyphicons-224-chevron-right.png"/>
</div>
</div>
EDIT: My solution based on Rob's answer.
.chevron-right img {
float: right;
}
.chevron-left img {
float: left;
}
.dater {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 60px;
margin-bottom: 40px;
}
.dater h2 {
text-align: center;
font-weight: 400;
float: left;
}
The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.
First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.
Second, you can use the CSS pseudo classes ::before and ::after
You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.
There are more ways than just those.
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.
I have been working on a project where i have to put together images of excel sheets. It should look like a unique table from all the images, where the last two should be side by side. I have tried to write something, but the space between images and the margins between the last two images are giving me headaches right now. Your help will be very appreciated.
//***CSS file
.crop img
{
height: 791px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: 850px;
display: block;
}
.LeftTable
{
float: left;
}
.RightTable
{
float: right;
width: 400px; //when increasing over 400px, the image on right gets closer but goes underneath of the one on left side.
}
//**HTML file
<div class="crop">
<img src="QATables/image1.png">
<img src="QATables/image2.png">
<img src="QATables/image3.png">
<img src="QATables/image4.png">
<div class="LeftTable">
<img src="QATables/image5.png">
</div>
<div class="RightTable">
<img src="QATables/image6.png">
</div>
</div>
I would like to add to MathSquared11235's answer. It always helps to reset margins and padding. Let me say that again... it ALWAYS helps to reset margins and padding. Different browsers have different default margins and paddings, if you don't reset them, it will be impossible to make your website look the same among all browsers. And this could also be the problem you're currently facing as the browser you're using, may "add" unwanted margins or padding. And don't just reset them on a particular element such as suggested "div". I would recommended placing this at the top of your css...
// * { margin:0; padding:0; }
The asterisk (*) simply means "everything". So everything will have a margin of 0 and a padding of 0 until you add it yourself. Yes, you will need to add the wanted margin and padding to every element... but that's a good thing rather than allowing the browsers to individually decide that for you.
I hope this helps.
I'm not sure I completely understand what you're doing, but I've answered the question as best I could. If I misunderstood, please clarify and I'll try again.
Assuming you just want to make sure that the last image lines up perfectly with the second to last image, you can just change the float from right to left, here's a jsfiddle: http://jsfiddle.net/mcabrams/qB9fA/
// relevant code:
.LeftTable
{
float: left;
}
.RightTable
{
float: left;
width: 400px;
}
you need to set .crop{ width: 1700px; } and .right{ float: left; } it goes under because there are no space to put it next to the img of left.
jsfiddle: http://jsfiddle.net/2usCh/
If you are using Internet Explorer, know that it is very glitchy. I mean very glitchy. I read on another SO post which I, unfortunately, cannot find right now, that the cause of your glitch may be newlines in the HTML which IE very helpfully thinks are typographic spaces that you want to put into the text.
Also, you might do
div {margin: 0; padding: 0;}
if your layout permits. It will remove any space around the images.
Hope this helps!
I am working with someone else's styling, and can't get things as they managed to. I am trying to make things look like this page:
http://www.comehike.com/outdoors/parks/add_trailhead.php
See how the image is nicely on the right, and the form elements are on the left.
I have this page that I am messing with and trying to make similar:
http://www.comehike.com/account/member_home.php
Is there an easy way for me to make the image go to the far left, and the stuff asking the person to log in, to be on the right?
Thanks!
Start with changing the width on the first div within .basic. Change the width to 100% instead of 450px
You should be able to continue from there.
I would also move the image into it's own container and float that right, and put the form actions in another container. Also, make use of classes and ids for styling to clean things up.
Here is how you can make food use of floating elements:
HTML:
<div class="container">
<div class="form">
<form>....</form>
</div>
<div class="leftImage">
<img src="img.jpg" />
</div>
<div class="clear"></div>
</div>
CSS:
.container {
width: 800px;
}
.container .form {
width: 500px;
float:left;
}
.container .leftImage {
width: 250px;
float:left;
}
.clear {
clear:both;
}
Replace the div with width: 450px to width: 100% then the child H3 float: left
increase the width to 845px for the div.
Float image to the left.
for the h3 tag do the styling
h3 {
float: right;
display: inline;
}
This will do the task for you.
Remove the empty tags from the HTML.