My Problem
We are using Sitecore, a content editor is filling in a rich-text box field.
This rich-text box field gives them an option to put in html to have more control over the content styles. So they decide to put in some CSS.
They provide the html and CSS below. The CSS adding images below relating to .button and .button145x28 do not work.
The odd thing is when we do the same method of adding an image using back-ground image for .cutOffCorner it works.
We are trying to see what would be stopping the below from actually working.
The rich text box control is an asp.net control from telerik. We are on Sitecore version 6.4.1 update 3.
My Code
HTML/CSS
Some of you may notice not all the html is there but if I can get the button image to appear on the link below I am pretty sure I can get it working on the rest of them.
<style>
.GenericSignupCallToAction .button a {padding: 6px 20px 10px 22px; border: none; background-image:url('~/media/Images/Content/Register-generic-page/button_off.ashx'); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}
.GenericSignupCallToAction .button a:hover {padding: 6px 20px 10px 22px; border: none; background-image:url('~/media/Images/Content/Register-generic-page/button_on.ashx'); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}
.GenericSignupCallToAction .button145x28 a {padding: 8px 30px 10px 26px; border: none; background-image:url("~/media/Images/Content/Register-generic-page/button_off_145x28.ashx"); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}
.GenericSignupCallToAction .button145x28 a:hover {padding: 8px 30px 10px 26px; border: none; background-image:url("~/media/Images/Content/Register-generic-page/button_on_145x28.ashx"); background-repeat: no-repeat; width:auto; text-decoration: none; color:#ffffff; font-weight:bold; font-size:13px;}
.GenericSignUpCallToAction .cutOffCorner { background-image:url("~/media/Images/Landing-Pages/MyHiFX/corner_left_top.ashx"); position:absolute; top:-1px; left:-1px; background-repeat:no-repeat; height: 14px; width: 12px; }
</style>
<div class="GenericSignUpCallToAction">
<div class="box">
<div class="cutOffCorner">
</div>
<div class="headerText">
<h1>blah</h1><br /><br />
<p>blahblah</p>
</div>
<div class="button">
Proceed
</div>
</div>
</div>
You can override styles by making them more specific.
textarea .GenericSignUpCallToAction is more specific than .GenericSignUpCallToAction alone.
body .GenericSignUpCallToAction is more specific than most other declarations.
See: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Craziest game of spot the difference:
.GenericSignupCallToAction should be .GenericSignUpCallToAction
This resolved this issue.
Related
I'm working on a website and I have made an image clickable that takes the user to the same image but the full resolution, now the problem is that it generates empty text which is taking up a line and is quite annoying.
So is there a way to fix this preferably with html and css?
Thanks in advance.
This is the image for the problem with the intruder line highlighted, it is the tag with 4px * 20px size.
and the code is as follows streamlined to the relevant bits of-course;
<head>
<style>
.innerBox{
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:5px;
margin-bottom: 10px;
margin-top: 10px;
overflow: hidden;
}
.innerBox img{
width: 320px;
height: 180px;
float:left;
display:block;
padding-left:0px;
padding-right:10px;
padding-top:0px;
padding-bottom:0px;
margin:0px;
}
.innerBox a{
display:inline;
font-family: Noto Sans;
color: rgb(230,230,230);
border-bottom: solid rgba(0,0,0,0) 3px;
text-decoration: underline;
padding-left:2px;
padding-right:2px;
padding-top:0px;
padding-bottom:0px;
}</style>
</head>
<div class=innerBox>
<img src="images/xx.png"></img>
<p>All the text goes here</p>
<p>and also here</p>
<p>as well as here</p>
</div>
see working fiddle. I have changed the <a> element from display:inline to display:block. Also please note that you don't need a closing tag for <img>.
I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?
How I wish that it looked like in HTML:
<div>Dodano: <span>127</span> stylizacji</div>
The effect that I want to get should look like this:
link to Dropbox
You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.
span {
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 21px;
padding-left:8px;
position:relative;
margin-left:10px;
margin-right:-2px;
}
span:after {
content:'';
display:block;
position:absolute;
width:8px;
height:66px;
background:#fff;
top:0;
right:0;
}
Here is an example JSFIDDLE
Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.
Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;
See the example: http://jsfiddle.net/amyamy86/6FaLd/
You can apply styling to the span element.
<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>
<div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding: 27px;">
Dodano:
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span>
stylizacji
</div>
I'm pretty terrible at CSS/design so I'm struggling with some CSS here.
The page looks fine when loaded in a full screen browser at 1920x1080, however, as soon as you minimise or load the page on a mobile device the header content completely loses its placing but the body is fine.
Here's the CSS elements in question:
#header {
background: url(assets/header_bckg.gif) repeat-x ; height:120px;
}
#logo { display:inline-block; float:mid-left; padding:50px 0 0 570px; }
#logo { color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}
#login { display:inline-block; float:mid-right; padding-left:400px; padding-bottom: 7px; vertical-align:middle;}
#login{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:12px; text-transform:uppercase;}
#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }
#avatar_online {
background: linear-gradient(to bottom, #7BAFD6 5%, #506D92 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
background-color: #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_offline {
background: linear-gradient(to bottom, #706C6B 5%, #4E4D4D 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_playing {
background: linear-gradient(to bottom, #9BC861 5%, #789E4C 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#menu {position: absolute; margin-left:550px; top:88px; color:#fff; text-align:center; margin-top:0px;}
#menu ul{ width:800px; margin:0 auto;list-style:none; padding:0; text-align:left;}
#menu ul li{display:inline}
#menu ul a { float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase; background:url(assets/menu_active.gif) no-repeat bottom center; color:#232323; }
#menu ul a:hover {
color: #85B0DF;
cursor: pointer;
text-decoration: none;
}
As always, help is greatly appreciated.
Make sure your CSS and HTML are valid. As others have pointed out, there is no such thing as float:mid-left. Also, if your jsfiddle is indicative of your HTML, you're probably throwing browsers into quirksmode, because your HTML isn't structured properly (your first three tags need to be wrapped in a <head> tag, everything needs to be wrapped in an <html> tag, and the very first line should be <!DOCTYPE html>). Use the W3C's HTML validator and CSS validator to ensure your code is correct. Only then can you begin to fix other issues.
Learn what the various CSS declarations do. While your CSS may be valid, it doesn't mean it's right. This: #avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; } will technically validate once the float part is fixed. However, position: absolute and float are mutually exclusive -- float doesn't work when position is absolute or fixed. It will also help to learn how padding and margin affect the positioning of the element, and how they differ from one another. Finally, vertical-align doesn't work at all unless the element is a table cell, or display is set to table-cell (and the table-related set of display properties has its own quirks, so you can't necessarily just throw display: table-cell on an element and expect it to work a certain way).
Learn how elements naturally behave, so that you can work with them, instead of against them. Make sure you know how block, inline, and inline-block elements behave, and then work with them to get the layout you want, instead of throwing display: inline-block on everything and hoping for the best. The same goes for things like links (which will naturally have cursor: pointer on hover, unless you've disabled it elsewhere). Doing this will substantially clean up your CSS, making it easier to maintain. It may also clean up your HTML, as you find out what wrapper elements you truly need or can do without.
It's a little difficult to tell what the intended result should be at smaller or "mobile" widths, even with the screenshots that you included above.
It looks like there are a number of issues with your HTML, too. Be careful with things like the <font> tag (it's deprecated as of HTML4).
That said, fixing things in your CSS such as float: mid-right and float: mid-left, which are both invalid, should help a bit. Additionally, you might want to investigate CSS positioning - specifically, you'll likely want to use position: relative on your #header div.
Take a look at this slightly cleaned up version of your example - with background colors added to see where the header ends and what space the navigation occupies.
It looks like you have multiple issues but it is hard to tell without seeing your HTML as well. For starters, #menu { margin-left:550px; } is going to be part of the problem if you are trying to align on the left edge.. You should also know that float:mid-right; is not valid CSS. Check out http://www.w3schools.com/cssref/pr_class_float.asp for more information on float.
EDIT AFTER JSFIDDLE
Put your <div id='header'> inside of your <div id='main'> and change your #menu css to be:
`
#menu { margin: 0px auto; top:88px; color:#fff; text-align:center; width:800px;}
#menu ul{list-style:none; padding:0; text-align:left;}
`
Since you already have a width defined on your menu, you can use margin: 0 auto; to keep it centered based on window size. This will allow you to remove your margin-left and keep it from being pushed to the right.
I am trying to make a large button with 2 lines of text that looks something like:
What I want
This is my current JSFiddle showing what I've "accomplished"
I am fairly new to asp.net and programming in general so excuse my poor CSS.
Thanks for any help that anyone can offer.
The HTML:
<div class="bigGreenButton"> <a href="/Liquor/specialorder/supplier-info">Submit a special order request <br />
for information ➧
</a> </div>
The CSS:
.bigGreenButton a{
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
background-color:#60a74a;
color:white;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
padding-left:25px;
padding-right:25px;
text-transform:uppercase;
text-decoration:none;
height:auto;
width:auto;
text-align:center;
}
.bigGreenButton a:hover {
background-color:#cccccc;
}
button {
text-align: center;
padding: 0px 0px 0px 0px;
border: none;
}
Add this to your css:
.bigGreenButton a{
display: inline-block;
...
}
You can see it here.
Change display since there's not a block inside your link and set the width how you want it.
.bigGreenButton a{
...
display: block;
width: 400px;
}
Shown here
I'm currently at a loss concerning this issue. What I'm making is a WYSIWYG editor (much like the one I am using right now) and the problem is the buttons on top. I have made a CSS class of their layout:
.test {
background-color:#d0d0d0;
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
The layout works fine but I am unable to find a proper way to link the class. Take this for example(ignore the JavaScript):
<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">
Problem is that any buttons (<button>, <type="submit> etc) tend to deform the original design, giving it 3-dimensional look and generally making it look more like a button.
My question is, how do I work around this? I've tried to link the class in several different ways but it just won't work.
Picture:
I usually go with:
html:
<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>
css:
.test {
[ ... snipped your style ... ]
position: relative;
}
.test a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
Tweaked your css just a bit
.test{
background-color:#d0d0d0;
border: 1px solid #f5f5f5; //<--add this
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
Works on input or button elements
Here's a FIDDLE with the result.