I have a block of text, and inside the block I have an h1 tag floated left. I would like the first line of text to align with the bottom of the first line of text.
Here is the sample site:
http://myhealthsense.abyteshosting.com/
The block in question is the block under the header that says "Welcome! I am a..."
I want the 'Welcome!' to have it's bottom aligned with the rest of the sentence, and for the next line to wrap under the 'Welcome!'. As it is now, there are two lines wrapped to the right of 'Welcome!'.
Of course I could do this easily if all the text was together in a line, and I could use spans to set the sizes. But, since this is all generated out of drupal, the content comes as it is. In other words, the text in the block comes from the database, and is generated in a div, but the 'welcome!' has to be in the template. If I put it in the content div, my user will mess it up every time they edit the content.
Any hints are appreciated.
The <h1> is semantically incorrect for this usage. <h1> is a semantic tag used to indicate the title of an article or primary section of content. In this case you are attempting to use the <h1> tag to alter the presentation of the text rather than the purpose of it. For this, you would be better served by using the span tag and assigning a class style:
<p><span class="welcome">Welcome!</span> blah blah blahbitty blah</p>
Different idea:
Add a line-height to the first line of your paragraph tag to be equal to your Welcome line's expected height:
p:first-line
{
line-height: 1.5em;
}
This might cause an odd space in some browsers I think (I haven't tried it out yet).
Another idea:
You could add a style with top-padding to the block element you're using for your primary content area. This would prevent text from starting until it is ready to start. Keep in mind this approach adds this padding to the overall size of the block element, so a block element with a height of 100px and a top padding of 20px will actually be 120px.
You could put your text in <p></p> and specify display:inline; for both h1 and p. IE:
<h1>Welcome!</h1><p>Mytext here</p>
Then a float is unnecessary.
Related
Im learning html and css for now. Anyway, I am following a course, and have a queston.
This is my example code with logo of BBC and text next to it: http://i.imgur.com/kii6UPi.png
And once I add float: left; to logo, text moves up: http://i.imgur.com/SIDrCVx.png
Can anyone explain to me why this happens?
This is because by default your browser is rendering the image and the text as inline elements, therefore the baseline, or bottom of the image and text is lining up.
When you apply float:left to the image, it forces the image to display as a block rather than inline, so the text no long aligns baselines with it.
you can control them using different divs. <div class="wrapper"> <div>logo</div> <div>text</div> <div> you can control them separate, but try using float:left on the text as well, that might help.
Put simply, an img in html by default will take up the entire line that it's height occupies.
When you give an element the property of 'float', you tell it to become part of the regular flow of the page, and other elements can now wrap around it.
You may want to read up on both the float property and the inline-block
I'm making use of the <small> tag within a heading tag in Bootstrap to deliver a sub message per section of my website. The code is simple:
<h3>This is my main part of the Heading 3 tag: <small>This is the small part of my h3 tag</small></h3>
I just think it looks rubbish when the browser is resized to a narrow width and the <small> content is wrapping. Is there anyway to make the small tag clear is starts to spill onto a second line?
Guess this css should just about do what you want..
h3 small {
display: block;
}
small is normally a display: inline inline element, so thats why it stays behind the text of your heading. Turning it into a block level elemment, it will automatically take 100% with and will start on a new line.
The css above will basically turn all the <small> tags within any <h3> into block elements.
I'm pretty new to CSS and cannot figure out how to accomplish the following. I have tabular data. Some of the data elements have images associated with them. I want text in the cell left justified and I want the images in the same cell centered.
In other words, I want the same result as the following except inside a table cell.
<p>Some text.</p>
<img style="display:block;margin-left:auto;margin-right:auto;" src="myimage.jpg"/>
How can I accomplish this? When I try placing this inside a td element, both the text and the image are at the left side.
To use margin to center an element you need to have a set width:
<p style="text-align: left;">Some text.</p>
<img style="display:block;margin-left:auto;margin-right:auto; width:200px;" src="myimage.jpg"/>
Also, consider putting your styles in an external stylesheet and use selectors to target your elements.
Set your image to have absolute positioning, and it should work the way you want it. However, your text won't behave quite the way you think until you set a fixed width for your text element.
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
I find that images floated right won't sit alongside a heading tag such as H3. The H3 tag wants to have its own line so it will always appear below the image.
If I put the image also inside the H3 tag then it works but I would prefer to correct this in the CSS somehow as some of our editors aren't used to delving into the html.
Is this a standard way that H tags behave? Or is it a quirk of my CSS that I can tweak?
I'm doing this in Wordpress using a child theme based on the Thematic theme.
This is a normal behaviour as H tags are block level elements. See this explanation for more information.
Also note that you can make a block level element not to expand all the width (as it's normal for a block element), for example if you make it float (and decrease its width), changing its display propery, etc. See this fantastic tutorial for more information.
try putting the h3 tag after the image tag.... they should appear side by side.....
like this:
<img src="path/to/some/image" style="float:right;" />
<h3>some heading</h3>
All you should need to do is add float:left; to your h3 tag.
See this fiddle.