Search the Community
Showing results for tags 'css'.
-
Wasnt sure whether to put this in Javascript or CSS, sorry... I'm using Skrollr at this dev URL (http://workwave.joomlatest01.mms-dev.com/) to make all the desk items "slide away" NOTE: things are messy currently but you get the gist of what happens (i.e. the clutter moves away and the software on the monitor replaces it) I'm using this "helper" function, found here (https://www.bram.us/2014/01/01/skrollr-css-animations-linked-to-scroll-position/)... var setSkrollr = function($el, data) { for (var i = 0, l = data.length; i < l; i++) { // loop all data entries (scroll positions + css property & value) var d = data[i], // the current data entry px = d[0]; // the scroll position (in pixels) css = d[1]; // the css property + value to set $el.attr('data-' + px, css); } } So the skrollr code for these moving desk items looks like this currently... jQuery(function($) { setSkrollr($('#t3-mainnav'), [[0, 'height: 100px'], [300, 'height: 50px']]); setSkrollr($('#t3-mainnav .container'), [[0, 'top: 25px; height: 100px'], [300, 'top: 0px; height: 50px ']]); setSkrollr($('#filecabinet'), [[0, 'top: -60px; left: 60%; display: block;'], [300, 'top: 280px; left: 200%; display: none']]); setSkrollr($('#calculator'), [[0, 'top:520px; left:0%'], [300, 'top:700px; left:-200%']]); setSkrollr($('#stapler'), [[0, 'top:440px; left:12%'], [300, 'top:700px; left:-200%']]); setSkrollr($('#pens'), [[0, 'top:280px; left:38%;'], [300, 'top:580px; left:-200%; ']]); setSkrollr($('#postits'), [[0, 'top:470px; left:70%; display: block;'], [200, 'top:700px; left:200%; display: none;']]); setSkrollr($('#cup'), [[700, 'top:640px'], [1800, 'top:-500px'] ]); setSkrollr($('#map'), [[0, 'top:530px; left:73%; display: block'], [200, 'top:700px; left:200%; display: none; ']]); setSkrollr($('#calendar'), [[0, 'top:500px; left:22%;display: block'], [300, 'top:740px; left:-200%; ']]); setSkrollr($('#monitor'), [[0, 'display:none'], [100, 'display:block; top: 100%'], [300, 'top:11%; position: fixed'], [700, 'top:11%'], [1600, 'top:-100%'] ]); setSkrollr($('#headline'), [[700, 'top:90px'], [1800, 'top:-400px'] ]); setSkrollr($('#desk'), [[700, 'top:560px'], [1800, 'top:-500px'] ]); setSkrollr($('.toplink'), [[0, 'display:block'], [10, 'display:none']]); skrollr.init({ smoothScrolling: false }); I can change the size of the images based on screen resolution using CSS Media Queries and "scale" to reduce the size of the images as the screen width decreases. But right now things are POSITIONED using that skrollr helper function above and I can't change the positions based on screen resolutions. In other words, whatever position I specify in the helper function is the position always. So I can say start the map 85% from the left and it will always be 85% from the left regardless of screen size. So visually it starts in different spots, i.e. if things are positioned OK on a 1920 monitor, when you go down to a 1024 monitor, things are not ideally positioned. It would be a lot of work, but if I could adjust starting/ending positions in media queries, I could make things look perfect at pretty much every resolution. Anyone know if this is possible? I'm new to Skrollr so may just be missing something. Or if anyone has other ideas on how to do this animation easier/more efficiently, please let me know. Thanks!
-
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.
-
Hi, I have the following setup: A main-page.php that is consisted of: 1) A header 2) A nav bar 3) Content (is loaded inside a <div id="dynamic-content"></div>) 4) Footer Inside the nav bar you find several options (ex. About Us, Contact Us, etc..). Lets say that the script responsible for "About Us" is called about-us.php. What i want to achieve is to load the output of about-us.php page inside the content area (aka the dynamic-content div), as soon as i press the "About Us" button (#about-us div). In order to achieve this i use the following AJAX call: $("#about-us").on('click', function(){ $.ajax({ url: "about-us.php", success: function(output){ $("#dynamic-content").html(output); } }); }); Both main-page.php and about-us.php include their own CSS and JavaScript files: main-page.js and main-page.css included in main-page.php about-us.js and about-us.css included in about-us.php THE PROBLEM I FACE: Initially the tabs inside nav bar (About us, Contact Us, etc) were stand alone pages, meaning when you clicked on the link it redirected you to a new URL (for example http://www.domain.com/about-us.php). In this case about-us.php was consisted of a head where all CSS was included, a body where all JS was included, In other words it was a complete HTML/PHP page. The page was working properly. When i tried to load this page into a div inside main-page.php, i started facing some problems. Sometimes CSS was overwritten by the CSS of Contact Us causing problems (at this point i have to mention that since about-us.php and contact-us.php were stand alone pages, sometimes we used the same classes/ids to target DOM elements). Problems started to happen with JS as well. THE QUESTION: What is the correct way to use CSS and Javascript files of about-us.php? Should i include them inside the about-us.php script or include them inside the main-page.php? Do i have to create one big CSS and one big JS file that will include all previously created CSS and JS that will target each element of each imported page? Is there another way? Thanks in advance.
-
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>
-
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>
-
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.
-
Keeping my header and footer on all webpages using PHP?
Coplestone posted a topic in PHP Coding Help
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. -
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.
-
This question has been asked almost exactly: https://stackoverflow.com/questions/20982768/wrap-multi-column-div-around-image I apologize for asking here but the question is almost a year old, and I can't add a comment to it anyways. This is killing me. I'm trying to achieve the same thing only with 3 columns. I have to match a printed publication with no other options. I know the width of images, but the text will always be different lengths. Width of an image will always be 1 or 2 columns, height will always be different. Sometimes there is more than one image lined up vertically. Same widths, different heights. Open up any magazine and you will see what I am talking about. Column span seems to be all or 1, and I am uncomfortable with it's browser support. I'd also have to perfectly position it inside the content text, and because I want to automate things this isn't an option. Am I incorrect? View my current work here: http://www.cswea.org/mag_templates/ The code looks like this: <div style="margin-left:300px;margin-right:300px;"> <div style="margin-left:10px;margin-bottom:10px;display:inline-block;float:right;background-color:blue;width:600px;height:500px;"></div> <div style="display:inline-block;float:left;-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;-webkit-column-rule: 1px outset grey;-moz-column-rule: 1px outset grey;column-rule: 1px outset grey;"> <?php include("content.php"); ?> </div> </div> content.php is 4 P tags with the garbage text inside. As you see, it matches what the OP in the first link is trying to do. If I could post a follow up question/comment that isn't an answer I'd post there. If I remove the columns, the text wraps the way I want it to but it won't fly. Absolutely MUST be 3 columns wrapped around these images and I feel like I'm against a wall here. All my research and googling, or following links from that stack overflow post tells me this isn't possible. I like to believe that in the world of html and css, anything is possible. My other option is a non column divided div, but that means I would have to develop an intelligent way to divide the text up into each div so it looks natural like a magazine article. content.php will always be a list of paragraph tags filled with any length of text so getting the desired result is no simple task. Any tips tricks or hints? Is there somewhere that I can submit the need for this to those involved with what is in the next versions of CSS or HTML? I'm sure if there is that many have already submitted so maybe one more person will help? Is there an HTML5 solution I'm missing? Thank you so much for taking the time to read this! [EDIT] The PDF of the magazine I am working with is here: http://www.cswea.org/magazine/CS_Fall2014_RICH.pdf On page 24-27, the plant profile article, this is what I need to reproduce. [EDIT]
- 1 reply
-
- columns
- wrapping text
-
(and 2 more)
Tagged with:
-
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
-
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!!
-
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.
-
Hi again PHP Freaks. So I would like to code something similar to the buy menu of Counter-strike: Global offensive in-game module, just in a browser and for a project of mine. I've made the design in photoshop to illustrate better. I just don't know what I should look into to make this kind of menu, I would love if someone could explain me what languages that this would require. (I'm guessing HTML, CSS and jQuery but I am not sure) more specific help like which particular codes would be much appreciated. Here is a picture of what I would like to create. (Also attached) http://i1227.photobucket.com/albums/ee433/rec0ill/CSGOKeyz_zps4195288a.png
-
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!!!
-
i can do stuff in html, php, flash, java and server developement and work for more then 8 years in different segments for webprogramming. german.
-
I am partnered with a marketing company located in downtown Chicago that is in need of a Sr. PHP Developer. This person will be designing, planning, and building complex content and data management systems from the ground up utilizing PHP technologies and frameworks. This is a permanent/direct hire opportunity. Must have experience with: CodeIgniter or Laravel frameworks GIT or SVN Front end technologies (HTML, CSS, etc.) Salary expectations: $100k - $125k (based on experiene) If interested please send resumes/inquries to Brittany Green at bgreen@awistaffing.com Please note: We do not offer sponsorship at this time (h1b, L2, etc.)
-
<html> <head> <title>Citigate Travel Plus</title> <link rel="stylesheet" type="css" href="homepage.css"/> <link rel="stylesheet" type="css" href="modalcss.css"/> <link type="text/css" href="jquery-ui-1.7.3.custom.css" rel="stylesheet" /> <script src = "jquery-1.6.2.min.js" type = "text/javascript"></script> <script src = "jquery-ui-1.7.3.custom.min.js" type = "text/javascript"></script> <script type='text/javascript' src='slideshow.js'></script> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript' src='modal.js'></script> </head> <body> <?php include 'layoutbasic.php'; require_once("connect.php"); session_start(); $page="homepage.php"; $status = $_SESSION['status']; $position=""; $featuredspot = array(); $slideshow = mysql_query("select * from tblhomepageslideshow ORDER BY ID DESC "); while($r=mysql_fetch_array($slideshow)) { array_push($featuredspot, $r[1]); } ?> <img src="promo.png" id="promo"/> <input type="image" src="inquiry.png" name="inquiry" id="inquiry" onclick="window.location.href = 'searchinquiry.php'"/> <input type="image" src="operator.png" name="operator" id="operator"/> <div id="photoShow"> <div class="current"> <img src="<?php echo $featuredspot[0]?>" alt="Photo Gallery" width="700" height="280" class="gallery"/> </div> <div> <img src="<?php echo $featuredspot[1]?>" alt="Photo Gallery" width="700" height="280" class="gallery"/> </div> <div> <img src="<?php echo $featuredspot[2]?>" alt="Photo Gallery" width="700" height="280" class="gallery"/> </div> <div> <img src="<?php echo $featuredspot[3]?>" alt="Photo Gallery" width="700" height="280" class="gallery"/> </div> <div> <img src="<?php echo $featuredspot[4]?>" alt="Photo Gallery" width="700" height="280" class="gallery"/> </div> </div> <?php if($status==1) { $email = $_SESSION['email']; $check = mysql_query("select * from tblmember where emailadd = '$email' "); $row1 = mysql_fetch_assoc($check); $fname = $row1['firstname']; $position = $row1['status']; echo "<div style = 'position:absolute; top:60; left:700; width:460; height:50; text-align:right; font-family:arial;'>"; echo "<h2>Hello, $fname</h2>"; echo "</div>"; } else{ echo "<div style = 'position:absolute; top:55; left:700; width:460; height:50; text-align:right; font-family:arial;'>"; echo "<h1>Citigate Travel Plus</h1>"; echo "</div>"; } include 'layoutmenus.php'; ?> <div id="chatbox"> <script id="sid0020000064511697063">(function() {function async_load(){s.id="cid0020000064511697063";s.src=(window.location.href.indexOf('file:///') > -1 ? 'http:' : '') + '//st.chatango.com/js/gz/emb.js'; s.style.cssText="width:250px;height:500px;"; s.async=true;s.text='{"handle":"citigatetravelplus","arch":"js","styles":{"a":"0f507e","b":100,"c":"FFFFFF","d":"FFFFFF","k":"0f507e","l":"0f507e","m":"0f507e","n":"FFFFFF","q":"0f507e","r":100,"allowpm":0,"cnrs":"0.35"}}'; var ss = document.getElementsByTagName('script'); for (var i=0, l=ss.length; i < l; i++){ if (ss.id=='sid0020000064511697063'){ss.id +='_';ss.parentNode.insertBefore(s, ss);break;}}}var s=document.createElement('script'); if (s.async==undefined){if (window.addEventListener) {addEventListener('load',async_load,false);} else if (window.attachEvent) {attachEvent('onload',async_load);}}else {async_load();}})(); </script> </div> </body> </html> <?php $per_page = 4; $start = $_GET['start']; $record_count = mysql_num_rows(mysql_query("SELECT * FROM tblpromopackages")); $max_pages = $record_count / $per_page; $promo = mysql_query("select * from tblpromopackages LIMIT $start, $per_page"); $x=500; $y=410; $picture=0; while($row=mysql_fetch_array($promo)) { $id = $row[0]; $pname = $row[1]; $pprice = $row[2]; $image = $row[3]; echo "<div style='position:absolute; top:".$x."px; left:". $y . "px; font: 15px arial; text-align:center; '>"; echo"<img src='$image'; width=200px; height=120px;><br/>"; echo "$pname"; echo "<form action='preview.php' method='POST'>"; echo "<br/><input type='image' src='btnDetails.png'/>"; echo "<input type='hidden' name='id' id='id' value='$id'/>"; echo "<input type='hidden' name='table' id='table' value='tblpromopackages'/>"; echo "<input type='hidden' name='exit' id='exit' value='homepage.php'/>"; echo "</form>"; echo"</div>"; if($position=="admin") { $a=$x-8; $b=$y-8; echo "<div style='position:absolute; top:".$a."px; left:". $b . "px; font: 15px arial; text-align:center; '>"; echo "<a href='editpackage.php?edit=" . $id . "&table=tblpromopackages&exit=homepage.php'>[Edit]</a>"; echo"</div>"; $a=$x-8; $b=$y+180; echo "<div style='position:absolute; top:".$a."px; left:". $b . "px; font: 15px arial; text-align:center; '>"; echo "<a href='delete.php?id=" . $id . "&exit=homepage.php&table=tblpromopackages' onClick='confirm('Are you sure?')'><img src='delete.png'/ style='width:30; heigth:30;'></a>"; echo"</div>"; } if($picture<1) { $y = $y+250; $picture=$picture+1; } else { $picture=0; $y=410; $x=$x+210; } } if($position=="admin"){ echo "<div style='position:absolute; top:462px; left:850px; font: 15px arial; text-align:center; '>"; echo "<a href='addpromo.php' style='color:white'>[Add]</a>"; echo"</div>"; echo "<div style='position:absolute; top:165px; left:850px; font: 15px arial; text-align:center; '>"; echo "<a href='addfeaturedspots.php' style='color:white'>[Add]</a>"; echo"</div>"; } if($max_pages>1){ echo "<div style='position:absolute; top:900px; left:350px; height:20;'>"; echo "<ul class='paginate'>"; $prev = $start - $per_page; $next = $start + $per_page; if ($start>0){ echo " <a href='homepage.php?start=$prev'>prev</a> "; ?> <script type="text/javascript"> window.scrollTo(0,450); </script> <?php } $i=1; for ($x=0;$x<$record_count;$x=$x+$per_page) { if ($start!=$x) echo "<a href='homepage.php?start=$x'>$i</a> "; else echo "<a href='homepage.php?start=$x'><b>$i</b></a>"; $i++; } if ($start<$record_count-$per_page) echo "<a href='homepage.php?start=$next'>next</a>"; echo "</ul>"; echo"</div>"; } ?> <a href="https://www.facebook.com/zenoedge?fref=ts" target="_blank" class="twitter-share-button" data-lang="en" id="ads"> <img src="ads.png" height="500"> </a> homepage.css
-
Hi, I am trying to align sections of my CSS layout side-by-side, but I am having problems with it. I expect the left sidebar (#aside) with a 30% width to meet with the content section (#content) of the width of 70%. But, the changes I make are not translating as expected. See attached screenshort of what is happening and the CSS code bellow: #container { margin: 0 auto; width: 800px; background: #fff; } #header { background: #5a83c3; padding: 20px; } #header h1 { margin: 0; } #navigation { float: left; width: 100%; background: #d1dceb; border-top: 1px solid #fff; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #content-container { float: right; width: 100%; background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0; } #content { clear: right; float: right; width: 70%; padding: 10px 0; margin: 0 0 0 4%; display: inline; background: #dfe6ef; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #fff; } #content h2 { margin: 0; } #aside { float: left; width: 20%; padding: 10px 0; margin: 0 3% 0 0; display: inline; background: #d1dceb; border-top: 1px solid #fff; } #aside h3 { margin: 0; } #footer { clear: right; background: #d1dceb; text-align: right; padding: 20px; width: 68%; float: right; overflow: hidden; } #footer p.left { float: left; text-align: left; margin-left: 5px; } #footer p.right { float: right; text-align: right; margin-right: 5px; }
-
I am using html5 and all the pages have h2 headings as titles. They all show up in google search results fine. The only thing that doesn't show up fine are some of the descriptions under each heading. Some meta descriptions show up fine under the correct heading title, while rest shows ALL the heading tags AS description under each search result. For eg. Cars www.mywebsite.com/category?id=5&name=cars 4 days ago - Mywebsite · Login · Signup · About · Lola's Dress · Create a product · Find Products · News Feed. Recent Products ... The above description includes the h2 heading tags of all the pages when it should only show the description of the page that I setup in the meta tags. Anyone know why this is happening?
-
i have made a simple header page for a project. now i want to create a dropdown menu for a single menu item in the menu bar. how i will do that ..?? for ex-under COURSES MENU, THE SUBMENU ARE : DEGREE,DIPLOMA,HIGHSCHOOL.
-
Hi, in my code radio button disable when passing value is "0" <script type="text/javascript"> $('input[type="radio"]').prop('disable', function() { return $(this).next().text().match(/\((\d+)\)/)[1] == 0; }); </script> it's ok.what i want to do is,color a label or label text when this function true. <label > <input type="radio" name="radio" id="rd" value="" /> Click </label> please help me
-
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
-
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.
-
Hi, I've been looking at the Bootstrap 3 and various tutorials / example sites even from their own website. This has lead me to a question I cannot seem to find a quick answer to why do they use divs over the new HTML5 tags such as nav. For example; <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> Comapred to something more like; <div class="container"> <nav> <ul> <li><a href="#"> Home </a></li> </ul> </nav> </div> I know these two examples don't match up in the slightest but I'm not looking for the synatx just an explaniation. Is it the fact that HTML5 is still the draft stages and IE doesn't handle nav to gracefully wihtout shiv etc... Or is the developer of the examples is just a bit lazy and couldn't be bothered to swap it to the newer tags? The reason I ask is I'm not too sure which way would be the best for developing a site using bootstrap. Thanks in advance.
-
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.