I am very new in CSS, HTML, and any other UI related technologies, so please accept my apology if this question is not a clever one!
I want multiple boxes with background image to be clickable and have a text in the middle (horizontally and vertically).
I have Html code as below:
<a href="www.mydoamin.com" class="div_a">
<span class="wrapper">
<span class="div_txt">Contentdas asd ad adasd asd asdad </span>
</span>
</a>
<a href="www.mydoamin.com" class="div_a">
<span class="wrapper">
<span class="div_txt">Content</span>
</span>
</a>
with following CSS code:
a.div_a {
display:inline-table;
width:200px;
height:100px;
background-color:#CCC;
background-image:url( http://jsfiddle.net/img/logo.png);
text-align:center;
top:0;
}
.wrapper {
display: table-cell;
vertical-align: middle;
}
As you can see HERE everything sounds fine except that the second box is misplaced when inside text of the first one exceeds one line!!
Have I missed something here?
Thanks in advance for your help.
Your element that's set to inline-table just needs its vertical-align set to something other than the default of baseline:
vertical-align: middle;
http://jsfiddle.net/WcCnW/4/
Related
I'm typing up a document for a nonprofit I'm involved in, and I'm currently working on the headers at the very top of the first page.
It's supposed to be two headers on the same line, one left-aligned and the other right-aligned, and both 13px bold text. It's also supposed to be directly above the title of the document, which is centred in <h1> text style.
Everything is going swimmingly except for the fact that the headers are both left-aligned, and I cannot for the life of me figure out what I'm doing wrong. I know it's not my browser because both StackEdit and WordPress fail to recognise it. And I asked 2 friends to take a look at it, and they can't figure out what's wrong either.
I recognise I probably screwed something up since I'm still learning HTML (I also haven't learned CSS yet), but it has thus far escaped me.
This is what I have:
<span style="text-align:left; font-size:13px"><b>Project Name</b></span>
<span style="text-align:right; font-size:13px"><b>Branch Name, Org
Name</b></span>
<div style=text-align:center><h1>Document Name 1-PubDate</h1></div>
Is this what you are trying to do? Use float css property
<span style="float:left; font-size:13px"><b>Project Name</b></span>
<span style="float:right; font-size:13px"><b>Branch Name, Org Name</b></span>
<div style="text-align:center;clear:both"><h1>Document Name 1-PubDate</h1></div>
Try to use div instead of span like in the following example:
<div style="float:left; text-align:left; font-size:13px; display:inline-block;"><b>Project Name</b></div>
<div style="float:right; text-align:right; font-size:13px; display:inline-block;"><b>Branch Name, Org
Name</b></div>
<div style="clear:both;"></div>
<div style="text-align:center;"><h1>Document Name 1-PubDate</h1></div>
Hope this may help. Best regards,
Because <span> defaults to display:inline, which means it will only grows as wide as its content's width. Try display:inline-block. Also use float to eliminate the white space between them:
span.header
{
display:inline-block;
width:50%;
font-size:13px;
font-weight:bold;
}
span.header.left
{
float:left;
text-align:left;
}
span.header.right
{
float:right;
text-align:right;
}
div.document
{
clear:both;
}
<span class="header left">Project Name</span>
<span class="header right">Branch Name, Org Name</span>
<div class="document"><h1>Document Name 1-PubDate</h1></div>
You are aligning the text of inline elements rather than aligning the elements themselves. If you inspect and look at the spans they are only as large as the text inside them. You can set the width's if you set them to display: inline-block and then the width to 50% and align the text however you want: http://plnkr.co/edit/hQKymbtYp5iBealcEkr3
<span style="display: inline-block; width: 50%; text-align:left; font-size:13px">
<b>Project Name</b>
</span>
<span style="display: inline-block; width: 49%; text-align:right; font-size:13px">
<b>Branch Name, Org Name</b>
</span>
<div style=text-align:center>
<h1>Document Name 1-PubDate</h1>
</div>
I'm going to change things up a bit and make it a bit more semantic (i.e. meaningful)
h1 {text-align:center; /*Center the H1 text*/
clear:both; /*Remove the affects of loats*/}
.preHeader {font-size:13px; font-weight:bold;} /*Set font size and bold pre-head elements*/
.project, .org {width:50%} /*Set common details*/
.project {float:left; } /*Set the project elemetn to the left*/
.org {float:right; text-align:right; } /*Text align the Right side elelment and set it to the right*/
<!-- A Container for your project and organisation elelments -->
<!-- You don't actually need the container, but it seperates it nicely -->
<div class="preHeader">
<div class="project">Project Name</div>
<div class="org">Branch Name, Org Name</div>
</div>
<h1>Title</h1><!-- Already is the width of its parent so don't need to wrap it -->
Learn more about how different elements display. You have block level elements, inline and (inline block) elements, and replaced elements (images and form elements).
Read more about floats here: https://developer.mozilla.org/en-US/docs/Web/CSS/float
And to see a discussion of the merits of floats (and their drawbacks) and the inline-block alternative see: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
On a side note, get to know some of the handy tools. Pressing f12 in Chrome and Internet Explorer give you the developemt tools for those browsers enabling you to inspect element on a web page and see what styles are affecting it and how they are affecting it as well as giving you the ability to experiment with the styles in place. Firebug for Firefox provides the same functionality.
I have following html:
<div class="text_right">
<p>Hello World
<a target="_blank" href="/some/url">
<img class="image_right" alt="Fruits" src="http://pad2.whstatic.com/images/thumb/9/91/Get-the-URL-for-Pictures-Step-1.jpg/670px-Get-the-URL-for-Pictures-Step-1.jpg"/>
</a>
</p>
</div>
I want to be able show img as float:left and "Hello World" text as float-right on the same line
Here is jsfiddle
After poking a bit around here is what fixed it:
p{
text-align: right;
}
a {
float: left;
}
How do you set a background on a div? I have a block looking like this:`
<div class="span4">
<font color="000000">
<h4 class="text-center">This is the title</h4>
<p>This is my text</p>
<a href="#" class="btn btn-success">
<i class="icon-star icon-white"></i> This is my button</a>
</font>
</div>
I want to make this whole block have a background image, but when I try (I've tried 6 different methods already), It either doesn't work at all, doesn't fill the whole box, or fills the whole page.
After using JoshC's CSS related answer, I got this problem. In the image you can see my background, but it doesn't stretch across the whole area I want it to. The side bar, as far across as the left edge of the blue highlight on "Home", is meant to be a different image, (not set up yet) and the rest would be the displayed image.
This is the image
Another thing I'd like is a background applied to multiple divs, but not all, however that's optional...
Any help is much appreciated.
Apply a background-image like this:
.span4 {
background-image: url(http://example.com/image.png);
}
jsFiddle demo
or.. style within the HTML like this:
<div class="span4" style="background-image: url(http://example.com/image.png);"></div>
jsFiddle demo
You obviously have to change the URL to an image that exists.
See the specs on the background property here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
.span4
{
background-image:url('your image path');/* by this image set*/
background-color:#cccccc;/* and can use color*/
}
You can give somethinglike this: <div class="span4" style="background:url(../Pictures/website.png) no-repeat fixed;">
We are going to warp your head for a second. Divs are like boxes that exist with no border, no per-defined styles other than 100% width.
You are combining table-line HTML3 standard structure to the nature of a HTML5 div. In the newest code does not contain such attributes like table cells did in the past.
We would accomplish this today through CSS bound to ID's or classes to call those elements that exist within the DOM.
css
<style type="text/css">
.span4{ background-image:url('images/myimage.jpg');
background-repeat:no-repeat;
width:100px; height:100px; }
.span h4{ color:#000; text-align:center; }
.span4 p{ font-weight:bold; /*or whatever*/}
.span4 a{ font-style:italic; color:#0f0; }
.span4 a:hover{}
.span4 a:active{}
.span4 a:visited{}
.span4 a.btn{ color:blue; }
.span4 a.btn-success{ color:green; }
.span4 a.btn.btn-success
.icon-star:before{ content: '* '; }
.icon-white:before{ color:#fff; }
</style>
html
<div class="span4">
<h4>This is the title</h4>
<p>This is my text</p>
This is my button
</div>`
Am having 2 label inside a td and am trying to make the alignment work
Is it possible ?
Here is Fiddle for the same explaining issue and how i need.
jsFiddle
<tr>
<td><label >Some Label Test:</label><label>Some Label Test:</label></td>
<td>
<label >Some Label Test:</label>
<label >here is the long test which exceeds the width and comes to second line but i want it like it should start below after test: instaead from some</label></td>
</tr>
Am looking for second label inside if the length is long it is coming to next line and starts from where the second label has started.
Here is a simple div usage of how to get what you want. http://jsfiddle.net/KHAJz/3/
HTML
<div class="container">
<div class="first">Some Label Test:</div>
<div class="first">Some Label Test:</div>
<div class="first">Some Label Test:</div>
<div class="text">here is the long test which exceeds the width and comes to second line but i want it like it should start below after test: instead </div>
</div>
CSS
.container{
width:700px;
height:60px;
display:inline-block;
}
.first{
width:60px;
height:60px;
display:inline-block;
float:left;
}
.text{
width:300px;
display:inline-block;
float:left;
}
What you do is make a container that holds everything together so that the tables or divs don't go everywhere.
If you don't want (or cant) change your DOM,
just add this to your CSS
label
{
display: inline-block;
height: 100%;
}
See this Working Fiddle
But if you can change your DOM, I'd recommend you to leave the Table layout and reconstruct your layout with divs. -like in Keith's answer.
I'm trying to build a button in pure CSS and fail spectacularly at aligning different elements. This is probably easy, but I can't get my head around it.
Here's how it should look:
The button should contain both text and an image. Both should be vertically centered.
Both of them together should be horizontally centered.
I can get either of this to work on its own, but not both at the same time.
I'm really looking for some guidance as to what would be the best way of doing this, but here's what I'm using so far, as simplified as possible for me:
<span style="display:table; text-align:center;">
<span style="display:table-cell; position:relative; ">
<a href=… >
<img style="position:absolute; top:50%; margin-top:-#{ height / 2}px"></img>
</a>
</span>
<a href=… > TEXT </a>
</span>
And this is the current result.
Note how the icon should be further to the right, and the text should be a little further to the right as well. My current understanding is that right now it's dead center because using absolute alignment for the icon removes it from the flow.
(Some of the strange variables due to me generating the HTML via ERB.)
You could just use a button with some text an an image in it. Vertically align the contents of the button and add padding.
<button><span><img src="http://placehold.it/25x25">Some Text</span></button>
button{
padding: 1em 2em;
}
img, span{
vertical-align:middle;
}
DEMO
Did you search this HTML:
<html>
<head>
<style>
.icon_button{
background:#FFFFFF url(http://www.limitedlink.com/images/png/ico.png) no-repeat 4px 4px;
padding:4px 4px 4px 22px;
height:auto;
}
</style>
</head>
<body>
<input type="button" value="halo" class="icon_button" />
</body>
</html>