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.
Related
I'm trying to align a paragraph inside a <p> tag in a HTML page as depicted in the following image. Can anyone suggest a way to do it as the middle content is a little bit moved to the right side.
Image
If you truly don't want to use any CSS, then sarkasronie is correct that the only way to do that would be with a white image. That being said, you can place the css directly within the HTML document:
<p>
Content outside of indentation...
<span style="margin-left: 100px">Indented content</span>
More outside content.
</p>
its easy you should use the PRE tag instead of paragragh to write as it is you want for example..
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
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>
I've got the following "key" which is a div containing pictures of the planets and their names for an educational animation. Is there a quick way/shortcut (without wrapping the text in separate spans or something then assigning top/bottom/left/right properties to specific ids) to make the text appear in-line with the icons?
<p id='key'>
<img class='img-key' src='media/mercury.ico'> Mercury
<br/>
<img class='img-key' src='media/venus.ico'> Venus
<br/>
<img class='img-key' src='media/planet-earth.ico'> Earth
<br/>
Not sure I understand but here are two possible solutions. If you want everything on one line, remove the <br /> tags.
jsFiddle example
If you want the text centered vertically with each image, set the vertical-align property to middle on the images:
img {
vertical-align:middle;
}
jsFiddle example
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
I'm new to html, and use hebrew a lot. I came across this problem, which makes me think I'm misunderstanding something.
As for as I know, the element has no effect, but it does allow adding style.
However, trying to do this:
<span dir="rtl"> some text that should be rtl'ed </span>
Doesn't seem to work for me (the dir has no effect).
Using a <div dir="rtl">, on the other hand, works fine.
So.. why isn't the <span> working? As far as my understanding goes, I'm using <span> for exactly its purpose: adding styling. It works fine when I use it to add color... why not for this?
Thanks for any insights!
Edan
P.S. After some testing, I also discovered that if I surround the text with <p> (inside the <span>), then the dir does take effect. But in that case, why wouldn't I just use <p dir="rtl">... the whole idea is that I don't want any elements, just to style something.
dir has an effect on a span, but a span will not be aligned to the right as you expect, only its content.
You will see the effect for span if you end it with a dot - the dot will be placed on the left side, and not on the right.
Div is a display:block element, meaning it fills the whole width - that's why text can be aligned in it. Span is display:inline, so it's sitting in the text, similar to a letter (in a simplistic way).
(by the way - it's considered invalid to have a block element inside an inline element)
Here's a working demo. Notice the last div is far on the right:
Test right to left, div and span: <br />
<span>(span) Hello World!</span> <br />
<span dir='rtl'>(span rtl) Hello World!</span>
<div>(div) Hello World!</div>
<div dir='rtl'>(div rtl) Hello World!</div>
The difference is that span is an inline element, and dir doesn't apply to inline elements (the same way height and position don't). The reason it works with div and so on is that those are block elements. So you'll want to use a block element for setting your text direction.