Jump to content

Search the Community

Showing results for tags 'css'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (Dreamweaver, Zend, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Donation Link

Found 53 results

  1. I created a login system with bootstrap but for some reason I cannot delete the "placeholder" (in which it is written "admin") in both the inputs of the form ("uname" and "psw"). Even if I change the placeholder it's remain "admin". Have you any idea? This is the code: <!DOCTYPE html> <html> <head> <title>Login</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <div class="container"> <div class="jumbotron text-center" id="jumbo_log"> <h1>Login Page</h1> <p>You must login to enter</p> <form id="theform" method="get"> <div class="container2"> <label for="uname"><b>Username</b></label> <input type="text" id= "uname" name="uname" required><br> <label for="psw"><b>Password</b></label> <input type="password" id="psw" name="psw" required><br><br> <input type="submit" id="submit" class="btn btn-info" value="Login"><br><br> <a class="btn btn-primary" href="registration.php" role="button">Click here if you are not registered</a> </div> </form> </div> </body> </html>
  2. In general if I know how to do something I want to do I can code it in a language I'm less than fluent in, if I am fluent in a language I can figure out how to code something I want to do but don't know very well how to do it, but this time I have almost no clue how to do what I want to do and very limited fluency in JS. I want a script that will slowly fade from one color (red, green, blue, white, black) to a neutral color (grey) and then fade into one of the randomly selected other 4 colors. Then repeat. Forever. So like Rd>gy>wt>bu>gy>bk etc. I have no clue what to do, if you can help I will be grateful for all time. Oh, and I need to make sure the text color is always contrasting so it can be read, so I need to adjust that too?
  3. prasanna2166

    CSS Alignment in DIV tag

    Hello Everyone, As I am a novice, posting this simple question. Am trying to design my first webpage using PHP. I have successfully created a wrapper page (index.php) as in the attachment whereas I get into trouble when I try to include PHP content pages into index.php. The real problem occurs in the alignment and not with the include command. The problem seems not to go away even if I match the height and width of #contentsize to #rcontent. PHP: <div id="rcontent"> <div id=contentsize> <?php include 'home.php'; ?> </div> </div> CSS: #rcontent { width:894px; height:530px; background-color:blue; float:right; border-color:white; border-width:5px 3px 5px 3px; border-style:solid; } #contentsize { width:894px; height:530px; } Could someone help me out? Expected Result: PHP contents should fit in blue box. Thanks in Advance!!
  4. Stefany93

    Weird space appearing on the right

    Howdy, I am trying to create my website responsive. So far so good, but I got this weird white space on the right of my website and the user that is on a device smaller for 800px get a weird scroll bar. You can see it for yourself here, if you shrink the viewport to 800px or less - http://dyulgerova.info/mobile_dyulgerova/ Here is my responsive CSS /* For 800 pixels wide screens, MAX WIDTH. For example, tablets */ @media all and (max-width: 800px){ /* All images */ img {width:15vw;} /* The header */ #header{ background: #ff0000; width:100vw; } #section{ width:100vw; } #SkypeButton_Call_age_of_empires3_1_paraElement{ display:none; } #header_contact{ position: absolute; top: 120px; left: 394px; } #logo{ margin-top:20px; margin-left:0; } .langs{ margin-top:54px; margin-right:50px; } /* The nav bar */ #header #navigation{ width:100vw; height: 6.5vw; position:fixed; top:-15px; background: #000; height:10; } #header #navigation a{ border-left:1px solid #ff0000; } /* Below the header */ #main_div{ width:80vw; } footer{ width:80vw; } } And here is my NON-RESPONSIVE CSS * {margin: 0px; padding: 0px; } body { color: #E0E0E0; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; background: #9C1C6B; background: -webkit-radial-gradient(center top, circle, rgba(0,0,0,.2), rgba(0,0,0,.4)) fixed no-repeat, -webkit-linear-gradient(#9C1C6B, #CA278C) fixed no-repeat; background: -moz-radial-gradient(center top, circle, rgba(0,0,0,1), rgba(0,0,0,1)) fixed no-repeat, -moz-linear-gradient(#9C1C6B, #CA278C) fixed no-repeat; background: -o-radial-gradient(center top, circle, rgba(0,0,0,1), rgba(0,0,0,1)) fixed no-repeat, -o-linear-gradient(#9C1C6B, #CA278C) fixed no-repeat; background: radial-gradient(center top, circle, rgba(0,0,0,1), rgba(0,0,0,1)) fixed no-repeat, linear-gradient(#9C1C6B, #CA278C) fixed no-repeat; background-size:contain, contain; } a, a:active, a:visited, a:hover{ color: #FFE9E8; } h3 { margin-bottom:20px; } #header a, #header a:active, #header a:visited, #header a:hover{ color: #000; text-decoration:none; } #header{ width:100%; height:100%; background-color:#FFF; border-bottom:#F00 3px ridge; margin-bottom:50px; background-color:#FFF; background: -webkit-linear-gradient(#F3F3F3, #f6f5f3); background: -moz-linear-gradient(#F3F3F3, #f6f5f3); background: -o-linear-gradient(#F3F3F3, #f6f5f3); background: linear-gradient(#F3F3F3, #f6f5f3); } #logo{ margin-left:200px; } #header #section{ color:#000; margin:auto; } #header #navigation{ width:1000px; height:40px; margin:auto; clear:both; } #header #navigation li a{ color:#999; border-bottom:rgba(0,0,0,0) 3px ridge; width:90px; line-height:40px; float:left; text-align:center; font-style:bold; font-weight:bold; transition:all .3s; -webkit-transition:all .3s; } #header #navigation li a:hover{ color:#222; border-bottom:#000 3px ridge; } /* Makes a navigation item bigger when applied the class */ .long_nav{ width: 176px; } footer a, footer a:active, footer a:visited, footer a:hover{ color: #FFF; text-decoration:none; } figure{ width:200px; height:133px; padding:10px; margin:10px; color:#000; text-align:left; font-size:12px; float:left; background: -webkit-radial-gradient(center top, circle, #FFFFFF, #DFDFDF); background: -moz-radial-gradient(center top, circle, #FFFFFF, #F3F3F3); background: -o-radial-gradient(center top, circle, #FFFFFF, #F3F3F3); background: radial-gradient(center top, circle, #FFFFFF, #DFDFDF); } ul { list-style-type: none; } ol { list-style-type: none; } li { margin-top: 10px; } hgroup{ color:#FFF; padding:5px; border-left: #E47297 3px solid; } p { line-height: 180%; } fieldset { border: 0px currentColor; } img { border:0; max-width: 100%; height: auto; / width: 100%; /* Resizes automatically on any devise. */ } input { margin: 10px; padding: 10px; border-radius: 20px; border: 0px currentColor; width: 300px; height: 30px; } textarea { padding: 10px; border-radius: 10px; border: 0px currentColor; margin-top: 5px; } #main_div { background-color:rgba(0,0,0,.01); margin:auto; width:1000px; padding:10px; clear:both; background: -webkit-linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.02)); background: -moz-linear-gradient(rgba(0,0,0,.0), #f6f5f3); background: -o-linear-gradient(rgba(0,0,0,.0), #f6f5f3); background: linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.02)); } footer{ color:#CA278C; padding:10px; border-top:#FFF 2px solid; margin-top:20px; width:725px; padding:20px 23%; overflow:hidden; background-color:#000; height:100%; } footer #navigation{ clear:both; } #bgDeco1{ background-color:#000; position:absolute; bottom:30px; right:10px; width:150px; height:150px; border-radius:50% 50%; opacity:.4; transition:all 1s; -webkit-transition:all 1s; } #bgDeco2{ background-color:#000; position:absolute; bottom:145px; right:25px; width:100px; height:100px; border-radius:50% 50%; opacity:.3; transition:all 1.5s; -webkit-transition:all 1.5s; } #bgDeco3{ background-color:#000; position:absolute; bottom:210px; right:75px; width:80px; height:80px; border-radius:50% 50%; opacity:.2; transition:all 2s; -webkit-transition:all 2s; } #bgDeco4{ background-color:#000; position:absolute; bottom:250px; right:75px; width:50px; height:50px; border-radius:50% 50%; opacity:.1; transition:all 2.5s; -webkit-transition:all 2.5s; } #bgDeco5{ background-color:#000; position:absolute; bottom:250px; right:75px; width:75px; height:75px; border-radius:50% 50%; opacity:.25; transition:all 2.5s; -webkit-transition:all 2.5s; } #bgDeco6{ background-color:#000; position:absolute; bottom:250px; right:75px; width:55px; height:55px; border-radius:50% 50%; opacity:.35; transition:all 2.5s; -webkit-transition:all 2.5s; } #SkypeButton_Call_age_of_empires3_1 { float: right; } #div_main { width: 590px; } #skills { font-size: 19px; margin-top: 40px; margin-bottom: 40px; } .portfolio { padding:14px; margin:14px 0; min-height:200px; border-left:#E47297 2px solid; clear:both; cursor:pointer; transition:all .3s; -webkit-transition:all .7s; } .portfolio:hover{ background-color:rgba(255,255,255,.05); } #menu input{ width: 149px; height: 16px; } #menu input[type="submit"]{ padding-bottom: 25px; } #menu form{ height:300px; border:1px solid red; } #menu { margin: 10px; padding: 10px; width: 200px; float: left; } #menu a { font-size: 18px; font-weight: bold; margin-top: 10px; margin-right: 10px; display: block; } #calendar_div { border: 1px solid black; width: 245px; float: left; overflow:hidden; } .buttons { padding-right: 10px; float: right; } #calendar { width: 210px; float: left; overflow:hidden; } #calendar tr > th { color: rgb(0, 0, 0); padding-right: 20px; } #article { padding: 10px; width: 490px; float: left; margin-bottom:40px; border-bottom:2px solid red; } #article p { text-indent: 20px; } #article h1 { border-left:#FFF 2px solid; color:#FFF; background-color:rgba(255,255,255,.15); padding:5px; padding-left:10px; margin:10px 0; } #article h4 { margin: 10px; color: pink; } #comment_form { margin: auto; width: 500px; overflow: hidden; } .comment { background: rgb(167, 211, 241); margin: 10px auto 30px; padding: 10px; border-radius: 10px; border: 1px solid red; width: 500px; height: auto; color: rgb(0, 0, 0); overflow: hidden; } h3.commentator { text-align: left; } #links { width: 400px; margin:auto; } #links li { padding-top: 10px; } .about { width: 1000px; overflow: hidden; } .about img { margin: 10px; overflow: hidden; float: left; } .about p { padding: 10px; } #contact_picture { width:500px; float:right; } #contact_info { float: right; } .red { margin: 10px; padding: 10px; width: 500px; height: auto; overflow: hidden; float: left; } #contact_form { padding: 10px; width: 477px; overflow: hidden; } .secret { display: none; } #uploading { padding: 10px; border: 1px solid red; width: 500px; } .wrong_answer { background: red; padding: 10px; border: 1px solid green; color: white; } .correct_answer { background: green; border: 1px solid orange; } label { display: block; } #secret{ display:none; } /********************************** Blog ***********************************/ #category{ float:right; margin:10px; } /* the class for the flags */ .langs{ float:right; margin:15px; box-shadow: 6px 6px 15px #545454; -webkit-box-shadow: 6px 6px 15px #545454; /* Support for Chrome, Safari, iOS, Android */ -moz-box-shadow: 6px 6px 15px #545454; /* Support for Mozilla -13 */ } /************************************* WP Plugins **************************************/ #single_plugin{ width:590px; margin:10px; border-bottom: 1px solid orange; } And here is my HTML structure for the index.php file <?php include 'html/header.php'; ?> <!-- This ID holds the entire inner container for this page --> <div id="main_div"> <h1>Hello World!</h1> <h3>My name is Stefany and I am from Bulgaria. I am a computer programmer and I create websites and web applications.</h3> <p id="skills"> <strong>Programming languages:</strong> PHP, Perl 5, JavaScript <br /> <strong>Front - end:</strong> HTML5, XHTML, CSS <br /> <strong>Databases:</strong> MySQL, SQLite, MariaDB, MSSQL <br /> <strong>Frameworks:</strong> CodeIgniter <br /> <strong>E-commerce Platforms:</strong> osCommerce, UniqueFree <br /> <strong>Other:</strong> XML, AJAX, JSON <br /> <strong>Web Services:</strong> REST, SOAP <br /> <strong>Content Management Systems:</strong> WordPress, Joomla <br /> I can create forums, blogs, social networks, E - stores, portfolios, WordPress themes, plugin and pretty much any type of website you can think of. <br /> Please take a look at my portfolio below and if you are interested to hire me, please don't hesitate to <a href="contact">contact me!</a> </p> <h2>Portfolio</h2> <div class="portfolio"> <h3><a href="http://tarsis-bg.com/" target="_blank"> Tarsis </a></h3> <a href="http://tarsis-bg.com/" target="_blank"><img src="images/project23.png" width="200" height="133" alt="Company website for selling flats" /></a> <p> Tarsis is a company that builds and sells flats in Sunny Beach, Bulgaria and I made their website on WordPress, including a custom made plugin that was used to build a separate CMS within WP for management of the flats that are for sale. <br /> Technologies used: XHTML, CSS, JavaScript, PHP, MySQL, WordPress </p> </div> <div class="portfolio"> <h3><a href="http://ungerne.dk/" target="_blank"> Ungerne </a></h3> <a href="http://ungerne.dk/" target="_blank"><img src="images/project22.png" width="200" height="133" alt="Web-shop for selling kids' clothes" /></a> <p> Danish web-shop for selling kids' clothes, built on osCommerce. I made major core modifications, such as fixes on the coupon, mail, search, shipping, product and shopping systems. <br /> Technologies used: XHTML, CSS, JavaScript, PHP, MySQL, osCommerce </p> </div> <div class="portfolio"> <h3><a href="http://www.br-electronic.dk/" target="_blank"> Bramming Electronic </a></h3> <a href="http://www.br-electronic.dk/" target="_blank"><img src="images/project21.png" width="200" height="133" alt="Web-shop for selling electronics" /></a> <p> UniqueFree built Danish web-shop for selling electronics. Made core modifications in the shipping system. <br /> Technologies used: XHTML, CSS, JavaScript, PHP, MySQL, UniqueFree </p> </div> <div class="portfolio"> <h3><a href="http://babyfryd.dk/" target="_blank"> BabyFryd </a></h3> <a href="http://babyfryd.dk//" target="_blank"><img src="images/project20.png" width="200" height="133" alt="BabyFryd web-shop for selling kids' clothes" /></a> <p> Another Danish web-shop for selling children's clothes build on UniqueFree <br /> Technologies used: XHTML, CSS, JavaScript, PHP, MySQL, UniqueFree </p> </div> <div class="portfolio"> <h3><a href="http://iskampak.com" target="_blank"> Iskam Pak </a></h3> <a href="http://iskampak.com/" target="_blank"><img src="images/project19.png" width="200" height="133" alt="A website about Angry Birds" /></a> <p> Dating website made entirely from scratch without any frameworks with a custom CMS build into it. <br /> It is currently a work in progress. <br /> Technologies used: XHTML, CSS, JavaScript, PHP, MySQL </p> </div> <div class="portfolio"> <h3><a href="http://angrybirds.me/" target="_blank">Angry Birds </a></h3> <a href="http://angrybirds.me/" target="_blank"><img src="images/project18.png" width="200" height="133" alt="A website about Angry Birds" /></a> <p> A website where you can play the legendary game Angry Birds for free. <br /> I made it with WordPress by tweaking a theme and installing plugins. <br /> Technologies used: XHTML, CSS, WordPress, PHP </p> </div> <div class="portfolio"> <h3><a href="http://dyulgerova.info/nc/index.php" target="_blank"> Wallace & Hull LLP</a></h3> <a href="http://dyulgerova.info/nc/index.php" target="_blank"><img src="images/project17.png" width="200" height="133" alt="Project 12" /></a> <p> The homepage of <strong>"Wallace and Hull LLP"</strong> lawyer firm from Oregon, Washington. It's part of a WordPress theme I made. <br /> Technologies used: HTML5, CSS3, WordPress </p> </div> <div class="portfolio"> <h3><a href="http://www.automirrorsexpress.com/" target="_blank"> Auto Mirrors Express</a></h3> <a href="http://www.automirrorsexpress.com/" target="_blank"><img src="images/project15.jpg" width="200" height="133" alt="Project 12" /></a> <p> E - shop for car mirrors. Created a tag cloud, fixed many DB issues and configured the server. <br /> Technologies used: XHTML, CSS, PHP, JavaScript, Perl, osCommerce </p> </div> <div class="portfolio"> <h3><a href="http://www.autolightcenter.com/index.php" target="_blank"> Auto Lights Center</a></h3> <a href="http://www.autolightcenter.com/index.php" target="_blank"><img src="images/project14.jpg" width="200" height="133" alt="Project 12" /></a> <p> E - shop for car lights. Made some grand changes with the design, the entire back end code and the DB. Greatly increased the security. <br /> Technologies used: XHTML, CSS, PHP, JavaScript, Perl, osCommerce </p> </div> <div class="portfolio"> <h3><a href="http://radiosean.co.uk/"> Radio Sean</a></h3> <a href="http://radiosean.co.uk/"><img src="images/project13.jpg" width="200" height="133" alt="Project 12" /></a> <p> Homepage of a British radio station. I created the search engine of the website. <br /> Technologies used: XHTML, PHP </p> </div> <div class="portfolio"> <h3><a href="/portfolio/otto" target="_blank"> Otto Steininger</a></h3> <a href="http://www.ottosteininger.com/" target="_blank"><img src="images/project12.jpg" width="200" height="133" alt="Project 12" /></a> <p> Coming soon page for the website of an animator/illustrator professional. <br /> Technologies used: XHTML, CSS, Javascript </p> </div> <div class="portfolio"> <h3><a href="http://freepic.eu/" target="_blank"> FreePic</a></h3> <a href="http://freepic.eu/" target="_blank"><img src="images/project11.png" width="200" height="133" alt="Project 11" /></a> <p> Free image hosting website. I created the GIF category, the admin panel and increased the security of the website. <br /> Technologies used: XHTML, CSS, PHP, MySQL, GD </p> </div> <div class="portfolio"> <h3><a href="http://studyingthepast.com/" target="_blank"> Studying The Past</a></h3> <a href="http://studyingthepast.com/" target="_blank"><img src="images/project10.png" width="200" height="133" alt="Project 10" /></a> <p> A website about history. 100% XHTML 1.0 and CSS valid. <br /> Technologies used: XHTML, CSS, PHP, SQLite </p> </div> <!-- The "portfolio" class is a div that holds one website at a time. That's why there are so many declarations of that div --> <div class="portfolio"> <!-- The name of the website in a header element with a link to it --> <h3><a href="http://sundaygolessons.com/" target="_blank">Sunday Go Lessons</a></h3> <!-- And a picture of the website again with a link to it because it's cool to also have a screenshot beside just a super boring link, WOW --> <a href="http://sundaygolessons.com/" target="_blank"><img src="images/project9.png" width="200" height="133" alt="Project 9" /></a> <!-- And a litte explanation as to what the website is the hell about. --> <p> A webshop for selling and renting <a href="https://www.usgo.org/what-go">Go</a> related books and videos, with integrated PayPal payment system. <br /> Technologies used: XHTML, CSS, PHP, MySQL, PayPal </p> </div> <!-- End of the previous website and now it's the turn of the next. The bragging continues... --> <div class="portfolio"> <h3><a href="http://code-forums.info/" target="_blank"> PHP Forum</a></h3> <a href="http://code-forums.info/" target="_blank"><img src="images/project7.png" width="200" height="133" alt="Project 7" /></a> <p> A programming forum coded from scratch, without using any PHP frameworks or ready made stuff. <a href="http://github.com/Stefany93/PHP-Forum">Source code.</a> <br /> Technologies used: XHTML, CSS, PHP, MySQL, JavaScript </p> </div> <div class="portfolio"> <h3><a href="http://dyulgerova.info/project_blog/" target="_blank">Bulgarian newspapper</a></h3> <a href="http://dyulgerova.info/project_blog/" target="_blank"><img src="images/project6.png" width="200" height="133" alt="Project 2" /></a> <p> This project has been made half way and it is currently frozen. <br /> Technologies used: XHTML, CSS, PHP, MySQL, JavaScript </p> </div> <div class="portfolio"> <h3><a href="http://www.bettercitiesforum.com/" target="_blank"> WordPress website about improving neighbourhoods</a></h3> <a href="http://www.bettercitiesforum.com/" target="_blank"><img src="images/project5.png" width="200" height="133" alt="Project 2" /></a> <p> I installed a Simple Machines Forum and made some tweaks on the source code as well on the site. <br /> Technologies used: WordPress, PHP </p> </div> <div class="portfolio"> <h3><a href="big_images/project4.png" target="_blank">Social Network</a></h3> <a href="big_images/project4.png" target="_blank"><img src="images/project4.png" width="200" height="133" alt="Project 2" /></a> <p> Including a forum, an individual learning module and an event calendar. The social network is private for the residents anesthesiologists of the Texas Tech University <br /> and therefore not in the public domain. I created it in twenty days from scratch. <br /> Technologies used: HTML5, CSS, PHP, MySQL, JavaScript. </p> </div> <div class="portfolio"> <h3><a href="http://chrisshilts.com/" target="_blank">Portfolio for a web designer.</a></h3> <a href="http://chrisshilts.com/" target="_blank"><img src="images/project3.jpg" width="200" height="133" alt="Project 2" /></a> <p> Basically I made the blog page with a custom Content Management System including an Admin panel. <br /> Technologies used: PHP, MySQL, JavaScript. </p> </div> <div class="portfolio"> <h3><a href="http://www.borsp.com/sandh/dazer/" target="_blank"> E - Shop</a></h3> <a href="http://www.borsp.com/sandh/dazer/" target="_blank"><img src="images/project2.jpg" width="200" height="133" alt="Project 2" /></a> <p> I made the front - end and my colleague made the back - end. It's in a process of being uploaded. <br /> Techologies used: XHTML, CSS, JavaScript. </p> </div> </div> <?php include 'html/footer.php'; ?> Please help me! I managed to fix the problem with "overflow-x:hidden" property of "body" in CSS, but I do believe this is way too wrong.
  5. jazza96

    Why isn't my form sending?

    Hi I am trying to build a contact form and my form isnt sending. Here is my code. (its in a modal window)(I have my email address in the $to variable in the code) <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $from = 'From: Jarrod'; $to = 'email'; $subject = "Landing page"; $body = "From: $name\n Email: $email\n Message:\n $message"; ?> <?php if ($_POST['submit']){ if(mail ($to, $subject, $body, $from)) { echo '<p>Your message has been sent!</p>'; }else{ echo '<p>Something went wrong, go back!</p>'; } } ?> <div class="modal fade" id="contact" role="dialog"> <div class=" modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h2>Contact us</h2> </div> <div class="modal-body"> <form method="post" action="index1.php"> <div class="form-horizontal"> <label for="Name">Your Name</label> <input type="text" class="form-control" id="name" placeholder="Name"> <label for="Email">Your Email</label> <input type="Email" class="form-control" id="email" placeholder="Email"> <label for="Message">Message</label> <textarea class="form-control" id="message" placeholder="Message"></textarea> <input type="submit" value="Send">Send</button> </form> <div class="modal-footer"> <a class="btn btn-default" data-dismiss = "modal">Close</a> </div> </div> </div> </div>
  6. jackgoddy123

    Adding content icon for toggle effect

    Hello all, I am quite new in the world of css and js So, if some could please help me out with code below. I am working on js toggle effect and it works perfectly fine with icon(image). Below is the code for the same: Since in the above code you can see that i have used images. But the question raised that I need content icon (using font awesome) in-spite of images. Below is the code using font awesome as content images.But it not working fine. If some one could please help me out with this or can give any suggestion.
  7. Hey! I want to create a website that can test your counting pace. I’ll make colored, square div that change color after 10 to 30 seconds when you hover over it, and then you’ll type down how long you think it took in a form to check if you’re right. My solution to do this is to create the PHP variable $time = rand(10,30), and in CSS get the div:hover transition-delay to be $time. Then, after the form, I need the same variable for if($_POST[timeguess] = $time) {echo “Correct!”}. I have no idea how to access the same variable in both the CSS and HTML, so I hope some of you can help me out! Thanks
  8. Hi, I'm currently stuck as two how I can do this, I have a desktop and mobile design where on Desktop the design acts like tabs but on mobile it acts as an Accordion. But i'm not too sure how the best way to go about this is. Please see attached the designs. Any examples or advice on how to do this would be greatly appreciated.
  9. Hi all I am using media queries in my css to create a responsive site, when I view the site on a mobile, the site responds as I intend it to. However if I view it on a desktop and resize the screen, it doesn't respond as I would like, the idea is, if I resize the desktop version enough then I will view the mobile version. in one css file I have @media screen and(max-width: 1024px) { css styles } and then on another file, I have the following, the idea with this is when I get below the specified screen size the items don't show @media screen and (min-width: 1024px) { } if you need any more info let me know. Thanks Mark
  10. I've finished designing my website home page and I've now moved on the some of the other pages, I want my header and footer to appear the same on every page. I've tried this basic way of linking the same stylesheet that makes up my header/footer in the second HTML file (already used in the homepage): <link rel="stylesheet" href="footer.css" type="text/css"/> <link rel="stylesheet" href="header.css" type="text/css"/> I now understand that this isn't going to work. Would a server-side scripting language be my best bet here? Something like PHP? If so, would anyone be able to link me with an article on how I could do this in PHP, I presume with the include function? I've had answers elsewhere but this, for me, isn't working: "You are currently only linking the css for the header and footer. If you want to include the html as the same, create two separate files header.php and footer.php, then include them into each webpage. <?php include('path/to/header.php');?> // in the location you want the header in the page <?php include('path/to/footer.php');?> // in the location you want the footer Essentially, you're making partials and placing them wherever you want them" Any help would be greatly appreciated.
  11. Hello, I am looking for a css dev to complete a navigation menu (or replace it). I will give you the current code (static html and css) you will have to create the css on your own server. Please do not ask for me to create an environment for you to work in. The dev needs good English, French or Dutch language skills to communicate. After the navigation menu is finished, more work for general layout is possible. you can look at the current version here http://www.test.anatak.com/en/twintipFusion3lw.php payment will be made by paypal after delivery 5000 yen for the navigation with general layout of website CSS navigation in CSS and HTML (No javascript) Responsive style for mobile devices general layout for site (div for navigation, content and footer) thank you anatak Please contact me on info [@] anatak.com
  12. I just want to add a css cass named "active" to my navigation links when its page opened using php. In my website the content have broken into its individual components. And those components are separated, organized, and put back together using one index file. (website bootstrap file) Actually I am modularizing this website using php. My Navigation is something similar to this code - ... <li> <a href="index.php?p=dashboard">Dashboard</a> </li> <li> <a href="index.php?p=page-two">Page Two</a> </li> <li> <a href="index.php?p=page-three">Page Page Three</a> </li> ... This is how my index.php looks like - // Validate what page to show: if (isset($_GET['p'])) { $p = $_GET['p']; } elseif (isset($_POST['p'])) { // Forms $p = $_POST['p']; } else { $p = NULL; } // Determine what page to display: switch ($p) { case 'dashboard': $page = 'dashboard.inc.php'; $page_title = 'Control Panel'; break; case 'page-three': $page = 'page-three.inc.php'; $page_title = 'Page Three'; break; case 'page-two': $page = 'page-two.inc.php'; $page_title = 'Page Two'; break; // Default is to include the main page. default: $page = 'login.inc.php'; $page_title = 'Control Panel Login'; break; } // End of main switch. // Make sure the file exists: if (!file_exists('./modules/' . $page)) { $page = 'login.inc.php'; $page_title = 'Control Panel Login'; } include('./includes/header.html'); include('./modules/' . $page); include('./includes/footer.html'); I tried it something like this - case 'dashboard': $page = 'dashboard.inc.php'; $page_title = 'Control Panel'; $class == ($page == $p) ? 'active' : ''; break; And adding this class to my navigation <li> <a class="<?php echo $class;?>">.... </li> But this is not working for me. hope somebody may help me out. Thank you.
  13. A website user was telling me that text wasn't appearing on bold when the CSS called for font-weight:bold. She's using a Mac desktop, with Safari (and possibly Chrome; I don't have all info yet). The font is Raleway: <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css"> From what I was able to find -- no one on Google seemed to have this exact issue -- sometimes Safari won't show bold unless you specifically reference a font for it? Is that right? So the solution seems to be changing the stylesheet reference to: <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css"> This just seems incredibly odd to me. I've never heard of a user having this issue before. Is this known? Is that the actual fix? Am I to assume all browsers on Chromebook (my preferred platform) and Linux and Windows just create an ad-hoc "faux bold" to display, if bold isn't specified? A lot of questions, but this is just a weird issue, especially since I haven't heard of it until June 2016.
  14. Hi I am currently using bootstrap to design a landing page. I want to add a contact us form and I need to use a text area for long messages. When I use it with bootstrap it just appears as a single line and not a large field. How can I style just 1 field instead of all of them? This is my HTML code. <form> <div class="form-horizontal"> <label for="Name">Your Name</label> <input type="text" class="form-control" id="Name" placeholder="Name"> <label for="Email">Your Email</label> <input type="Email" class="form-control" id="Email" placeholder="Email"> <label for="Message">Message</label> <input type="textarea" class="form-control" id="Message" placeholder="Message"> </form>
  15. Hello, I have this small html and php files and the problem is I can't send any emails... When I press submit it just opens php file on the browser. Can anyone help me? Here is the code <html> <link href="style.css" rel="stylesheet" type="text/css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Contact Form</title> </head> <body> <header class="body"> </header> <section class="body"> <form method="post" action="mail.php"> <label>Name</label> <input name="name" placeholder="Type Here"> <label>Email</label> <input name="email" type="email" placeholder="Type Here"> <label>Message</label> <textarea name="message" placeholder="Type Here"></textarea> <label>*What is 2+2? (Anti-spam)</label> <input name="human" placeholder="Type Here"> <input id="submit" name="submit" type="submit" value="Submit"> </form> </section> <footer class="body"> </footer> </body> </html> <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $from = 'From: TangledDemo'; $to = 'myemail@gmail.com'; $subject = 'Hello'; $human = $_POST['human']; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; if ($_POST['submit']) { if ($name != '' && $email != '') { if ($human == '4') { if (mail ($to, $subject, $body, $from)) { echo '<p>Your message has been sent!</p>'; } else { echo '<p>Something went wrong, go back and try again!</p>'; } } else if ($_POST['submit'] && $human != '4') { echo '<p>You answered the anti-spam question incorrectly!</p>'; } } else { echo '<p>You need to fill in all required fields!!</p>'; } } ?>
  16. Sally

    E-fiction skin help

    Hi, I hope I am in the right place for some help. If not, I apologize I have just installed e-fiction on my website and I am having a little issue with some of the codes and where I need to go to modify things. This is a screenshot of the page and what I am trying to modify. What I want to do is make the banner CENTERED. This I thought was easy but whatever I do, it doesn't seem to work. I must be looking in the wrong place. Secondly, I want to move the menu bar - HOME - MEMBERS - SEARCH etc underneath the banner and that too to be centered. I am going to upload the files to Sendspace ( http://www.sendspace.com/file/mi0i6e), as the zip is too big to upload here and I am unsure which files need to be modified (that is where I am stuck) Thank you SO much, and I hope someone can help me. I am trying to learn all of this and it's all so confusing
  17. Hi All, I have tried with no luck the navigation just doesn't want to stay on the same line... HTML: <div id="nav-menu" class="navbar navbar-style-dark navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="img/Logos/george-little-logo.png" alt="George Little Logo" /></span></a> <button type="button" id="navbar-toggle-menu" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="search"> <button type="button" class="navbar-toggle"> <span><i class="glyphicon glyphicon-search search-mobile-btn"></i></span> <div class="search-box"> <form action="" method="get"> <input type="text" placeholder="Search..." name="search"> </form> </div> </button> </div> </div> <div id="myNavmenu" class="collapse navbar-collapse" id="navbar-ex-collapse" role="navigation"> <ul class="nav"> <li> <a class="active" href="#">Home</a> </li> <li> <a href="#">Showings</a> </li> <li> <a href="#">Photos</a> </li> <li> <a href="#">Videos</a> </li> <li> <a href="#">Mixes</a> </li> <li> <a href="#">Hire</a> </li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">Sign Up</a></li> <li class="divider-vertical"></li> <li> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a> <div class="more-drop"> <form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal"> <input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em"> <input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In"> </form> </div> </li> </ul> </div> </div> jQuery: function renderMenu() { if($(window).width() < 768 || isMobile.any()) { $("#myNavmenu").removeClass("collapse"); $("#myNavmenu").removeClass("navbar-collapse"); $("#myNavmenu ul.nav").removeClass("navbar-nav"); $("#myNavmenu ul.nav").removeClass("navbar-left"); $("#myNavmenu ul.nav").addClass("navbar-right"); $("#myNavmenu").addClass("navmenu-fixed-right"); $("#myNavmenu").addClass("offcanvas"); $(".navbar-toggle").css("display", "block"); $(".navbar-header").css("float", "none"); } else { $("#myNavmenu").removeClass("navmenu-fixed-right"); $("#myNavmenu").removeClass("offcanvas"); $("#myNavmenu").addClass("collapse"); $("#myNavmenu").addClass("navbar-collapse"); $("#myNavmenu ul.nav").addClass("navbar-nav"); $("#myNavmenu ul.nav").addClass("navbar-left"); $("#myNavmenu ul.nav").removeClass("navbar-right"); $(".navbar-toggle").css("display", "none"); $(".navbar-header").css("float", "left"); } } $(window).ready(function() { renderMenu(); }); $(window).resize(function() { renderMenu(); }); if($(".navbar").width() >= 768) { alignMenu(); } $(window).resize(function() { $("#myNavmenu .nav").append($("#myNavmenu .nav li.more ul").html()); $("#myNavmenu .nav li.more").remove(); alignMenu(); }); function alignMenu() { var w = 0; var mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - 350; if($(".more").length) { mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - $(".more").outerWidth(true); } var i = -1; var menuhtml = ''; jQuery.each($("#myNavmenu .nav").children(), function() { i++; w += $(this).outerWidth(true); if($(".navbar").width() >= 768 && !isMobile.any()) { if (mw < w) { menuhtml += $('<div>').append($(this).clone()).html(); $(this).remove(); } } }); if(menuhtml != "") { $("#myNavmenu .nav").append('<li class="more">' + '<a href="#">More <i class="glyphicon glyphicon-chevron-down"></i></a>' + '<div class="more-drop"><ul>' + menuhtml + '</ul></div>' +'</li>'); } } I'll attach two screenshots to show the menu before and after. Any help would be much appreciated.
  18. animatecss

    rotate 360 - not return (?)

    How to do that when you turn 360 degrees no longer come back? Only in this way was? Thanks. If you have any suggestions for my problem, please help. I can not think of anything related to finding a solution to the problem. I warmly greet. DEMO: http://codepen.io/anon/pen/ozAHu
  19. I am a plug-in author and need to have a simple CSS editor in my plug-in options page. what is the best way to do this? At now my plug-in just show a simple textarea, but I need to make it highlighted. Thanks.
  20. I want a div at the bottom of another div, and I want it centered, just using css not javascript. HTML <div id="parent"> <div id="bottom_element">test</div> </div> CSS #parent {height:100% width:100%} #bottom_element {position:absolute; bottom:5px; width:200px; margin:0 auto} So the issue is that position absolute and margin auto do not seem to work together. What is an alternative without javasript?
  21. Hello - hope you are all well. I am creating a website for a family friend who has a shop. See preview of the site in this picture .... Currently the results are showing in one column. I want to show them in three columns in the format of: 1 2 3 4 5 6 7 8 9 etc But formatted with the picture and then the title and the border. The current code i have is.... HEAD <?php $sql = "SELECT * FROM abs_productcat WHERE catid = $catid ORDER BY catid ASC"; $can = mysql_query($sql); $catname = mysql_fetch_assoc($can); ?> BODY <?php while ($row_pro = mysql_fetch_assoc($rs_proddetails)) { ?><tr> <td><table width="243" border="0" align="left" cellpadding="15" cellspacing="0" class="sectionborders"> <tr> <td height="120" align="center"><p><strong><a href="indproducts.php?ProductID=<?php echo $row_pro['ProductID']; ?>"><img src="products/product_<?php echo $row_pro['ProductID']; ?>" alt="<?php echo $row_pro['ProductName']; ?>" height="120" class="sectionborders" border="0" /></a></strong></p> <p><strong><a href="indproducts.php?ProductID=<?php echo $row_pro['ProductID']; ?>" class="products"><?php echo $row_pro['ProductName']; ?></a></strong></p></td> </tr> </table></td> </tr> <tr> <td> </td> </tr> <?php } ?> THANK YOU FOR YOUR HELP!!!
  22. I have a small issue here which I can't quite figure out. I have three containers on one page all below each other. One for buttons, a JS image slideshow and a description box. The image slider seems to take up unnecessary space when the browser is resized activating media queries: http://gyazo.com/33376dcadc99cba69d5668e240fae788 CSS desktop view (without media queries): body { background: #141414 url('../images/background1.png'); background-repeat: repeat-y; background-attachment:fixed; background-position:center; } #container{ height:450px; width:840px; margin:120px auto 2% auto; position:relative; } #container2{ height:60px; width:840px; margin:0 auto 50px auto; position:relative; -moz-box-shadow:0 0 5px 5px black; -webkit-box-shadow:0 0 5px 5px black; box-shadow:0 0 5px 5px black; } #container2 p{ color:white; font-size:15px; padding-left:5px; } #container2 h2{ color:white; font-size: 18px; text-decoration:none; padding-left:5px; padding-top:2px; } #img{ height:450px; width:840px; position:absolute; -moz-box-shadow: 0 0 5px 5px black; -webkit-box-shadow: 0 0 5px 5px black; box-shadow: 0 0 5px 5px black; } #l_holder{ height:450px; width:100px; position:absolute; left:0px; top:0px; cursor:pointer; } #r_holder{ height:450px; width:100px; position:absolute; right:0px; top:0px; cursor:pointer; } .left{ height:50px; width:50px; position:absolute; top:45%; left:0px; } .right{ height:50px; width:50px; position:absolute; top:45%; right:0px; } .clear{ clear:bottom; } CSS with media queries, this is where the container is causing a problem: @media all and (min-width: 3.5in) and (max-width: 10in) { body { background: #141414; } #container{ height:30%; width:100%; margin:5% auto; padding:0 0 0px 0; } #container2{ width:100%; margin: 0; padding: 0; } #container2 p{ padding-left:3px; } #container2 h2{ padding:5px 0 0 3px; } #container2 .body_black_box{ } #img{ height:80%; width:100%; } #l_holder{ height:80%; } #r_holder{ height:80%; } .left{ } .right{ } .clear{ } } Any help is greatly appreciated.
  23. I have 3 price tables on my page. These tables under 720px width resolution should get one under the other one (i use bootstrap). The problem is that in any browsers they align well but on desktop safari, ios safari, ios firefox, ios chorome the tables not aligning well at all. You can take a look HERE on safari under 720px resolution to see how it looks. I don't manage to see what is causing the problem.
  24. Can anyone suggest how to build web app like http://www1.lost-in-val-sinestra.com/ without flash. We want to pull the data from facebook and using pulled data edit the sample video and play in the browser. I was thinking to use image magick with ffmpeg to edit the video but unable to do it successfully. I tried to edit video using below steps 1. Extract all frames from the video using ffmpeg. 2. Identify the frames need to be customized. 3. Identify the coordinates of placeholders where we need to place the facebook data. 4. Using image magick customized frames with facebook image (facing difficulty here as the video moves continously taking coordinate of each frames is tedious) 5. Create final video with edited frames using ffmpeg.

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.