I am using bootstrap. This is my code.
HTML
<div class="choose1 hidden-xl hidden-lg hidden-md hidden-sm">
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12">
<table width="100%">
<tr>
<td align="center" style="padding:5px;"><img src="img/app_store.png" alt="" style="height:auto; width:220px;" /></td>
</tr>
<tr>
<td align="center" style="padding:5px;"><a href="#" ><img src="img/google_play.png" alt="" style="height:auto; width:220px;" /></a></td>
</tr>
<tr>
<td align="center" style="padding:5px;"><a href="#" ><img src="img/amazon.png" alt="" style="height:auto; width:220px;" /></a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
And CSS:
.choose1 {
background: url('img/slides/1mobile.png') top center no-repeat;
height: 320px;
border: 1px solid red;
}
When I check the image on small screen, the banner does becomes small, instead it slips out of the div. Please check the live site here on small screen. WHat should I do so that the image transforms as much as the div is.
Try This:
.choose1 {
background: url('img/slides/1mobile.png') top center no-repeat;
border: 1px solid red;
background-size: 100% auto;
}
Related
I have no basic clue about html and and right now am kinda stuck, I need two images side by side around the bottom half part of a email template, thing is no matter what I do I can't get the image to be side by side. there is already a hero image on the email template I am not sure if that's what causing the error. Can you please help me with this or give me some learning metrials so that I can figure this out.
Can you please help me with this or give me some learning metrials so that I can figure this out.
PS: Please don't mind the rickroll video, I added it to replace the link
The below code is how the banner hero image is setup
<tr>
<td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
<a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
<img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
</a>
</td>
</tr>
Use a <table>, it should be compatible with Outlook email client as well. For more on HTML email see this article.
<table>
<tr>
<td>
<a href="#">
<img src="https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0">
</a>
</td>
<td>
<a href="#">
<img src="https://placem.at/places?w=160&h=90&random=1&txt=2&txtclr=fc0">
</a>
</td>
</tr>
</table>
You can do it by several ways. The easiest is use another table in td with two columns, like this:
<tr>
<td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
<a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
<img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
</a>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<a href="#">
<img src="#">
</a>
</td>
<td>
<a href="#">
<img src="#">
</a>
</td>
</tr>
</table>
</td>
</tr>
Don't forget to let me know if it works for you or not.
I would recommend using the display: flex; property, which automatically makes the flow of the content inside a container to a row.
<div style="display: flex;">
<img src="example.com" />
<img src="example.com" />
</div>
I have a problem, when viewing my site from a phone the images become small in width
they only look complete if the text below is long
the images have a dimension: 70px x 70px
code:
<div class="card mg-b-20">
<div style="padding: 8;" class="card-body">
<div style="" class="table-responsive">
<table style="" class="table mg-b-0 text-md-nowrap" cellspacing="5">
<thead>
<tr>
#foreach($subcategories as $subcategory)
<th class="text-center" style="padding: 1px 5px; 1px 1px; font-size: 8px; ">
<a style="color: inherit;" href="{{ route('subcategory-detail',['categorySlug'=>$categorySlug,'subcategorySlug'=> $subcategory->slug]) }}">
<img style="width: 70px; height: 70px;" src="{{url($subcategory->image)}}" alt="">
<p>{{$subcategory->name}}</p>
</a>
</th>
#endforeach
</tr>
</thead>
</table>
</div>
</div>
</div>
I get the images dynamically by: {{url ($ subcategory-> image)}}
How do I make them look complete?
I'm creating a layout using div and table.
<div class="main-container bg-white">
<div class="main-content-container bg-blue">
<div class="logo-container">
<img src="http://thebrainfever.com/images/apple-logos/Silhouette.png" width="100px" height="100px"/>
</div>
<div class="menu-container">
Menu 1 | Menu 2
</div>
</div>
</div>
<div class="main-container bg-white">
<div class="main-content-container bg-yellow">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper">
<tr>
<td style="width: 100%; padding: 0px 5px; background-color: grey;" colspan="2">
Content
</td>
</tr>
</table>
</div>
</div>
https://jsfiddle.net/odtkrumL/
The layout seems OK except there is extra spacing at the top of the table such that the text "Content" is being pushed down a bit (the yellow spacing). How could I remove the extra (yellow) spacing?
As a quick fix add display:block to your .wrapper
.wrapper {
margin-left: auto;
margin-right: auto;
display: block;
}
Fiddle : https://jsfiddle.net/qr7byupa/
Please try this:
.bg-white {
background-color: #ffffff;
display:flex
}
HTML
<table class='titleStatus' id='title'>
<tr>
<td class='lefttop'></td>
<td class='bar'>Punch Data
<img class='minMaxClose' src='images/close.png'>
<img class='minMaxClose' src='images/max.png'>
<img class='minMaxClose' src='images/minimize.png'>
<img class='minMaxClose' src='images/setting.png'></td>
<td class='righttop'></td>
</tr>
</table>
CSS
.minMaxClose{float: right;}
OutPut at IE
Whereas i need output like on Firefox
apply float:left to all images first and then apply float:right to your container containing images
.bar img{
float:left;//for shifting alongside
}
.bar{
float:right;//for shifting entire division to right side
}
http://jsfiddle.net/Am34U/3/ give bar a width of 800px or something, and say you put punch inside a span and give it a span of 300px and float left, and give the span that contains the images a span of 500px and float left too.
HTML
<table class='titleStatus' id='title'>
<tr>
<td class='lefttop'></td>
<td class='bar'>
<span id="punch">Punch Data</span>
<span id="close">
<img class='minMaxClose' src='images/close.png'>
<img class='minMaxClose' src='images/max.png'>
<img class='minMaxClose' src='images/minimize.png'>
<img class='minMaxClose' src='images/setting.png'>
</span>
</td>
<td class='righttop'></td>
</tr>
</table>
CSS
.minMaxClose{
float: right;
}
#close{
background: purple;
width: 400px;
float: left;
}
#punch{
background: orange;
width: 300px;
float: left;
}
.bar{
width: 700px;
background: blue;
}
HTML
<table class='titleStatus' id='title'>
<tr>
<td class='lefttop'></td>
<td class='bar'>Punch Data
<!--[if IE]>
<div class='ico-wrapIE'>
<![endif]-->
<!--[if !IE]>
<div class='ico-wrap'>
<![endif]-->
<img class='minMaxClose' src='images/setting.png'>
<img class='minMaxClose' src='images/minimize.png'>
<img class='minMaxClose' src='images/max.png'>
<img class='minMaxClose' src='images/close.png'>
</div>
</td>
<td class='righttop'></td>
</tr>
</table>
CSS
.ico-wrap{float:right;}
.ico-wrapIE {
position: absolute;
right: 2px;
top: 2px;
}
I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails.
Here's example-
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Add z-index:-1 and position:relative to .content
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
z-index: -1;
position:relative;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Use one of those.
In my case i had to move the html code of the element i wanted at the front at the end of the html file, because if one element has z-index and the other doesn't have z index it doesn't work.
Another Note: z-index must be considered when looking at children objects relative to other objects.
For example
<div class="container">
<div class="branch_1">
<div class="branch_1__child"></div>
</div>
<div class="branch_2">
<div class="branch_2__child"></div>
</div>
</div>
If you gave branch_1__child a z-index of 99 and you gave branch_2__child a z-index of 1, but you also gave your branch_2 a z-index of 10 and your branch_1 a z-index of 1, your branch_1__child still will not show up in front of your branch_2__child
Anyways, what I'm trying to say is; if a parent of an element you'd like to be placed in front has a lower z-index than its relative, that element will not be placed higher.
The z-index is relative to its containers. A z-index placed on a container farther up in the hierarchy basically starts a new "layer"
Incep[inception]tion
Here's a fiddle to play around:
https://jsfiddle.net/orkLx6o8/