I've tried calling the id in css and changing it with important and other options and I've come to not be able to figure out how to make it work.
https://jsfiddle.net/6p0wmpr1/
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 25px;
}
.dialog{
padding:0px !important;
}
<div hidden class="dialog" id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
It's not padding. Its "helper" divs added when you create the modal dialog. Add this to your css:
.ui-resizable-handle
{
display:none !important
}
If the gray box around your ok button bothers you (Because it bothers me), you can fix that with this:
.ui-dialog-buttonset
{
background: white
}
Related
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
<- I mean this dotted border (top-left corner is shown).
It supposed to be a button with link. It looks great, but when I click on it, browser draws a border around it. If I remove the <a> from code and click again, border won't be drawn
CSS:
#button{
padding: 0.5em;
margin: 0 auto;
border-radius: 3px;
background-color: #B3C833;
font-family: 'Consolas',monospace;
font-size: 3em;
display: inline-block;
}
HTML:
<a href="#">
<div id="button">
<span id="pref">http://</span><span id="addr">example.com</span>
</div>
</a>
You need to add this porperty:
a {
outline:none;
}
That border is there for accessibility, and shouldn't be removed. It allows people that are disabled and accessing your site via keyboard to see where the focus is.
Check out outlinenone.com
If you don't mind losing a portion of your traffic, you can remove it anyway with:
a {
outline:none;
}
I need a little help here. I created a larger button on my order page and the bottom gets cut off to close. I need to add a little space on the bottom. I added a 1px border so you can see how it's laid out. You can view the problem here: https://www.evernote.com/shard/s329/sh/a408b2ff-472c-481a-8fb1-b9e48c1205e1/5ddd92e9d940c78a57487e07d6eedcd4
<p><span id="old-price">$199 </span>
<span id="new-price">$147</span>
<strong><font color="#FF0000">
35% off! "Halloween Special" </font></strong><em>Expires Nov 1st.</em>
<p class="cart-btns">
</p>
.products li p.cart-btns a.add-to-cart {
width: 120px;
height: 50px;
background: url(images/add-to-cart.gif) no-repeat;
}
a is an inline object and will not accept a height. Use margin: 5px or put padding:5px in the p.cart-btns {}
You can also just float:left the a.add-to-cart {} to make it ignore the boundaries in a way (takes out of the normal flow of the document).
I'm very new to the whole responsive web design and I'm building simple todo app to learn with angularJS. My trouble now is how can I handle text that is too long and breaks the layout.
Here you can see how it breaks.
The HTML&CSS is now :
note: This is wrapped with <div class="span12">
<li>
<div>
<span class="taskshorter">{{t.TaskName}}</span>
<div class="pull-right">
<span class="label label-info ">{{t.EstimatedTime}}</span>
<span class="label label-important">{{t.EstimatedTimeLeft}}</span>
<i class="icon-chevron-right"></i>
</div>
</div>
</li>
and CSS
.taskshorter {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
width: 20px;
height: 1.2em;
}
But it dosen't seem to work. Should I rather write javascript code to clip the text or Am I missing something that can be easily fixed?
Also I'm using Twitter boostrap fluid layout.
You can't set width on an inline element. Add display:inline-block to the CSS.
A not-so-clean, but easy workaround would be to give the right element the same background as the main page.
.pull-right {
background-color: blue; /* your bg color */
float: right;
box-shadow: -2px 0 4px blue; /* just for smoother "cut" */
}
I haven't tested it, might need some more adjustments. If you put an example into JSFiddle, I could adjust it.
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!