I'm trying to get the site text right next to site-title. My code right know is
<p>
<block><div style="background-color:#993383; color:#ffffff; font-style: normal; ">
<span class="nowrap"><h3 id="site-title"><b>TEXT GOES HERE</b></h3></span> <span class="nowrap"><h5 id="site-text"> TEXT GOES HERE</h5></span>
</div></block>
</p>
Im not sure if the code class="nowrap" is correct, so i'm hoping you can help me out!
I am not sure whats inside your .nowrap class. You can make text side by side in many ways like,
.nowrap
{
display: inline-block;
}
fiddle
if you are wondering why? text is occupying two lines not one. The reason is h3 is a block level element so it breaks the line. In order to show them side by side Via CSS you can do by adding display: inline-block.
Are H1,H2,H3,H4 tags block or inline elements?
Related
I've read that headers shouldn't be used as subtexts to other headers for HTML5 in order to have a nice outline.
for example:
<h1>Frustration</h1><br />
<h2>The life of developers</h2>
Rather, it could be written like this instead:
<h1>Frustration
<br />
<span style="font-size: 0.67em">The life of developers</span>
</h1>
The problem is that I have no control on the line-height of the subtext. It takes on the line-height of the H1 and that always seem a little too far.
I realize could do something like:
h1+.subtitle
to target the same thing, but I'd just like to know whether there is any way for the second option above to let me manipulate a paragraph with two different line-heights.
EDIT:
I'm using the latest version of Firefox.
As I continue to look for a solution, I'm beginning to wonder if this is a silly question to be asking, seeing as the browser has no reason to think the user would want separate line-heights within the same tag--especially when there are alternatives like using block elements with a negative margin-top.
You could do this:
<h1>
<span class="mainText">Frustration</span>
<span class="subText">The life of developers</span>
</h1>
h1 .mainText {
display: block; /* this prevent the need for the <br/> */
/* additional style for the main header text */
}
h1 .subText {
/* styling for the subtext */
}
You could also do this (which is easier I guess):
<h1>text
<div>subtext</div>
</h1>
h1 div {
font-size: 0.67em
}
The subtext will have a lower line height. See this jsfiddle for the latter one: http://jsfiddle.net/wLD35/
I am trying to make a simple home page and I am getting slightly different line heights between tags. Here is the HTML ` Justin is the lead engineer for
<p>and also this         and Justin also </p>
<img id="brabble" src="img/brabble.png">
<p>to make products work </p>`
and here is a picture
Your image is getting in the way of text formatting because it's not the same size as your text. You have several options, the most effective will be to put the image in its own span, and give that span an explicit height of 1em, with an overflow:visible:
<P>lalalala <span class='imagewrapper'><img ....></span> more text</p>
with style:
.imagewrapper {
display: inline-block;
height: 1em;
overflow: visible;
}
See http://jsfiddle.net/UG5us/
The image causes a line box to become taller than specified by the line height of the surrounding element. To avoid this, scale the image down and/or set its vertical position.
I am working round a custom CMS called phpVMS. In this, there is a bubble box that displays when clicked on an icon on the map. However, the text align seems to be centered instead of going to left? I've linked a picture:
The code that I am using for the bubble span is:
<span style="font-size: 9px; text-align: left; width: 100%;">
<strong>Pilot In Command: </strong> <%=flight.pilotname%><br />
... so on.
</span>
I've tried to look where text could be centered, but cannot find anything sadly in the css or the html. I have also noticed that width and font size work, but text-align is ignored. I hope you can help me.
Thanks and regards
You can't use text-align within a span as it is not a block-type element. Try replacing your <span> with a <div> of the same parameters.
Struggling with what should be a simple layout.
I want a logo, with a and a subtext on the right of it.
I have the following ASPX page (but is is plain html so the aspx is not so relevant)
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Image ID="Image1" CssClass="logo" ImageUrl="~/logo.png" runat="server" />
<h1>
headertext</h1>
<p>
<br />
subtitletext</p>
And the following CSS:
.logo
{
vertical-align: top;
}
h1,p
{ display: inline; }
Now the subtitletext ends up under the logo, and not under the headertext even though the logo is much higher that the two texts together. Any ideas why? The br is needed because I want the p under the H1 and not after it.
ps. i know with some extra DIV's or a table i can fix it easily, but can't it be done without them?
Why? Because the image, header and paragraph are all inline elements - image as this is its default display and the others because you forced them via CSS rule.
The line break tag tells the browser: get down one line from the point of this tag, so in your case everything until the <br /> is one line, then after this tag new line begins.
Most simple way to "solve" this is use float instead of inline display:
img, h1,p { float: left; }
Live test case.
Edit: in case of wider contents, the paragraph will appear "after" the header, not aligned properly. To solve this, one way is giving fixed width to them both:
h1, p { width: 250px; }
Updated fiddle.
I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:
alt text http://preview.moveable.com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
I have a height and overflow-y:scroll on the UL (likely not relevant)
I have a height set on the LI that is large enough for the placeholder image plus spacing.
I have vertical-align:middle on the image to get the text in the right place, almost
The rest is just margins and borders
Am am NOT using floats
How can I get the text to wrap properly, perferably without more markup?
If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing
li {
background: url(/images/foo.jpg) center left no-repeat;
padding-left: barpx;
}
you could also use a margin on the li to allow for spacing to the left of the image inside the ul
if the images are different i would simply apply a class to each li to distinguish the difference
edit for seo friendlyness:
add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.
li img {
display:none
}
As #graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.
If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:
<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>
Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.
Seems to me you could float the image left.