I've just started playing with html and css and basically I've been learning everything from all the posts here but right now I'm stuck with something I cant seem to figure out how to do through research and decided to post a question for help.
I'm customising a simple portfolio style theme on tumblr, my question is regarding the text caption on the right of the picture
http://www.alvaserigrafia.pt/post/34608701054
I can only get the 3 text lines to display on a single block and I want each one of the lines to have its own block with proportional width. Can this be done with just html and css?
Thanks in advance!
This is where Firebug (Firefox extension), or the developer tools of your favorite browser, will come in handy. If you inspect the text element in question, you'll see that they're each wrapped within <p> tags.
The <p> tag is a block level element, which means it will automatically take up the full width of its parent. It's also what's recommended for...well...paragraphs of text.
Each line is wrapped in a p element. Block level elements usually fill the whole width of the parent container; that's why they are "block" elements.
To get something that shrinks with the content, wrap the text in a span:
<p><span>text</span></p>
The span will only be as large as the text inside.
Related
This is a mockup for a blog post where some featured text is located in a container that has the text floating around it and it also appears to overflow outside of the regular container into the parent container.
This is being built in ReactJS as a template with content being populated from Sanity (a JS CMS). So I'm wondering how you'd structure your markup and then your styling?
A few notes worth sharing:
We're calling this "pull text", not sure if there are other common names for it.
The yellow bar at the top is the hero image and indicates the full width of the content
On mobile, the featured text stops floating and acts as a regular block element similarly extending to the far right of the parent container
Blog content varies in length, some might be very short, others might be very long.
My initial ideas are:
Use CSS grid and allow the featured text to flow out of the center column into the far-right column.
Float might work with a negative margin-right
I have HTML page that contain multiple div element each div is card that display as inline-block the number of generated div depends on row data comes from server, until here every things going as i need but theres whitespace between each card div that make an inappropriate display on phone and i think the problem from whitespace i'll attach screenshot for inspector?enter image description here
display:inline-block seems to leave very small spaces between elements.
Either use flexbox (display:flex on parent element) or a little trick of adding margin-left:-1px to each element (or however much space is being created between each element).
Inline elements are treated as text. (I'm making this overly simplified.) Notice that text has spaces between words. Images have spacing between them for the same reason. Therefore, inline elements will have spaces between elements.
The way around this is to trick the browser into thinking elements are letters
<div>content</div><div>content</div>
Now there is no spacing or elements between content.
There are other ways to do the same thing, such as:
<div>content</div
><div>content</div>
I'm just thinking about a possible issue I my have when I'm creating a web page.
I can't add the image because I don't have 10 reputation.
The text will continue to flow underneath an image.
I was working with W3C http://www.w3schools.com/css/tryit.asp?filename=trycss_float and just added a few more lines.
Is this because the paragraph tag isn't in it's own div?
this is the whole purpose of floating elements.
that other content can flow around them.
in your case, there a lot of text , so it floats around the image (the image have a float assigned).
read more about floats here.
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
I'm currently working on a site with this design and layout for my main-content area:
http://img528.imageshack.us/img528/9483/screenshot20120429at124.png
However, I'm finding it a little difficult to write up the HTML and CSS using proper semantics.
Firstly, should I be using divs to split the left and right columns, or, HTML5 section tags with an aside tag for the picture?
Secondly, what is the best way to position each section or area?
And finally, with that being said, at the bottom of each content area there are 2 buttons that should be horizontally inline. What is the best way to go about achieving this considering the fact the the user of the site will later on be placing in their own text and both buttons should push or position themselves further down as more text is placed inside.
This jsfiddle is currently what's making it work...but, seems wrong?
http://jsfiddle.net/LGEKW/
Should those 2 buttons be in that current div, do I use position absolute, relative or floats … I have no idea. Any help on how you would go about doing this would be greatly appreciated.
If you are using <!doctype html> it's definitely better to use
semantic tags, because divs have NO semantic meaning at all.
To my mind the best way to position the elements is to use float
property
The buttons should be floated as well. Not absolutely positioned.
Thus they will be pushed down when the user adds more content. Try placing them after the content in the same wrapper
Drop your br tags after each paragraph. p elements are
block-level - so you can use margin-bottom property to push the
next p down a bit