Exact instructions: Insert a style to float all img elements belonging to the irregularWrap class on the right margin, but only when the right margin is clear of other floating elements.
I'm not really sure what this question means? I get the float property but whats does it mean by only when the right margin is clear of other floating elements?
<img src="images/student1.jpg" alt="" class="irregularWrap">
<img src="images/student2.jpg" alt="" class="irregularWrap">
<img src="images/student3.jpg" alt="" class="irregularWrap">
<img src="images/student4.jpg" alt="" class="irregularWrap">
<img src="images/student5.jpg" alt="" class="irregularWrap">
So those are the images, basically, its one images cut into 5 seperate pieces horizontally to make the words look like they kinda outline the image around the left edge.
The CSS I currently have is:
.irregularWrap { float: right; margin: 0px; }
I'm not sure if I'm just overthinking this due to my brain being fried trying to prepare for finals or if this is really just something we didn't quite cover. Any ideas where I'm messing up here?
This is what all 5 images should look like when they come together as the one picture.
to clarify, this is what I'm getting with the 5 images, instead of them looking as they do in the previous image
In the CSS I needed to add
clear: right;
As I explained in a previous comment, I forgot to change the stylesheet link to include the folder on my html sheet so it was throwing my entire game off. Like I said, brain is probably fried. Lol.
Thanks for the help guys!
You could try:
img {
display:inline; // or inline-block;
}
Related
Here is my site :
<span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
Arsenal
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150">
</a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
West Brom
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150">
</a></div></span>
You can see 2 logo on top of site (div.field_home_team-wraper and .field_away_team-wraper), i want it stay in one line, so i set it width:50% and inline-block, so here is what i want to display:
But, sometime on PC browser and alway on iPhone browser, it will display like this :
I know there are white-space between two inline-block div, i removed it, you can look at source code to confirm. I don't know what problem here, please help.
I just inspected the code on your site and I can't recreate the issue you're describing above. However, I did notice that there are a few lines of code that chrome isn't agreeing with - maybe try and resolve some of those issues to see if it fixes the problem on your end.
My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.
But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.
Here is my question will more explain : Browser image render break css inline-block layout
This is a known bug.
Display: Inline-Blockcreates spaces between elements.
Here are two ways to fix this:
First way, if you use display: inline-block, always use margin-right: -4px to fix the spaces between elements.
Second way, use font-size: 0 on parent <div> to remove spaces, and on elements inside <div> reset the font again to the size you want. Example: font-size: 16px
And another tip, be sure to use Box-sizing: border-box, so whatever if you put borders or margin or padding, doesn't affect the width in percentage...
I am trying to Align an image in html to middle
<img src="https://i.ytimg.com/vi/f5x3MaZ6fqQ/maxresdefault.jpg " align="middle" , width="740" height="382" />
however the image keeps being pulled to the left of the screen. I tried nesting it in a div, as suggested by a friend but, it didn't work.
Is this some obvious noob error I am making?
Here is the link to the Code Pen Page
http://codepen.io/jaygo/pen/JXZRJQ?editors=1100
Also sorry in advance if my question is badly structured.
To horizontally align an image, or any other form of inline content, set text-align: center on the parent element using CSS.
The align attribute is deprecated and should not be used any more. middle is a description of vertical, not horizontal, alignment. Comma characters are not allowed between attributes in HTML.
Remove the commas from your markup, it is not valid HTML.
Align is a deprecated property going forward, so this should be done using CSS.
If you are using a style sheet (recommended!) you can use the following:
img{ display: block; margin: 0 auto; }
//this will apply to all images in your site. I would use a class instead
Or if you are not using a stylesheet you can do it inline
<img src="https://i.ytimg.com/vi/f5x3MaZ6fqQ/maxresdefault.jpg " width="740" height="382" style=" display: block; margin: 0 auto;" />
Edit: Apologies Quentin is right, you need to set the image to 'display: block' as well. I've updated my answer to reflect this. Here is also a working fiddle.
https://jsfiddle.net/pcfa8oLL/
I'm helping a friend with a website and need some advice. We asked here before, and were told to update all the necessary jQuery files on the server, done that, but still broken.
Website: 3six-d.co.uk
If you go to the portfolio, you will see all the pictures are out of line, not the rows, but the columns.
I'm using this to set the spacing:
<div class="col-md-4">
<a class="fancybox-test" data-fancybox-group="thumb" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>
Just to be clear I have upgraded from Bootstrap 2 to 3. But I have followed the instructions and upgraded all the syntax's. (I hope anyway) But still no luck, they just won't line up as they used to (Gaps between the columns and pictures of equal space).
I have done abit of research on this myself, and all that I can find is that they must all by in the container div, which they are.
This is driving me crazy, so I would love some help!
Thanks
You could just add the following CSS to your images.
.fancybox-test > img {
width: 100%;
vertical-align: middle;
}
The vertical-align: middle property removes the padding at the bottom of the images.
Your columns are set at 31.6% width each, which is coming out at 340px wide. The preview images are 460x300 so are all overlapping. Set them a size or better yet upload the correct size.
Is this what you expect? If yes, just add following rule to your CSS
.fancybox-test img{
width:100%;
}
<div class="col-md-4">
<a class="thumbnail" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>
What's wrong with native thumbnail class of bootstrap?
There is a set of images (more than 3):
<img src="http://path.to/my/img1.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
If you don't apply any styles, they go in a row (if space allows to). That's fine, however I want the last 3 images always appear on the next line. Is it possible to make it using pure css?
I've found a close solution:
img:nth-last-child(3){display:block;}
However, it breaks the images in three lines (that makes sense as it is display:block for third image from the end).
jsFiddle example
Looking for a pure css solution.
Thank you.
use
clear:both in css for last three images
img {
float:left;
}
img:nth-last-child(3) {
clear:both;
}
DEMO
I'm pretty new and still very wet behind the ears when it comes to css styling.
I have a class already defined .logo but I would like to create a second class "just for the logo image and background" from the Header template below"
<div id="container">
<a name="top" id="top"></a>
<div id="header">
**<div class="logo"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></div>**
<div class="menu">
<ul>
<li><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</li>
<li><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</li>
<li><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</li>
</ul>
</div>
I'm not sure how to take just the logo part and create a new class from the bolded part of the header code highlighted above. Thanks for any suggestions guys.
edit for update
Thanks for the responses so far guys. I think the problem is I don't really know how to describe the problem sufficiently.
Allow me to try and get a grip on explaining my actual situation.
I have two Divs which both have a drop shadow, by using padding I have allowed (deliberatly) them to overlap each other which looks great as it allow the image in one of the divs to slightly overlap the other div giving a 3d effect.
That works great so far except that due to both divs having a drop shadow, where the shadow overlaps there is a darker portion.
I've highlighted in the image the divs (which have css attached to them) and the darker portion where the drop shadows overlap.
I've tried using overflow: hidden but I'm not sure where I'm going with it if I'm perfectly honest.
image here
Thanks again guys, and I hope this makes a bit more sense... I think most of the time I'm confusing myself :)
As far as I understood you, you could just reference the image directly with this selector in your css:
.logo img
If that's not what you want please add more details to your question.
You can actually select every kind of HTML-Element you want just by calling it by its tag. e.g. .logo a or .menu ul li