How can I make h3 tag appear like this?
I tried to apply width and max-width css rules (e.g width: 120px; or 150px) but the words appears to each next to each other.
Any suggestion?
One of the ways to do that:
h3{
text-transform:uppercase;
background:green;
color:white;
float:left;
text-align:center;
width:100px;
}
http://jsfiddle.net/fgu6W/
There are more than few, I guess.
<h3> SELL <br> ANYWHERE </h3>
You need to provide more HTML/CSS code for a better answer, but with the information provided I would assume you may need to set your h3 tag to display: block
In this example, I did not need to set display to block, it just works: http://jsfiddle.net/vwwZs/
So maybe you have some other conflicting CSS being applied.
Hope this helps
<h3 style="text-align:center;">
SELL
<br>
ANYWHERE
</h3>
Use text-align:center combined with fixed width : http://jsfiddle.net/wQUyR/
h3 {
background:blue;
display:block;
width:70px;
text-align:center;
}
See the jsfiddle and it would be great if you provide your code.
<h3 style="width:100px;text-align:center;color:white;background:black"> SELL ANYWHERE </h3>
Like so:
<h3 style="width:120px;text-align:center;text-transform:uppercase;">Sell Anywhere</h3>
Without inline styling:
<h3 class="sell-anywhere">Sell Anywhere</h3>
h3.sell-anywhere
{
width: 120px;
text-alignment:center;
text-transform:uppercase;
}
Related
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I would like to know how to change the size of an image when it is nested in a paragraph tag. The problem is that when nested in a paragraph, it won't take the values I set in the CSS for #3D1. My current HTML:
<p id="work3">
<img id="3D1" src="img/photos/3D1.jpg">
</p>
My current CSS for the image:
#3D1{
width:500px;
}
My current CSS for paragraph "work3":
#work3{
font-size:17px;
font-family: HelveticaNeue-Thin;
line-height:24px;
letter-spacing: 1px;
color:#404040;
text-align:justify;
padding-left:10px;
width:510px;
height:332px;
}
All help greatly appreciated!
EDIT: While fiddling with the code in hopes of fixing it, I managed to find the problem. My problem was that I started the name of my ID with a number. Apparently, HTML and CSS don't sit well with that, and they just didn't "see" the properties of the images. In a way, I managed to fix the problem myself, but the ones who helped me were of great help! Thanks!
#3D1 {
width:500px;
}
#work3 #3D1 {
width: 510px;
}
Since you've defined the width through an id selector, you need to override the rule by a selector with higher specificity (e.g. p img { ... } won't work)
try this
#work3 img{
width:500px;
height:200px;
}
this will make all images warped under the <p> tag with id #work3
Okay I just remember this.
just remove the number on your id/class name. I remember that its better not to start with a number if your naming a id/class. Just change "3D1" to "D1" maybe?
Fist of all, pls see this Question and the Demo
You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?
I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.
You can reduce the height's lines of paragraphs with the line-height property:
* {
margin:0px !important;
padding:0px !important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
}
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>
Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.
this is happening becuase both <p> contains different font-size.. you can fixed them by using line-height property.
Add the line-height in the CSS. you use 32px font-size on another p element.
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Can you try using margin-bottom:0 for <p>.
Just keep font-size same for both or like mentioned above use line-height and play with it until you are satisfied.
demo:
Jsfiddle
or
Jsfiddle2
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px from the .di_h_en{your-styles-here}
How can I stop this text from overflowing?
<html>
<head>
<style type="text/css">
.sticky
{
background-color: #FCFC80;
margin: 5px;
height: 100px;
width: 135px;
}
.sticky .edit
{
vertical-align:middle;
height: 100px;
position:relative;
color:Black;
background-color:blue;
height:90px;
vertical-align:middle;
width:90px;
border-collapse:collapse;
}
</style>
</head>
<body>
<div id="note44" class="sticky">
<div id="text44" class="edit" title="Click to edit" style="">A very long word: abcdefasdfasfasd</div>
</div>
</body>
</html>
I think word-wrap is supported in most browsers?
word-wrap:break-word;
Depends on what the desired output should be, but if you want to hyphenate the word, you can use , that is, replace "abcdefasdfasfasd", with say, abcdefasdfasfasd.
You could also have a look at the overflow property.
does justify do it?
There's a CSS property called word-wrap. Give it the attribute "break-word" and you should be good to go.
.break-word {
word-wrap: break-word;
}
Source: Web Designer Wall - Force text to wrap
The css mentioned above won't work in all browser's as it's non-standard.
When I run into this I usually use php's wordwrap function, but that's no good if you're not using php.
Two things which need to be pointed out:
You've defined the height of the second element twice in the css.
If you wrap text inside an element with a defined height, it could well overflow, and cause you a new set of problems.
We have a page that ordinarily has two elements arranged side-by-side. Despite exploring a few angles for this, we can't seem to make it work. We're not averse to using JavaScript, it just feels that a CSS based solution ought to be possible. Is there a way of using just CSS (and possibly extra markup if necessary) to make element2 centre when it appears on its own?
Examples
Sometimes we have two elements, side by side.
<div id="container">
<div id="element1">content</div>
<div id="element2">content</div>
</div>
But in some conditions only element2 is on the page e.g.:
<div id="container">
<div id="element2">content</div>
</div>
There is a pure css solution, however it won't work in versions of IE less than 7 because it won't understand the sibling selector (+), for that you may want to consider a JavaScript solution (perhaps Dean Edwards' IE7). Anyway, some example css:
div#element2{
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div#element1 + div#element2{
width:50px;
float:left;
margin:0;
}
The key is the line div#element1 + div#element2 which selects div#element2 given that it directly follows div#element1.
I think Phil was on the right track, but you should try using the CSS last-child pseudo-class. As far as I know, first-child and last-child are the only way in CSS to approximate an if construct.
div#container div#element2:last-child {
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div##element2{
width:50px;
float:left;
margin:0;
}
The CSS above basically says "if element2 is the last child element of its parent use this set of styles, otherwise use these other styles.
This should even work in IE7.
A strict CSS2 solution:
#container {
text-align:center;
}
#element1, #element2 {
display:inline-block;
}
The inner elements should layout like inline text inside #container, but remain blocks inside.
This is standard CSS, but getting browser support might take some trickery.
it's not cool solution becouse tables are not "trendy" anymore but it solves the problem completly (under all ie)
<style>
#container {
margin:0 auto;
width:100px;
}
#container table{
width: 100%;
text-align:center;
}
#element1{
background-color:#0000ff;
}
#element2 {
background-color: #ff0000;
}
</style>
<div id=container>
<table cellspacing=0 cellpadding=0>
<tr>
<td id="element1">content</td>
<td id="element2">content</td>
</tr>
</table>
</div>