can anyone please help me? I have this example of list of links with description. http://jsfiddle.net/FcN57/3/ and I need the decription to start at same line as the first link, but it's allways starting one line below. I thought that inline-block divs should be displayed side by side
If you need to keep the <br /> for some reason (although i don't recommend it like the others here), then the following might work for you:
http://jsfiddle.net/FcN57/12/
I added floats and a clear:both to put them on the same line.
You have page breaks in your code. A <br> will break the flow and put any elements after it on a new line, regardless of display type.
Remove them and it works fine.
http://jsfiddle.net/Kyle_Sevenoaks/FcN57/6/
To display description on same line, remove <br /> tag. Also you can use span instead of div. span will display text on same line.
http://jsfiddle.net/FcN57/10/
They are being displayed inline unfortunatly you've forced a line break here
<div class="EsdVyberDocOdkaz">
<a href="9CYjKkqzUU71" >link</a>
<br> //this is your issue
(
<a href="9CYjKkqzUU71" >link</a>
)
</div>
You can either remove that line break and have everything on one line or move your bracketed link after your description like so:
<div class="EsdVyberDoc">
<div class="EsdVyberDocOdkaz">
<a href="9CYjKkqzUU71" >link</a>
</div>
<div class="EsdDocTitul">
description description description
</div>
<br />
(
<a href="9CYjKkqzUU71" >link</a>
)
</div>
Related
I can't float my image the way I want in the post editor. I need to have it sit next to several separate elements (2 different headings + a paragraph), not just one element. And I see no way to do that.
Any suggestion would be welcome.
I would do it in the text tab of the editor like this.
<img src="my image" style="float:right" />
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
You want the <img> with the float:right property first, then the rest of headings and the paragraph
Here is a demo http://jsfiddle.net/d55psoqq/
Note: the Wordpress "alignright" property usually added when you add an image with the media manager, will do the same as the style="float:right;" if it is properly defined in the stylesheets. (I have encountered some themes were it is not defined) If "alignright" does not work you can add it to the main stylesheet like this...
.alignright {float:right;}
Update:
To get all the text to stay at the left and never flow under the image, you need to force it into a column like this...
<img src="http://placehold.it/350x200/" style="float:right" />
<div style="overflow:hidden">
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
</div>
Demo http://jsfiddle.net/d55psoqq/3/
I'm trying to make a simple yet interactive webpage for my school. Our current homepage we use for links is plain and boring.
I've created this: JSFiddle
But when I open the 'Student Links', the 'PHHS Website' button seems to automatically position itself ~50 pixels up.
Code because I have to:
<a class="itemLink" href="http://hcps.us/phhs/">
<div class="itemStudentsLink" id="PHHSWebsite">
<p class="itemText">PHHS Website</p>
</div>
</a>
If anyone knows why it's acting like this, please tell me. I'm not sure why this problem occurs.
This has to do with the vertical alignment of the blocks and the fact that one of the block's text goes onto two lines. Add
.itemStudentsLink {
vertical-align: bottom;
}
http://jsfiddle.net/ExplosionPIlls/mKYaL/19/
I've worked at few places and seen two different methods of doing a section or line break in HTML.
One way I've seen it done is like this:
<div class="placeholder-100pct"> </div>
And the other is just using plain old <br />.
Any benefit to one over the other or would it be just a matter of style?
Use <br/> when you want a new line in a paragraph, like so:
<p>Hi Josh, <br/> How are you?</p>
This might be useful when writing an address:
<p>John Dough<br/>
1155 Saint. St. #33<br/>
Orlando, FL 32765
</p>
Using a div will automatically give you a new line, but if you want a space between two elements, you can use a margin on the div.
Do not use <br/> to get some space between two divs:
<!-- This is not preferred -->
<div>Hello</div>
<br/>
<div>Something else here</div>
Hope this helps
A div is a generic container. A br is a line break. Neither is particularly well suited for expressing a section break.
HTML 5 introduces sections. You mark up each section, not the break between them.
<section>
<!-- This is a section -->
</section>
<section>
<!-- This is another section -->
</section>
Use a <br /> when it makes semantic sense to do so. If all you need is a line-break, that's what it's there for. If you're trying to split sections of different types of content, then each section should be in a container of its own. For example, if you have an address where each line of the address would show on a separate line, it would make sense to do:
<address>
123 Main Street<br />
Anywhere, USA 12345
</address>
One obvious difference is that <br> is inline element, while <div> is not.
So this:
<span>Some text broken into <br /> lines</span>
... is valid HTML code, while this:
<span>Some text broken into <div> </div> lines</span>
... is not, as you cannot place block elements inside inline elements.
<br> has the disadvantage of limiting the size of your gap between sections to the line-height applied to or inheritted by the <span> it sits within.
In other words, with <br>, the size of the break can only ever be exactly the height of one line of text.
Definitely wrap each your "sections" in their own tags, and use margins to control spacing, if you want to retain any control over the spacing. The difference is not just in the semantics of markup.
If you are looking to provide a break between two sections of content in the sense of a thematic break, then <hr> is the element you should use.
W3C specification
The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book.
It's also relatively straightforward to style these as needed as they can take whatever size you require. Note however that it is a void element and cannot contain content (although you can of course add a background-image to it as needed).
I want to create a div which has background image and want to display some text on it. I have tried my self but i dont know why its not work for me. My code is as below:
<div style="background-image: image/test.jpg">
<asp:label id="test" runat="server" text="hello" />
</div>
Please let me know where i am wrong.
See https://developer.mozilla.org/en/CSS/background-image. The address should be wrapped in url():
style="background-image: url(image/test.jpg)"
Also of interest might be the background property which allows more control over placement, repetition and fill color.
The style is slightly wrong, it should be:
style="background-image: url('image/test.jpg');"
Here's the site: www.red-tuxedo.com
I want the "Red Tuxedo" text to sit next to the logo, not below, and I want to get rid of that hard rule that runs through the logo. My CSS / HTML skills aren't up to it. I completely destroy the column layout when I change the text and I can't find the hard rule in the code. Tried adjusting the gif (cut off the bottom in Photoshop) and that didn't help.
I did write to the person who created the template; haven't heard back after several days. Would like to get this fixed before I start adding more pages.
thx
One way is to move the logo within the #logo div:
<div id="header-logo">
<div id="logo"><img height="60" width="60" alt="Red Tuxedo Logo" src="logo_red_tuxedo.gif" id="logo_red_tuxedo"/><span class="red">Red</span>Tuxedo</div>
<form action="#" class="search" method="post">
<p><input type="text" class="textbox" name="search_query"/>
<input type="submit" value="Search" class="searchbutton" name="search"/></p>
</form>
</div>
Try changing the div (id=logo) so that it includes the logo image and the text and add align='absmiddle' to the image. I'd suggest CSS but it looks like it has fixed attributes on it anyway. The "rule" looks like it is coming from the background image for the body element. You'd need to update the file bg.gif to modify it, I think.
<div id="logo">
<img id="logo_red_tuxedo" src="logo_red_tuxedo.gif"
alt="Red Tuxedo Logo" align="absmiddle" height="60" width="60">
<span class="red">Red</span>Tuxedo
</div>
To move the text, I'd put the image inside the logo div, the way dmondark suggested. As for the hard rule, it's part of the background image for the body, bg.gif. Here's an edited version I made that doesn't have it.