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?
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 have a goal that I'm trying to accomplish with HTML and CSS only: With an inline list of links that grow in size upon hover and change fonts (this has caused odd issues before),
A) Hovering one link shouldn't upset other links.
B) Keep it dynamic to avoid tailoring the CSS to each new link.
C) If margin: 0 20px 0 20px, that should be from the ends of the text -- This looks much cleaner, as it makes the spacing constant between links (see example for what should not be done). Fixed width containers usually violate this.
D) Upon hover, the text should stay vertically and horizontally centered in place.
E) Please try to keep it HTML and CSS only. If it includes JS or JQ, it would be more difficult to implement to to my lack of knowledge about the languages and the fact that the JSFiddle is just a stripped down example instead of my actual page.
My best right now fits the first two and last criteria without meeting the third, and it uses tables (I know):
JSFiddle
Or code:
<table><tr>
<td><div>ONE</div></td>
<td><div>TWO</div></td>
<td><div>THREE</div></td>
<td><div>FOUR</div></td>
<td><div>FIVE</div></td>
</tr></table>
And...
div:hover {
font-size: 130%;
font-family: comic sans ms;
}
div {
width: 10px;
margin: 0 30px 0 30px;
height: 20px;
}
The issue is that the margin is being measured from the div, not the text, making it so I'd have to tailor the margin to each link. Additionally, hovering will make it seem like the font / link moves down and to the right, violating guideline D.
This Works dynamically as long as the text isn't too long, but hovering upsets other links. It also violates D.
Any help would be appreciated.
Vertical alignment for inline text is handled easily with the line-height property. Make sure that for both the normal and large font-sizes the line height is the same. Eg. for normal text I used line-height: 1.5em, for the large text I used font-size: 130%; line-height: 1.15385em;. 1.30 × 1.15385 = 1.50
The main issue I see is that when hovering the browser needs the text in the original size for the layout, but it also needs the text in bigger size for display. One solution I see is duplicating the link text and show only one version depending on hover state:
HTML:
<ul>
<li><span>link 1</span><span>link 1</span>
<li><span>link 2, with some long text</span><span>link 2, with some long text</span>
<li><span>link 3</span><span>link 3</span>
</ul>
CSS:
ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }
li { border: 1px dotted red; position: relative; }
li a span:first-child { padding: 0 30px; }
li a span:last-child { position: absolute; width: 100%; left: 0; font-size: 130%; line-height: 1.15385em; text-align: center; visibility: hidden; }
li:hover a span:first-child { visibility: hidden; }
li:hover a span:last-child { visibility: visible; }
http://jsfiddle.net/g16Ldusx/2/
Instead of duplicating the link text in HTML, I would probably duplicate it using some javacript.
If you don't want the duplication and really don't want javascript, you can use the :before and :after pseudo-elements instead, and put the link text in a HTML5 data attribute. Not sure how good the browser support for this one is though.
HTML:
<ul>
<li>
<li>
<li>
</ul>
CSS:
ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }
li { border: 1px dotted red; position: relative; }
li a:after { content: attr(data-text); padding: 0 30px; }
li:hover a:after { visibility: hidden; }
li:hover a:before { content: attr(data-text); position: absolute; width: 100%; font-size: 130%; line-height: 1.15385em; text-align: center; }
http://jsfiddle.net/kyad4tfh/
Also, note that requirements A and C may conflict with each other. The margin between elements needs to be big enough to accomodate for the increased width of the text.
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}
for all the classes below I have set a fixed height of 120px. Is there a way to control the height of all of them with one single class (class or something else) ?
I know I could do .header, .logo, .etc { height: 120px } and remove the the height from all the individual items but that would still not look like the most efficient solution. Thanks
.header {
width: 100%;
height: 120px;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
display: table;
position: fixed;
z-index: 999999;
}
.logo {
vertical-align: middle;
line-height: 120px; /* this is set to same height as the div */
left:0;
height:120px;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
}
.drop_menu {
background:red;
padding:0;
margin:0;
list-style-type:none;
height:120px;
right: 0;
display: table;
z-index: 3000;
display: table-cell;
vertical-align: middle;
right: 0;
}
You're going to have to use javascript for this, because CSS simply won't cover the type of interaction you want. First of all, if you want to set the height of several classes to one value simultaneously, you have two options:
Change the height of every single class using Javascript or jQuery. For example: $(".header, .logo, .dropmenu").height("80px");.
Make toggle a new class that applies to all elements. For example, if your class was defined as newClass {height: 80px;}, then you could do $(".header, .logo, .dropmenu").toggleClass("newClass");
See this link for more info about multiple selectors, and this link for more info about changing height, and finally this link for more info about toggling a class with jQuery. Of course, there are ways of doing this with just stock Javascript, but I personally prefer jQuery because it simplifies everything up a lot.
As for applying a class when scrolled to a certain height the following code or something similar could suffice:
$(".header, .logo, .dropmenu").scroll(function(){
if ($(".header, .logo, .dropmenu").scrollTop > 20){
$(".header, .logo, .dropmenu").toggleClass("newClass");
}
});
you can give one class to all three elements in html like
<div class="logo some_other_class">
<div class="header some_other_class">
<div class="dropmenu some_other_class">
and if you are using jquery you can change height like:
$(".some_other_class").css("height", "80px");
Following simple list, where in every h4, there is a span at the end.
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus <span class="goto">o</span>
</h4>
</li>
<li>
<h4>Digital Signage <span class="goto">o</span></h4>
…
</ul>
Screenshot of the page's source:
The CSS for the span looks like this …
.items .goto {
font-family: 'QuaySans-Icons';
font-size: 1.6em;
position: relative;
float: right;
}
The final thing looks like this:
The problem I have with this is that when decreasing the width of the browser window (I'm working on a responsive webdesign) the span-icon is breaking into the next line.
Do you have any creative solution or idea on how to prevent this from happening?
Kind regards and thank you in advance,
Matt
If you want the icon to keep inline with the last word in your text line, you can simply do:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
and the CSS might be:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
If there is no white space between your work and the span, the motif will simply follow the word if the li element is forced to flow into a second line.
You can use margin-left to create visual spacing or insert a   entity before the span, quite a few ways to do. The details depend a bit on what effect you want.
Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (two examples of how to do it)
Keeping Icon Right Justified
Here is one approach to pinning the icon to the right of the h4 element:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
Use absolute positioning of the span to keep it to the right and bottom of h4. If h4 forms to line, the icon will follow the second line. You may need to adjust the positioning depending on the icon size. If you allow the icon to grow in size, you may get other issue in extreme cases. I might fix the icon to a px height or width (or a max value). Finally, set some padding-right in h4 to prevent the icon from overlapping the text as the window gets smaller.
Note I explicitly specified line-height values to accentuate the issue around not knowing the height of the icon. You may need to adjust these to vertically position the icon.
Decrease your font-size when you have less space. I guess you have the problem in media with max-width:480px. I found decreasing the font-size a good alternative to keep the design consistent in responsive sites
I've mocked it up on the demo, however it is a bit raw.
.items {
padding:0;
margin:0;
/*width:180px;*/
}
.items li {
border: 1px solid red;
list-style-type: none;
position: relative;
}
.items h4 {
margin:0; padding:0; font-size:16px; padding-right:10px;
}
.items .goto {
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
DEMO
Check the following link and decrease the width of browser.
RESULT