This CSS & HTML shows three text boxes that are completely wrapped in their borders when viewed in IE and Edge. When viewed in Chrome (or on my Android's browser) the right side of the border is clipped off.
I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...
<html>
<body>
<style>
.link-bubble {
float:none;
white-space:nowrap;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
margin:2px;
}
</style>
<div style="float:right; width:30%; text-align:center; line-height:40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
I'm not 100% sure why that specific behavior is happening and the discrepancies between browsers, but I would bet it has to do with white-space:nowrap and the parent elements width: 30% and some quirkyness with that.
Instead of trying to work around that quirk, a much easier way to do this is change the display of the .link-bubble's from inline to block. You can do this with the display: block on the class, or just change the elements from span to div or other block elements. Here's some good reading on the box model - I'd also recommend reading up on css flexbox and grid, much easier and more modern way of handling positioning of elements vs divs and floats.
Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.
<html>
<body>
<style>
.link-bubble {
overflow: hidden;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
display: block;
margin: 2px;
}
.link-bubble a { white-space: nowrap; }
</style>
<div style="float:right; text-align:center; width: 30%; line-height: 40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
Related
I'm currently building a theme / style for a piece of software.
Currently, the code looks like such:
http://jsfiddle.net/afseW/1/
The relevant code is:
body div[type*=privmsg] .sender {
font-weight: 700;
width:134px;
text-shadow: #fff 0px 1px;
background-color: #eee;
min-height:22px;
border-right: 1px solid #dcdcdc;
padding-right:5px;
text-align:right;
display:inline-block;
overflow: auto;
}
Note that in fiddle, for some reason, the text is collapsing onto the second line, whereas in the client, the image looks like this:
Granted, a span is not meant to be a block, hence I've given it the property of: display: inline-block;
But how do I get the height to inherit the parent p block?
I changed DOM structure. See the inline style. In the first div (.message) I prefer a better solution adding a .clearfix class, see this.
<div class="message" type="privmsg" style="overflow: auto;">
<div class="sender-cont" style="width: 30%; float: left;">
<span class="sender" ondblclick="Textual.nicknameDoubleClicked()" oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
</div>
<div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
</div>
</div>
Hope this helps!
Since the spans are a set width, probably the easiest thing to do here is just make the span have a absolute position.
body div[type*=privmsg] .sender,
body div[type*=action] .sender {
position: absolute;
top: 0;
bottom: 0;
left: 0;
...
}
Then add padding to the parent element:
body span.message {
position: relative;
padding-left: 140px;
...
}
http://jsfiddle.net/afseW/3/
PS: please provide a trimmed down version in jsfiddle next time, the html and css here is pretty epic.
This seems simple to me, but after days of trying (I have very limited experience) and searching for a solution, I have drawn a blank.
I am creating a page of links on a single html page with embedded css style for use in a browser window.
I wish to simply align my link to the left of my div, with a text explanation of the link which aligns to the right of the div. There is a wrapper div which contains two of these other div's (right and left), which contain boxes (categories) of links. The first example is merely using periods to create the desired space.
So far I have tried the below HTML:
<html>
<body>
<div class="wrapper">
<div class="div_body_side1">
<div id="div_category01">
<p>
<A HREF="http://www.webaddress" > Short Description
</A>.................... Longer description of where this link will take you
</p>
</div>
</div>
</div>
</body>
</html>
I also thought I may try this method (below) but I don't know how to color the text in the long description and align it to the far right of the category div.
<tr>
<td>
<A HREF="http://www.webaddress" > Short Description</A>
</td>
<td>
Longer description of where this link will take you
</td>
</tr>
Will I have to create two more side-by-side divs inside each category to achieve what I'd like?
I will also need the divs and text to 'shrink' (scale) horizontally for small laptop use and I know that a lot of div's (floating) somehow prevents proper scaling.
I apologise for my lack of expertise, but I really have been looking for a solution for days.
Thank-you in advance for any assistance.
.............
..................................................
Hello again.
Unfortunately, Billy Chan's answer did not work (but thank you for reminding me to use the 'title' attribute). I have tried it with a list of three links and what happens is the output looks like this:
link1link2link3 explanation1explanation2explanation3
Here is what I used:
<div>
<span class="link">
Whatever</span>
<span class="explanation">Whatever explain</span>
<span class="link">
Google search
</span>
<span class="explanation">Secure Google search page
</span>
<span class="link">
<a href="http://www.google.com/ncr" >Google search</A>
</span>
<span class="explanation">US Google search page
</span>
</div>
...with the following CSS:
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
I shall now try the other solutions that have been kindly provided.
Thank-you all so much.
.......................................
Thank-you dbaseman, but your solution requires two more divs within my category divs, does it not? I can't apply your "div class="right"" to my Category divs (which are an IDs), can I?
Will now try Urg mu's solution. Cheers.
Oh.. Urg mu - it seems you have provided a solution for colouring the text only. Your solution isn't going to align my 'long explanation' to the right is it?
On to Naveen Sharma. I'm sorry but can you please explain what your solution is actually supposed to do?
Thank you all again. I am learning a lot.
Cheers.
Please see this horrible jsFiddle version of what I am trying to achieve. Yes, it includes lots of testing things and also the 'solutions' provided here.., and you will have to drag your browser window to the far right and the 'result' window to the far left to see my two divs side-by-side:
http://jsfiddle.net/wreckanoid/CdN2z/
Direct answer:
Use two spans to wrap links and explanation. Example
<div id="catgory01">
<span class="link">Whatever</span>
<span class="explanation">Whatever explain</span>
</div>
Then define style of the two spans
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
The reason to wrap the link is you may not want all your links behave like this.
This answer should work, but you may find problem is your link anchor or explanation is too long, they may overlap. Just pay attention to that.
A further answer: The correct way to explain a link is to use title attribute
Whatever
This way when you hover the link, you get the hint.
In The HTML that you have given add folowing line of code
<style>
.div_body_side1 p a{width:200px;float:left}
</style>
LIVE DEMO
CSS
div { width:400px; border:red 1px solid; padding:10px 0px; }
p { overflow:auto; margin:0px;
background:url('http://reference.wolfram.com/legacy/MathematicaCharacters/Ellipsis.gif') 100% repeat-x ;
}
a {
float:left; padding:0px 5px 0px 10px;
background-color:#fff;
}
.desc {
float:right; padding:0px 10px 0px 5px;
background-color:#fff;
color:#333;
}
HTML
<div>
<p>
<a href="#link" >IAClient</A>
<span class="desc">QUT Internet Access Client</span>
</p>
<p>
<a href="#link" >AARNet</A>
<span class="desc">AARNet's FTP & HTTP Mirror</span>
</p>
</div>
http://jsfiddle.net/CZt8R/
One simple way is to use float: left and float: right on the link and the description, respectively.
HTML
<a href="http://www.webaddress" > Short Description </a>
<div class="right">.................... Longer description of where this link will take you</div>
CSS
a { float: left; }
.right { float: right; }
Here's a demo.
Edit post update
Two keys to getting this kind of layout:
Use fixed (percentage-based) left-margins for the links, and for the descriptions
Display a long string of ellipses "..............." and use overflow-x: hidden to hide the excess
Another demo.
Here is what I have settled on.
I may add some underscores between the links and the explanations, but I think I now have the basis for a great, embedded CSS link menu page for browser use.
Here is the result:
http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/
Here is the code:
http://jsfiddle.net/wreckanoid/zV9Sd/
.wrapper
{
position:relative;
background-color: #e7ecfa;
width: 90%;
margin-left:15%;
margin-right:15%;
height:auto;
display: block;
overflow:auto;
border:inset .5em #ccffff;
margin: 1em auto;
box-shadow: 0 0.3em 1em #000000;
}
.div_body_side1
{
float: LEFT;
position:relative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display: block;
margin-left: 2.5em;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
white-space:normal;
clear:none;
}
.div_body_side2
{
clear:none;
float:left;
position:reative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display:inline;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
}
#div_category01, #div_category02, #div_category03, #div_category04, #div_category05, #div_category06, #div_category07, #div_category08, #div_category09
{
background-color: #eff5fb;
margin: 1em 1em;
width: auto;
display: block;
border:ridge 6px #ff3333;
box-shadow: 0 0.3em 1em #000000;
position:relative;
clear:both;
}
.center
{
text-align: center;
}
.right
{
float: right;
padding-right: 20px;
color: #cc6600;
}
body
{
margin:0;
padding:0;
}
h1
{
text-align: center;
}
h2
{
text-align: center;
}
img.center
{
display: block;
margin: 0 auto;
}
a
{
color: blue;
padding-left: 20px;
}
Here is the HTML:
</head>
<body>
<div class="wrapper">
<H1> Test Bookmarks Menu</H1>
<a href="http://www.qut.edu.au" >
<IMG SRC="http://www.tils.qut.edu.au/graphics/logo.gif"
BORDER="4" title="QUT logo" alt="QUT logo" class="center" /></a>
<div class="div_body_side1">
<div id="div_category01">
<H2>CATEGORY 1 HEADER</H2>
<br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category01 -->
</div><!-- close div_body_side1 -->
<div class="div_body_side2">
<div id="div_category05">
<H2>Category 5 Header </H2>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category05 -->
</div><!-- close div_body_side2 -->
Thanks to all you people I feel I'm now getting a grip on this CSS stuff.. ! :-)
I will be adding the 'title' tag to all the links, too.
Cheers.
CSS:
.share {
width: 150px;
height: 20px;
background: #000;
float: right;
white-space: nowrap;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 3px;
background-color:rgba(255, 255, 255, 0.5);
border-bottom-left-radius: 5px;
box-shadow: 0px 0px 10px #888;
vertical-align: top;
}
HTML:
<div class="share">
<div class="fb-like" data-href="http://bronies.info/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" style="width:47px; overflow:hidden; top:-3px; left:3px;"></div>
Tweet
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" style="width:32px; overflow:hidden;"></div>
</div>
Chrome, Safari:
Internet Explorer, Firefox, and Opera:
If you can see what I did in my HTML style property, I used top:-3px, and I did this before testing my website out on other browsers (Chrome is my primary web browser). I used top because a quick Google search led me a page instructing me to do so. Now that this solution doesn't work, how would I adjust it to align and work on all web browsers?
My solution is:
.fb-like.fb_iframe_widget span{
vertical-align: top !important;
}
You should remove top:-3px; completely. Because you don't have position:relative;, which is required (something other than static) to activate positioning, then Webkit (Chrome, Safari) is correctly ignoring it, but Internet Explorer, Firefox, and Opera are mistakenly honoring it (-3px shift).
EDIT:
From the comments...
Facebook's script adds a <span> inside your <div> which then triggers a CSS rule they also provide: .fb_iframe_widget span { vertical-align: text-bottom; }. I suggest adding float: left; to all three of your <div> tags so they will not share a common flow (or baseline).
try using top: auto and look at the result, check and see if it is in the same position in all browsers. If it needs to be aligned virtually then use bottom: 3px; (or any appropriate value that suites your need)
do not forget you have to position:relative; to your code
so the final styling for the facebook button should look something like this :
width:47px; overflow:hidden;position:relative; top:auto; bottom:3px; left:3px;
I suggest using display: inline-block; and vertical-align: middle; for container of Facebook button ...
I added vertical-align: text-bottom; to the <span> enclosing each button (to match what Facebook does), and everything lines up perfectly in Chrome, Firefox, and IE. (My spans also have display: inline-block if that matters.)
Try adding this to your "share" div. I don't know how it looks on other browsers but it seems to make things line up in Chrome.
font-size: 0.1px;
I ended up wrapping each button in their own div, and setting the div to
display:inline-block; white-space: nowrap; vertical-align:top;
and then added the following to the facebook specific div:
#facebookButton > div > span {vertical-align:baseline;}
Adding the following style to my css aligned the facebook share button with other social icons.
.fb_iframe_widget{vertical-align:top;}
This is my solution: Wrap each social button by an inline-block element. And each social button has display attribute is block
HTML
<div class="social-share clearfix">
<div class="social-share-item">
<div id="fb-like" class="fb-like" data-href="{url}" data-layout="button_count" data-size="small" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div class="social-share-item">
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
</div>
<div class="social-share-item">
<div class="g-plus" data-action="share"></div>
</div>
</div>
CSS
.social-share {
display: block;
background: #f9f9f9;
padding: 0.2em 0.4em;
margin-top: 1em;
}
.social-share-item > * {
display: block;
float: left;
}
.social-share-item {
display: inline-block;
}
I was having the same problem with mobile browsers and solved it with the following:
.fb-like span{
vertical-align: initial !important;
}
I want to have an horizontal ruler with the following characteristics:
align:left
noshade
size:2
width:50%
color:#000000
If the above attributes were not deprecated, I would use:
<hr size="2" width="50%" noshade style="color:#000000" align="left" />
I'm now thinking of using the style attribute only. Are there any tricks to make the HR render the same in several browsers?
EDIT:
From the answers, I remade my <hr /> tag to:
<hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/>
However, in Firefox, the text-align:left property seems to have no effect, as the horizontal rule appears centred. It works fine in Opera and IE, though. I experimented my code here:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test
Any trick to make it left-aligned?
In 2015, most browsers seem to render HR as a block element with zero height and 1px inset border. You can change the properties like this:
p { font: italic large serif; text-align: center; }
<p>hr size="2" color="palevioletred" width="50%" align="left"</p>
<hr style="border: 1px solid palevioletred;
margin-right: 50%; ">
<p>hr size="2" color="palevioletred" width="50%" align="right"</p>
<hr style="border: 1px solid palevioletred;
margin-left: 50%;">
<p>hr size="1" color="palevioletred" width="50%" align="center"</p>
<hr style="border-width: 1px 1px 0;
border-style: solid;
border-color: palevioletred;
width: 50%;
margin-left: auto;
margin-right: auto;">
To answer your question:
"Any trick to make it left-aligned?"
I would just add 'display: inline-block;' to the style attribute in your previous code.
Your completed code would look like this:
<hr style = 'background-color:#000000; border-width:0; color:#000000; height:2px; lineheight:0; display: inline-block; text-align: left; width:50%;' />
I tested this in Chrome, IE, and Firefox, and it worked in each. Further documentation and browser compatibility can be found here: CSS2 - The Display Declaration
On a side note, it would be best to add this style to an external or internal style sheet instead of adding it inline. This way, you can have a standardized hr element for your entire website, and it keeps your style declarations separate from your document layout.
Why not make a picture, then type this code into CSS???
hr {
height:43px; /*(image height)*/
width:50%;
background-image:url("hr-tag-image.png"); /*Your image file*/
/*Demo: https://heckles.typrograms.com */
}
i'm now starting designing with proper mark-up and organization.
and now, i have problem with my div border. it does not enclose all ot the div's content.
this is my html snippet:
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div>
<img src="img/flower1.jpg" />
<span id="itemName">Ballpen</span>
<br/><span id="itemPrice">Php 90.00</span>
</div>
</div></div>
and here's my css:
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
why doesn't this work?
thanks
See if adding the clearfix class to your div fixes anything
http://www.webtoolkit.info/css-clearfix.html
Without more info, I can only assume that the combination of flower1.jpg and the other contents are wider than 590 pixels. When you specify a concrete width for an element in CSS, it will adhere to that width, even if its contents are larger.
Also, important to point out that the > direct descendant selector is not supported in IE.
Whenever I have trouble like this, I make a minimal self-contained example for testing. This one works perfectly although I've used a local image. When I reduce the width to 50 pixels, the image extends beyond the right-hand side of the border so this may be the problem you're having. What exactly is outside the border in your case?
Based on your further comments that you float:left the image div, the following shows what might be your problem. If you run this code, you'll see the the first bordered div no longer encloses the image. Is that the problem you're seeing?
<html>
<head>
<style type="text/css">
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Including the cleardiv fix (shown here) appears to fix the problem:
<html>
<head>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div class="clearfix" id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Just something to note your image doesn't have a title or more importantly alternate text maybe you haven't got around to this, but its point that needs looking into. Alternate text allows a users to understand what might have been there if for example the images don't load up or they have images turned off. It is also an accessbility issue if user are using a screen reader a description of the image is useful to them.
<img src="img/flower1.jpg" alt="Photo of a Daisy" title="This is a Daisy" />