My question is simple: what happens to inline-block elements inside of absolutely positioned elements? I have a little example to illustrate what I mean. It's hard to explain otherwise. The question is why the .icon inside of the .tag is not positioned like the previous .icon (that is, inline and to the right of the text)
The code below can be viewed # http://jsbin.com/itole4/5
<html>
<head>
<style>
.field { position: relative; border: 2px solid black;}
.tag { position: absolute; left: 100%; top: -2px; background: black; color: white;}
.icon { width:16px;height:16px; display: inline-block; background: gray; text-indent: -999px;}
</style>
</head>
<body>
<a>Some text <span class='icon'>X</span> </a>
<h2>
<span class='field'>Some Text<span class='tag'> tag<span class='icon'>x</span></span></span>
</h2>
<h2>
<span class='field'>Some Text</span>
</h2>
</body>
</html>
Actually, the icon is acting exactly the same. To test, try setting a's style to
display: inline-block; width: 50px;
When you make a tag position: absolute, it causes the tag to no longer have an automatic width of 100% of its parent, but rather to have the minimal width it can take according to heuristics within the browser (browser-dependent). The inline block acts like "inline", like an image, and is thus wrapped to the next line at the first chance (which is right after the word "tag").
So the short answer is: the icon is acting the same, but the block containing it is not.
In order to force the icon on the same line, as on the first line, you can add white-space: pre;. See: http://jsbin.com/itole4/6 (also see comment below)
because the .field has position relative and if you will add the .icon with style : position:absolute;top:0px; inside of the .field the .icon will be added on '0px' on top of the .field not of body
I can't explain it better in English >.<, i hope you can understand
it's not the positioning - it's the element containing the "icon" class..in one you've got a plain inline a the other a nested setup where the parent is an block level h2 this means your "inline-bock" has different line-heights and vertical alignment
Related
I am trying to put a <p> tag inline with an <a> tag, but I can't figure out how. I've tried several display types in css, but they either don't work or do something weird to it.
(Here is a bunch of unnecessary words because the thing is saying there is too much code and not enough words. I think its pretty dumb because what I said is enough unless someone specifically asks for details about something).
Here's some example code:
body {
margin: 0;
padding: 0;
background-color: #efefef;
}
header {
margin: 0;
margin-top: -10px;
background-color: #ffffff;
}
header p {
margin: 0;
font-family: "arial";
font-size: 50px;
color: #3c3c3c;
margin-top: 10px;
margin-left: 10px;
text-align: center;
}
header a {
}
#information {
width: 500px;
height: 250px;
background-color: #ffffff;
box-shadow: 7px 7px 4px grey;
margin-left: 100px;
margin-top: 150px;
}
#information p {
font-family: "arial";
font-size: 20px;
color: #1febff;
}
#delete {
margin-top: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<title>SaHa | Color Scheme</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<p>SaHa</p>
Menu
</header>
<div id="information">
<p>Pretend that there is a bunch of important information here even though there really isn't.
This is normally where a message that actually means something would go, but this is just a
placeholder because I have nothing important to put here right now.
</p>
</div>
<div id="delete"></div>
</body>
</html>
In your HTML, try directly typing or after whatever text you want it to appear.
For example:<div>When i came<a> ut yiur name</a>so what do i do</div>
In your CSS body, try inline-block or just inline parameters with DISPLAY property to get any image or text into the normal flow of a line.
For example:
a {display:inline-block;}
Could you specify which elements in your example code you want inline?
Generally using display: inline and display: inline-block will make elements flow as if they were text. They will sit next to each other and jump to new lines when their container width gets too narrow. Browsers commonly apply display: block to <p> elements by default.
Assuming we are talking about the contents of your <header>, I added the following rule to your existing CSS. Check it out in action.
header p {
display: inline-block;
}
EDIT: Based on further comments, here is a solution to what you are looking for.
First of all I've wrapped your menu items in a nav element and made your main title a h1 element. Search engines like this better. A h1 element is also displayed inline by default and respects text-align properties on its parent container (which in this case is header).
<h1>SaHa</h1>
<nav>
Menu
Thing
Stuff
</nav>
On the CSS side I've made two crucial changes.
First, I've center-aligned your header text. This centers the new h1 element. Additionally I've set position: relative because we will need it in the next step.
header {
text-align: center;
position: relative;
}
Second, to position your menu to the right side of the screen I've lifted it from the regular flow of content with position: absolute. Now, by specifying either a top or bottom and left or right, we can position the menu anywhere in the header. Why the header? Because it is the nearest parent to nav that has a relative position. This is why we set it earlier!
nav {
position: absolute;
right: 10px;
bottom: 10px;
}
Try changing the values for right and bottom in this Codepen example. Try changing right to left and see what happens. What happens if you remove position: relative from .header?
I have a div with content like this:
<div class="myDiv">
Here's some text that vary in length <span class="separator">/</span> Some other text <_other elements etc>
</div>
What I want is, only using CSS, to display the first text and hide the rest.
I have tried .myDiv *:not(:first-child) { display: none; } which hides all elements, except the first separator. All texts are still visible.
Is this even possible, only using CSS?
Edit: the text is in variable lenght, but this variation is restricted between 14 and 21 chars. It will never be line breaked. (Added this info for solutions like set the div to a width and visibility:hidden or solutions like that which is fully acceptable)
This is how I would do it:
<div class="myDiv"><span>Here's some text that vary in length</span> <span class="separator">/<span><span> Some other text </span><span><_other elements etc></span>
</div>
.myDiv > span:not(:first-child) {
display:none;
}
Here is the JSFiddle demo
Separate your text using span properly and then apply the css to hide the spans if its not the first-child
It is not possible to directly select text nodes using CSS so the logical way of achieving this would be to wrap the text in an element and hide that. Unfortunately, this is not an option in this instance as the HTML markup cannot be modified and JavaScript cannot be used.
Luckily, we can rely on two things:
The text will always be on one line
The .separator element will exist
We can therefore use a combination of overflow on .myDiv and a pseudo element in .separator to forcibly hide the unwanted text:
Add height: 1em; and line-height: 1em; to .myDiv to force it only to show one line of text
Add overflow: hidden; to .mDiv to ensure that the overflown content is hidden
Create an :after pseudo element in .separator and set it to display: block; to ensure that it is forced onto a new line. This will ensure that the separator itself (/) is still shown
.myDiv {
height: 1em;
line-height: 1em;
overflow: hidden;
}
.separator:after {
content:"";
display: block;
}
<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
<_other elements etc>
</div>
If the separator is not required the CSS can be simplified. The pseudo element can be removed and .separator itself can be set to display: block; to force it onto a new line.
.myDiv {
height: 1em;
line-height: 1em;
overflow: hidden;
}
.separator {
display: block;
}
<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
<_other elements etc>
</div>
Edited You can Use this also
.myDiv{
max-width: 28.5ch;
overflow: hidden;
white-space: nowrap;
}
OR
<style>
.myDiv *:first-child
{
display:none;
}
</style>
<div class="myDiv">Here's some text that vary in length <span class="separator"> Some other text <_other elements etc></span>
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.
I have a page with a header, followed by a (menu/tool) bar underneath, which is supposed to carry two elements: a text to the left (big font) and a login link (smaller text). The right hand link is supposed the be centered vertically.
The following resource seemed to be exactly what I need:
http://www.css4you.de/Texteigenschaften/vertical-align.html
and
http://www.css4you.de/example/vertical-align.html
Here's my HTML:
<div style="border: 1px solid purple;">
<h1 style="border: 1px solid red; display: inline;">Textext</h1>
<span id="logindisplay" style="border: 1px solid lime; float: right; vertical-align: middle;">Log In</span>
</div>
The CSS ID selector for logindisplay doesn't exist. h1 is just
h1
{
font-size: 18pt;
}
I basically did everything as in the resource above, but it doesn't work - neither on IE9 nor on FF. Here's what I get:
Does anybody know what I'm doing wrong?
Note: Workarounds/hacks aren't desired. (One would be to set padding-top: on the span...)
Try this
#logindisplay { line-height: 18pt; }
...and get rid of your vertical-align property.
vertical-align doesn't work in the way you thinkit does, it seems. Take a look at http://css-tricks.com/what-is-vertical-align/ for a good explanation of what it does.
Using float:right negates the vertical-align as you found. Mark's suggestion doesn't work with position:relative on the div? In which case, line-height seems like the easiest way.
make your outer div be display: table-cell, or give it a line-height of appropriate size.
vertical-align is one of the stupidest bits of CSS, and rarely works as you'd expect without having to hack up containing elements: http://phrogz.net/css/vertical-align/index.html
A different approach would be putting position relative on the parent div and then absolute position the span like this:
#logindisplay {
position: absolute;
right: 0;
top: 50%;
margin-top: -9px;
}
Example
Html Structure
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Anchor is not clickable only in IE7, I know the issue happens because of hasLayout, if we remove height & width of the span, it will work fine.
But I need to make it work with out removing height & width.
EDIT: You can fiddle with an example here: http://jsfiddle.net/rxcAb
CSS Only Solution
Tomas-I modified your fiddle into a working example. I changed your code to use a span inside the a tag because it is invalid to have a standard block level element (a div) in an inline element (an a tag). Giving the a tag layout (I used inline-block) and then setting a position:relative on that span with a z-index: -1 pushes the span "below" the a tag and makes IE7 recognize the a tag as active again. Below is the modified code used in my fiddle. You might want to set up a more generic class name than my ie7AFix (you probably will also want to just target IE7 for those CSS properties that are necessary for it only). I assume you are varying the width and height by images, and hence why you have those as inline styling.
HTML
<a href="http://www.google.com/" class="ie7AFix">
<span style="width:222px; height: 150px;">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</span>
</a>
CSS
a.ie7AFix {
display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}
.ie7AFix span {
border: solid #666 4px;
display: block;
position: relative;
z-index: -1;
line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}
.ie7AFix img { border: 1px solid red; }
Updated Fiddle with line-height added to make "cross browser" if one does not want to target IE7 only. I kept the width and height in the span html above, only because the original question (by both gviswanathan and Tomas) requested it. If you don't need to set the dimensions on the span for some reason, but are simply trying to do a double border on the image, then thirtydot's answer given in the comment's below is much simpler.
With jQuery, the following will force all links to work, and have the 'pointer' cursor:
$(document).ready(function () {
$('a')
.click(function () {
window.location = $(this).attr('href');
})
.hover(function () {
$(this).css('cursor', 'pointer');
});
});
I've tested this simulating IE7 with IE8 in compatibility view mode, but can't guarantee it will for IE7 on its own.
You may want to apply this more selectively -- I suspect that, as is, this might slow down older browser performance -- in which case apply a class (like <a href='myClass'>) to all links that are broken this way, and just change $('a') to $('.myClass')
Have you tried using the HTML5 shim? It helps a lot with issues that are caused by hasLayout.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Just take out the SPAN from the IMG. The IMG element can be styled with a class just like any other element, therefore you don't need a span around it.
give the following CSS rules to the a element:
{
display:block;
overflow:hidden;
}
Ah another hasLayout quirk
it's not possible to achieve in IE7 and still retain the width of the span, if you could show what you're trying to achieve in a JS fiddle perhaps we could help, find a way around it e.g. and this is only a guess, putting the width on the anchor with some padding would help create a completely clickable area and still allow a "caption" span to be restrained if that's what you're after..
Example workaround not a fix
CSS:
a {
display: inline-block;
background: #ff0;
max-width: 50px;
padding: 10px;
text-align: center;
}
img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}
HTML:
<a href="#">
<img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
<span>Some text and even longer</span>
</a>
The above is only a thought, and if it's not what you're after, then please provide a sample jsfiddle.net
May be it's a problem is that because you didn't define href="#" inside your <a> TAG So, put href="#" inside your <a> TAG. Write like this:
<a href="#">
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Just wrap anchor tag inside Div or Span. Its working in IE7.
This way is wrong..?
From your post I think u wanted a clickable image with span info text !! I hope this will help u ;)
http://jsfiddle.net/ajinkyax/v5KH5/3/
<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>
CSS:
.imgLink {display: block; width: 200px; text-align: center;}
See fiddle for code and demo
Fiddle: http://jsfiddle.net/rxcAb/29/
Demo: http://jsfiddle.net/rxcAb/29/embedded/result/
Perfectly working in IE7, IE8, FF, Chrome, Safari.
No changes in code: See below
<a href=http://www.google.com/>
<div class="gal_image" style="width:222px; height: 150px;">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</div>
</a>
An easy way to do this is:
<p>
<span><img></span>
<span> Some text <span>
<a></a>
<p>
p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`
If you have something like:
<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>
Simply add a style property to the anchor like this:
<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">
This will make the div and everything inside of it clickable in IE7+ and firefox & chrome.