This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have the following code (generated by Drupal; I have no control over it.)
<div class="spacer">
<div class="region region-home-ad-banner">
<div id="block-views-banner-ad-block-block" class="block block-views contextual-links-region">
<div class="contextual-links-wrapper">
<ul class="contextual-links">
<li class="views-ui-edit first">
Edit view
</li>
<li class="block-configure last">
Configure block
</li>
</ul>
</div> <!-- end contextual-links-wrapper -->
<div class="content">
<div class="view view-banner-ad-block view-id-banner_ad_block view-display-id-block view-dom-id-542147d83a500d1c31244e2e2a583562">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-ad-image">
<div class="field-content">
<a href="http://www.externallink.com" target="_blank">
<img src="expo-home-page-banner.jpg" width="912" height="100" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div> <!-- end content -->
</div> <!-- end block-views-banner-ad-block-block -->
</div> <!-- end region-home-ad-banner -->
</div> <!-- end spacer -->
I have this css that works:
.spacer img{
background: #ffffff;
border:5px;
margin-left: 0px;
padding-top: 30px;
padding-bottom: 20px;
}
I need to apply a background style to the div with the class "region-home-ad-banner", so I tried this:
.spacer>div.region-home-ad-banner {
background: #ffffff;
}
According to Firebug, that selector isn't being applied at all. It's not being overwritten by something with higher priority, it just isn't happening at all.
Why would .spacer img find what it needs to, even though the img tag is buried in multiple levels, but .spacer>div.region-home-ad-banner isn't finding the div that's the immediate child of .spacer?
EDITED TO ADD SCREENSHOT
This can be due to several reasons:
Caching:
Open the CSS tab in firebug, choose the CSS file, and make sure that rule is available in your CSS.
In that case, clear your cache (sometimes CTRL + F5 are not enough) and retry.
Typo:
Make sure you don't have any typo errors, open the console in firebug and check for warnings. Or open the Error Console in Firefox. (Tools--> Web Developer --> Error Console)
It can be a typo from a previous rule, for example, forgetting to put a closing curly bracket (}) will break your following rules.
From the structure of the HTML generated by drupal and the fairly unique class you are trying to use it looks like you don't need the direct descendant selector ">" and could try not using it:
.spacer div.region-home-ad-banner {
background: #ffffff;
}
However I see no reason why that selector should not work.
Related
Sorry for my English...
My code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="product-grid">
<div class="product-image">
<a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<p class="title">Mochila doble tirantes Violeta</p>
</a>
</div>
<div class="price">$16.00</div>
<div class="div-zoom">
<span class="zum-warenkorb">zum warenkorb hinzufügen</span>
<a href="#">
<i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
</a>
</div>
</div>
<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body">
put here, whaterver you want
</div>
</div>
</div>
</div>
</div>
</div>
I to want the modal window open beside from original image.
I tried with flex in <style>,
.modal-content {
/* Styles to make the modal visible */
display: flex !important;
opacity: 1 !important;
margin-top: 500px;
}
.modal-dialog {
justify-content: left !important;
}
.modal-content {
width: left !important;
}
But because of modal open per default at the top, to come this image,
I to want which modal centred the open window and it open besides from the original image.
Can please someone help me with this problem, Thanks!
What you want is not easily achievable, as Bootstrap modal wasn't developed for this purpose. That's not to say it can't be done, but rather that there are better UX solutions than trying to crowbar a modal into this UI behavior.
That's because Bootstrap modal is designed to completely ignore the layout of the page over which it renders and to occupy the entire viewport. It also disables scrolling on the page while it's open and it creates a backdrop at <body> level which covers the entire page.
A better approach for your use case would be to dynamically inject the product into the modal and display it there.
Another possible solution is to use a Bootstrap popover (which was pretty much designed for your use case - a "modal" relative to a particular element). Think of it as the result of breeding a tooltip with a modal. But the more it is like a modal, the bigger UI problems it's going to generate.
In my opinion, popovers break a lot of UX best practice principles and typically require a lot of fixes/workarounds for various device + platform combos. Overall they tend to make your application more brittle, your code less flexible, so I strongly advise against using them.
As far as I'm concerned, the only decent solution is to disable popovers on mobile devices and provide a mobile-friendly alternative (accordion, modal, drawer). But, if you're gonna do that, why not try to be consistent and provide the same alternative on desktops as well, adapted to the extra available space?
If you need help implementing either solution, please consult Bootstrap documentation for a) dynamically injecting content into modals or b) using popovers.
If you run into any trouble, I suggest you ask a new question focusing that specific problem.
Working on my first project with Bootstrap (and CSS in general).
In the following section, the columns look great on local for xs screen sizes, but on the server, the entire section is squashed over to the right. Can't seem to figure out what's wrong.
<div class="container testimonials">
<h2>What People Are Saying</h2>
<div class="row">
<div class="col-md-1 col-xs-0">
</div>
<div class="col-md-5 col-xs-6">
<div class="quotes">
<blockquote>Extremely helpful! How to Interview is an easy read that hits all the major concerns about interviewing - and how to handle them appropriately. I recommend it to anyone who is trying to land a job.</blockquote>
</div>
</div>
<div class="col-md-5 col-xs-6">
<div class="quotes">
<blockquote>I interviewed at Google twice and didn't made the cut. I interviewed a third time -- trying the techniques in How to Interview -- and got the job. It changed the way I communicate and helped me get the job I wanted.</blockquote>
</div>
</div>
<div class="col-md-1 col-xs-0">
</div>
</div> <!-- /row -->
</div> <!-- /testimonials -->
The problem is excessive padding on the testimonials class:
.testimonials {
/* ... */
padding-left: 190px;
padding-right: 190px;
}
It's not leaving enough room for the content.
Since those rules are coming from a separate CSS file main.css perhaps that file is different on your local server.
Using CSS I am running into trouble getting a div later on the page to show up using the hover command over an img tag. I'm writing the page using Bootstrap 3 - Any idea why this may be a problem? The words in "hovershow" appear at the right spot on the page when they are not originally hiden using CSS which makes me think there's a problem with the command itself.
HTML
<div class="col-md-4 col-sm-4">
<img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>
CSS
.hovershow{
display:none;
}
#Email_Logo:hover .hovershow{
display: block;
}
That's definitely not how CSS works.
The following CSS implies there is an element .hovershow somewhere within #Email_Logo:
.#Email_Logo:hover .hovershow{
display: block;
}
And well... that's not the case. What you want can either be achieved by some easy Javascripting or a change in your HTML 'tree' and CSS.
Here is the link: http://unlockinglg.com/beta/index.html
Basically I want my thumbnails to align with the rest of the content above.
Right now it is skewed to the left.
See video of what I mean by unchecking .thumbnails{marging-left:20px} http://screencast.com/t/4xCmVzWxfr.
I tried over-riding it by .thumbnails{marging-left:0px} but that didn't work.
Thanks
As you can see in firebug, there is another rule that sets the margin-left property. By uncheking a rule, you don't set it to 0, you ignore it (so it looks for other applicable rules).
It may work with margin-left: inherit; and it should work with margin-left: 25px;
But this is not the real problem : .thumbnails behave like a .row so it shouldn't be directly contained in one.
To make it simple, try removing the .row wrapper.
<div class="marketing">
<div class="row">
<!-- ... -->
</div>
<hr>
<!-- no .row -->
<ul class="thumbnails steps">
<li class="span4">
<!-- ... -->
</li>
</ul>
<!-- no /.row -->
</div>
I want to create an optimized structure for following output in HTML.
rite now i m using this structure :
<div>
<div style="float:left; padding:5px;">
<img src="avatar_url">
</div>
<div style="float:left; padding:5px;">
Name <br />
Current Mood
</div>
<div class="clr"></div>
<div align="right">
Online Status
</div>
</div>
but in some cases i have to display thousands of friends on one single page thats why i m trying to optimize the structure and remove unnecessary tags from the code.
Can you not paginate the results?
<div class="user">
<img src="avatar.gif" class="user-avatar" />
<h1 class="user-name">Name</h1>
<h2 class="user-mood">Current mood.</h2>
<div class="user-status">Online Status</div>
</div>
This is technically a few less tags however...
This is quite a bit simpler. Depending on how fancy you need to get, almost everything can be stripped away:
<div class="friend">
<img ... />
<hx>FULL NAME</hx>
<p>Current Mood</p>
<p class="status">Online Status</p>
</div>
The hx part is just a stand-in for whatever level of heading you would want to use for their name.
Here's some very minimal CSS to go with that:
.friend img { float:left; margin-right:5px; }
.status { text-align:right; }
Aside from removing the div around the avatar img (can you set the float/padding on the img element itself?), there isn't a lot you can do.
However, you can optimise the amount of text by creating a class for float: left; padding: 5px and using that class instead of the full style thousands of times.
You can't delete a lot there, but you surely can replace the style attribute with a class one
class="left"
with
.left { float:left;padding:5px; }
And you can also replace
<div class="clr"></div>
with
<div class="clr" />
Anyway, not much will change in the loading times.