I am trying to turn a page responsive by adding bootstrap. However, my inline styles do not work. The style="width:100%" does not work but rather width:30% from external style sheet gets used. Somehow, element.style can been in firebug and it does not include my inline width style.
<div class="col-sm-3" style="border:1px solid blue; text-align: center;">
<div id="rightAds" style="width: 100% !important;border:1px solid green; ">
Following can be seen in firebug:
element.style {
border: 1px solid green;
visibility: visible;
opacity: 1;
}
#rightAds {
border: 0px solid green;
width: 30%;
/* width: 100%; */
float: right;
margin-top: 1px;
margin-right: 10px;
margin-right: 0px;
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #009933;
min-height: 350px;
}
Not sure what is going on. Somehow bootstrap uses external stylesheet's width property for div#rightAds. What is element.style and how can inline width be included in it? I have been searching google for few hours now but not able to solve this problem.
Thanks a lot!
element.style is inline styles....whatever code you write inline will appear in element style
Try adding
.col-sm-3 #rightAds {
width: 100%;
}
Also try including !important if necessary
Also google "css order of precedence" and you will get answer for which css rule get more importance
Remove width: 30%; float: right; from rightAds css definiton and correct dublicate margin-top values that are effecting it (better provide the real css definiton rather than firebug one) and in the div use: <div id="rightAds col-sm-12 pull-right" style="border:1px solid green;">
Related
I try to make this block image with text using Bulma CSS. I've tried a lot of things (relative, z-index, etc.) and I didn't succeed making something great for desktop or mobile. Every time, the text is overflowed or get outside the box. I can't set title character limit, so I try also to have a word-break at a second line if possible.
Here is a sample of what I'm looking for :
Here is my HTML :
<div class="block_article" data-overlay>
<img src="/static/img/{{ article.image }}" alt="" />
<span>{{ article.name }}</span>
</div>
And my current CSS (not working) :
.block_article {
position: relative;
width: 500px;
height: 250px;
}
.block_article span {
position: absolute;
top: 50px;
left: 5%;
width: 100%;
color: white;
text-shadow: 2px 2px black;
font-size: 1.3em;
}
Result :
Is there some tips for that kind of thing, or a Bulma extension for this ?
Thanks for your help !
When using Bulma, have a look at the .hero element: https://bulma.io/documentation/layout/hero/. This might be what you are looking for. As Viira mentioned, you could add your image to the background (using background-image).
Also, learning how to center things (https://www.w3.org/Style/Examples/007/center.en.html) might be useful to you.
Here's my final HTML and CSS for people who are in the same case. It's probably not perfect, but this is a good start...
<div class="hero block_article" style="background-image: url('/static/img/{{ article.image }}');">
<span>{{ article.name }}</span>
</div>
.block_article {
width: 500px;
height: 250px;
background-size: cover;
line-height: 230px;
text-align: center;
border-radius: 10px;
}
.block_article span {
color: white;
text-shadow: 2px 2px black;
font-size: 1.3em;
}
Result :
<div class="titelcontent">
<div class="name">Name</div>
<div class="hzline"></div>
</div>
I want name div and hzline div to auto fit 100% in titelcontent.
The label (for example, Name) will vary in length and I want the red underline to span the remainding space of the titlecontent div.
How do I achieve the following? It is easy to do this using tables but I can't figure out how to do this via span or div.
You can use div like a table by using table-cell.
.titlecontent {
display: table;
}
.name {
display: table-cell;
white-space: nowrap;
}
.hzline {
display: table-cell;
border-bottom: 3px solid red;
width: 100%;
}
See DEMO.
Updated to allow background images to show through
You can make the mark-up a bit tighter by using a pseudo-element as follows:
<div class="wrapper">
<div class="inner">Photoshop</div>
</div>
and use the following CSS styling:
div.wrapper {
color:#82439a;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
line-height: 180%;
background: red url(http://placekitten.com/1000/500) no-repeat left top;
overflow: hidden;
}
div.inner {
position: relative;
display: inner;
color: yellow;
padding-right: 0.50em;
border: 1px dotted yellow;
}
div.inner:after {
content: "\A0";
position: absolute;
bottom: 0;
left: 100%;
border-bottom: 5px solid #d71d00;
width: 1000%;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/wE8bC/
How It Works
The parent element div.wrapper may contain a background image or be transparent and show the background of some ancestor element. You need to set overflow: hidden.
For the label (<div.inner>), set position: relative and then generate a 100% width pseudo-element with a bottom border to serve as an underline. Use absolute positioning to place div.inner:after to the right of <div.inner> (left: 100%) and make the width relatively large. The pseudo-element will trigger an overflow condition but this is taken care of by hiding the overflow in the parent element. You can control left/right spacing using padding.
You can use set the display property to either inline or inline-block. If you use display: inline, it will work in IE7; adjust the line height as needed for styling.
Note that the generated content is a non-breaking space, hex code "\A0".
Support for IE7
If you need to support IE7, you will need a hack if you use inline-block as discussed in a previous question: IE7 does not understand display: inline-block
IE7 also does not support table-cell so some of the other posted solutions will face the same limitation.
Or an alternative to using display: table:
.name {
float: left;
}
.line-wrapper {
display: block;
overflow: hidden;
padding-top: 6px;
}
.hzline {
border-bottom: 3px solid red;
width: 100%;
}
See example.
I've guessed you are looking something like this. Please find my solution based on my understanding about the image you posted.
HTML
<div>
<span>Photoshop</span>
</div>
<div>
<span>Adobe Illustrator</span>
</div>
<div>
<span>3D Max</span>
</div>
<div>
<span>Maya</span>
</div>
<div>
<span>Windows 8 Pro</span>
</div>
CSS
div {
line-height: 150%;
border-bottom: 5px solid #d71d00;
}
div span{
position:relative;
bottom: -10px;
background:#fff;
padding: 0 5px;
color:#82439a;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
}
Please do let me know your feedback. Thanks
I have a little problem in centering elements inside a div. Although the css works fine for Google Chrome, it fails for Internet Explorer.
Say I have a div with id="contactus" and I want everything inside the div to be centred, whether it be a header, para or images. More specifically, I want a header to be centred, which is followed by an underline spanning over the 80% of the width in the div, with centre alignment. Consider this:
<div id="contactus">
<h2>CONTACTS</h2>
</div>
#contactus {
margin-top: 20px;
height: 308px; /*2px for the border on both sides*/
width: 248px; /*2px for the border on both sides*/
background-color: #F0F0F0;
border: 1px solid #A9A9A9;
}
#contactus h2 {
margin:0 auto 0 auto;
text-align: center;
font-family:arial,sans-serif;
padding-top: 10px;
/*this is for the underline after the heading*/
width:80%;
border-bottom:1px solid gray;
}
The header and the underline remain left aligned in IE, but centre aligned in Chrome. How can I rectify that ?
Note: I am using a separate css stylesheet for IE, so the answer may be specific to IE only.
it might be because of doctype Check that you have a valid doctype
try
<!DOCTYPE html>
change like this
#contactus {
text-align:center;
margin-top: 20px;
height: 308px; /*2px for the border on both sides*/
width: 248px; /*2px for the border on both sides*/
background-color: #F0F0F0;
border: 1px solid #A9A9A9;
}
<div id="contactus" align="center">
<h2>CONTACTS</h2>
</div>
I'm working on a basic div and for some peculiar reason, border-radius: 7px isn't applying to it.
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px; // not working
}
To whomever may have this issue. My problem was border-collapse. It was set to:
border-collapse: collapse;
I set it to:
border-collapse: separate;
and it fixed the issue.
For anyone who comes across this issue in the future, I had to add
perspective: 1px;
to the element that I was applying the border radius to. Final working code:
.ele-with-border-radius {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
}
To add a bit on to #ethanmay 's answer: (https://stackoverflow.com/a/44334424/8479303)...
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.
<!-- This will look like the border-radius isn't working-->
<div style="border: 1px solid black; border-radius: 10px;">
<div style="background: red;">
text!
</div>
</div>
<!-- but here the contents properly fit within the rounded div -->
<div style="border: 1px solid black; border-radius: 10px; overflow: hidden;">
<div style="background: red;">
text!
</div>
</div>
JSFiddle:
http://jsfiddle.net/o2t68exj/
Im just highlighting part of #Ethan May answer which is
overflow: hidden;
It would most probably do the work for your case.
if you have parent element than your parent element must have overflow: hidden; property
because if your children content is getting oveflowed from parent border than your border will be visible .otherwise your borderradius is working but it is hide by your children content.
.outer {
width: 200px;
height: 120px;
border: 1px solid black;
margin-left: 50px;
overflow: hidden;
border-radius: 30px;
}
.inner1 {
width: 100%;
height: 100%;
background-image: linear-gradient(#FF9933,white, green);
border: 1px solid black;
}
<div class="outer">
<div class="inner1">
</div>
</div>
For some reason your padding: 7px setting is nullifying the border-radius. Change it to padding: 0px 7px
Try add !important to your css. Its working for me.
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px!important;
}
in your div class="social-box" css
use
float:right
instead of
float:left
Your problem is unrelated to how you have set border-radius. Fire up Chrome and hit Ctrl+Shift+j and inspect the element. Uncheck width and the border will have curved corners.
Now I am using the browser kit like this:
{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
For my case, I have a dropdown list in my div container, so I can not use overflow: hidden or my dropdown list will be hidden.
Inspired by this discussion: https://twitter.com/siddharthkp/status/1094821277452234752
I use border-bottom-left-radius and border-bottom-right-radius in the child element to fix this issue.
make sure you add it the correct value for each child separately
you may include bootstrap to your html file and you put it under the style file so if you do that bootstrap file will override the style file briefly like this
// style file
<link rel="stylesheet" href="css/style.css" />
// bootstrap file
<link rel="stylesheet" href="css/bootstrap.min.css" />
the right way is this
// bootstrap file
<link rel="stylesheet" href="css/bootstrap.min.css" />
// style file
<link rel="stylesheet" href="css/style.css" />
I had to add display: block in my case to make it work, the essential part being that the display must not be inlined; so the element had the following:
overflow: hidden;
display: flex;
border-radius: 0.5rem;
(note: it also works with display: block)
See for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I have a div which contains another div with a background image:
<div class="icePnlGrp graMyTasksHomePanelDiv">
<div class="icePnlGrp graMyTasksHomePanelTitleDiv" id="j_id157:j_id165">
<label class="iceOutLbl graMyTasksHomePanelTitle" id="j_id157:j_id166">PLAN</label>
<!--rest of the code--!>
</div>
</div>
This looks fine on Chrome and Firefox:
But on IE it looks strange:
The CSS classes for those two divs:
.gramytaskshomepaneldiv {
background-color: whiteSmoke;
width: 156px;
height: 150px;
margin-right: 50px;
border-right: 3px #EEE9E9 ridge;
border-bottom: 3px #EEE9E9 ridge;
display: inline;
float: left;
margin-bottom: 15px;
}
.gramytaskshomepaneltitlediv {
background: url('/resources/images/external/navigation_arrow.png');
height: 40px;
margin-top: -30px;
width: 185px;
position: relative;
margin-left: -4px;
}
Can you please give a helping hand? Most of the IE 8 issues I had I've solved using position relative, but here this simply does not work...
Thanks...
Ps: If I do hover on a link on IE, on the same page, on that main div (because the rest of the code contains those links), the image AUTOMATICALLY RENDERS fine... Or if I disable any css property from IE developer tools the page is re-render and the image appears fine...which is really strange, ineded...