All Activity

This stream auto-updates   

  1. Past hour
  2. The space between '.dropdown-content:hover' and '.opa' means it will be referring to child element, in other word a element within '.dropdown-content' container element with class 'opa', NO element such as this exists. The only element that has this class is a sibling img element of '.dropdown-content' placed above it, which you can't access, because you can only cascade down, not up.
  3. Today
  4. <!DOCTYPE html> <html> <head> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .opa:hover { opacity: 0.3; } /* why not work? Thanks */ .dropdown-content:hover .opa { opacity: 0.3; } .desc { padding: 15px; text-align: center; } </style> </head> <body> <h2>Dropdown Image</h2> <p>Move the mouse over the image below to open the dropdown content.</p> <div class="dropdown"> <img class="opa" src="img_fjords.jpg" alt="Trolltunga Norway" width="100" height="50"> <div class="dropdown-content"> <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> <div class="desc">Beautiful Trolltunga, Norway</div> </div> </div> </body> </html>
  5. Its shorthand, but your PHP has to be permitted to allow it through PHP settings file under "short open tag" , else problems will occur.
  6. Did you also download and add links to css, JavaScript required to style and make it work?
  7. The grid works to whatever element you assign a grid percentage width class/es reference to, and ALL elements header, footer, nav etc are WITHIN the body, which altogether makes up the whole page.
  8. Let's clear up once & for all which is THE best Selenium element selector out there! An expert has the answers we've all been looking for, gives us the pros and cons of each element selector strategy and recommends the ultimate choice for your test automation project. What are you waiting for? Go read the article : https://blog.testproject.io/2017/08/10/css-selector-custom-attributes/
  9. Hello all. I'm very new to this sql thingy. ive installed apache 2.4 and mysql 5.6. the installation seems to work good, i see that its online on localhost. so i get this black window thingy where i can type the commands (mysql-sql>) well... then i try to create a new database: create database blabla; but i get: ERROR: Not connected. what am i doing wrong here?
  10. Yes. <?= ?> is a shortcut for <?php echo ""; ?> All of the above will translate as follows: <?php echo ++$a; ?> <?php echo ++$b; ?> <?php echo $private_id; ?> <?php echo session_id(); ?>
  11. Thank you. I will try that. I already have the slide show banner at the top of the page though. Was a mission on its own. If I can try and explain why I need the different modal slide shows it is for our kiddies party venue page and it is to show the different themes of decorations. Just worried the slide shows will be a bit clunky on the page. But I will try it if that is the easier option of the two. Thanks. EDIT: Tried to edit the original post but can't for some reason. I found this coding which is exactly what I want. Only issue for some reason is it shows the images underneath one another. <div class="container text-center"> <h1> Click Me </h1> <!-- Large modal --> <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Tinkerbell</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img class="img-responsive" src="img/t1.jpg" alt="..."> <div class="carousel-caption"> One Image </div> </div> <div class="item"> <img class="img-responsive" src="img/t2.jpg" alt="..."> <div class="carousel-caption"> Another Image </div> </div> <div class="item"> <img class="img-responsive" src="img/t3.jpg" alt="..."> <div class="carousel-caption"> Another Image </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </div> Found it here. https://bootsnipp.com/snippets/featured/carousel-inside-modal Attached is the image of what happens on the page.
  12. Thanks. In my question, I was referring to the whole page not just the body. Does the grid cover the header, footer and navbar? Thanks.
  13. <?=++$a?> <?=++$b?> <?=$private_id?> <?=session_id()?> I found this on the internet amongst some other code, and it appears to work. Unfortunately, I do not quite understand it. Is <?= a shorthand for <?php echo ... ;
  14. Understood. But, pages with .php extensions can display HTML. One of my pages displays no HTML, the other does. This is what I meant. Thank you. Roddy
  15. The parent element of floated child elements, collapses to zero height, meaning the uneven height of image and text, causes the next element to float up against bottom edge of text, and stop at right edge of image. Overflow causes the parent to regain the boundary to the highest child element, causing any sibling elements not to get hooked by exposed elements, Flex is used to give equal height columns, even if the content only fills a small portion of an element, the image is vertically aligned to bottom of equal height right column. The 'test' class is used to create a textual element same height as column, this help in the image being forced to bottom of column.
  16. Ok, now is working, thanks, dsnoesuk! http://cvkj.agencialosnavegantes.cl/servicios/ Some questions: Where's the class test used on the example? What's flex? the "overflow:hidden" part is what fixes the float:left problem?
  17. Yesterday
  18. You would use 'container-fluid' class (check class name, it may have change depending on version of bootstrap), the body area is/or will be the whole page?, you would not set a size to body, only to child div elements. The 'container' which adjusts to fixed size depending on media query for device width, can be placed inside the 'container-fluid' class.
  19. With respect to the Bootstrap Grid system, can the Grid cover the whole page or is it limited to the body area? Thanks,
  20. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> .test{text-align: center;} .test:before { content: ""; display: inline-block; width:0; height: 100%; } .test img {width: 97%;} </style> </head> <body> <div style="width: 960px; margin: 0px auto; overflow: hidden; vertical-align: bottom; display: flex;"> <div style="width: 70%; float: left;"> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> </div> <div class="test" style="width: 30%;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-37.png" alt=""> </div> </div> </body> </html>
  21. Image 2 is the closest to the last one (the example i presume?). The left div does not need any margin. Try adding: margin: 0; And the right div would need: vertical-align: top;
  22. I am not a big fan of Bootstrap, but i think this is what you are looking for: Example: https://www.w3schools.com/bootstrap/bootstrap_affix.asp Note that this is achieved by using JavaScript. You actually change the class after scrolling down.
  23. You can try to assign a clear propperty. Like in this example: https://www.w3schools.com/css/css_float.asp I think the "try it" tackles a problem like the one you are having right now. If it still doesn't work, be sure to reply
  24. Hello, this is my site: http://cvkj.agencialosnavegantes.cl/servicios/ I need to do what's on the attached picture, but i'm not capable to. I do this: <div style="width:70%; float: left;"> <div > <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> </div> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-37.png" alt=""> </div> But it doesn't work, because the next title get stuck in the float:left; before it. I tried to add another div before it like this: <div style="clear:both:"></div> and it doesn't work either. What can i do?
  25. Then you need to add slideshow to modal https://www.w3schools.com/howto/howto_js_slideshow.asp But im afraid its going to be more complicated than just that, as you have use JavaScript to bring up the image you selected when modal appears. Also i foresee conflicting problems using multiple modals with slideshows and even more complicated code.
  26. Hi, yes please. That is exactly what I want. But it doesn't give me a navigation arrow and I'm unsure of how to add that coding.
  27. HTML has no access to the PHP session data. Sessions are used to transfer data between PHP pages.
  28. Last week
  29. It will be my first time to use a session, but I could see the time coming long before I started the current task. So, now is just as good as time as any, and it looks like using a session will provide me with all of the communication that I need between the PHP and HTML pages. Once again, Dsonesuk, you have struck home. Many thanks! Roddy
  1. Load more activity