This is what I want VS what I have:
https://jsfiddle.net/fs0vydgd/
<div class="left-align">
<div class="songListContainer">
<div id="outerBoundingBox">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ec/8d/bc/ec8dbcafb4aad7d54bbae197867c6c7c.jpg" class="albumArt" />
<div class="songTitle">Artist - Song name here</div>
<div class="songDetails">Year: 2002 Genre: Punk Album: Title</div>
</`div`></`div`></`div`>
I am trying to recreate an old website I worked on ages ago. I still have a screenshot of the layout which you can see. The album art image displays perfectly fine, but the lines of text with the song description don't line up appropriately. Even manually assigning margins has proven unsuccesful. My guess is that I have a problem with my parent/child setup in the way I am using display:inline-block, but I have tried multiple combinations to no success.
This is a difficuilt question to ask and better illustrated in the screenshot and JSfiddle provided.
Thanks for any help, I have not been able to find information regarding this specific case.
Start with adding float: left to .albumArt, I think you might already get a lot closer to your desired result.
Fiddle
Related
so what I want is on a given H1 main title to have an icon on the left-hand side. Unfortunately, so far I did not find any way to achieve this. One potential variant is to write bare bone HTML for both, however, I don't get the benefit of the markdown inside the title.
Does anyway know any better way to do this?
First to show what I actually want is this (this was done with picture editor for demonstration):
I have tried this:
# Quite a long title, potentially going over several lines
Quite a long title, potentially going over several lines
This does not work at all
{:style="float: right;margin-right: 7px;margin-top: 7px;"}
# Quite a long title, potentially going over several lines
{:style="float: right;margin-right: 7px;margin-top: 7px;"}
Quite a long title, potentially going over several lines
Using html like so, does not recognize the markdown:
<p align="center">
</p>
Using direct html also:
<div style="float: left;"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="128" height="128"/></div>
# Quite a long title, potentially going over several lines
Here if the title is not on a new line it is not recognized as markdown.
EDIT The suggested answer looks correct on stackoverflow, but on my github it looks like this:
The question is can we make the title to be aligned with the top of the image?
I used image html tag and a space before the header for my GitHub project repository README.md file. to set my image on the left and title on the right. Here is the code for it.
<img align="left" width="80" height="80" src="https://raw.githubusercontent.com/akarsh/akarsh-seggemu-resume/master/akarsh%20seggemu%20resume/Assets/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60%403x.png" alt="Resume application project app icon">
# Resume application project
This is how it looks,
You can see the project readme by clicking on this link to the GitHub repository
Bad news, GitHub does not support the full set of HTML elements in a README.md file. Here is a write-up about what is supported. I also found out a bit more in this StackOverflow question from 4 years ago.
One of the resources mentioned in that question is this whitelist.
If it worked, what you would need is similar to what is below, which I have kept for your reference. The description is aimed at your problem description. Unfortunately, it looks like GitHub overrides the style attribute, replacing it with width: 100% and forcing the text to wrap below the image.
What should work (but doesn't): The style is attached to the image itself. Attaching it to the div affects the entire div. Note: the <h1> consists of both the image and the text.
<h1> <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"
width="128"
height="128"
style="float:left;">
# Quite a long title, potentially going over several lines and on and on and on and on and on and on and on and on and on
So for my question you can refer to udacity.com main page.
Im trying to access this text -"The Udacity Difference" somewhere on the middle of the page.
I tried this :
d3.select("div.banner-content.h2.h-slim")
d3.select("div.banner-content.h-slim")
None of the above is working. So I tried looking in dev-tools element section for this page.
Then I could hover and see that :
div.banner-content has further
{div.container
{div.row
{div.col-xs-12 text-center
{h2.h-slim}}}}
Then I thought ok I shoud try if I can get the "container" atleast, but then even this
d3.select("div.banner-content.div.container")
OR
d3.select("div.banner-content.container")
doesnt work !!!!
Wheres the fault in logic ?
You can find nested elements using d3's chained syntax as shown below.
HTML:
<div class="banner-content">
<div class="container">
<h2 class="h-slim">Header</h2>
</div>
</div>
Code:
d3.select("div.banner-content").select("div.container").select("h2.h-slim")
EDIT: No need to type such long syntax. Just need to separate the selectors using a space.
d3.select("div.banner-content div.container h2.h-slim")
Code below will also give you the same results in this case. You can specifically add tags if necessary.
d3.select("div.banner-content .container .h-slim")
I have an adsense block that I'm adding to wordpress I'm using a plugin to add the shortcode.
I want it to wrap the text around. So I add the code:
<div style="float:left;">
ADSENSE CODE
</div>'
But it just positions it to the left with the text underneath.
On my other blog, this works just fine. But on a new blog that I'm making it doesn't work at all. I'm pulling my hair out trying to figure out why!
I changed the theme to 2010, 2011 and 2012 and it's always the same. But as I say, on my other blog it works just fine!
I've tried different browsers, cleared cache, etc.
It looks like a typo:
- <div style="left;">
+ <div style="float:left;">
or even better use classes and ids to set it up in a stylesheet that you can use on other pages as well.
<style>
.ads{float:left;}
</style>
...
<div class="ads">
Ok, first of all I'm sorry if my question appears unclear as I'm going to find it hard to explain. I don't know if you guys help with the coding at all but if you could set me off in the right direction that would be great.
Overview-
Basically similar to that of YouTube where on the side panel under "recommended >>" There is a single column with different rows. On each row there is a <div> element which contains a picture, title, who uploaded it and views. So these different parts so the title picture etc. are specific and link to that one video. I know the different videos that are recommended are based on numourous factors etc. But, anyway driving to the point here now-
Q- Is there a way of making the page load a random element or shall we say set for a video within a <div> tag?
I'll put up some code to demonstrate the basic layout:
<table>
<tr>
<td>
<div id="thumbnail">
<img src="thumbnail.png"
</div>
</td>
<td>
<div id="author">
<a> somebody </a>
</div>
</td>
... and so forth.
I have read up on how to make a random image come up upon load but is there a way of making a whole section or say a random style sheet come up on load? and each contain the different videos ( Just taking a stab in the dark here) or some sort of script?. Again I'm sorry if I'm sounded very vague or if I'm using the wrong terminology...
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