I am facing an issue, the text in next line is starting right beneath from Icon. But i want that text shall start right beneath under above line of text.
It is appearing as below:
But it shall look like this
HTML for above markup is
<div class="column selected-category-label small-7 medium-9">
<span id="image" class="label-image"><svg class="icon icon-418"
focusable="false"><use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#icon-418"></use></svg> </span>
<span id="category" class="label-category">Lewn og gwld</span>
</div>
CSS markup is
.selected-category-label .icon {
height: 2.5rem;
width: 2.5rem;
stroke: #012F60;
fill: #012F60;
top: 0.3125rem;
position: relative;}
.selected-category-label .icon {
margin-left: -0.625rem;
margin-top: -1.25rem;
}
This might help. Use two inline block level containers and declare the margin on one so as to set the distance between them.
#image {
display:inline-block;
height:30px;
width:100px;
background: silver;
}
#category {
display:inline-block;
margin-left:5px;
text-align:left;
vertical-align:top;
width:70px;
font-size:20px;
}
<div class="column selected-category-label small-7 medium-9">
<div id="image" class="label-image"></div>
<div id="category" class="label-category">Lewn ogasdasdas gwldasdasdasdasd</div>
</div>
Another simple way of achieving this (apart from the inline-block approach, mentioned above) is to use flexbox. If you just add the rule:
.selected-category-label {
display:flex;
}
...then the .selected-category-label container becomes a flex container, and the two spans inside it will be flex items, which should behave the way you require.
Would something like this work?
<table>
<tr>
<td><span id="image" class="label-image"><svg class="icon icon-418"
focusable="false"</td>
<td valign="bottom">Lewn og </td>
</tr>
<tr>
<td></td>
<td valign="top">gwld</td>
</tr>
</table>
Related
I am using Zurb Foundation for page layout. A row on my page needs have some text and then a line that fills the rest of the width, like so:
| Text of Indeterminate Length -------------------------------------- |
I have the desired layout working with <table> and <hr> tags:
<div class="row">
<div class="large-12 columns">
<table style="width:auto;border-collapse:collapse;border:0;padding:0;margin:0;">
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
</div>
</div>
I realize that the use of <table> for layout and <hr> for drawing lines are both generally frowned upon in modern web design. I spent a while trying to get the same layout using <div>, <span>, and <p> and couldn't come up with anything simple and straightforward that didn't require what seemed like an excessive use of Javascript. On top of that, most recommended solutions suggest using things like border_bottom which doesn't give me a nice line in the middle like <hr> does.
So my question is this: is there a straightforward way to do this without <table> or <hr>? Perhaps with some sort of a custom <span> style?
A potential solution could be to give your heading a background style with display:block and width:100% and the text with a white background to hide the line from the containing heading? http://jsfiddle.net/9o74jbLh/
<h3><span>{% block hightide_pagename %}{% endblock hightide_pagename %}
</span></h3>
h3 {
display:block;
position:relative;
width:100%;
}
h3:after {
content:"";
height:1px;
width:100%;
background: #000;
position:absolute;
top:50%;
}
h3 span {
background:#fff;
}
I've seen this design element pop up a few times, and the best way that I've seen it done (which is by no means a perfect way) is to use overflow hidden on a container, float the heading (or make it inline-block), and set the left attribute of your absolutely positioned line element (preferably a pseudo-element so as to keep your markup clean). In effect you get this:
/* stuff to make the demo pretty */
table {
border: 1px solid red;
}
table:before {
content: 'bad way';
color: red;
display: block;
}
.good-ish-way {
border: 1px solid green;
margin-top: 1em;
}
.good-ish-way:before {
content: 'good-ish way';
color: green;
display: block;
}
/* the actually useful stuff. */
.good-ish-way {
overflow: hidden;
}
.good-ish-way h3 {
position: relative;
display:inline-block;
}
.good-ish-way h3:after {
content: '';
width: 100%;
position: absolute;
left: 100%;
height: 1px;
background: #777;
width: 1000%;
top: 0;
bottom: 0;
margin: auto 0 auto 0.3em;
}
<table>
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
<div class="good-ish-way">
<h3>Text of Indeterminate Length</h3>
</div>
The only major problem with it is the 1000% part. I've seen other devs use a large pixel value, but the thing is, you'll never know if it's enough. You could use 100vw, but then there are some compatibility issues with older browsers.
Demo for you to play around with it: http://jsfiddle.net/uru17kox/
Edit: Oh! and here's where I first saw this method illustrated in case you want a different spin on it. https://css-tricks.com/line-on-sides-headers/
How can I get a line, text and then a line in a straight line?
code. Here is the jsfiddle of my html. I use inline property to make them appear in a straight line. But they do not change.
How to do so that they appear like
---------------------- About Me ---------------------
(^^dotted line above should actually be single line.)
Use this -
#about_me1 hr, #about_me1 h3{
display: inline-block;
vertical-align: middle;
}
Here's updated Fiddle
Try this and have a look to display:inline-block in style
<header id="about_me">
<div id="about_me1">
<hr size="5" align="left" color="black" style="display:inline-block;width:30%;">
<h3 style="display:inline;">About Me</h3>
<hr id = "line" size="5" align="left" width="30%" color="black" style="display:inline-block;width:30%;">
</div>
</header>
Use only one element to show border, which will work in every resolution and reusable:
<header id="about_me">
<div id="about_me1">
<h3><span>About Me</span></h3>
</div>
</header>
#about_me1 {
border-top: 2px solid #FF0000;
position: relative;
margin-top:15px;
}
h3 {
position: absolute;
top: -18px;
text-align:center;
width:100%;
padding:0;
margin:0px;
}
h3 span {
background:#fff;
display: inline-block;
padding: 5px;
}
Demo
In a responsive design website, I need to show four links presented side-by-side and have the collection of those 4 links enclosed within a self-resizing border. If all four links can't all fit horizontally on one line without overwriting each other, those links that can't fit should drop down to subsequent lines and the bounding border box should increase in size.
My main problem is that the bounding box... doesn't surround the links or resize properly. What am I doing wrong?
Here's the code and CSS that I've tried: http://jsfiddle.net/K3jyD/
HTML:
<div class="boundingbox">
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number One" href="http://www.abc.com/1/"><span><strong>NUMBER ONE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Two" href="http://www.abc.com/2/"><span><strong>NUMBER TWO</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div><a title="Link Number Three" href="http://www.abc.com/3/"><span><strong>NUMBER THREE</strong></span></a>
</div>
</div>
<div class="boundeditem">
<div style="text-align: center;"><a title="Link Number Four" href="http://www.abc.com/4/"><span><strong>NUMBER FOUR</strong></span></a>
</div>
</div>
</div>
CSS:
.boundingbox {
border: 1px solid red;
padding:10px;
margin:10px;
clear:both;
}
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
float:left;
padding:10px;
}
.boundeditem div {
text-align: center;
}
.boundeditem a {
text-decoration: underline;
}
I am not permitted to use jquery or external javascript libraries other than plain old html and css on this project.
The float:left is bringing your links outside the bounding box. Try this instead:
.boundeditem {
width:25%;
min-width:25%;
max-width:25%;
display: inline-block;
padding:10px;
}
If you want four links next to each other rather than three, make the width slightly smaller than 25% and put the padding in the div inside boundeditem rather than boundeditem itself.
.boundeditem {
width:24%;
min-width:24%;
max-width:24%;
display: inline-block;
}
.boundeditem div {
text-align: center;
padding: 10px;
}
add this to the .boundingbox
.boundingbox {
position: absolute;
height: auto;
}
Not sure if that's exactly what you're looking for.
I am trying to put 2 lines of text next to an image, sort of like this
_________
| | Line one of text
| image |
| | Line two of text
---------
This is the code that I have so far
<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span></p>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
.banner img {
float: center;
margin: 5px;
}
.banner span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
.banner .ban2 span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
But currently it does this:
_________
| | Line one of text
| image |
| |
---------
Line two of text
I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.
There's no such thing as float: center; You can choose either left, right, or none.
http://jsfiddle.net/vd7X8/1/
If you float: left; on the image it will do what you're after.
If you want it centered, then you're going to have to wrap the image and the text in a container, fix the width of the container and do margin: 0 auto; on it, then continue to have your image floated--except it will be constrained by the wrapper.
Here is my demo which have using float and overflow with some explain
.div1 {
border: 3px solid #0f0;
overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements"
}
.img {
float: left;
width:100px;
height:100px;
background: #000
}
.div2 {
float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
}
<div class="div1">
<img class="img"/>
<div class="div2">
<p> Line 1 </p>
<p> Line 2 </p>
</div>
</div>
<p>Next elements</p>
Hope it help
Here is a snippet using a svg so you can test it anywhere.
.img{
float: left;
margin-right:1rem;
}
<div>
<svg class="img" width="50" height="50" >
<rect width="50" height="50" style="fill:black;"/>
</svg>
<p>
Line 1
<br>
Line 2
</p>
</div>
I know this post is old but wrap your element in a div and apply the vertical-align:top to this div and you're done.
Check it. It is well defined css.
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
img, span {
float:left;
}
.banner img {
float: center;
margin: 5px;
}
[class="ban1"]{
font-size: 17px;
position:relative;
top:50px;
left:11px;
}
[class="ban2"] {
font-size: 17px;
position: relative;
left: -97px;
top: 74px;
}
</style>
</head>
<body>
<div class="banner">
<div class="wrapper">
<p><img src="span.png"><span class="ban1">Line one of text</span>
<span class="ban2">Line 2 of text</span>
</p>
</div>
</div>
</body>
</html>
I know this is old post, but still wanted to say that not only float will do it, the <img> tag has a built-in attribute called align="left" which does that as well
<p>
<img src="smiley.gif" align="left"><span>Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span>
</p>
Fiddle: http://jsfiddle.net/356akcoy/
I suggest using the old tables that works great. In terms of CSS it is just needed to add the vertical-align: top property.
<table>
<tbody>
<tr>
<td class="img-container">
<img src="https://img2.gratispng.com/20180324/sbe/kisspng-google-logo-g-suite-google-5ab6f1f0dbc9b7.1299911115219389289003.jpg"/>
</td>
<td class="content-container">
<span class="description">This is a very long text that creates multiple lines with the image at left side</span>
</td>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/fypa0k4w/
How can I have my text between an <HR> line?
For example: http://jsfiddle.net/VrvvX/
<div id="outerDiv">
<button id="myButton">Do This</button>
<br>-----------or do something else-<br>
<table id="mytable">
<tr>
<td>Blah:</td>
<td><select id="foo"></select></td>
</tr>
<tr>
<td>Blah:</td>
<td><select id="foo"></select></td>
</tr>
</table>
Rather than having ----- I'd like to have a pretty <hr> tag which works like a separator between the button and the table.
Set two <hr/> tags to display: inline-block and put a width on them with the text in between. Like this fiddle. Though you may want to adjust the positioning of it.
In addition to Tomás solution, you could create a HR class and add content: attr(data-content); to it. And then use the following HTML <hr class="hr-1" data-content="CONTENT HERE"/>.
This way you can fill in the content through HTML rather than CSS.
Fiddle:
https://jsfiddle.net/xqeuzrg7/
You could do something like this :
<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
Do this
</div>
Of course you can adjust width or play with padding: 0 ?px;
EDIT :
If you want to hide background under the title you can do :
<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
<span style="background: white;padding: 2px;"> Do this</div>
</div>
I think this is not the best practice to do this but you can use this css for the <hr/> tag and it will properly work:
hr {
padding: 0;
border: none;
border-top: 1px dashed #CCC;
color: #333;
text-align: center;
font-size:12px;
}
hr:after {
content:"or do something else";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
I have updated your example, see if this is what you want:
http://jsfiddle.net/VrvvX/146/