I'm trying to display images from my PC on my website, i've tried using floats but nothing works. Everything I try ends up the same:
<div class="feat">
<img src="nirvana.jpeg" style="width:50%;height:50%;" align="left";>
<img src="pup.jpg" style="width:50%;height:50%;" align="right";>
</div>
Remove the align left and right and white space between image tags.
<div class="feat">
<img src="nirvana.jpeg" style="width:50%;height:50%;"><img src="pup.jpg" style="width:50%;height:50%;">
</div>
Read up this blog post about white space. Here is a working plunkr (without your images, obviously): http://embed.plnkr.co/sytM7HeFUVDPT1p3HoXN/preview
Related
I have a standard flask project in which there are images file under:
static/images/thump.png
Now I want to display it in this area:
<div class="recommendation">results: </div>
<img src="{{url_for('static', filename='images/thumup.png')}}" />
But the image isn't displayed at all.
Also, I don't want it to be displayed under div tag, but want it to be displayed after the text:
results:
How can I do that?
It would seem that the div with the text and the image together form a 'recommendation'. In that case this structure might be appropriate:
<div class="recommendation">results:<img src="....." /></div>
That will more easily allow placing of the text in relation to the image as well as grouping the whole results info together.
Here's an example - a plain snippet which uses flex to position the text mid-point down the image:
<div class="recommendation" style="display: flex; align-items: center;">results:<img src="https://i.stack.imgur.com/WFkeW.jpg" /></div>
I am using an online survey tool (alchemer.com) previously known as surveygizmo.com. I need to create an Arabic survey, which means that the alignment must be from right to left. The tools support some configurations which aloowed me to align the text from right to left. However, the problem is that their settings did not change the alignment of the radio buttons (the answer choices) to be from right to left. I contacted the support, which pointed to me that there is CCS and HTML customisation. I find this HTML code. Can you help me make the HTML page to be aligned from right to left (including the radio buttons and not text only). See the code and the image that illustrate the problem.
<div class="sg-wrapper">
<div class="sg-header">
<div class="sg-header-hook-1"></div>
<img class="sg-header-image" src="[template("header image url")]" alt="[template("header image text")]"/>
[template("survey title")]
<div class="sg-header-hook-2"></div>
</div>
<div class="sg-content">
<div class="sg-content-hook-1"></div>
[template("error message")]
[template("page title")]
[template("page description")]
[template("page contents")]
<div class="sg-content-hook-2"></div>
<div class="sg-footer">
<div class="sg-footer-hook-1"></div>
[template("button bar")]
[template("progress bar")]
[template("footer text")]
<div class="sg-footer-hook-2"></div>
</div>
</div>
</div>
The problem is shown here where the radio buttons should appear in the right before the text starts. I could not align them. Is there anyway to do this from the HTML or CCS?
On my personal website I am trying to put some small buttons that link to my other online profiles (linkedIn, StackOverflow etc.).
I have added html to a Text widget in the sidebar of my home page. And the buttons work as expected.
Where I am having trouble though is getting these buttons to all be on the same line - and I can't for the life of me figure out why they are on different lines.
The HTML code i use is:
<!-- LinkedIn Piece -->
<a href="https://nz.linkedin.com/pub/samuel-passmore/59/403/70a" style="text-decoration:none">
<img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="30" height="22.5" border="0" style = "border-radius: 0em"></a>
<!-- StackOverflow Piece -->
<a href="http://stackoverflow.com/users/1544746/sampassmore" style="text-decoration:none;width: 30px">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" width="30" height="22.5"></a>
And you can see the current result on my webpage
www.sampassmore.com
I think I have narrowed the issue down to the margins on the img tags, but setting them to 0px did not seem to do anything.
Does anyone have any other suggestions?
Add a class to the 3 widgets then add a display: inline-block property. You need that property to change the size of a tags and to display them inline properly. For example:
a.social-icons {
display: inline-block
}
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I am trying to place a member's photos next to their comments. I am working from a wireframe that requires side by side image and text.
On the default tab there are 3 comments. I am trying to also display the members photo on the left of the comment, but can't get it to render for some reason.
Any idea why the photo isn't rendering on the left and how I can align it? I am looking in Firebug, but somehow can't find the problem.
Here is your problem
<div style="float:left><img src=/img/member_photo/1/mid_thumb.jpeg width="100" ></div>
it should be:
<div style="float:left"><img src="/img/member_photo/1/mid_thumb.jpeg" width="100" ></div>
You missed the quotes
bad html
http://i.stack.imgur.com/orinI.jpg
edit
http://i.stack.imgur.com/mSLnw.jpg