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
Related
I have a div with an image and text. I only want to style the text from this div. With an image you can only style the image with .content img{ }, can you do this with text as well?
<div class="footer">
<div class="telefoon"><img src="images/media/telefoon.png" width="30">06-123456</div>
<div class="mail"><img src="images/media/mail.png" width="30">example#gmail.com</div>
<a class="instagram" href=https://www.instagram.com/example/><img src="images/media/instagram.png" width="30">#example</a>
</div>
In this case I want the text to have margin-bottom: 15px; and the images not.
Or when someone has a different solution for the whole problem because basically my telephone, mail and instagram information is at the bottom of the icon instead of the middle.
to style your text, insert your text in a p tag for example and with the css use .content p {}
Assuming there is no block element around the text (e.g. p, span, h1-h6, etc), try using :not for the image - although I don't see how the img would inherit any typography styling
Add a span tag for the text and style the span tag that shd solve your problem
I am making a project that has may div and every div i have a full box border to determine or see the boundary for each div i want to make it look cooler by adding a title to each box in the border itself i want to achieve something like this image below
the image below is the thing i want to achieve using css. i search for a way but so far none is working almost all is saying to use image with the design of this kind of border but i am trying to make it using border-style but i am not sure if this is even possible any idea is appreciated
you would use the fieldset html tag with a legend to achieve this,
here is the code:
<div>
<fieldset>
<legend>Box title:</legend>
<span>foo</span>
<span>foo</span>
<span>foo</span>
</fieldset>
</div>
and here is a fiddle:
http://jsfiddle.net/oogley_boogley/kzn2g2nh/2/
you should use <fieldset> for that and you should change the fieldset css style to display:block for styling otherwise it will act as an inline element.
documentation
Fiddle DEMO
legend{
color:red;
}
fieldset{
display:block;
height:100px;
}
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.
Is there a way to make the entire area of a <div> be a proper link?
Right now I'm doing this with javascript using the onclick but this is not good since if I middle click it (on firefox) it doesn't open at all
Your best choice would probably be to turn a link into a block element.
CSS:
#mylink { display: block; }
HTML:
Some Content
What do you have inside the DIV? If it's just text and other inline elements, you can just do:
<div>....</div>