I have a problem at my Website.
I want to "print" text on the left of an image. But I dont know how to do this.
Here my Site: link
Here how it should look: link
Can someone help me please?
Replace the img tag with:
<img src="http://martin-fischer.tk/assets/img/AVRStick.png" style="float: left;">
<p>Here the text</p>
Demo.
Update: As per the attached image to align the text with image you could use float:left. And your layout won't broke so you have to clear the float either using clearfix Method or you can use overflow:hidden on parent div. In addition to be safer side you could display:inline-block.
By Using #media query you can create a stylesheet for screen, mobile and even you can control the elements while printing the document. Have a Look at the DEMO.
In this example in print preview you can see the changes. Elements position is change for print and the font will turn red.
#media screen {
p {
font-family: verdana,sans-serif;
font-size: 14px;
float:left;
}
img{float:left;}
}
#media print {
p {
font-size: 20px;
color: red;
float:right;
}
img{float:right;}
}
Related
I have labels aligned in three rows and displayed in regular text. I'd like to make these labels bold, but when I apply the property in CSS, the alignment gets a little messed up.
I have included some padding and margin properties to have more space between text box and label, but that doesn't seem to help.
I am trying to have the text bold with "*" and have it aligned with "Surname" label.
How can I make the labels bold and still keep the alignment? I can only make changes to the CSS file and not HTML or font size of the text.
Before
After
**Before code-**
.bold-label {
}
.bold-label:after {
color: #e32;
content: ' *';
display:inline;
}
**After code-**
.bold-label {
font-weight: bold;
margin-left: -1em;
padding-right: 0.75em;
}
.bold-label:after {
color: #e32;
content: ' *';
display:inline;
}
Thanks in advance
The only way to do this is to have the labels that need to be right aligned (above Surname) in a container element, like a div and apply text-align: right to that container.
Here's the problem you're having:
Each label box (.bold-label) is the width of its content (the text). This means that when the content expands (because you make it bold), the box will expand with it. This breaks your alignment.
To overcome this you could assign a width to each label box. With a large enough set width you can create enough space for the text to expand without changing the length of the box.
Try this:
.bold-label {
display: inline-block;
text-align: right; /* only works on block containers */
width: 150px;
}
DEMO
This is my code, but it puts the bullet-points on the left. Hope it is of help:
<!DOCTYPE html>
<html>
<head>
<style>
li{
font-weight:bold;
text-align:right;}
</style>
</head>
<body>
<li>Consultation
</li>
<li>Pharmacist
</li>
<li>Registration No.
</li>
</body>
I want the text to be perfectly aligned to the picture. But the text has some room on each side. This is supposed to be shown on different devices so just hardcoding like top : -3 px won't work.
Is there any way to make the text snap to the top of the div.
The blue area is the selection overlay that shows the div when I hover over the html element chrome inspect:
<div class="content-with-padding">
<img src="http://www.slu.se/Global/externwebben/overgripande-slu-bilder/utbildning-bilder/SLU-Karriar/logos/logo_forb_tria.gif" />
<span>
<div class="medium-title">Title</div>
<div class="small-text">Some text</div>
</span>
.medium-title {
font-size: 17px;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
}
.small-text {
font-size: 14px;
}
img {
float: left;
}
JSFiddle: https://jsfiddle.net/fx314qhh/
top:-3px won't work because it deals with positioning. More than likely you probably need to use padding-top:-3px;. If that doesn't, we'd need to see code because it is impossible to answer by looking at a picture
Try
line-height: 0
And adjust the margin-top: value.
Or a lower line-height value. (e.g., 1em line-height would be relative to the font-size as 1:1em)
Sicking to px in this scenario is your best bet for cross browser consistency.
Without code, it's going to be hard to identify the exact issue, but lets give it a shot.
All text has something called line-height which is the amount of space from the top of the font to the bottom of the font. Most fonts build in padding along the top to make multiple lines of text readable. CSS allows us to adjust that.
p {
line-height: 14px;
}
This code will tell all <p> elements to have a total line-height of 14px. If your font is taller than 14px it will overlap.
If this doesn't fix your problem, then the issue probably has to do with the margin/padding.
Try:
.medium-title {
font-size: 17px;
line-height: 0.8;
}
https://jsfiddle.net/fx314qhh/1/
I'm having problem with css styles.I want to display the file and delete image in same line.
1 st image
In this image icon display slight above from doc.If I include css code it appears link this.
I want to display the image 20% from margin-right.For testing I changed to 66%.
In 2nd imgae is a screen shot for without using css style.
I attached my css and html code
css code:
img {
display: inline-block;
float: right;
margin-right:66%; //realy I want margin-right:20%;
}
html in php
echo '<div style="text-align:left;">';
while($fet=mysql_fetch_assoc($filesql1))
{
$file=$fet['file_name'];
$ef=$fet['cf_id'];
$next1 = basename($file);
echo "<h3><a class=doc href='".$file."' title='".$file."' download><p style='margin-left:1cm;'>".$next1."</a>";
echo '</span>';
}
echo '</div>';
As far as I can see, the problem comes from the fact that your CSS applies to the <img> tag, which is enclosed in an <a> tag. The behaviour is changed by whatever CSS is applied to <a>. You should modify your CSS so that it applies to <a><img>. The simple way would be to give a specific class to this <a> tag.
in your first screenshot the image aligns to the top of your line-height (because the css makes it a float), in the second screenshot it is aligned to the the center of the line-height by browser-default - this is close to the baseline in your case but not exactly on the line.
To work on with your css-code:
img {
display: inline-block;
float: right;
margin-right:20%;
position: relative;
top: 4px; /* maybe 3px or 5px or even 6px will look better; try it out */
}
This will put your image on the line in most browsers but you will have to allow others to show the image slightly above or beneath the line. This is a known problem with aligning images to text because not all browsers render the baseline for the text in the same place.
I'm trying to write it so that the text on my blog won't overlap. I tried putting the "white-space: nowrap" code into everywhere that had text, but it just made the words go out into the middle of the page. Here's a link to my page illustrating what I'm talking about http://schlurb.tumblr.com/post/68525778003/life-goals-marry-paris-hilton-birth-a
Here's a part of the code I'm using:
.quote {
float: right;
text-align: center;
font-size: {
text: Body font size
}
px;
line-height:20px;
text-transform:none;
margin-top:20px;
margin-bottom:20px;
width:620px;
font-family: {
font: body title
}
;
}
I think you encountered the collapse problem. This happens because of
float:right;
If really is the case you can solve it by adding
overflow:auto;
to the parent of your quote.
First of all, I'm just going to say that the bit of CSS code you've posted above does not currently apply to anything on your web page. Why? Well, the code above applies to all elements with the class name "quote". You have no HTML elements on your page with the class "quote" assigned to it.
Go through and add the quote class to the applicable elements.
Your CSS .quote{} has no corresponding e.g. <div> tag, this after looking into the pagelink you provided
I want to be able to highlight the text (paragraph) without it going across the entire page. Can someone help me confine this paragraph?
here is a link to a screen shot image showing the problem i am having: http://imageshack.us/photo/my-images/402/print1xs.png/
Heres my HTML code:
<div id="content">
<p> I like to play with pokemon <br>
They are a fun way to relax
<br>
Go pokemon.
</p>
</div>
Heres my CSS:
#content{
margin: 200px 0 0 73px;
}
#content p{
font-size: 2em;
}
#content p{
font-size: 2em;
display: inline-block;
background-color: magenta;
}
Enter the following tag at the beginning of the highlighted text: <span style="background color: #FFFF99">. You can use any color you want, though this text highlights it in light yellow.
If you want to "highlight" the whole paragraph, set a background color for the paragraph. Also, to keep it from stretching the whole way across your div just change the paragraph width, like so:
.highlighted{background-color: #ffff00; width: 100px;}