I have an outer div 'draggable', If we write a very big content, it automatically gets expanded, but the span width remains fixed.
HTML
<div id="draggable" class="ui-widget-content" style="word-break: keep-all">
<span class="too" >
<div id="symbol" style="POSITION: relative;float:right;">
<span class='switch-icons'>-</span>
<a id="switch"><img id="img1" src="images/minus.png" alt="minus" height="15" width="15" ></a>
<a onclick="javascript:closeFullScreenView()"><img src="images/close-bt.png" alt="close" height="15" width="15" ></a>
</div>
<p class="ui-widget-header" style="FLOAT: left">
FileNo.:
<s:property value="fileNo"/>
</p>
</span>
<div id="ajaxContent" style="overflow-Y:auto;">
</div>
</div>
CSS
.too {
width: auto;
display: block;
float: right;
}
The span having class 'too' is not expanding accordingly. I have tried float as well, but its not working.
I tried this and it is working fine for me. It may be some other styles in your code causing this issue. Could you please post a fiddle , so that we can check more on this.
Related
I've been trying to solve this for almost 6 hours just to get this to be responsive on mobile. Will someone please help me? It's really difficult and I really want to finish this homework.
I wanted it to look like this, but mobile responsive: https://imgur.com/kRcHUDJ
I only use HTML and inline CSS, hopefully, there is a solution to this.
<center>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
Demo here: https://codepen.io/anon/pen/WVpwwX
It does appear to be working great on desktop, what I wanted to achieve is given; but when it comes to mobile, the results aren't great. I had to scroll to the right just to see the full image.
My expected output is to have the images stacked up together when viewed on mobile. Thanks guys.
Almost there. The images need to have a max-width set for mobile devices so they will resize automatically instead of flowing off the screen because of their 500px width setting. Set display to inline-block as well:
https://codepen.io/ZorlacMeister/pen/PMpNRK
You can test easily in Chrome. Hit F12, then click on the little icon that looks like two mobile devices standing upright next to each other, then RELOAD the page to see the mobile layout.
HTML
<center>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/blog/"><img data-original="/uploads/button-1.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/testimonials.php">
<img data-original="/uploads/button-2.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
CSS
.img-responsive {
max-width:75%;
display: inline-block;
}
You can use a grid layout to achieve this.
grid-gap: 1em; specifies your padding between elements
center {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
img {
max-width: 100%;
}
<center>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
</center>
I set the image width to 100% and used a class named column on the <ul> to set the box-sizing, float a relative width and display.
I also set the <ul> paddings to 2.5%.
Check it on Codepen or below
.column {
box-sizing: border-box;
float: left;
width: 50%;
display: inline-block;
}
ul{
padding-left: 2.5%;
padding-right: 2.5%;
}
<center>
<ul class="homepageGuide column">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="100%" alt="example one">
</p>
<span class="color-overlay"></span>
</a>
</ul>
<ul class="homepageGuide column">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="100%" alt="example two">
</p>
<span class="color-overlay"></span>
</a>
</ul>
</center>
I have 2 Images as a link In my HTML page and I want to insert text under each image in the <a> tag to be clickable, So I tried this code :
<div align="center" style="margin-top: 150px;">
<a href="shortcode.php" style="padding-right: 50px;">
<img src="img\logo_sh.gif" width="300" height="300"/>
<p> Some text </p></a>
<a href="workorder.php" style="padding-left: 50px;">
<img src="img\logo_wo.gif" width="300" height="300"/>
<p> another text </p></a>
</div>
But I get a style issue like this Image and I want them to be in the center like this Image
Try adding this CSS to your container:
#img_container {
display: flex;
flex-direction: row;
}
I highly recommend you to read this guide about Flexbox. It will
help you to understand Flexbox and it will avoid several headaches
while centering DOM elements.
Here is a working snippet.
#img_container {
display: flex;
flex-direction: row;
}
<div align="center" id="img_container" style="margin-top: 150px;">
<a href="shortcode.php" style="padding-right: 50px;">
<img src="img\logo_sh.gif" width="300" height="300" id="shortcode_icon" />
<p> Some text </p></a>
<a href="workorder.php" style="padding-left: 50px;">
<img src="img\logo_wo.gif" width="300" height="300" id="workorder_icon" />
<p> another text </p></a>
</div>
EDIT: You can also add it as inline style.
<div align="center" id="img_container" style="margin-top: 150px; display: flex; flex-direction: row;">
You can also use flexbox on the anchors to center the content within.
#img_container {
margin-top:150px;
}
#img_container a {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
<div align="center" id="img_container" style="margin-top: 150px;">
<a href="#link">
<img src="https://picsum.photos/300/300" id="shortcode_icon" />
<p> Some text </p>
</a>
<a href="#link">
<img src="https://picsum.photos/300/300" id="workorder_icon" />
<p> another text </p>
</a>
<a href="#link">
<img src="https://picsum.photos/300/300" id="workorder_icon" />
<p> another text that is a litte longer. </p>
</a>
</div>
I'm trying to align three small logos in a footer widget in a single line (using Wordpress, theme is Press coders) I've created a mock up of what I want at:
Image
However everything is skewing beyond belief!
You can see the mess in my footer at:
www.oxfordlifestylecentre.co.uk
I've tried using both a div and a table, my latest table looks like:
<table align="right">
<tr>
<td>
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" />
</td>
<td>
<a href="/hair-and-beauty/>
<img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" />
</td>
</tr>
</table>
You html syntax is wrong. You are missing closing anchors and quotation marks. Try this.
<table align="right">
<tr>
<td>
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" /></a>
</td>
<td>
<a href="/hair-and-beauty/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" /></a>
</td>
</tr>
</table>
Try this, Fiddle
<div class="logos">
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-logo.jpg" alt="Health and Fitness" />
</a>
<a href="/hair-and-beauty/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-logo.jpg" alt="Hair and Beauty" />
</a>
<a href="/nutrition-and-refreshment/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/nutrition-and-refreshment.jpg" alt="Nutrition and Refreshment" />
</a>
</div>
.logos {
float: right;
clear: right;
width: 500px;
height: 50px;
}
.logos img {
height: 80%;
}
.logos a {
text-decoration: none;
}
*Note: For the best effects resize images to same size.
As pointed out by previous answers, your HTML syntax is wrong. However, using tables for that is not the correct approach. You can simply keep the links and images inline and text-align right.
It depends on the complexity of the layout, but display:inline-block may be needed or you might need to wrap certain elements in a container. Either approach is superior to using tables for layout (Why not use tables for layout in HTML?)
HTML
<img src="http://placekitten.com/g/200/300" /><img src="http://placekitten.com/g/200/300" /><img src="http://placekitten.com/g/200/300" />
CSS
body {
text-align: right;
}
a {
margin-right: 10px;
}
http://jsbin.com/wuvoriye/1/edit
Ok so where to start:
1: dont use a table.
2: dont use a table.
3: you get the picture here....
Now for the fix:
I have left comments into it for you so to explain what I did.
I put in inline style for you so just add it to your css file.
<section class="footer-widget-container">
<div id="footer-widget-area" class="inside widget-area">
<!-- Social Media Div First -->
<div id="pc_info_widget_designfolio-pro-3" class="widget pc_info_widget" style="width: 40%; float: left;">
<!-- simple p tag with a class is all that needed -->
<p class="phone" style="margin: 0; padding: 0;">
(949) 867-5307
</p>
<!-- keep it simple: list items floated left + you can now just add as many as you want -->
<ul style="float: left; margin: 0; padding: 0;">
<li style="float: left; list-style: none;">
<a class="sm-icon" target="_blank" href="http://www.facebook.com//lifestyle-center">
<img width="32" height="32" alt="Facebook" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/facebook.png">
</a>
</li>
<li style="float: left; list-style: none;">
<a class="sm-icon" target="_blank" href="http://twitter.com//lifestylecentre">
<img width="32" height="32" alt="Twitter" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/twitter.png">
</a>
</li>
</ul>
</div>
<!-- Logo Div Second -->
<div id="text-8" class="widget widget_text" style="width: 60%; float: left;">
<div class="textwidget">
<!-- Dont use tables unless its table data | Simple ul list itmes float left again -->
<ul style="float: right;">
<li style="float: left; list-style: none;">
<a href="/gym/">
<img alt="Health and Fitness" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg">
</a>
</li>
<li style="float: left; list-style: none;">
<a href="/hair-and-beauty/">
<img alt="Hair and Beauty" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-1.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
do you know how to remove div when it´s inside of another div? I need to remove div "2" and this isn´t working:
#media all and (max-width: 600px)
{
#zmiz { display:none; }
}
<div class="row clearfix">
<div class="fwImage col span_6">
<div class="ahoj" style="position: absolute; width: 80%;">
<div class="col span_4 logo_shift" style="line-height: 21px; ">
<h1>Certifikát</h1>
<p>)ily linde.Yo.</p>
<p>Sc.</p>
<p>St Gic, ad.</p>
</div>
</div>
<div id="gallery-t-group" class="royalSlider rsDefaultInv">
<div id="zmiz">
<a class="rsImg" href="gal/blank.png"><img class="rsTmb" width="56" height="56"src="gal/p.png" /></a>
</div>
<a class="rsImg" href="gal/certifikat1.jpg"><img class="rsTmb" width="56" height="56"src="gal/certifikat2.jpg" /></a>
<a class="rsImg" href="../img/full-width/medium/2.jpg"><img class="rsTmb" width="56" height="56" src="gal/kabel.jpg" /></a>
</div>
</div>
</div>
Thanks
Your id must start with a letter (at least for this CSS problem, even if theoretically in HTML5 it's not mandatory). It works if you fix that :
<div id="a1" class="1_5">
<div id="a2">
<a class="2_5" href="a.png"><img class="3" width="1" height="2" src="b.png" />AAA</a>
</div>
</div>
#media all and (max-width: 600px) {
#a2 {display:none;}
}
http://jsbin.com/ehuker/1/edit
Note that even if now HTML5 ids are supposed to be less constrained, there are still many tools, old browsers, and so on which don't work well if you don't follow the old HTML4 naming rules.
Your code works on fiddle. Also, tidied it up for you:
<div class="row clearfix">
<div class="fwImage col span_6">
<div class="ahoj" style="position: absolute; width: 80%;">
<div class="col span_4 logo_shift" style="line-height: 21px; ">
<h1>Certifikát</h1>
<p>)ily linde.Yo.</p>
<p>Sc.</p>
<p>St Gic, ad.</p>
</div>
</div>
<div id="gallery-t-group" class="royalSlider rsDefaultInv">
<div id="zmiz">
<a class="rsImg" href="gal/blank.png"><img class="rsTmb" width="56" height="56"src="gal/p.png" /></a>
</div>
<a class="rsImg" href="gal/certifikat1.jpg"><img class="rsTmb" width="56" height="56"src="gal/certifikat2.jpg" /></a>
<a class="rsImg" href="../img/full-width/medium/2.jpg"><img class="rsTmb" width="56" height="56" src="gal/kabel.jpg" /></a>
</div>
</div>
</div>
Most likely, what's happening is you're overwriting this display:none; rule somewhere else in your CSS or your JavaScript.
If you post a link to your code, or your full code and full CSS, I will take a look.
Edit: This answer addressed a sample code snippet which had div id="2".
Dystroy's answer is correct: by specification an ID cannot start with a number; but if for some reason you can't change the ID (maybe all your JavaScript is dependent on it or something), this workaround does work:
CSS
---
#media all and (max-width: 600px) {
[id='2'] {
display: none;
}
}
HTML
----
<div id="a1" class="1_5">
<div id="a2">
<a class="2_5" href="a.png"><img class="3" width="1" height="2" src="b.png" />AAA</a>
</div>
</div>
Working demo here (drag the 'result' section wider to see the div appear).
Here's the rendered html:
<div style="padding-left: 50px; vertical-align: middle;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
general css:
div {
font-size:smaller;
padding:5px 5px 0 0;
float:left;
}
Here's what the design looks like in firebug:
I would like the text NONE to align at the top, just the way the image (checkbox) is aligned. Any ideas on how to do this with css?
vertical-align: middle doesn't do what you think it does.
<div style="padding-left: 50px;">
<strong style="float: left;">NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
Couple of things:
Since you know the height of your image, to get the exact alignment you want, try setting a line-height. You can set it at 15px or 1 (just 1, no unit), and see which you prefer.
Change your value for vertical-align. It's meant to control the vertical alignment of two inline (or inline-block) items next to each other. Which is what you have when you have strong next to img, it's just that middle doesn't look the way you want. Other values that work reasonably well cross-browser are baseline, top, bottom and sometimes text-top or text-bottom.
Beyond that, you can set both the img and the strong to block and use float, height, and padding.
Examples:
<div style="padding-left: 50px; line-height: 15px;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
<div style="padding-left: 50px; vertical-align: top;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
Others have already down an example with floats.
The issue is that the line height on the top is going to conform to however high your image is. To compensate, you can put the "none" text in a block element, and then set your alignment in there. Here would be an example:
<div style="padding-left: 50px; vertical-align: middle;">
<div style="height:15px; width:50px; float:left;">NONE</div>
<img style="height:15px; width:15px; float:left;" src="images/Checked.gif" alt="" />
<br style="clear:both;" />
<span style="font-size:larger;">DEFAULT</span>
</div>
From here you can play with the padding and alignment within that div around the none text.
These answers didn't work for me, here's how I got it working...
<div style="line-height:0px;">
<span style="vertical-align:middle;">test</span>
<img src="myimage.png" style="vertical-align:middle;" />
</div>
give the container element (in my example, the <div>) element a line-height attribute value of 0px; then everything you want on the line should have a vertical-align:middle; style applied.
Tested in Chrome, FF, IE7+...