I have two columns with the left being some text with a background color and the right being an image.
Full Example: http://jsfiddle.net/kvFG4/
Here's the basic structure:
<div class="container">
<table style="height:auto;">
<tbody>
<tr>
<td align="center" style="width:35.7143%">
<div data-cycle-fx="fade" data-cycle-timeout="5000" data-cycle-speed="2000" data-cycle-slides="li" class="squareMarketingText cycle-slideshow squareMarginTop" id="dnn_squareMarketingTextPane" style="position: relative; height: 548px;">
<li style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;" class="cycle-slide cycle-sentinel">
<div class="squareOrange" style="visibility: hidden;">
<span class="center marketingText" style="visibility: hidden;">
CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO
</span>
</div>
</li>
</div>
<div class="clear"></div>
</div>
</div>
<li style="position: absolute; top: 0px; left: 0px; z-index: 97; opacity: 0; display: block; visibility: hidden;" class="cycle-slide">
<div class="squareOrange">
<span class="center marketingText">
CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO
</span>
</div>
</li>
</div>
</td>
<td style="width:64.2857%">
<img class="plc-logo" src="http://newsite.plcellc.com/Portals/_default/Skins/PLC//images/AllSquares.png">
</td>
</tr>
</tbody>
</table>
</div>
I'd like the text in the left column to be flexible with the right column but the only way I was able to get it to work was with this javascript:
setTimeout(function () {
$(".squareMarketingText").css({ 'height': ($(".plc-logo").height() + 'px') });
}, 500);
Is there away to have the left column be sized right with just .css?
You are using <li> inside a <div> tag.... li tags should always be within <ul> or <ol> tags.
Rest of your code is fine.
Check the Demo
I turned div in to UL & removed the inline css height.
Related
I'm trying to achieve a solution where a horizontal line appears to the left of the text but the text remains centre aligned. Please see image below.
I've also added my mark-up below. I'm currently using Bootstrap 4.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
</div>
Use pseudo-elements to do so:
.sidebar-first-item {
position: relative;
}
.sidebar-first-item:before {
content: '';
position: absolute;
width: 45%;
height: 5px;
background-color: red;
top: 50%;
left: 0%;
}
CodePen: https://codepen.io/manaskhandelwal1/pen/xxEaQYg
First cleanup your html, a <ul> list may not have children other than <li>, <script> or <template> elements (see The Unordered List element). Hence remove the div's inside the <ul> and add their classes to the <li>.
A solution to your design problem is to add a element before and after your anchor elements, size them (width) with a percentage you like and set a min-width for the anchor, so you have a nice responsive layout also on small devices. This creates an equal width red line
If you want the red line to align with the width of the text, you can make your anchor non-breaking white space and a set a padding, so the red line comes as close as defined in the padding towards the text.
.redline,
.spacer {
width: 100%;
height: 3px;
display: inline;
background-color: red;
}
.spacer {
height: 0px;
}
li {
display: flex;
align-items: center;
}
li a {
margin: 0 auto;
border: 0px solid gold;
padding: 0 20px;
white-space: nowrap;
}
li p {
width: 100%; margin:-50px 0 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
<ul>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2 class="sidebar-first-item">About</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Take a look at our marvelous creations</p>
</li>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2>Our Work</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Behind the brand // Meet the team</p>
<li>
</ul>
</div>
This is where a CSS pseudo element can come into play! A pseudo element can be used to place designs before or after an element.
I added a class called horizontal-line to your h2.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="horizontal-line sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
The CSS will look like this.
.horizontal-line {
position: relative;
}
.horizontal-line::before {
content: "";
display: block;
width: 60px;
height: 2px;
position: absolute;
top: 50%;
left: 35%;
border-radius: 30px;
background-color: #DE657D;
}
By adding the pseudo element it will know to place it before any content with that class name. In this case, we are leaving content blank and placing in
https://jsfiddle.net/rc463gb8/1/
I have a List with my users. For example the user "root" can be find with:
.d-list-entry:nth-child(8)
but the Position in the List can change.
Is there an possibility to choose this Element by Tag?
<div class="jspPane" style="padding: 0px; top: 0px; left: 0px; width: 268px;"><div id="user-list-objects" data-role="listview" data-selectable="single" data-auto-bind="true" data-template="userlistentrytemplate" data-bind="source: objects, events: {change: onObjectListClick}" style="width: 100%; box-sizing: border-box; min-height:200px;" class="k-widget k-listview k-selectable" role="listbox">
<div class="d-list-entry">
<span data-bind="text: name">copy of user2</span>
<img id="statusIcon62c3778e-a5bd-4a81-aac5-d1c2a7b4c18c" src="status_offline_16.png" style="position:absolute; right:5px;top:6px" title="Benutzer offline" class="">
</div>
<div class="d-list-entry" >
<span data-bind="text: name">hans#meier.com</span>
<img id="statusIcon0c960a3c-7baa-4103-bb2b-4b66b06b82cd" src="status_offline_16.png" style="position:absolute; right:5px;top:6px" title="Benutzer offline" class="">
</div>
<div class="d-list-entry" >
<img src="ldap_user_02_16.png" style="float: left; margin-right: 5px; margin-top: 8px;" title="Importiert aus LDAP" class="">
<span data-bind="text: name">jondoe</span>
<img id="statusIcone7f5f95e-6340-42e9-9aa8-96b5ef19713d" src="status_offline_16.png" style="position:absolute; right:5px;top:6px" title="Benutzer offline" class="">
</div>
Is my structure.
i want to click the text between the
tag
That´s easy, use Xpath to find the text root then goto the parent (all with xpath), for example in nightwatch would be:
client.useXpath()
.click(".//text()[contains(.,"root")]/..")
I am jumping into a large complex application today and it's a bit daunting.
So, I want to solve the issue locally then find where the solution should eventually be located.
I have square images that come from sources of various sizes. Currently the image fills the div regardless of its dimensions.
<li class="hint-li" data-position="undefined" data-id="551ef3279934asda2e2565" id="551efsfasd8354582e2565" style="background-image: url(http://s3.amazonaws.com/source/558dadasd9a0f3.616asd74.jpg);">
<div class="sold-out hidden">
</div>
<div class="partnered hidden">
</div>
<div class="overlay">
<div class="row">
<div class="col">
<strong>
Thermal bath, aromatherapy, massage
</strong>
<em>
Aire Ancient Bath
</em>
<strong class="hintPrice">
$181
</strong>
</div>
</div>
</div>
<div class="options">
<div class="row">
<div class="col">
<a target="_blank" class="buy" href="http://www.ancientbathsny.com/aire-services/thermal-bath-with-aromatherapy-and-relaxing-30-minutes-massage/">
Buy
</a>
<a target="_blank" class="hint">
Hint
</a>
</div>
<div class="col">
<ul>
<li>
<a class="twitter" target="_blank">
<span class="sprite twitter-alt">
</span>
</a>
</li>
<li>
<a class="facebook" target="_blank">
<span class="sprite facebook-alt">
</span>
</a>
</li>
<li>
<a class="email">
<span class="sprite email">
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
Here is the CSS that effects these image sizes:
.grid>ul>li {
width: 247px;
height: 250px;
background-position: center;
background-size: cover;
display: inline-block;
margin: 0 20px 20px 0;
position: relative;
vertical-align: top;
cursor: pointer;
-webkit-box-shadow: 1px 1px 1px 1px #ddd;
box-shadow: 1px 1px 1px 1px #ddd;
}
I'm trying to center the image within the div and have the remaining space be white space:
I have tried various approaches such as:
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
But it is breaking their format on the page.
How do I get the desired behavior?
As in this JS Fiddle these lines should be in your .grid>ul>li css:
background-position: center center;
background-repeat:no-repeat;
background-size: contain;
background-color:white;
EDIT: My answer is not actually applicable to OP, but I will leave it here in case someone is looking to center img elements as OP described in the title.
Wrap the following class around each img attribute:
.example-wrapper img {
text-align:center;
transform: translateY(-50%);
top: 50%;
height: auto;
max-width: 100%;
max-height:100%;
position: relative;
background-color: white;
}
extra option: "text-align:center;" above can be replaced with:
display: flex;
justify-content:center;
HTML
<div class="example-wrapper">
<img ....>
</div>
I have a loop that shows all the users comments. I'm trying to add a trash icon on the top-right of each comment, but it's putting all the icons at the same place in one div. I don't want the icon to change the position of the comments and that's why I did position absolute, but it's not working.
Loop code:
<div class="col-md-5 all">
<div class="col-md-12 hello">
#foreach($comment as $comments)
#if($comments->image_id == $image->id)
<div id="{{$comments->id}}" class="ajaxrules">
<div class="col-md-2">
<img src="{{$comments->user_avatar}}" class="img-circle buddy">
</div>
<div class="col-md-10">
<h4>{!! $image->user_name !!}</h4>
<p class="left">{!!$comments->body!!} </p>
</div>
<div class="deletecomment">
<i class="fa fa-trash-o"></i>
</div>
</div>
#endif
#endforeach
<div class="addavatar">
</div>
</div>
</div>
css:
.deletecomment{
display: block;
position: absolute;
top: 0;
right: 0;
clear:both;
}
.addavatar, .ajaxrules{
padding-right: 60px;
padding-top: 10px;
}
You need to add position: relative
to .ajaxrules
So the trash icon will be absolute to it's parent
Edit: adding additional information on position absolute/relative
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
I have an img which I want to align at the top right corner. If the window is too small, I don't want the image to overlap the text, but make the window scrollable. So I've made a div width max-width: 1000px;.
This is what I have now
<div style="z-index: -1; width:100%; position: absolute;">
<div style="width: auto; min-width: 1000px; display:inline-block;"></div>
<div style="display:inline-block; float: right;">
<a href="#" id="a_logo_hoek">
<img src="xx.jpg" style="float: right; margin-top:-30px;" />
</a>
</div>
</div>
How about something like this:
<div style="width: 100%; min-width: 1000px; display:inline-block;">
<div style="display:inline-block; float: right;">
<a href="#" id="a_logo_hoek">
<img src="xxx.jpg" style="float: right; margin-top:-30px;" />
</a>
</div>
</div>
Set the div that contains your img to have a min-width of 1000px and a width of 100%.
to make window scrollable use overflow:auto; in that div which contains all of your page elements.
to position the image at top right use position: absolute ; top: 0; right: 0;
and now you dont need to use min-width: 1000px;
here is your code::
<div style="z-index: -1; width:100%; overflow:auto;">
<div style="width: auto;display:inline-block;"></div>
<div style="display:inline-block; position: absolute ; top: 0; right: 0;">
<a href="#" id="a_logo_hoek">
<img src="xx.jpg" style="float: right; margin-top:-30px;" />
</a>
</div>
</div>