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;
}
Related
I created a button class named "primary". I noticed that it looks different on a button and on a tag, they have other sizes for example.
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
How can I make the class look the same on both?
JSFIDDLE
With HTML tags, browsers add their own default styles to the tags (yes, it could differ from browser to browser). In your case, there are 2 properties you need to add in the .primary class: 'display: inline-block and font` properties.
As per the JSFiddle you shared. Here is the updated code and screenshot of the both elements height after the primary class code is updated:
.primary{
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
/*font-size: 1.5rem;*/
vertical-align: middle;
border: none;
/* these 2 lines to be added */
display: inline-block;
font: 400 1.5rem Arial;
}
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-family: "Goudy Bookletter 1911", sans-serif;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
This is because a browser already gives HTML elements their own style. You will overwrite this style with your own CSS. But a button will have a different style than an a element by default.
For example the line-height and font-family may be different.
And in your case it seems that display: inline-block will do the trick.
This is because elements inherit default styles, if you want the anchor to look the same simply declare the font family and font-size in your class;
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
font-family: sans-serif;
font-size: 26px;
}
I am having a frustrating CSS problem- basically I have an image that needs to be exactly inline (not above or below) text that I have all within an a href. HTML-
<li><img class= "emoji" src="../images/emojis/1f642.png"/><p class="emojiText">Pretty good</p></li>
produces this:
You can see that the image is the right size but slightly too far up from the text. I have rearranged my html and stuck the text within its own <p>, moved the image, everything. Nothing has worked. My current CSS:
.emoji {
height: 18px;
width: 18px;
margin-top: 8px;
margin-right: 8px;
margin-left: 5px;
}
.emojiText {
margin-bottom: 10px;
display: inline;
}
.status li a {
text-indent: 5px;
display: block;
width: 250px;
color: white;
height: 35px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
text-align: left;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border-top: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.1);
position: relative;
padding-top: 0px;
text-decoration: none;
}
the last block affects both but no matter how I play with the margins I can't fix the image-text align problem. What can I do to fix this?
EDIT:
If you want the emoji and text to align their center-points...
.emoji,
.emojiText {
display: inline-block;
vertical-align: middle;
}
This is what you expecting...
<style>
a { display:inline-block; background:#52D4A4; text-align:center; text-decoration:none; padding:10px; }
a img { display:block; margin:0 auto; }
</style>
<img src="http://www.cmegroup.com/etc/designs/cmegroup/cmegroupClientLibs/images/iconFacebook.png">Pretty good
I have the simple form and attached the css file for that. As you can see there are 2 fields and one checkbox - I would like to make the checkbox directly under the textarea, with around 1-2px space, not as it is now - how can I modify that? I thought the problem is somewhere here:
.textox, .textoxarea {
width: 340px;
border: solid 1px #999999;
padding: 2px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0px 1px 2px 0px #9C9C9C;
background-color: #FFFFFF;
outline: none;
color: #474747;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 100;
}
but I can't find the proper way of doing that.
Here's my fiddle.
Thanks!
Remove the empty paragraphs between textarea and checkbox.
In your fiddle it's on lines 11 and 13.
http://jsfiddle.net/7hq0x6u4/3/
.center p:nth-of-type(2),.center p:nth-of-type(3){
margin:0;
}
This will reduce the space of margin in both the P tags which are covering the input elements
DEMO
Normally use of p tags to align input tags are not recommended.
Hi to your <input type="checkbox"> add these styles.
.foo {
bottom: 1px;
margin-left: 0;
margin-right: 5px;
position: relative;
}
.foo as an example class on checkbox.
The site i'm working on is http://cargocollective.com/amytdatta
I am trying to position the Running on Cargo link at the right side of the top nav bar.
In the theme i'm using there used to be a search box positioned exactly there, so I hid the search and tried copying the search CSS to the Cargo link CSS. Here it is:
.cargo_link {
float: right;
margin: 0 0 0 20px;
color: #cccccc;
padding: 0 0 0 25px;
width: 160px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 50px;
text-align: right;
border-left: 1px solid #cccccc;
}
Some fiddling with z-index values has made the Cargo link visible again.
I'm still unable to place it where I want, though. Here is the CSS for the Search Box (which i've made visible for now):
#search_form {
display: inline-block;
float: right;
margin: 0 0 0 20px;
padding: 0;
}
#search_form #search_term {
background: #f5f5f5;
border-left: 1px solid #cccccc;
border-top: 0;
border-bottom: 0;
border-right: 0;
color: #999999;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 50px;
line-height: 12px;
padding: 0 0 0 25px;
width: 160px;
}
I basically wish the Cargo Link to precisely replace the Search box.
Any advice would be greatly appreciated!
Cheers.
Your #nav_wrapper element has a background: whiteSmoke; property which hides whatever's under it.
You either put the cargo link in the wrong element (i.e. not inside #nav_wrapper but under it). or you should not have a background on #nav_wrapper
Edit:
I'm guessing you should move your <div class="cargo_link"> to right after <div class="page_nav">'s closing tag
You have <div id="nav_wrapper"> with position:fixed and z-index:999, that's making the cargo_link appear behind the nav_wrapper...
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;
}