Nic727

Thank you very much. Another question related to that. I saw a cool thing about item description for this template http://mycookroom.ru/mywork/Elegant/1.1/Site/Image/ And I would like to know how to do the small animation with text over image. I know it's possible with CSS3 animation, but I just don't know where to start.... I tried with the CSS used on this page (with developper tool), but the text was far away on top and there was no animation... So maybe with a hidden and when it's "over" the image, it turn to display block with a small CSS3 animation to go up? Thank you

Hi, I'm changing my website and I would like to know what's the best when creating a portfolio. 1. Is it better with submenu to seperate each skills (design, animation, etc.) or put everything inside one page called "works"? 2. If it's one page for all the projects/works, is it better to have a filter to choose what you want to see (design, animation, etc.)? How to organize them? Personnaly, I don't have the skills required to do a filter, so I can't do that for now. If I choose seperate section, some of them will have 4-5 works and other only 1 or 2... So what's the best? Thank you

Hi, Thank you. I found this small tutorial too :https://css-tricks.com/text-blocks-over-image/ Also, for the second option, I tried your code, but the text is bellow the image. I would like an image and the text starting over it (like 30px)... The text is a title + all the content I want. For example, the big image could be a featured image to present a project on my portfolio and after that a small text describing the project. Also, the background image is more if you want a background on your homepage than a small image with a caption right?

Hi, I would like to know how to put text over an image in two ways. Thank you

But sticky footer is fixed on the screen if I scroll down or up. I would like to have a kind of sticky footer if I don't have enough content, but if I have a lot of content, I just want to see the footer at the bottom of the page.

Hi, I did a kind of mobile menu with a tutorial I found on the web, but it doesn't show my sub-menu. I added that in HTML5 : <input type="checkbox" id="toggle" /><nav> <!-- The beginning of the nav --> <label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu" onclick></label> That's the CSS of the mobile navigation. @media screen and (max-width: 600px){ul.lvl1 { display: none; opacity: 0; width: 100%; position: absolute; right: 0; } ul.lvl1 > li { display: block; width: 100%; margin: 0; } ul.lvl1 > li > a { display: block; width: 100%; background-color:#3A5FFF; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } #toggle:checked + nav ul.lvl1 { display: block; opacity: 1;} ul.lvl1{ background: #FFFFFF; border-top: 1px solid #51C1F1; } ul.lvl1, ul.lvl1 > li, ul.lvl1> li > a{ height: auto; } ul.lvl1 > li > a{ padding: 15px 15px; } ul.lvl1 > li > a:hover, ul.lvl1 > li > a:focus{ background: #3ABEFF; /*box-shadow: inset 5px 0px #51C1F1; */ /*padding: 15px 15px 15px 25px; */ } nav .sub li:hover{ background-color:#69DAFF;} .toggle:after { content: attr(data-open); display: block; width: 200px; margin: 0; padding: 10px 50px; background: #51C1F1; -webkit-border-radius: 2px; border-radius: 2px; text-align: center; font-size: 12px; color: #FFFFFF; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .toggle:hover:after{ background: #000; } #toggle:checked + div .toggle:after{ content: attr(data-close); } }

Hi, I'm trying to make a footer that stay at the bottom of the page. For example, if I haven't enought content on my page, I have a white space and my footer appear at the bottom of the browser only if I put position : absolute; to it. But if I reduce the size of the browser, now I have a sticky footer and I would like the footer at the bottom of the content. How can I do that? Thank you

Thank you. I put padding:16px 10px and it work for smaller browser window. Now I have to do a mobile menu I will try myself and will show you my result after.

Thank you it work very well. I have a couple of questions about your CSS. I read some stuffs about "flex" to make navbar flexible. Do you think it could be better? Also, you put a width of 14.28571428571429%, but I read that you can put calc(100%/7) if you have 7 elements, but it's not working. I have just one little problem with I resize. I know that I will need to change the padding at a certain size, but why it doesn't resize sub-menu automatically with the size of the words?

Hi, I will try that this afternoon. But yesterday I tried with width: calc(100%/7), because I have 7 elements, but there is always one element at the bottom. Maybe it's because I put padding: 16px to ul - li. Also, I tried something else with %, but it make my sub small and on one line and one under one, so that's weird. What I'm trying to get.

I tried your CSS, but it didn't work like expected. Maybe I did something wrong. But I change my CSS a bit. Now I have something 1/2 responsive. I put everything centered with a width of 100px, but It's impossible to put a width in % for the boxes to take all the nav bar and change width automatically when I resize the browser. Also, I have some weird thing I would like to remove. I have a kind of margin or padding on top, left and right side of my nav bar (orange) and it make that ugly. I put 100% and top 0px... Don't understand. Between my "li", I have a kind of 2px of nothing. My new CSS. nav{ width: 100%; background-color: rgba(255, 96, 0, 0.5); z-index: 1; list-style: none; text-decoration: none; text-align: center;}nav ul { margin: 0 auto; padding: 0; background: orange;}nav ul li{ display:inline-block; position: relative; padding:16px; width: 100px;}nav ul ul{ position: absolute; top: 40px; left: 10px; width: 100%; background-color: green;} Thank you. It's the first time I'm doing a full navigation by myself, so I'm very sorry if I look annoying. After I will just need to change some stuffs to make it responsive and make a kind of mobile menu.

ok I made some change and it work now, but I have another problem with width of my sub-menu. Check my code : Also, how can I put my menu name centered on the page to take all the width? <!doctype html><html><head><meta charset="utf-8"><title>Navigation</title><link rel="stylesheet" type="text/css" href="styles/styles.css"></head><body><nav> <ul class="lvl1"> <li>Accueil</li> <li class="sub">Histoire <ul class="lvl2"> <li>Monuments</li> <li>Quartiers</li> </ul> </li> <li>Musée</li> <li class="sub">Nature <ul class="lvl2"> <li>Parcs</li> </ul> </li> <li>Arts</li> <li>À propos</li> <li>Contact</li> </ul></nav></body></html> /* CSS *//* NAVIGATION */nav{ width: 100%; background-color: rgba(255, 96, 0, 0.5); z-index: 1; list-style: none; text-decoration: none;}nav ul { margin: 0; padding: 0; background: orange;}nav ul li{ display:inline-block; position: relative; padding:16px;}nav ul ul{ position: absolute; top: 40px; left: 10px; background-color: green;}/*Hover*/nav li:hover { background-color: red;}nav .sub li:hover{ background-color:pink;}/* Sub-menu apparition */nav ul ul { display :none}nav ul.lvl1 li.sub:hover ul.lvl2{ display:block;}

But this method work, but not on one line. <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Devoir 2 / CSS-P et les menus déroulants</title><link rel="stylesheet" type="text/css" href="styles.css"><script type="text/javascript"></script></head><body><div id="menu"> <ul class="niveau1"> <li><a href="menu 1">menu 1</a></li> <li class="sousmenu"><a href="menu 2">menu 2</a> <ul class="niveau2"> <li><a href="Sous menu 2.1">Sous menu 2.1</a></li> <li><a href="Sous menu 2.2">Sous menu 2.2</a></li> </ul> </li> <li><a href="menu 3">menu 3</a></li> <li class="sousmenu"><a href="menu 4">menu 4</a> <ul class="niveau2"> <li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a> <ul class="niveau3"> <li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li> <li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li> <li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li> </ul> </li> <li><a href="Sous menu 4.2">Sous menu 4.2</a></li> </ul> </li> <li><a href="menu 5">menu 5</a></li> </ul></div></body></html> /* CSS Navigation *//* GENERAL */p{ font-size:0.9em; font-family:Verdana, Arial, Helvetica, sans-serif; }#menuFormatTexte li, h3{ font-size:13px; font-family:Arial, Helvetica, sans-serif; }/* Navigation, POSITION */div#menu { width:100px;}div#menu ul { padding:0px; width:100px; border:1px solid #000000; margin: 0px; background:white; }div#menu ul li { position: relative; list-style: none; border-bottom:1px solid #666666;}div#menu ul ul { position: absolute; top:0px; left:100px;}/* Hover links */div#menu li a { text-decoration: none; color: #0000000; width:84px; padding: 4px 0 4px 8px; border-left: 8px solid #BBBBBB; display: block;}/* HOVER menu */div#menu li:hover {background-color: #E6E9FF;}div#menu li a:hover {border-left-color: #3040CF;}/* Active sub-menu */div#menu li.sousmenu:hover{ background: #EBB;}/* Hover apparition */div#menu ul ul { display :none}div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

Hi, With inline, it show the sub-option on one line, but I would like to see them one under the other. position absolute doesn't work very well for me, because everything appear at the beginning of the page instead of under the menu like when it's relative. That's what I would like :

Hi, I'm creating a navigation bar for a small project for school and I need help to fixe an issue. My sub-menu is appearing weirdly on my page. <!doctype html><html><head><meta charset="utf-8"><title>Navigation</title><link rel="stylesheet" type="text/css" href="styles/styles.css"></head><body><nav> <ul> <li>Accueil</li> <li class="activate1">Histoire <ul class="sub1"> <li>Monuments</li> <li>Quartiers</li> </ul> </li> <li>Musée</li> <li class="activate2">Nature <ul class="sub2"> <li>Parcs</li> </ul> </li> <li>Arts</li> <li>À propos</li> <li>Contact</li> </ul></nav></body></html> /* CSS *//* NAVIGATION */nav{ position: absolute; display:block; width: 90%; background-color: rgba(255, 96, 0, 0.5); z-index: 1; list-style-type: none;}nav ul { margin: 0; padding: 0;}nav ul li{ display:inline-block;}.sub1{ position: relative; top: 25px; width: 100px; height: 50px; left: 10px; background-color: rgba(24, 65, 33, 0.5); z-index: 2; display: none;}.sub2{ position: relative; top: 10px; left: 10px; background-color: rgba(24, 65, 33, 0.5); z-index: 2; display: none;}/* Affichage sous-menu */.activate1:hover .sub1{ display:block; }.activate2:hover .sub2{ display:block; } I tried a lot of thing, but I don't know what's the problem. My teacher doesn't understand too. Some people on internet are using very long code for a nav bar, but for this project I use something I learned in class to make it easy, but for now I have a problem. Thank you for your help.

Ok thank you for your feedback. Yeah it's a bit too complicated for what I know now and it's not very necessary.

Hi, I would like to redesign my website from scratch with some bootstrap elements, but I thought about that a couple of minutes ago. Do you think it could be a great idea to put a "like" function under your works in your portfolio? I don't really know how to do that, but it could be great to see what people like from you. No comments and no sharing... Only like. I don't think it's possible with only HTML5 and CSS (the only things I know for now), but I think if I have help with PHP, it would be nice! Thank you

Hi, I don't know if someone know about something about Wordpress, but I'm unable to put my picture correctly in my theme.On my Wordpress theme, I can put an header picture for each page, but it's not really responsive. Some illustrations :http://image.noelshack.com/fichiers/2015/20/1431640878-prob1.pnghttp://image.noelshack.com/fichiers/2015/20/1431640878-prob2.pnghttp://image.noelshack.com/fichiers/2015/20/1431640877-prob3.pnghttp://image.noelshack.com/fichiers/2015/20/1431640878-prob4.png So my problem is that I can change CSS with media query for the picture, but if I decide to change picture one time, I will need to restart everything, so It's not really fun. Do you know a way to make a kind of "box" to crop the picture or resize it manually depending of the width/height of the page? Also, on mobile I'm trying to put my picture a bit more on the left, but with only CSS - left: -100px the picture is cut. Should I try width : 200% ? Thx

Hi,That's my javascript $('#show-mobile-menu, #navigation-mobile a').on('click',function(){ if($('#navigation-mobile').hasClass('display-nav-menu')){ $('body').css('overflow', ''); $('body').css({'right': '0'}); $('body').css({'position': 'inherit'}); $('#navigation-mobile').removeClass('display-nav-menu'); $('#navigation #show-mobile-menu').removeClass('mobile-button-left'); } else { $('body').css({'overflow': 'hidden'}); $('body').css({'right': '-200px'}); $('body').css({'position': 'relative'}); $('#navigation-mobile').addClass('display-nav-menu'); $('#navigation #show-mobile-menu').addClass('mobile-button-left'); } }); I tried to remove the full line with overflow or only remove overflow, but it didn't work and made weird things.

Hi, I don't really understand. Can you look into my CSS with F12 or look if it's doing the same thing on your phone? Maybe it's just Safari on Ipod Touch? My mobile menu is going up and I'm not able to close it after.

Hi, I put a fixed navigation on my mobile website, but I have a weird bug. http://noelshack.com/2015-18-1430233790-image.jpg http://noelshack.com/2015-18-1430233838-image.jpg In landscape mode, I don't have this problem.

Hi, I need some opinions about my calendar and my website header. First of all, my calendar can be found here : http://terra.nicolas-duclos.com/ateliers I would like to know what's the best for mobile users? For mobile, the calendar is a bit small, so I thought about removing "1 event" and "today" from the calendar and only colorize cells. Do you think it's a good idea for mobile users? I will add an event list later above the calendar... Secondly, my header (it's some tree for now like you can see) and I would like to know if for the website it's better like that http://image.noelshack.com/fichiers/2015/18/1430179934-idea01.pngor like that : http://image.noelshack.com/fichiers/2015/18/1430179933-idea02.png Because my website is about therapy and I tried to put a picture about the topic, but pictures are always different and sometimes it's too big or too small, etc.

ok lol.

Hi, I'm trying to make my calendar responsive and for that I need more than one media query. The problem is that it doesn't work very well. That's my code : @media only screen and (max-width: 500px){span[data-cal-date],.cal-month-box .cal-day-today span[data-cal-date]{font-size: 1em !important;} .text-today{ font-size: 0.6em; }}@media only screen and (max-width: 800px){span[data-cal-date],.cal-month-box .cal-day-today span[data-cal-date]{font-size: 2em !important;} .text-today{ font-size: 0.8em; }} My calendar on my website : http://terra.nicolas-duclos.com/ateliers/ Also, should I remove the "1 event" and "today" from mobile/small calendar? I don't really know what's the best for small calendar... Everything is too ugly. I'm also trying to make cell square when smaller, but it doesn't work with only min-height. Do you have a trick for responsive cell or it only work with media queries?

Hi, I'm using Wordpress and I need help to create a shortcode. I know nothing about php and how to create stuffs from scratch, but maybe someone can help me on this forum. First of all, I'm using "Events" from Unyson. It allow me to have a calendar and to create events in it instantly, but I would like the event to appear out of the calendar too like : ___________________________ EVENT NAME (click to show full event page) Date/hours Location Small description ... CALENDAR __________________________ Now it only allow me to have the event name in the calendar and no description. I would need to build a new section in the Wordpress editor to add a small description and a way to make it appear outside the calendar too. My website is under construction : http://terra.nicolas-duclos.com/ Some informations : http://manual.unyson.io/en/latest/extension/events/index.html#content What I have now What I would like EDIT : Already have a description thing in my editor : screenshot