I am trying to find the correct way to write text next to an Font Awesome Icon. I would like the text to line up next to the icon, and when the text is lengthened (or the display width is shortened), I would like to to wrap next to the icon in multiple rows of text instead of under the icon.
<div class="row">
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
<h1 id="title">Title
</h1>
<table id="iiij" align="left" border="0" cellpadding="1" cellspacing="1">
<tbody>
<tr class="row">
<td class="cell">
</td>
</tr>
</tbody>
</table>
<div id="header">
<h4>Header
</h4>
<br/>
<div id="box.img">
<i class="fas fa-home">
</i>
<p id="content"> This icon is a picture of a house. I want the text to wrap square so is does not load below the icon. When the display is changed, for mobile users, it jumps below the icon.
</p>
</div>
</div>
<div class="form-container margin-top-40">
</div>
</div>
</div>
<style>#iiij{
width:100%;
}
.fas.fa-home{
font-size:36px;
align-self:start;
float:left;
}
#box.img{
font-size:10em;
color:rgb(32, 61, 133);
padding-left:10px;
float:left;
margin-top:16px;
margin-left:20px;
margin-right:20px;
margin-bottom:16px;
clear:left;
display:inline-block;
}
#title{
color:rgb(32, 61, 133);
margin-top:21.44px;
margin-left:20px;
margin-right:20px;
margin-bottom:21.44px;
}
#header{
color:rgb(32, 61, 133);
margin-top:21.28px;
margin-left:20px;
margin-right:20px;
margin-bottom:21.28px;
}
#content{
color:rgb(85, 85, 85);
margin-top:16px;
margin-left:20px;
margin-right:20px;
margin-bottom:16px;
float:left;
align-self:start;
display:inline-block;
clear:inherit;
}
</style>
https://codepen.io/MSchleicher/pen/wONzPb
I would like the icon to align to the left side of the page, and the text to be next to it, as if they were separate columns of content.
Consider switching #box.img to display as flex.
#box.img {
display: flex;
}
This gives the layout you want. From there, just adjust the padding as needed.
More information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Related
I tried several things but I am out of luck. I need to build a button containing an image and text over a button background image. Also, clicking anywhere inside the button should redirect to a page, for example, google.com. This is how the button should look like
The challenge I am having is that when the button text changes or when the screen size changes, the alignment of the image and the text gets messed up. I want to wrap the button text if it is too large. How do I wrap the button text and still align everything correctly? Also, I want the button width to be the same as I have to build multiple buttons of the same size with varied texts and images. Thank you so much. A quicker solution will be appreciated as I am anxious to see what I am doing wrong. Here is the code I have so far: JSFiddle
<a href="https://www.google.com" style="color: white !important; background-color: #7FFF00;padding: 25px;width: 50px;">
<span style="margin-bottom: 5%;">
<img src="http://placehold.it/30x30" height:100%; style="display: inline-block;" width="30" height="30" />
<span style="display: inline-block;">
<b><font size ="2" color="BLACK" face="Arial">CLICK ON THE IMAGE TO VIEW MORE DETAILS ABOUT THE ITEM </font> </b>
</span>
</span>
</a>
img{
width:30px;
height:30px;
}
a{
text-decoration:none;
color:black;}
#img{
float:left;
}
#img,#text{
display:inline;
}
#main{
margin-top:20px;
width:250px;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}
#container{
margin:15px;
}
div.clickable {
position:relative;
}
div.clickable #mainlink {
position:absolute;
width:100%;
height:100%;
}
<div class="clickable">
<a href="www.google.com" id="mainlink">
<div id="main">
<div id="container">
<div id="img">
<img src="http://oer.nios.ac.in/wiki/images/thumb/4/47/Thumpsup.png/200px-Thumpsup.png"/>
</div>
<div id="text">
<span>Click on the image to view more about the item</span>
</div>
</div>
</div>
</a>
</div>
before we are displaying 2 kinds of information in site1 one below the other.
1)Product Description 2)Packaging
now we are displaying information in site2 as tabs. after we displaying as tabs. Its not displaying information in full width, you can see white space displaying in right side of information.
I want to remove those white space and display as in site1 once we click on tabs.
.tabs{
display:inline-block;
width:250px;
height:45px;
line-height:45px;
cursor:pointer;
background:orange;
color:white;
font-size:19px;
text-align:center;
}
.tabs:hover{
text-decoration:underline;
}
.tabs.active{
cursor:default;
}
.tabs.active:hover{
text-decoration:none;
}
.tab-text{
display:none;
width:90%;
height:auto;
padding:5%;
}
.tab-text.active{
display:block;
}
phtml
<div id="tab-container">
<div class="tabs active" onclick="changeTab(0)">Product Description</div>
<div class="tabs" onclick="changeTab(1)">Features</div>
<div id="tab-1" class="tab-text active">
<div class="next-content-product">
<h1>Product Description </h1>
<?php echo $_product->getDescription();?>
<div class="size-space">
<h1>Product Size & Space <span class="hidden-sku"><?php echo $_product->getSku();?></span> </h1>
<?php echo $attribute_value = $_product->getData('size_space');?>
</div>
</div>
</div>
<div id="tab-2" class="tab-text">
<div class="next-level-content-product">
<div class="interior-exterior">
<?php echo $attribute_value = $_product->getData('interior_exterior');?>
</div>
</div>
</div>
</div>
Just add below css
.tab-text{
width:100%;
padding:0;
}
You could just remove the width: 90% from .tab-text, this is basically the reason of your problem
.tab-text.active {
display: initial;
}
use this for full display.
I've have the horizontal line start a third way through the webpage, but getting the line to move down a bit (maybe 200-400px?) is giving me a real pain. And whenever i try to use "top:-200px;" within the style element (midline) it just makes half of the line disappear
<html>
<header>
<style>
.divider{
position:absolute;
left:33.3%;
top:0%;
bottom:0%;
border-left:5px solid black;
}
.divider2{
position:absolute;
left:66.6%;
top:0%;
bottom:0%;
border-left:5px solid black;
}
#left {
width:380px;
float:left;
margin-left: 100px
}
#middle {
width:380px;
float:right;
text-align:center;
margin-right: 300px
}
#right {
width:380px;
float:right;
margin-left: 40px
}
#midline{
position:relative;
left:530px;
width:1265px;
height:5px;
background: black;
}
</style>
</header>
<body style="background-image: url(https://www.planwallpaper.com/static/images/Cool-Wallpapers-Background-HD-Wallpaper.jpg);" >
<div id="left">
<font color="white">
<p>
<h1> Greetings!</h1>
</p>
<font size="6", color="white">
<h3>Welcome to my world ;D </h3>
<p>
Heres a little information about me
</p>
<p>
A photo of me VV
</p>
<div id="midline"></div>
<p>
<a href="https://www.facebook.com/shan.kulkarni.9">
<img src=file:///C:/Users/shank/Desktop/Website/02f8a12b-3edf-4a4f-981c-860f7c7c3b07.jpg Width="350" height="500" />
</a>
<p>
Click on it and you'll go to my Facebook
</p>
<p>
Follow me on instagram while you're at it ;o
</p>
</div>
<div class="divider2"></div>
<div id="right">
<h2> My Hobbies </h2>
</div>
<div class="divider"></div>
<div id="middle">
<h2> Favorite Quotes</h2>
</div>
</font>
</body>
</html>
Here is the code:
https://jsfiddle.net/fjzcwfyx/
Leave out the bottom setting and set top: 200px; (not minus, but plus - that's the distance to the top). BTW: top AND bottom in one rule is too much, one of them is sufficient.
I've had page layout made via an Html table in my home page.
the lay out was fine , though i was reading that tables are not the way to go (SEO and maybe not only that)
so i need to use divs, the layout is as follows
(i am in RTL Lang /style /direction)
My Question is
Could anyone Try and simplify how to or give an example for a lay out like that
and in more detailed explained :
i think "my life" was so simple, when i had to understand the structure of a table
so, for illustration purpose take this markup:
<table>
<tr> <td>1</td> <td>2</td> </tr>
<tr> <td>3</td> <td>4</td> </tr>
</table>
here you don't need to think much to analyze that this will be 2 by 2 table
but when it comes to divs i get no results laying them as i plan to
i would like to know how do i make that simple as it was with a table for me .
2 now that i am trying to achieve that layout via divs (no table involved )
and to make it work so that layout will be Cross Browser, meaning will look same
at least for the 3 main browsers IE8&9 / FF / Chrome (only my preference)
thanks in advance
I tried hard to make template like what you want.I hope you will like it.See my layout
by division tag.I am attaching a screen shot as well that is created on the base of
my div logic.I think it will be clear for you.
<div id="main" >
<div style="background-color:Blue; text-align:center; ">
Main banner
</div>
<div style="background-color:Green; text-align:center; " >
Top menu
</div>
<div style="background-color:Gray; text-align:center; width:300px; float:right; height:200px; " >
Right side menu
</div>
<div style="background-color:Red; text-align:center; height:200px;" >
<div style="background-color:Fuchsia; text-align:center; width:300px; float:right; height:100px; ">
contend2
</div>
<div style="background-color:Lime; text-align:center;height:100px; ">
contend1
</div>
<div style="background-color:Aqua; text-align:center; width:300px; float:right; height:100px; ">
contend4
</div>
<div style="background-color:Orange; text-align:center;height:100px; ">
contend3
</div>
</div>
<div style="background-color:Silver; text-align:center; " >
Footer
</div>
</div>
**In case if you want external css then use**
<div id="main" >
<div id="mainbanner">
Main banner
</div>
<div id="topmenu" >
Top menu
</div>
<div id="rsm" >
Right side menu
</div>
<div id="maincontend" >
<div id="c2" >
contend2
</div>
<div id="c1">
contend1
</div>
<div id="c4">
contend4
</div>
<div id="c3">
contend3
</div>
</div>
<div id="footer">
Footer
</div>
</div>
**CSS................**
#Main
{
}
#mainbanner
{
background-color:Blue;
text-align:center;
}
#topmenu
{
background-color:Green;
text-align:center;
}
#rsm
{
background-color:Gray;
text-align:center;
width:300px;
float:right;
height:200px;
}
#maincontend
{
background-color:Red;
text-align:center;
height:200px;
}
#c2
{
background-color:Fuchsia;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c1
{
background-color:Lime;
text-align:center;
height:100px;
}
#c4
{
background-color:Aqua;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c3
{
background-color:Orange;
text-align:center;
height:100px;
}
#footer
{
background-color:Silver;
text-align:center;
}
You can't ask for complete layouts, but I wrote two tutorials that will definitely help you acquire the skill required to make them: How to Position in CSS and Create a Fixed ('Sticky') Footer with CSS.
Check this
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div>
<div id="navigation">
<p>This is the Menu</p>
</div>
<div id="leftcolumn">
<div class="row">
<div>1st block</div>
<div>2nd block</div>
</div>
<div class="row">
<div>3rd block</div>
<div>4th block</div>
</div>
</div>
<div id="rightcolumn">
sfsf
</div>
<div id="footer">
<p>This is the Footer</p>
</div>
</div>
DEMO
HTML-Cleaner has a nice feature to replace HTML tables with DIVs: http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/
Make sure you include the css code supplied.
What's the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image shouldn't have a caption of width 800px.
I would strongly prefer a solution that allows me to update images (with different widths) without changing the CSS or markup.
For reasons beyond my control the image itself will also be floated right, but this should not be too problematic.
The image code is
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
and I can wrap this with HTML/CSS as needed. No JS on this page.
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.
Shameless plug: I blogged about this problem and my solution here, if you're interested.
Something like this: http://jsfiddle.net/QLcRC/ ?
You may use also use the HTML5 figure and figcaption elements and style those as #Wasim suggested.
<figure>
<img src="/test.jpg" alt="a test-image">
<figcaption>Description</figcaption>
</figure>
Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:
#content img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
text-align: center; }
The basic idea is to make one <div> with an <img> tag and <p> tag.
<div class="photo">
<img src="someimage.jpg">
<p>my caption
</div>
Now you simply set two styles. One for the img tag and the other for the p tag for the photo class.
Create a class name it photo:
.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;
padding: 10px;}
Conclusion:
1. A div with an <img> tag and a <p> tag.
2. Div should have one class with different styles for <p> and <img> tag.
Pure HTML/CSS inline styled.
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all;"></div>
<!-- NEXT ROW -->
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="margin-top:0px;
padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all; height:100px;"> </div>
This is a known problem with current browsers. atlavis solution is the most simple. Until all browsers implement figure tag, then Feeela's way would work. But even then it would not be backwards compatible. I searched this issue for 3 days straight and I really hate the guys that made CSS decided to strip tables which were backwards compatible.
You could use the display: table-cell property on the class. But that is not supported by IE 6 or 7.