I have this code :
HTML (meaning 4.0)
<div class="temperatura">
<a href="/link/" class="temperatura_localita">
<span style="padding-left:12px;">
Text1
</span>
</a>
<a href="/link/" class="temperatura_dettagli">
<span style="padding-right:70px;">
Text2
</span>
</a>
</div>
CSS (meaning 2)
.temperatura
{
height:34px;
position:relative;
background-color:#FF0000;
}
.temperatura_localita
{
width:50%;
height:34px;
line-height:34px;
float:left;
}
.temperatura_dettagli
{
width:50%;
height:34px;
line-height:34px;
float:left;
text-align:right;
}
and this is what I need :
the container temperatura is linked to /link/;
each a are 50%, and the link got a padding (left or right);
on Firefox/Chrome/IE8/IE9 there arent problem. On IE7, increasing/deacresing (horizontal) the window, the second link got a new line.
Why? And, how can I fix this?
I think this is because of your 50%/50% division. IE7 is pushing the second link to a new line when the pixel count of the div is odd, but maintaining the correct position when it's even. Changing both widths to 49% solves the issue.
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.
Having some problems...
<span style='position: relative; font-size:0px;'>
<a href="x.php?x=1898&y=2019">
<img style='background:url(images/4.png)' class='xyz' data-alt-src='images/X.png' data-x='y' data-coords='1898, 2019' src="images/4.png" />
</a>
<span style='position:absolute; display:block; right:0px; bottom:0px; font-size:15px; background-color:green; color:white; line-height:0px;'> 8 </span>
</span>
What I have here is one of many, each of these code blocks overlays text (in this case an 8) over an image. Each of the code blocks buts up against one another and then there are line breaks to create multiple rows, etc.
The problem is the position:absolute and the background-color:green. Without absolute positioning, the background is green, but it doesn't overlay, with absolute positioning, there is no background color.
How do I solve the issue easily and quickly?
You'll want to remove/change the following from your inline styling:
line-height:0px;
For example, try it using the following:
line-height:10px;
You will also want to manipulate the size of the green span as needed.
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>`
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/
I want different menu items in different corners having a simple hover effect. Following code is working. But only right-bottom menu item is not giving proper effect in IE6 and IE7. Whats wrong?
Here is the fiddle.
CSS:
.d
{
height:50px;
width:50px;
background-color:#b2b2b2;
position:fixed !important;
*position: absolute;
}
.da {position:absolute;}
#d1 {left:0; top:0;}
#d2 {right:0; top:0;}
#d3 {right:0; bottom:0;}
#d4 {left:0; bottom:0;}
#d1a {bottom:0; right:0;}
#d2a {bottom:0; left:0;}
#d3a {top:0; left:0;}
#d4a {top:0; right:0;}
#d1a:hover {right:-5px; bottom:-5px;}
#d2a:hover {bottom:-5px; left:-5px;}
#d3a:hover {top:-5px; left:-5px;}
#d4a:hover {top:-5px; right:-5px;}
HTML:
<div class="d" id="d1">
<a class="da" href="#" id="d1a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d2">
<a class="da" href="#" id="d2a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d3">
<a class="da" href="#" id="d3a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d4">
<a class="da" href="#" id="d4a"><img src="images/contact.png" /></a>
</div>
IE6 and IE7 are having a hard time with the negative numbers for some reason on the BR.
Strangely enough, if you remove the #d3a {top:0; left:0} css rule, (That should be its default position anyway) the problem goes away. In fact, if you play with it...any value other than top:0, left:0 allows the browser to properly determine the hover position of the #d3a div.
Further experimentation with !important on the #d3a:hover rule will help support that this is not an issue with css applying correctly, but rather, with the browser's ability to render position correctly. (That is to say that the css style is applying...but having no effect.)
I have found following solutions for the problem:
1) to add visibility:hidden to #d3a:hover block
or
2) to add margin-left:0% to #d3a:hover block
both solutions will make the code running properly in IE6 and IE7. (Even it is working with IE5.5 too)