Search the Community

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.

I want when onmouseover on particular section to put an OPACITY #fff 0.2 layer on everything except the selected class i.e. table Similarly as you have: .tableHighlight:hover{background-color:#eee} <table id='table-main' class='tableHighlight'> ... but inversed (puts layer on everything else, but not the table itself) --- http://jsfiddle.net/LYcm9/1/

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?

Hi everyone. I am using Wordpress and have a calendar plugin I'm using to display events. I'm trying to get the output of a function to display differently in one of my templates (have the output on one line). By default the plugin is having the output appear on multiple lines. Is it possible to wrap the function in a div to target it and remove the line breaks? I haven't been able to find anything to force the output to be on a single line. I'm not sure if I'm doing something wrong since I'm a newbie at this, or if I'd need to use something else other than CSS since the function does use a class, as shown here in the plugin's docs. Any advice or tips would be grealty appreciated, as I'm really lost right now. Thanks for taking the time to read this, and of course, for any assistance! Sean This is what I've added to my template thus far: <div class="tribe-events-event-category-list"> <?php echo Tribe_Register_Meta::event_category( 'tribe_event_category' ) ?> </div> Here are a couple images of how the output is being displayed by default (on two lines). Again, I don't want to change the output everywhere on my site; only on a certain php template.

I’m trying to organize a site and am missing something basic with linking my css.. Right now all the pages are in the root folder. I am using a template that includes a header and footer, only changing the body on each page. The header file contains links to the css and js files. I want to move all my news and events to a sub folder (newsEvents), as I expect a large number of these pages. For example: Folder structure: root/css/main.css root/includes/header.php root/newsEvents.php root/newsEvents/2014-04-29_eventPosting.php Working Page: root/newsEvents.php — loads css and javascript fine Inside of this page is the below line include(includes/header.php); Not working Page: root/newsEvents/2014-04-29_eventPosting.php — Does not load the css or the javascript Inside of this page is the below line include(../includes/header.php); I’m looking at the Debugger in FF, and I’ll see the CSS file listed for each page, but it shows 0 rules on the one not working. On the working page it shows 198 rules. I thought changing the includes path would be enough to load the header, which would included path’s to the css and js files.. But again, I’m missing something basic.. I’m using MAMP for my testing. If that makes a difference.. thank you

Hi I am trying to create a grid like gallery and for some reason it does not look right? I want it to look like pinterest so I am trying to use wookmark jquery. Here is my code and an image to view. Thank you. Here is the css: #gallerycontainer { display: inline-block; background-color: #f0f0f0; padding: 0px; width:850px; /*border: 1px solid #DBDBDB; -webkit-box-shadow: #E4E4E4 0px 0px 5px; -moz-box-shadow: #E4E4E4 0px 0px 5px; box-shadow:#E4E4E4 0px 0px 5px;*/ position:relative; left:0px; bottom:13px; overflow:inherit; top:0px; float: left; padding-right: 0px; margin-left: 10px; overflow: auto; } #gallery{ } #gallery li img { float: left; border: 5px solid #fff; -webkit-transition: box-shadow 0.5s ease; -moz-transition: box-shadow 0.5s ease; -o-transition: box-shadow 0.5s ease; -ms-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease; max-width:250px; max-height:200px; padding:0px; } .galleryinfo{ border: 2px solid #fff; padding-bottom: 40px; float: left; margin:9px; background: white; } #gallery li img:hover { -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); box-shadow: 0px 0px 7px rgba(255,255,255,0.9); cursor: pointer; } .myaccounttitle{ text-align: center; } And here is the php and html. <script type="text/javascript" src="js/jquery.wookmark.js"></script> <script type="text/javascript">$('#gallery li').wookmark();</script> <div class="myaccounttitle">My Images</div> <div id="gallery"> <?php function pictures($query) { while($row = mysql_fetch_array($query)) { $id = $row['id']; $title = $row['title']; $author = $row['userid']; $date = date("F j, Y, g:i a", $row['date']); $picture = $row['picture']; // $likes = $row['likes']; // $favs = $row['favs']; $unique = mysql_num_rows(mysql_query("SELECT * FROM views WHERE picture='$id' GROUP BY ip")); ?> <div class="galleryinfo"> <li id="<?php print $id?>"> <a class="fancybox" rel="group" href="photos/<?php print $picture?>"><img src="photos/<?php print $picture?>"/></a> </li> Views : <?php print($unique) ?> </div> <?php }}} ?> <div id="gallerycontainer"> <?php if($account == "c") { pictures($query2); }else { pictures($query); } ?> </div> All of your help is greatly appreciated.

Hello everyone! I have just finished my first HTML/CSS class, so I have a lot left to learn. One of the unfortunate things that was not covered at all in my class was cross-browser compatability. I made my website where it looked good in Chrome, but had things broken in IE and FireFox. A friend suggested I try converting some of my 'loose html5 coding' to the more strict XHTML. Any feedback or suggestions would be very welcome overall, and specifically checking how this looks across browsers. I'm currently at work where I'm stuck using Win XP with IE7. It looks so broken on IE 7 I wouldn't know where to start. www.rusticspices.com/ (original project) www.rusticspices.com/xhtmltest.html (testing xhtml changes) xhtmltest.html

I am currently building an image viewer something like a Gallery. However, I need to work with several images of different sizes. The viewer currently puts the image in a div and sets the background as a background image. I currently use this CSS code: background: url() no-repeat center cover

We are a Silicon Valley based startup and 30-60 days away from launch. We are seeking a partner and outstanding web developer to be responsible for developing and implementing innovative and secure web application for our eCommerce business. The person would work closely with our Marketing, Sales, Engineering and IT members to develop specifications and make recommendations on the use of new and emerging technologies and then implement those recommendations. Design, Programming, and database administration are all elements of this position. This person must have following experience and skills: - HTML5, XHTML, CSS3, PHP, and JavaScript, AJAX, jQuery, responsive frameworks and other technologies - command of web standards, CSS-layouts, DOM scripting, cross-browser compatibility & browser degradation strategies - working with the various JavaScript and PHP libraries - understanding of dynamic or active web content and the use of CGI, Perl, Java, XML and JSON - experience with SQL database (MySQL) - little understanding of Unix/Linux system and Apache web-server administration - experience working with Google Webmaster Tools, Google Analytics, and Google Custom Search - develop responsive and mobile websites

Hi, I am a ZCE in PHP5. You can visit my profile at http://www.freelancer.com/u/phpopensource.html Thanks

Hi all, I was wondering if you can help me with an issue I am having with my website. I am very new to php/html/css and mysql so I know very little. I have an order form on my website which when filled in send data to my database. I then have an admin page on my site which shows the data in the database. However, I need the data to be stored in a table with a row containing the column name and then each row showing the actual data underneath. Would like it in a grid sort of format. My current code is: <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container2"> <div id="adminpanel"> Admin Page <div id="showorders"><u>Orders</u></div> <?php include('connection.php'); $result = mysql_query("SELECT * FROM orderform"); while($row = mysql_fetch_array($result)) { echo "<span style='color: #333; width: 200px; height: 200px; padding: 1px; border: 1px solid #ff9900;'>" . $row['product'] . " " . $row['productcomments'] . " " . $row['name'] . " " . $row['address'] . " " . $row['age'] . " " . $row['delivery'] . "</span>" ; echo "<br>"; } ?> <div id="showreviews"><u>Reviews</u></div> <?php $result = mysql_query("SELECT * FROM reviewform"); while($row = mysql_fetch_array($result)) { echo "<span style='color: #333; width: 200px; height: 200px; padding: 5px; border: 1px solid #ff9900;'>" . $row['name'] . " " . $row['product'] . " " . $row['comment'] . "</span>" ; echo "<br>"; echo $row['name'] . " " . $row['product'] . " " . $row['comment'] ; echo "<br>"; } ?> </div> </div> </body> This code puts a border around each row but doesnt seperate each column and doesnt show a header. Ultimately, I am going to want to sort each order by different criteria e.g alphabetical, date ordered, product type. All help is really appreciated as I am really pushed for time and a complete beginner. Thanks Jonathan

can someone help me?can you make this script?i dont make the script yet. when i click set as correct..., clicked response become correct answer and the other become default. thanks in advance, sorry for my bad english. iam indonesian.

How to make border appear on the left and right sides of text? Let's say we have a div 200px x 100px with red border and ID of "container" <style type="text/css"> *{padding:0; margin:0;} #container{ width:200px; height:100px; border:2px solid red; } </style> <div id="container"> <p>Happy Potter</p> He was an awesome wizard! </div> Now we want to put the paragraph "Happy Potter" on the top of the div box between the red border. We do that by defining negative margin which will push up the paragraph like this: #container p{ margin-top:-15px; } Now our paragraph is in between the border, almost how we want it to be. Next we want to push it in the middle. So we use margin-left: #container p{ margin-top:-15px; margin-left:50px; } I'd suggest adjusting the left margin i.e. the pushing to the center thing with the developer tools of your browser ( right click on top of the element and Firebug ( for FF ) or Google Chrome Developer tools will pop up ) Next we want to remove the border that is overlapping the text. We do that by defining width of the text and giving it a background color that is the same as the div container and the outside area of it like this: #container p{ margin-top:-15px; margin-left: 50px; width: 83px; background: pink; } In my case the background color of both the container div and the area outside of it was pink so I gave the same color to the paragraph after defining its width. We have the final result: And now we and Harry Potter are happy Final code: <style type="text/css"> *{padding:0; margin:0;} #container{ width:200px; height:100px; border:2px solid red; } #container p{ margin-top:-15px; margin-left: 50px; width: 100px; background: pink; } </style> <div id="container"> <p>Happy Potter</p> He was an awesome wizard! </div>

Hello, I'd like to know if someone know how I can do this. Example when sites use this function is in a store etc. You choose your product-types, if you for example chose a larger size, the price becomes higher and then it updates in real time. So what I mean is like, the number increases/decreases depending on the users selections, if he wants that or not that included, the number changes so he/she can see the exact price he needs to pay for the product. Like this for standard ---------------- 25$ --------------- but if I for example choose a larger size it automatically updates to ------------- 30$ ------------ I hope u understand what I mean. Thanks in advanced

Please help me with this I'm completely lost. The problem is that in Firefox (v12) it worked , but in IE8 and Opera 9 series did not. I know about the bugs that are there , but I can not remove it, so not to break menu. I mention the code in the original version. 1) The end tag \ p delete this should not be there 2) The main problem I see is the repeat of id AB: <li id="AB"> and also the user of class . AB is useless because the class is not there. However that is the main problem: if I remove the id#AB so it is all broken, so you wont see the submenu in IE8 or Opera will not show the backround of the submenu 3 ) the reason why the ids AB were there is to distinguish between the fisrt 4 items in menu and the last item logout. The logout should not be highlighted when you hover over it. I do not understand how the unpack of drop-down submenus works , so maybe that's why i do not know what to do, but it seems to me that the error after removing the # id selector is caused by a more detailed ( some rule that trumps ) for clarification about the dimensions of the elements here is a code with dimensions: http://paste.ofcode.org/NQANEG25v3UXQgWBVu3TMn because in jsfiddle http://jsfiddle.net/WhSzr/ it does not have the correct dimensions I use two width there the first li items, they are narrow, 85px and the submenu ul is 108px wide. I give a link to the picture in FF12 : http://oi39.tinypic.com/502t21.jpg http://oi43.tinypic.com/2qi8u47.jpg Can you help to fix the problem? I need to remove the ids AB from li and fix it to work with IE8.

Okay, here’s the issue: I’m floating a nav menu right with the goal of it being flush with the right side of it’s container. However, no matter what I’ve tried, the menu is still off by a pixel or less. I’m using a reset.css file, Response Grid System’s 12 column css file, and my own styling css file, of course. Any help or insight is greatly appreciated! I’m pulling my hair out over this one. The code is here: http://codepen.io/anon/pen/rKBnt . ( Simplified as much as possible. ‘Line 210 is where the nav menu css is’ *Note: To replicate the probelm hover your mouse over the Contact link. You should see that it is off ever so slightly.

Hey guys, So I have myself a display issue with Safari. I used absolute positioning to place a roll-out comment box on my website (to leave a tag that appears in the background). I put display: none, then display:block on :hover over "TAG ME NOW!". It works great in IE, Firefox and Chrome, but when I checked through an online Safari emulator, the roll-out box appeared behind the video that is below (as a float right element). I put the z-index value for the comment box higher than the youtube video but it didn't change anything. Anyone has a clue ? Here is the website : http://www.blackswanworld.com

Hallo, i need some help with the scripts for a http header request. In the first script you can type the URL and the second shows the information of the header. The output produce an array. I will change this output style with css. How I can manipulate the data output? Here is the code: url.php <table width="65%" border="0" align="center" cellpadding="1" cellspacing="1"> <tr bgcolor="#DFDFFF"> <td> <form name="Form" method="post" action="empfangeURL.php"> <p>URL: <input name="url" type="text" value="http://"> </p> <p> <input type="submit" name="Submit" value="Senden"> <input type="reset" name="Submit2" value="Reset"> </p> </form> </td> </tr> </table> ------------------------------------------------------------------------- empfangeURL.php <title>Receiving</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <? # get headers of response $url = $_REQUEST; $scheme = 'http://'; $_response = get_headers($scheme.$url, 1); echo "<pre>\r\n"; echo htmlspecialchars(print_r($_response,1)); echo "</pre>\r\n"; ?> -------------------------------------------------------------------------- echo htmlspecialchars(print_r($_response,1)); produce this output: Array( [0] => HTTP/1.0 301 Moved Permanently [Server] => Array ( [0] => Apache [1] => Apache-Coyote/1.1 [2] => Apache-Coyote/1.1 ) [Location] => Array ( [0] => http://www.ard.de/home/ard/ARD_Home/21920/index.html [1] => /home/ard/ARD_Startseite/21920/index.html ) [Content-Length] => Array ( [0] => 322 [1] => 0 ) [Content-Type] => Array ( [0] => text/html; charset=iso-8859-1 [1] => text/html [2] => text/html;charset=UTF-8 ) [Date] => Array ( [0] => Sun, 05 Jan 2014 20:52:16 GMT [1] => Sun, 05 Jan 2014 20:52:17 GMT [2] => Sun, 05 Jan 2014 20:52:18 GMT ) [Connection] => Array ( [0] => close [1] => close [2] => close ) [1] => HTTP/1.0 301 Moved Permanently [Content-Language] => Array ( [0] => de-DE [1] => de-DE ) [Cache-Control] => Array ( [0] => max-age=45 [1] => max-age=45 ) [2] => HTTP/1.0 200 OK) Any ideas how to manipulate the output? Best, Richard

Hey guys, i am just messing around with the float property and setting up a layout with 3 columns. i am trying to tie in this column layout between a header and footer. code: <!doctype html> <html> <head> <title>Responsive Image</title> <meta charset="utf-8"> <link href="css/demo.css" rel="stylesheet" type="text/css"></link> <script> document.cookie = "device_dimensions=" + screen.width + "x" + screen.height; </script> </head> <body> <div class="header"></div> <div class="left"></div> <div class="center"></div> <div class="right"></div> <div class="footer"></div> </body> </html> and the CSS body{ margin: 0px 0px; padding: 0px 0px; } .header{ height: 50px; width: auto; background-color: gray; } .left{ height: 500px; width: 180px; margin-left: 100px; border: black 3px solid; margin-top: 20px; float:left; } .center{ height: 500px; width: 700px; border: black solid 3px; float: left; margin-top: 20px; margin-left: 20px; } .right{ height: 500px; width: 200px; border: black solid 3px; float: left; margin-top: 20px; margin-left: 20px; margin-bottom: 20px; } .footer{ height: 50px; width: auto; background-color: black; } IMAGE OF FINAL PRODUCT I want the footer to box the content ( 3 columns ) with the header. any suggestions as to why the footer is foregoing the content and sticking to the header ?

So I have three div's that look like this: echo "<div='playerinfo'>"; ......all information goes here echo "</div>"; echo "<div='stats'>"; ......all information goes here echo "</div>"; echo "<div='weapons'>"; ......all information goes here echo "</div>"; in which are in cased in a: echo"<div id='wrapper'>"; Whenever I try to margin-right the "playerinfo" div OR marign-left the "stats" div, the background color stretches to the end of the margin. My CSS for the two div's look like this: body{background: #0D0D0D;} h1{ color: white; text-align: center; } div{ background-color: #422100; color: white; } tab{ float:right; } p{ text-indent: 25px; text-align: justify; color: white; } #wrapper{ height: 100%; width: 100%; background-color: #0D0D0D; } #nav{ position: relative; float: left; clear: left; display: block; width: 100%; height: 3.25%; margin-left: auto; margin-right: auto; list-style-type: none; border-color: white; background-color: #0D0D0D; margin-top: .5%; } #nav ul{ text-align: center; } #nav ul li{ display: inline; position: relative; border: thin solid white; border-radius: 5px; margin: -2px; padding: 5px; box-shadow: 1px 1px 1px; background-color: #422100; } h2, h3, #nav ul li a:link, #logins a:link{color: white;} #nav ul li a:visited, #logins a:visited{color: white;} #logins{ float: right; border: thin solid white; border-radius: 5px; width: 20%; padding-left: 5px; text-align: center; box-shadow: 1px 1px 1px; margin: -6% 0 -5% 0; } #content{ position: relative; float: left; display: block; border: thin solid white; width: 25%; padding: 0 15px 0 15px; border-radius: 5px; box-shadow: 5px 5px 5px; margin-top: 1%; } #content h1,#news h1,#legal h1,#playerinfo h1,#stats h1{ border-bottom: thin solid black; box-shadow: 0 1px 0; } #banner{ border: thin solid white; width: 100%; height: 73px; border-radius: 5px; box-shadow: 5px 5px 5px; color: white; } #news{ position: relative; display: block; float: left; margin-left: 3%; border: thin solid white; padding: 0 15px 0 15px; width: 35%; border-radius: 5px; box-shadow: 5px 5px 5px; margin-top: 1%; } #legal{ position: relative; float: left; border: thin solid white; border-radius: 5px; box-shadow: 5px 5px 5px; width: 25%; margin-left: 4%; margin-top: 1%; padding: 0 15px 0 15px; } form{ border: thin solid white; width: 35%; padding: 0 5px 0 5px; margin-left: auto; margin-right: auto; } #playerinfo{ float: left; border: thin solid white; width: 25%; border-radius: 5px; box-shadow: 5px 5px 5px; padding: 0 15px 0 15px; margin-right: 5%; } #stats{ float: left; margin-left: auto; margin-right: auto; width: 18%; } I'm not understanding why the "margin-right: 5%;" in #playerinfo is stretching the div background color out all the way to the margin's ending point in which I DO NOT want. I just want the black background to show in between the two divs and not the brown (current color that will be changed soon). I would like to see the "stats" div centered also.

Hello, I'm trying to make a sliding bar or how you would describe it. And as the topic says, not a imageslider, where it takes a couple seconds before it changes picture.... I tried to come up with something in Paint to describe what I mean... A rolling bar so to say. I searched the webz like a maniac but only found sliders for images and other random stuff that isn't what I need, so I would hope someone of you guys might know how to do this. I'll attach the image. Thanks in advanced, peace!

One of the sites I manage is trending towards 40% mobile and tablet visitor. Remodeled and greatly expanded the mobile section and am looking for feedback on appearance in mobile/tablet devices. http://vvaarizona.org/mobile/index.html Thanks, Aaron

Hi, I want to put an opaque background behind my website that is a project for school. Here's my project for school: http://gyazo.com/33eddfa1242478b0cdf53dbda114df5a And what I want is an opaque background like the ones found on twitter: http://gyazo.com/59afbe6c4fe9cba669acca916e547c8a http://gyazo.com/55bfed8a0e2431d4acc02f41b72496eb I'm a pretty big noob when it comes to this so any help would be greatly appreciated.