So I'm editting the CSS and the tab menu has a whitespace: nowrap property, which means it doesn't overlap but it ends up exiting the page. Setting the width of the tab menu itself does nothing even with !important and heirarchy CSS.
Looks like this
http://i.imgur.com/yxblJ.jpg
When I do whitespace: pre, or any of the others they end up overlapping.
Here's the code:
html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 100px !important;
}
#header #header-bottom-left .tabmenu li {
font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
padding: 5px;
margin-right: 16px;
}
Remove
li {
margin-right: 16px;
}
You may try this too
ul,li {
border:0px;
padding:0px;
}
Related
I am trying to change the font-family of my tab and align the text to the center using "font-family" and "text-align" but it isn't working. Here is my code and the image. As you can see the font is not Roboto and the text "Chat" is not aligned properly.
<style>
div#olark_tab{
position: fixed;
right: 0;
bottom:50%;
z-index:5000;
}
#olark_tab div{
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
#olark_tab a{
/*Edit these to change the look of your tab*/
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius:9px;
border-top-left-radius:9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover{
background-color: white;
}
</style>
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg">
Chat
</a>
</div>
</div>
For the font, the font-family declaration works if you try an already-included font, like Arial or Times New Roman. I don't believe Roboto is a default font that you can just include. Have you imported it from somewhere like Google Fonts?
For the text centering: I'm not entirely sure what you mean by "not aligned properly," but it is centered in your example. Both the "Chat" text and the SVG icon are part of the centered element (the <a> tag), so it's those two elements together being centered within the box. (The same distance extends from the "t" to the top and from the edge of the speech bubble to the bottom.) Depending on how you actually want it to be aligned, you may need to target the text or image and align them individually.
The Roboto font is not supported by css and is only available through google. I have added the code to get the font from google and display it in on the tab.
HTML
<style>
div#olark_tab{
position: fixed;
right: 0;
bottom:50%;
z-index:5000;
}
#olark_tab div{
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
#olark_tab a{
/*Edit these to change the look of your tab*/
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius:9px;
border-top-left-radius:9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover{
background-color: white;
}
</style>
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg">
Chat
</a>
</div>
</div>
make your image smaller
div#olark_tab {
position: fixed;
right: 0;
bottom: 50%;
z-index: 5000;
}
#olark_tab div {
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
/* changes */
#olark_tab img{
width: 50%;/* or :75%; make it the much you want */
}
/* changes */
#olark_tab a {
/*Edit these to change the look of your tab*/
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius: 9px;
border-top-left-radius: 9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover {
background-color: white;
}
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg"> Chat
</a>
</div>
</div>
I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.
It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
left: 10px;
position: absolute;
top: 2px;
}
.input-symbol-dollar {
position: relative;
}
.abc-input {
border: 2px solid #c9c9c9;
box-shadow: none;
color: #6b6f72;
font-size: 0.9375rem;
text-transform: none;
width: 100%;
color: #37424a !important;
font-family: "Roboto Regular", sans-serif;
font-size: 16px !important;
font-weight: 400;
height: 42px !important;
padding-left: 17px !important;
display: inline-block !important;
}
label {
color: #37424a;
display: inline-block;
font-family: "Roboto Bold", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>
https://jsfiddle.net/8jdek3zt/5/
It looks like there's a lot of unnecessary code in your example.
Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).
span {
display: inline-block;
position: relative;
}
input {
border: 2px solid #c9c9c9;
box-shadow: none;
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
height: 42px;
padding-left: 20px;
}
span::before {
content: "$";
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
<span>
<input placeholder="0.00">
</span>
Here's an explanation of the vertical centering method for the pseudo-element:
Element will not stay centered, especially when re-sizing screen
The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">
As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:
https://jsfiddle.net/chzk1qgm/1/
.input-symbol-dollar {
position: relative;
display: block;
}
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
position: absolute;
display: block;
height: 100%;
top: 0;
left: 10px;
line-height: 46px; // height of input + 4px for input border
}
Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.
try putting span in div.
<label for="abcInput" class="abc-label">lable filed </label>
<div>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000">
</span>
</div>
.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
<span>$</span>
<input style="border: none;"/>
</div>
I have two .SCSS stylesheets contributing to one website. This is so that i can have a base, and a home stylesheet.
In the base style sheet, div has a float of left, however in the What We Do section i would like there to be no float. i cant seem to fix the issue. Any advice would be greatly appreciated!
Here is the JSFiddle - https://jsfiddle.net/hbyeyv6y/
Here is the Base .scss -
body, html, div, nav, section, ul, li, header { float: left; margin: 0px; padding: 0px; }
Here is the What We Do .scss -
div.whatwedo { box-sizing: border-box; margin: 0 auto; background-color: #366e81; padding: 100px; text-align: center; width: 100%; }
div.whatwedo .inner { float: none; }
div.whatwedo h1 { color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 45px; }
div.whatwedo h2 { margin-top: -15; color: #8e8e8e; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 25px; }
div.whatwedo h3 { margin-top: -15; color: #fff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 20px; }
div.whatwedo p { margin: 0 auto; color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 15px; max-width: 500px; }
div.whatwedo hr { border-bottom: 1px solid #fff; margin-bottom: 50px; width: 100px; }
div.whatwedo div.container { vertical-align: top; display: inline-block; text-align: center; }
div.whatwedo div.container img { margin: 50px 25px 0 25px; width: 231px; height: 231px; }
div.whatwedo div.container p { margin-top: 20px; display: block; max-width: 210px; }
As said, you could do float: none !important; and initial !important; for other rules.
But if you want to write good code, asigning float to body, html and so on doesn't look like a good idea. Float breaks the usual behaviour of the elements and it can lead you to unexpected results. You could add clases like:
.f-left{
float:left;
}
only to the elements you want to float.
.whatwedo is not floating - all it's parents and all it's descendants are though. Setting a float on everything is bad; why do you need to float everything?
Even so, to answer your question - you can unset the float for all .whatwedo's descendants with the wildcard selector ...
.whatwedo * {float: none;}
I made a CSS menu but the individual tabs, or rather a row of tabs, seems to be overlapping each other. I used white-space: pre-wrap with a width on the tab menu itself:
html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 620px !important;
}
#header #header-bottom-left .tabmenu li {
font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
padding: 5px;
margin-right: 16px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
white-space: pre-wrap;
margin-bottom: 20px;
}
In general, don't style the LI for menus, style the A tag and use display:block or inline-block
not sure if this is what you want but I think you may be missing a float: left in your li
code: http://jsfiddle.net/vT5vd/
BTW lists are fantastic for menus and are used so almost exclusively!
The tabs are treated just like a line of text. The line spacing is set to the height of the text, causing the larger tabs to overlap. To correct this just add a
line-height: 1.8;
line to the css file in the tabs list item section. Also. you can put a break or paragraph tag in the list of tabs to control where they wrap to the next line and avoid splitting a tab.
ul.tabs li a
{
font: normal 18px Verdana;
line-height: 1.8;
text-decoration: none;
position: relative;
padding: 0px 8px;
border: 1px solid #CCC;
border-bottom-color:#AAA;
color: #000;
background: #F0F0F0 url(tabbg.gif) repeat-x 0 0;
border-radius: 2px 2px 0 0;
outline:none;
}
When I linked to my external style-sheet, it seems my wrapper styles are broken. If I paste the styles into the head on my index.html, it works just fine, but not when linking to a .css. All other css rules work perfectly either way, only the wrapper style appears to break.
The only rule applied to the wrapper is to center it within the browser, so if there is another reasonable way to accomplish this I'm all ears.
the wrapper css:
#wrapper {
width: 960px;
margin: 0 auto;
}
and the html (minus content):
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
<div id="cont_left">
</div>
<div id="cont_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Any help or advice would be great.
EDIT: here is the full css:
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}
#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}
#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}
#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}
#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}
#nav_bar li {
display: inline;
padding-left: 58px;
}
#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}
#nav_bar li a:hover {
color: #fff;
background-color: #666;
}
.current {
color: #CCC;
}
#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}
#cont_left {
width: 40%;
margin: 48px;
float: left;
}
#cont_right {
width: 40%;
margin: 48px;
float: right;
}
#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}
#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}
#footer_list li {
display: inline;
padding: 18px;
}
#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}
#footer_list li a:hover {
color: #000;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}
EDIT TO ADD: Website is not live, therefore I have no link to provide, sorry. Still in early development stages, got stuck on this issue.
What browser are you using? I've just tried your sample in IE8 and it won't centre at all unless I include the XHTML doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
No idea why, or if you have this or not, but it may help.
View source of the page you are using and click on the CSS document you link you have linked. It should pull up a CSS page with your styles, if not, you're either 1) not linking it correctly or 2) there is a permissions issue on the server.
ADD: Check it in developer tools (F12 -> IE, left-click>inspect Element -> chrome, Firefox).
It will not make a difference whether your css rule is in an external stylesheet or in a <style> tag in head. Things to try;
Validate your css file (will inform you of typos) http://jigsaw.w3.org/css-validator/
Do you have multiple css files? If so, try to include this stylesheet last.
Use firebug (or chrome inspector if you prefer) to inspect your #wrapper element, to see if your definition show up at all (and if its overruled and by what).
I would love to see your entire solution if possible, so i can poke around :)
I have never had this problem before. You may not have the link correct
Make sure that you attached you style sheet correctly:
<link href="Default.css" rel="stylesheet" type="text/css" />
If it is in a folder (say Styles for ex):
<link href="Styles/Default.css" rel="stylesheet" type="text/css" />
If your webpage is in a folder then you need to add "../" to the front
<link href="../Styles/Default.css" rel="stylesheet" type="text/css" />
You can also try !important
#wrapper {
width: 960px;
margin: 0 auto !important;
}
If that does not work, then right click the wrapper element and click "inspect element" in chrome. This will show you all applied css on that element, and what has been over written by what. This will give you a better idea of what is actually going on (downloading Firebug for firefox is also helpful)