I wanted to make my email as image, so I've put text and then email address as image. After that line goes another line, which is text and link on the same line.
But the problem is that for some reason second line (with text and link) is being formated with parameters on the first line, even though it is not on same div tag. I don't get it why it is being formated at all (when I delete first line and all formating for it, then www:link goes on one line as it should). I can only bypass it by using:
<br /> // or another spacings such as padding-bottom.
But I want spacings between lines to be minimal.
To make it more clear here is a screenshot, how it is looking now:
html code:
<div class="col3">
Email:
<img class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/>
</div>
<div>
www: http://www.test.com
</div>
css styles:
.col3 {
width:140px;
height:15px;
padding-bottom:10px;
}
.image-align {
float:right;
}
Also I'm using wordpress, but I have raw html plugin and tried raw tags and also disabled all wordpress formating, but it is the same thing.
Does anyone know what could be wrong?
What I want to do is second line should look like this:
www: http://www.test.com
Not like this:
wwww:
http://www.test.com
You can try this:
HTML
<div class="col3">
<div class="email">Email:</div>
<img class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/> </div>
<div class="sitelink">www: </div>
<div class="link">http://www.test.com </div>
CSS
.col3 {
padding-bottom:10px;
}
.email {
float:left
}
.image-align {
display:inline-block;
margin-left:5px
}
.sitelink {
float:left
}
.link {
display:inline-block;
margin-left:5px
}
DEMO
Assign the class .col3 to the div, I think you may have specified a width for all div's earlier in your style sheet, and you need to overwrite it (make it as wide as the above div)
Your width is the problem, try putting bigger value instead. Let us know how it works.
Related
I have a widget on my website which generates content which looks like this:
<div class="wrapper">
some title
<p>some content</p>
</div>
I want to give the title text padding and the <p> padding
I already tried this:
.wrapper > * {padding:15px;}
But that doesnt apply to the plain text. Is there some sort of selector for plain text?
I also created a fiddle to visualize it.
http://jsfiddle.net/62v59s3j/
If I understood correctly, think you should apply padding to your wrapper, and remove left and right padding from the <p>
.wrapper > p {
padding:15px 0px;
}
.wrapper {
border:1px solid #ddd;
padding:15px;
}
jsFiddle
No.
With a couple of very limited exceptions (like :first-letter), CSS only allows you to select elements.
If you want a block to have a title, then it should probably be a heading (<h1> et al), and that would give you an element to select. For that matter the block may be better represented as a <section> rather than a <div>.
Let your web browser help you in developing.
Right click on the element and select inspect element from the context menu
In the source code, right on the element and from the context menu select copy selector, paste in your css
I don't know if this is possible or not, but any help would be very appreciated.
I have this code in my HTML:
<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">
where data-caption is a custom attribute.
I want to do something like this.
As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?
I tried doing something like this:
<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
A picture of mountains!
</div>
CSS:
.inline-image {
width:30%;
}
.photo-caption {
width:30%;
background-color:blue;
}
This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.
Thank you very much!
Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.
A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.
html:
<div class="img-block" data-caption="A picture of mountains!">
<img src="mountains.jpeg" class="green inline-image" >
</div>
css
.img-block:after {
content: attr(data-caption);
}
Reference
What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.
Below is my code and css so far:
<div id="header_number">
<h2 class="phone_title">Call Us Today!</h2>
<img src="images/phone_icon.jpg" alt="Call us Today"/>
<h2 class="large_num">1-800-555-9999</h2>
</div>
CSS:
h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}
I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.
Now Define your some element display:inline-block; or vertical-align:top
as like this
h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}
Now check to live demo
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.
For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.
means the text should be vertically centered always. I don't want to add extra span
<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>
I want to achieve with this html.
Edit
And I don't want to give fix width and height to any element
Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/
I've used it myself, and it works perfectly.
try with
HTML
<div>
<img src="" height="155px" width="155px" style="float:left">
<div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>
CSS
.imageText {
display: table-cell; // this says treat this element like a table cell
vertical-align:middle;
border:1px solid red;
height:150px;
width:150px;
text-align:left;
}
DEMO
Note: width and height matters
I really like the method described # http://reisio.com/examples/vertcenter/