I am working on this page: link to page.
Inside h2 I have before and after elements. In IE they are too big, original width and height these images are not working. When I am trying to resolve this problem, in FF and Chrome everything is getting even worse.
In Edge things are a little bit different - I have figured out a way to make images smaller, but before element is inside h2 text.
Here are the examples:
Normal (from FF and Chrome)
A little strange (from Edge)
So crazy (from IE)
CSS code:
h2{/*How I am displaying h2 elem */
text-align: center;
width: 80%;
margin: 45px auto 115px !important;
text-transform: uppercase;
color: #fff;
}
h2::before {
content: url(img/pepper.svg);
margin-right: 10px;
position: relative;
height: 50px;
}
h2::after{
content: url(img/apple.svg);
margin-left: 10px;
position: relative;
height: 50px;
}
#supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
h2::before {
position: absolute;
}
h2::after{
position: absolute;
}
}
Try making the positon of before and after leftmost and rightmost.
If it doesnt work,try making pixels to %.
As #ankit says, removing width: 80% is doing right on IE. Also removing part with supports resolved problem with Edge.
Another approach (assuming you have control of the HTML): add an empty right after the input, and target that in CSS using input+ span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to form elements, and to the form, but not to the .
Related
I want to have to click on a hamburger menu icon and then have the list display beneath my icon. I set up my hamburger menu icon with this style
.menu-btn div {
position: absolute;
left: 100%;
top: 64%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
The menu of options taht should appear after you click on the hamburger menu is
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
but I'm unclear how to set up the style of the hamburger menu so taht it appears directly under the hamburger menu when you click on it. Right now, its appearing centered at the top of the screen -- https://jsfiddle.net/wtp1k57b/1/ . How do I set up such a style?
PS - I'm looking for a solution that doesn't rely on hard-coding numeric (e.g. top: 27px) pixel values. Certainly its good to get things to work in my little Fiddle, but in my broader application I can't guarantee how big or small that hamburger menu will be.
I would like to show a completely different approach without using display: flex.
HTML
Your approach uses too many wrappers in my opinion. You can definitely reduce the amount of divs. Moreover, you should always try to use semantic tags over general tags like div or ul. Consider looking at this article.
Hence, as #scooterlord already mentioned, you should use a button for the hamburger icon. Moreover, I recommend to use a nav instead of a list.
CSS
First of all, you should bundle the attributes for the same selector at the same place for the purpose of improved clarity. You should not have three sections where you apply the universal selector, but combine it into one. Moreover, do not set the box-sizing to a specific value, but rather set it to inherit, so you can always override this value for a specific element without having to do it for all of its children. Furthermore, I do not understand what you want to achieve with margin: 0 auto on all elements and body. It does not make any sense for me.
Since you do not want to use absolute positioning, I would strongly advise you to avoid using pixels as a measuring unit. They behave badly if some people change their default font-size because of poor eyesight or other reasons. Instead, consider to apply relative units like rem, em or %. By setting the root element's font-size to 62.5% you are still able to calculate as if you were using pixels (1rem = 10px).
As I already mentioned, I avoided to use display: flex for such a trivial thing. I do not understand why it should be used at this point. Therefore, I also had to change the positioning of the menu button. The navigation could be easily positioned using percentages for top and left.
As a side note: You should really try to only post the relevant CSS code - the first step for me was to remove all the irrelevant parts of it.
Final Solution
This is my final solution without Flexbox, without fixed sizes and without absolute positioning using px:
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
header {
width: 100%;
background-color: orange;
text-align: center;
padding: 1rem;
position: relative;
}
nav {
display: none;
width: 30rem;
padding: 5rem;
background-color: #ededed;
position: absolute;
right: 5%;
top: 100%;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: center;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 2.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
.menu-btn {
position: absolute;
right: 5%;
top: 50%;
margin-top: -1.1rem;
display: inline-block;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
}
#media only screen and (min-width: 500px) {
.menu-btn, nav {
display: none !important;
}
}
.menu-btn span {
display: block;
width: 2rem;
height: 0.2rem;
margin: 0.4rem 0;
background: #989da1;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Page Title</h2>
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<nav>
Vote
Search
About
Log In
</nav>
</header>
Or see this fiddle.
Use the css properties: top and right to set the position of the element under your icon.
#menu
{
position: absolute;
top: 48px;
right: 2px;
background: #ededed;
list-style-type: none;
}
Use this CSS for your menu - no margin, and the position defined by the top and right settings:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 50px;
right: 0;
}
https://jsfiddle.net/meuexde6/
I left out the transition for the testing, but you should basically animate the right parameter from -100px to 0 to achieve what you seemed to have in mind.
ADDITION AFTER COMMENT:
To define the position of the menu in relation to the button, you have to apply position: relative to their common parent element, .mobile-nav. The position values of an element with position: absolute always relate to the first ancestor which has position: relative.
I changed the values in my updated fiddle accordingly to these:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 40px;
right: -32px;
}
Updated fiddle: https://jsfiddle.net/meuexde6/1/
If you really want the menu to stick directly to the button (hard to say - it has no borders), just adjust the top and right values as needed.
HTML5 Semantic Elements.
details > summary {
padding: 2px 6px;
width:12px;
border: none;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
ul{
list-style: none;
margin-left:0;
padding-left:0;
}
<details>
<summary>☰</summary>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</details>
So, here goes. I know you are asking for a solution to a specific problem, I solved it alright, but I couldn't help noticing that you are struggling with your code. You must simplify the way you think and your code will become leaner. The purpose of this forum is to help others become better, right? :)
HTML
It is good practice to keep the menu toggle button OUTSIDE of the menu - will solve a lot of issues - check below.
It is not semantically right to use anything else rather than a button for the toggle function, so, why not use a button here? I also removed unnecessary clutter from your code, like some divs and the id - the id could be traded with the class, your call. I also removed .mobile-nav because it is not needed at all.
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
CSS
I absolutely positioned the menu-btn on the top right corner, and gave it a width equal to the #pageTitle height (which I set at 50px - a gold standard) to keep it rectangular; it should be a rule of thumb that the toggle buttons are rectangular and always the same height as the top navigation bar - in this case the before-mentioned id. The same I did for the .responsive-menu. I absolutely positioned it as shown below. The changes allowed me to remove a lot of css styling - now obsolete - like for example the absolute positioning of the ul menu inside the .responsive-menu.
.menu-btn {
position:absolute;
display:block;
right:0;
top:0;
width:50px;
height:50px;
background:yellow;
border:none;
padding:16px;
}
.responsive-menu {
position: absolute;
top: 50px;
right: 0;
display: none;
}
Javascript
By years of practice I realized that the most efficient way to toggle a menu instead of adding and removing classes is to add a class on the body tag; this can help heaps if you want to restyle anything else on the page depending on wether your menu is opened or not.
$('.menu-btn').on('click', function() {
$('body').toggleClass('responsive-menu-open');
});
Here is a working jsfiddle: https://jsfiddle.net/scooterlord/4atafhge/
I could have done a lot of other things in order to simplify the code even further - remove unnecessary ids and classes since most elements are considered unique and could be targeted using descendant classes, eg .responsive-menu ul, etc. After a lot of practice, you'll manage to think simpler and produce code with a smaller footprint.
Edit: Concerning the fact that you don't like the absolute pixels for alignment here is a trick.
Giving a fixed height to the parent container, equal to the toggle button's -in this case '#pageTitle' and setting its position to relative allows you to use top:100% to properly place the responsive menu exactly below the button (which is essentially the same height):
#pageTitle {
display: flex;
height: 50px;
position:relative;
}
.responsive-menu {
position: absolute;
top: 100%;
right: 0;
display: none;
}
Here is an updated fiddle: https://jsfiddle.net/scooterlord/4atafhge/1/
Edit: Natalia, I gave it some thought and here is what I came up with. I created an absolutely positioned .menu-wrapper, inside of which I placed the button and the responsive menu with float:right and no positioning - aka they are positioned statically. No more pixel values! YAY!
.menu-wrapper {
position:absolute;
top:0;
right:0;
}
.menu-btn {
float:right;
...
}
.responsive-menu {
float:right;
clear:both; // to clear the .menu-btn and sit exactly below it
...
}
Here is a working fiddle: https://jsfiddle.net/scooterlord/4atafhge/2/
I'm working on a website on wordpress.
I have a wrapper with header and entry inside of it.
my Body height is set to height: 100%;
Wrapper is set to height: 100% and min-height: 100%.
The height of my page expand depending of the content of my entry, that works perfectly on most of pages.
but on some pages, I've included Pure CSS Tabs, which are set to position:absolute to work.
I used this example : http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
on pages including those tabs my content doesn't expand anymore, I can not use position:relative for the tabs...
Is there a way of expending the body height depending of my tab contact height ?
maybe using Js ?
can anybody help me ?
here is my css :
html,body{
width: 100%;
max-width: 1220px;
font-family: 'andale';
font-size:14px;
line-height: 20px;
color: black;
text-transform: none;
background-color: #4C4C4C;
letter-spacing: 2px;height: 97%;}
#wrapper{
background-color: white;
height: auto !important; /* ie6 ignores !important, so this will be overridden below */ min-height: 100%; /* ie6 ignores min-height completely */
margin-left: 20px;
margin-top: 20px;
padding-top: 20px;
height: 100%;}
.entry{
padding-left: 20px;
padding-right: 20px;}
#header{
font-size: 14px;
line-height: 20px;
width: 100%;
color: #FF5000;
text-decoration: none}
.menu-menu-container{clear: both;padding-top: 5px;}
#menu-menu {list-style:none;}
.menu-item {float:left;}
#menu-menu li:after{content:"\00a0|";}
#menu-menu li:before{content:"\00a0";}
#menu-menu li:first-child:before{content:"";}
#menu-menu li:last-child:after{content:"";}
#menu-menu li.current_page_item a { color:#FF5000;text-decoration: line-through }
#menu-menu li.current-page-ancestor a { color:#FF5000;text-decoration: line-through }
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
list-style: none;
position: relative;}
.tabs li{
float: left;}
.tabs li:after{
content:"|\00a0";}
.tabs li:last-child:after{
content:"";}
.tabs label:hover {
color:#FF5000;
text-decoration: line-through}
[id^=tab]:checked + label {
color:#FF5000;
text-decoration: line-through}
[id^=tab]:checked ~ [id^=tab-content] {display: block;}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
left: 0;
position: absolute;}
here is a jsfiddle http://jsfiddle.net/MPhnP/
anyone can help me with this ? is it possible using the css tabs I'm using ?
thanks a lot for your help !
Wow, I remember battling with this exact problem a couple of months ago, I was even using those exact same tabs you linked.
The thing with absolute positioning is that you are positioning the elements outside of the normal flow of the webpage - any div with position absolute will not contribute to the page flow.
This leaves you with 2 options:
Manually set the height of the tab group. For example:
.tabs {
height: 450px;
}
I don't like this solution as it means you can't have a dynamic height for each tab - all tabs will be the same height. If your first tab had only a few lines of text and your 2nd one had many paragraphs, the whole thing would just look weird, or you would have a large gap under the tab group.
So what are your other options? Ditch pure CSS tabs and use jQuery. Honestly, I spent hours and hours researching pure CSS tabs trying to find/create some that were practical and functional, and I concluded it just isn't feasible. Pure CSS tabs are just gimmicks and a brilliant example of the power of CSS, but I do not believe they have any practical use in a production environment.
EDIT: It just occurred to me you probably CAN use JS to get your tabs to work how you want, but if you're going to go down that route, why not just use JS tabs?
The html is:
<div class="choose-os">
<p>
Microsoft Windows
Apple Mac OS
</p>
</div>
The CSS is:
.choose-os {
margin: 20px 0;
padding: 20px;
background: #e7eefa;
}
.choose-os p {
margin: 0;
}
.choose-os p a {
display: inline-block;
text-indent: -100000px;
height: 56px;
width: 308px;
}
.choose-os p a.windows {
background: url(../images/button-windows-bg.png) 0 0;
}
.choose-os p a.macos {
background: url(../images/button-macos-bg.png) 0 0;
}
.choose-os p a:hover {
background-position: 0 -56px;
}
Any suggestions would be greatly appreciated as to have the background image also appear on IE7.
The text-indent: -100000px; in combination with inline-block is what's causing the two elements to not be visible in IE7, due to a bug.
You need to find some other way to hide the text for IE7 (or not use inline-block at all, see below for this more suitable fix).
Options include the method in the comment by #Sotiris, or:
.choose-os p a {
display: inline-block;
height: 56px;
width: 308px;
text-indent: -100000px;
/* for ie7 */
*text-indent: 0;
*font-size: 0;
*line-height: 0
}
Which uses the *property: value hack several times to hide the text in IE7.
The problem does seem to be related to the use of display: inline-block.
So, another workaround (which I prefer to my previous one) is:
.choose-os {
margin: 20px 0;
padding: 20px;
background: #e7eefa;
overflow: hidden
}
.choose-os p a {
float: left;
margin-right: 4px;
text-indent: -100000px;
height: 56px;
width: 308px;
}
To display inline-block properly in IE7, add the following styles to .choose-os p a
zoom:1
*display:inline
(The star is important! It's ignored by modern browsers, but not IE6/7)
IE7 doesn't respect inline-block, so you have to do a little magic to make it work. There's a great description here: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
[edit] If text-indent is also part of the culprit, you may be better of sticking with display:block and setting float:left on your elements. Probably multiple valid paths to take :)
IE7 has some serious limitations in CSS. I would recommend avoiding the shorthand notation and explicitly declaring each property, then validate the CSS sheet here.
I've been working on this for a while, and just can't seem to figure it out.
I have a series of position: relative spans which are wrapped around some text and a position: absolute span set to right: 0;. I would expect the second span to be stuck to the right of the first span, even if the first span is broken onto two lines — but alas, I've only been able to get this to work in Safari.
To see an example, take a look here: http://workingonit.andrewleclair.com/slashtest/.
I found this page: http://www.brunildo.org/test/inline-cb.html which suggests that this technique, although technically correct, is not well-supported. What I'd like is for each / to be stuck to the end of each li even if it wraps to multiple lines..
Any ideas? Thanks.
It looks your header is too small. Try to remove the width. If i do so it looks fine in FF 3.6.
#header {
float: left;
margin-right: 48px;
margin-top: 26px;
/*width: 334px;*/
}
Another way is to add white-space: nowrap to your li.
li {
color: #888888;
list-style-type: none;
white-space: nowrap;
}
Edit:
Try this instead...
.slash {
color: #BBBBBB;
padding: 0 2px 0 19px;
}
.header {
background-color: yellow;
border: 1px solid red;
}
I know this is something I'm probably doing wrong, so please don't incinerate me for the thread title.
I'm trying to put together a small personal website using HTML 5/CSS3. I've checked with the w3c validator and the site and CSS file fully conform according to the validator (However the validator has a warning attached that it might not be perfect).
I'm not sure how to explain it without a picture, so here's a comparison of Chrome/Opera/Firefox:
So, you can sorta see how in Chrome the background image is in one non-repeating piece, whereas in Opera/Firefox the image has, oddly, been broken up and placed slightly differently.
I'm confident this is due to an error on my part, but I've had no luck at all figuring out why the image is being mangled in Opera and Firefox.
Here's the CSS that's relevant to this issue:
/* Content Pane */
.content
{ position: absolute;
left: 220px;
width: 800px;
top: 80px;
min-height: 550px;
background-color: rgba(8,12,42,0.85);
}
/* Headers */
.content hgroup
{
background: url("Header_Flat.png") no-repeat left top;
min-height: 38px;
padding-left: 28px;
text-shadow: 0 0 8px #FFA9FF;
color: Black;
text-decoration: none;
}
.content hgroup h1
{
display: block;
}
.content hgroup h3
{
display: inline;
position: relative;
top: -12px;
left: 20px;
text-shadow: 0 0 6px #AFF9FF;
}
.content hgroup h4
{
display: inline;
position: relative;
top: -12px;
left: 20px;
font-size: xx-small;
text-shadow: 0 0 6px #AFF9FF;
}
And the HTML:
<hgroup>
<h1>New Site!</h1>
<h3>Now with Bloom!</h3>
<h4> - Posted Tuesday, May 11th 2010</h4>
</hgroup>
Can anyone see what I'm doing wrong?
EDIT
I changed the CSS a bit, and it halfway-fixed the image (I don't understand why) and the bad alignments (I hadn't yet noticed those).
The changed CSS defs are as follows:
/* Headers */
.content hgroup
{
background: url("Header_Flat.png") no-repeat left top;
min-height: 38px;
position: relative;
text-shadow: 0 0 8px #FFA9FF;
color: Black;
text-decoration: none;
}
.content hgroup h1
{
position: relative;
left: 28px;
}
.content hgroup h3
{
display: inline;
position: relative;
top: -12px;
left: 48px;
text-shadow: 0 0 6px #AFF9FF;
}
.content hgroup h4
{
display: inline;
position: relative;
top: -12px;
left: 48px;
font-size: xx-small;
text-shadow: 0 0 6px #AFF9FF;
}
Got it: You need to give hgroup display: block.
EDIT: Keep in mind that most browsers don't know the new HTML5 elements yet thus they are missing all default style.
You'll need to set the parent element of positioned child elements to relative to make the positioning work.
hgroup{
position: relative;
}
Your h1 needs a width and height, otherwise display: block is a little pointless imho.
These are the two things which jump out at me the most :)
Just took a look in Chrome and Firefox and they're both displaying the same as your error pic.
Take a look here: HTML5 browser support checklist, seems that Firefox and Opera don't support all HTML5 attribute yet, so invariably there will be some weird problems. The browsers don't know all the default styles of HTML5 elements yet, so more reason for strange errors. Can't think of any other fixes other than DavidYell's answer, eveything seems fine in the CSS.
The background image alignment CSS is not ready on all browsers.
It's as if you only had:
.content hgroup
{
background: url("Header_Flat.png") no-repeat;
etc.
Since hgroup has no set size your background image will float around when you're using different browsers at different zooms.
If you are able to set hgroup's size you can design your .png the size of hgroup, transparent and with the blue streaks aligned top left.
I am also looking forward to full CSS3 support in all browsers.
There are so many effects that look so cool in some browsers and then just look mangled in others. I personally prefer 1)Firefox 2)Safari