I am trying to horizontally align labeled icons but have been having trouble like in the snipped below. For some reason, the icons are refusing to align. I made sure there wasn't white space on the image file that was causing this, so I am not sure why it is happening. In addition, what I have now is causing a subsequent p-tag to display inline-block. Any advice is appreciated!
<div style='float:left'><div><img src='https://www.wgeil.de/wp-content/uploads/2017/02/balcony.png' width='50px'></div><span>The First Label</span></div></div>
<div style='float:left'><div><img src='https://www.wgeil.de/wp-content/uploads/2017/02/pet-friendly.png' width='50px'></div><span>The Second Label</span></div></div>
<p>Some text that needs to start on a new line..</p>
Simple use css inline-block. Use any other css class to fine tune the margin between the icons as you wish.
<div style='display: inline-block;'><div><img src='https://www.wgeil.de/wp-content/uploads/2017/02/balcony.png' width='50px'></div><span>The First Label</span></div></div>
<div style='display: inline-block;'><div><img src='https://www.wgeil.de/wp-content/uploads/2017/02/pet-friendly.png' width='50px'></div><span>The Second Label</span></div></div>
<p>Some text that needs to start on a new line..</p>
Related
So I have a question that might be easy but I could not find anything that works after a lot of searches.
I have this h2 tag which is defined in .aspx. Right below this, I have a div with an id.
<h2>Documents</h2>
<div id="abcdocuments"></div>
I am appending an image before the start of the whole grid which gives me a result like this that there is a heading first. then below I get that image and then below the whole grid
I want the image to be right next to Documents Heading and for some reason, I can't define the img at .aspx It has to be at the class level. Also, I can not move my heading at the class level. Is there any way I can change the styling or something to move the image next to the header?
my html:
<h2>Documents</h2>
<div><img src="../../Images/pincomment.png"
style='width:2%;cursor:pointer;'
/></div>
You can make the heading and the image sit next to each other by making them inline-block.
This snippet is simple because the given HTML is not in its real life context - so the specificity in the CSS does not need added classes, but in the real situation you would of course need to ensure that you had selected the right h2.
h2,
h2+div {
display: inline-block;
}
<h2>Documents</h2>
<div>
<img src="../../Images/pincomment.png" style='width:2%;cursor:pointer;' /></div>
<div class="FDAccordions"></div>
<h2>Lorem ipsum…</h2>
<div style="position:relative;"><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" style="width:2%;top:-3em;left:17em;position:absolute;"/></div>
I have tried using inline styles such as
#whiteRectangle{
top:5%
}
to try and move it manually but this is not working.
My code pen listed above shows what I have tried so far and what the problem looks like. Any guidance in getting the text and white rectangle moved for the fifth box would be greatly appreciated.
Second but smaller issue: Each text inside each box is not the same as the text shown in the design above. That is, for example we have
I have tried removing
text-align:center
but the issue still persists so any pointers on this second issue would be greatly appreciated too.
If you want to align the white line (whiteRectangle), wrap the text in a div. You can also get rid of the br tag for "Apps" and play around with the CSS top section I provided.
<div class="lineup">
Facebook <br/>
Competition <br/>
Apps <br/>
<div class="whiteRectangle">
</div>
Then add the following to your CSS
.lineup{
position: relative;
top:-20px;
}
I don't know if you'll accept this as a solution, but if you want the three 'white rectangles' to be in line, you could add another br tag on top of the content of the the two boxes beside it.
<br />
Facebook <br/>
Outreach <br/>
and
<br />
Facebook <br/>
Networking <br/>
Another solution would wrap the whole content of the boxes, set its position to be absolute, then set a fixed value for bottom.
I am newbie in Twitter Bootstrap. It is a very simple question.
Here is the image:
And here is my Code:
<div class="col-md-8 col-xs-6 col-sm-6 placeholders">
<p id="people-things" class="text-center">PEOPLE-THINGS RECOMENDATION</p>
</div>
Problem: I want to put the Recomendation text in one line other then going in next line.
Infos: I had tried every grid in but still couldn't sort it out.
You have to make smaller font-size on .people-things or add this CSS:
.people-things { white-space: nowrap; }
Which is making .people-things to show on one line.
The solution above works but bootstrap grid classes should be ideally used by itself and you should not need any custom styles on top of it.
Try rearranging your grid structure such that apply <col-sm-6> before <col-xs-6>. That will allow more space in the grid cell to fit the text. Also you might not need three levels of grid nesting. You could use: <col-md-8><col-sm-8> and see if that works.
I've been using HTML/CSS for ~2 weeks now.
I'm having trouble getting the text on my site to sit right next to the puppy thumbnail, rather than under it.
If I float both the text and the picture, they are side by side, but the text is first, not the picture. Why would this be? The text comes AFTER the picture in the HTML.
Here is the JSFiddle. I've never used JSF before so I hope I did it correctly. I don't know why the pictures in the JSF aren't working (the external link ones (puppies)).
http://jsfiddle.net/nhv54/
When lining up images and text, I like to use inline or inline-block elements rather than put them inside a block element. Here is an example that should work for your case in particular.
Html
<p>
Vertically centered text
<img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>
Check this out
http://jsfiddle.net/nhv54/3/
Things to notice in CSS
.pull-left * {
float: left;
}
And every div you want content to be on one line should have class "pull-left"
<div class = "ProjectsModules pull-left" id = "example1">
<img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy .jpg"/>
<div id = "ProjectsModulesText">
<h1> Jim </h1>
<p>
stuff
</p>
</div>
</div>
You can also set vertical-align: middle; on whatever tag your text is inside, presumably a p.
You could use inline-blocks
I updated your JSFIDDLE
http://jsfiddle.net/nhv54/16/
This is quite strange to me... I have a small image that's a link and a text link underneath that. If I separate them with a <br/>, the text shows up formatted like a link but you cannot click it. If I use <p> </p> instead, the link works fine... I just don't want that much space in between them. I've closed both link tags so that's not the issue, and I've tested it in both Firefox and Chrome and both gave me the same issue.
Code portion:
<div id="content">
<br/><a href="#newtitles">
<img src="images/sterling.png" style="border: 1.5px; border-style:solid;"/></a>
<br/>
Fall 2011 Catalog<div style="position: relative;left:155px;bottom:20px;"><img src="images/new.png"/></div><hr/><br/>
</div>
I've determined that this is being caused by the neighboring div:
<div style="position: relative;left:155px;bottom:20px;"><img src="images/new.png"/></div>
When I take it out, the link works again for some reason.
You could always adjust the line-height property for the <p> so that there is the same amount of space as there would be with a <br />.
You can give the <p> an id, and then adjust its line-height, padding, margin, etc properties to remove some white-space.
This does not seem to be an html issue, but rather one with the layout. Can you post the relevant css? or even better, make a fiddle