FloydBenson

Thanks for the reply. I'll investigate installing a CMS.

Ahoy everyone, I have a 'news' section on my music website, but I don't think I've chosen a very robust approach. I update the news content by manually editing the HTML and re-uploading the news page. Date/times of news posts aren't automatically included, and neither are social media share icons. I like the look of websites where the news posts look like blog posts, with date/time/social media icons, etc but I'm not sure what to search for in order to learn the technique. Would I be right in saying that trying to embed blog posts from a WordPress is not desirable? Some websites (http://www.gunsnroses.com/ or http://www.greenday.com/ as quick examples) look like their news sections are manually created pages, saved in a /news/ folder, using the article title as the page title. Would this be the work of a CMS? Any advice on how news sections are typically/professionally run would be very much appreciated. Many thanks.

Hi everyone, I'm quite new to PHP, and I've recently reconfigured my website to use global PHP headers and footers. This involved changing all my pages from the .html extension to .php. I have included code in the .htaccess to remove the .php from the URL of my pages, but for some reason this now results in my PHP email form not working. Instead of processing a message sent through the form, the result returns the $feedback_page when the submit button is pressed. Here is my .htaccess code: Options +FollowSymLinks -MultiViews # Turn mod_rewrite on RewriteEngine On RewriteBase / ## don't touch /forum URIs RewriteRule ^forums/ - [L,NC] ## hide .php extension snippet # To externally redirect /dir/foo.php to /dir/foo RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.php [NC] RewriteRule ^ %1 [R,L] # To internally forward /dir/foo to /dir/foo.php RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}.php -f RewriteRule ^(.*?)/?$ $1.php [L] # To remove www header RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^(.*)$ http://%1/$1 [L,R=301] ErrorDocument 404 /404.php and here is the send_mail.php code: <?php /* This first bit sets the email address that you want the form to be submitted to. You will need to change this value to a valid email address that you can access. */ $webmaster_email = "removed_email@removed.com"; /* This bit sets the URLs of the supporting pages. If you change the names of any of the pages, you will need to change the values here. */ $feedback_page = "contact.php"; $error_page = "error_message.php"; $thankyou_page = "thanks.php"; /* This next bit loads the form field data into variables. If you add a form field, you will need to add it here. */ $email_address = $_REQUEST['email_address'] ; $comments = $_REQUEST['comments'] ; /* The following function checks for email injection. Specifically, it checks for carriage returns - typically used by spammers to inject a CC list. */ function isInjected($str) { $injections = array('(\n+)', '(\r+)', '(\t+)', '(%0A+)', '(%0D+)', '(%08+)', '(%09+)' ); $inject = join('|', $injections); $inject = "/$inject/i"; if(preg_match($inject,$str)) { return true; } else { return false; } } // If the user tries to access this script directly, redirect them to the feedback form, if (!isset($_REQUEST['email_address'])) { header( "Location: $feedback_page" ); } // If the form fields are empty, redirect to the error page. elseif (empty($email_address) || empty($comments)) { header( "Location: $error_page" ); } // If email injection is detected, redirect to the error page. elseif ( isInjected($email_address) ) { header( "Location: $error_page" ); } // If we passed all previous tests, send the email then redirect to the thank you page. else { mail( "$webmaster_email", "Contact Form - MyWebsite.com", $comments, "From: $email_address" ); header( "Location: $thankyou_page" ); } ?> Any help would be much appreciated, thanks everyone.

Hi everyone, I'm new to using PHP include elements. I've decided to use the PHP include code for my header and footer so I don't have to manually change every page when I edit these elements. So, in my /include folder I have footer.php and header.php, and everything is working just great. However, I was wondering if I have to include the following html meta tag code in the header.php and footer.php files?: <meta http-equiv="Content-Type" content="text/html"> Or can I leave this out and just have the header/footer html information? Many thanks for your time.

Hi everyone, I am trying to create a list of links using graphics. Like this: I would like the graphic to be the clickable link to the relevant website, and I would like the graphic link brightness to dip to 50% when the mouse hovers over it (using webkit-filter). The problem I've had is trying to centre the text underneath the icon, and so far I've only managed by placing a single div around both the graphic and text - but this results in the brightness dip occurring when the mouse touches the text. Here's an example of the code I have so far: <div class="linkscontainermiddle"> <ul id="socialmedia"> <li><div class="link"><a href="https://twitter.com/" target="_blank"><img src="img/twitter.png" width="48" height="48" alt="Twitter"></a>Twitter</div></li> <li><div class="link"><a href="https://www.facebook.com/" target="_blank"><img src="img/facebook.png" width="48" height="48" alt="Facebook"></a>Facebook</div></li> <li><div class="link"><a href="https://www.youtube.com/" target="_blank"><img src="img/youtube.png" width="48" height="48" alt="YouTube"></a>YouTube</div></li> </ul> </div> .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); .linkscontainermiddle { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainermiddle ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } Perhaps I shouldn't use a list for this kind of thing? Any advice would be greatly appreciated, thanks.

Great, many thanks for the reply Nillervision. All the best.

Hi everyone, My site is here and when viewed on Internet Explorer or Microsoft Edge, some of the menu items in the top navigation bar are white blanks. This doesn't happen when viewed in Chrome. I'm thinking I've made a mistake in my CSS and was hoping someone could take a look. /* CSS Document */ @charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic); @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900); a, a:hover, a:visited { font-weight: bold; } a { color: #FFFFFF; transition: 0.5s; text-decoration: none; } a:hover { color: #714BF0; } a:visited { color: rgba(0,180,31,1.00); } .albumcover { width: 300px; height: 300px; float: right; } .albumdetails { float: left; width: 400px; height: 350px; } .albumshop { width: 300px; height: 40px; float: right; text-align: center; transition: 0.5s; background-color: rgba(0,0,0,1.00); padding-top: 5px; } .albumshop a:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } #buyrecords { padding: 0px; } body { color: #FFFFFF; background-color: #000000; font-family: 'Lato', sans-serif; background-image: url(img/backgrounds/21.gif); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; overflow-y: hidden; overflow-y: scroll; margin-top: 0; margin-right: 0; margin-left: 0; } body#news a#newsnav, body#greetings a#greetingsnav, body#music a#musicnav, body#media a#medianav, body#links a#linksnav { background: #222222; } .containerleft { text-align: center; width: 200px; height: 400px; float: left; padding-left: 100px; } .containerleft p { margin: 0; } .containermiddle { text-align: center; width: 200px; height: 400px; float: left; } .containermiddle p { margin: 0; } .containerright { text-align: center; width: 200px; height: 400px; float: left; } .containerright p { margin: 0; } .copyright { font-size: 12px; font-weight: lighter; letter-spacing: 5px; padding-top: 10px; } .discogmaincontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 5px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: hidden; transition: 0.5s; } .discogmaincontainer h5 { color: rgba(88,88,88,1.00); letter-spacing: 2px; font-size: 10px; margin: 0; padding: 0; } .discogcontainertop { text-align: center; display: inline-block; width: 750px; height: 220px; } .discogcontainertop ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } .discogcontainermiddle { text-align: center; display: inline-block; width: 750px; height: 230px; } .discogcontainermiddle ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } .discogcontainerbottom { text-align: center; display: inline-block; width: 750px; height: 250px; } .discogcontainerbottom ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } #discogtoprow { list-style-type: none; } #discogmiddlerow { list-style-type: none; } #discogbottomrow { list-style-type: none; } #discogbottomrow h { margin: 0; padding: 0; font-size: 14px; } .footer { color: #FFFFFF; position: fixed; text-align: center; left: 0px; bottom: 0px; height: 35px; width: 100%; background: #000000; z-index: 10; } .footer a { color: FFFFF; } .footer a:hover { color: #66D06B; } .greetingscontainer { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: auto; transition: 0.5s; } .greetingscontainer a { color: #C36700; } .greetingscontainer a:hover { color: #4B4B4B; } h1 { letter-spacing: 10px; font-size: 46px; margin: 0; padding: 0; font-weight: 900; } h2 { font-size: 12px; font-style: italic; font-weight: lighter; } h3 { font-size: 18px; font-style: bold; } h4 { font-size: 16px; } h5 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } h6 { font-size: 24px; margin: 0px; } h7 { font-size: 12px; margin: 0px; } .header { font-family: 'Source Sans Pro', sans-serif; font-weight: 900; text-align: center; transition: 0.5s; background-color: #000000; padding-top: 10px; width: 100%; } .header a { color: #FFFFFF; } .header a:hover { color: #FBA75F; } .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkdiscog { text-align: center; height: 190px; width: 150px; transition: 0.5s; padding: 0px; } .linkdiscog:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkscontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 480px; overflow: auto; transition: 0.5s; } .linkscontainer h4 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } .linkscontainertop { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainertop ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .linkscontainermiddle { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainermiddle ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .linkscontainerbottom { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainerbottom ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .maincontainer { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 415px; overflow: auto; transition: 0.5s; } .maincontainer a { color: #C36700; } .maincontainer a:hover { color: #4B4B4B; } .maincontainer2 { text-align: center; margin-left: auto; margin-right: auto; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 210px; } .mediacontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: auto; } .mediacontainer div { display: inline-block; transition: 0.5s; } .mediacontainer div:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; margin-left: auto; margin-right: auto; text-align: center; background-color: #000000; } .nav li { display: inline; } .nav a:link { display: inline-block; width: 120px; font-weight: lighter; color: #FFFFFF; background-color: #000000; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; transition: 0.5s; } .nav a:hover { background-color: #222222; } .newscontainer { float: left; height: 380px; width: 400px; overflow: auto; margin-bottom: 20px; } .newscontainer a { color: rgba(185,109,0,1.00); transition: 0.5s; } .newscontainer a:hover { color: rgba(66,66,66,1.00); } #socialmedia { padding: 0px; } .socialmedia { list-style-type: none; float: right; background-color: #000000; padding: 0; margin: 0; bottom: 0px; z-index: 11; position: fixed; right: 10px; } .socialmedia li { display: inline; } .socialmedia a:link, a:visited { display: inline-block; width: 32px; color: #FFFFFF; background-color: #000000; transition: 0.5s; } .socialmedia a:hover, .socialmedia a:active { background-color: #222222; } .twitter-timeline { float: right; height: 380px; width: 300px !important; } #streaming { padding: 0px; } @media screen and (max-width: 480px) { .albumcover { margin-top: 100px; padding-right: 50px; } .albumdetails { width: 80%; } .albumshop { padding-right: 50px; } body { background-image: none !important; overflow-x: hidden; } #boxes { display: none; } .containerleft { text-align: center; width: 200px; height: 280px; padding-left: 70px; } .containermiddle { text-align: center; width: 200px; height: 250px; padding-left: 70px; } .containerright { text-align: center; width: 200px; height: 250px; padding-left: 70px; padding-bottom: 20px; } .copyright { font-size: 12px; font-weight: lighter; } .discogmaincontainer { height: auto; width: 90%; padding-bottom: 40px; text-align: center; margin-left: auto; margin-right: auto; } .discogcontainertop { text-align: center; width: 200px; height: 280px; padding-left: 50px; float: left; } .discogcontainermiddle { text-align: center; width: 200px; height: 280px; margin-top: 375px; padding-left: 50px; float: left; } .discogcontainerbottom { text-align: center; width: 200px; height: 280px; float: left; margin-top: 375px; padding-left: 50px; float: left; } #EdgeID { margin-top: 30px; width: 90%; height: 90%; } .greetingscontainer { width: 90%; padding-bottom: 20px; } h1 { letter-spacing: 4px; font-size: 20px; margin: 0; padding: 0; } .header { text-align: center; background-color: #000000; padding-bottom: 20px; } .header a { color: #FFFFFF; } .header a:hover { color: #FBA75F; } .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; margin-bottom: 20px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkdiscog { padding-bottom: 25px; } .linkscontainer { height: auto; width: 90%; padding-bottom: 40px; } .linkscontainer h4 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } .linkscontainertop { text-align: center; width: 200px; height: 280px; padding-left: 70px; float: left; } .linkscontainermiddle { text-align: center; width: 200px; height: 250px; padding-left: 70px; float: left; margin-top: 30px; } .linkscontainerbottom { text-align: center; width: 200px; height: 250px; padding-left: 70px; margin-top: 60px; float: left; } .maincontainer { height: auto; width: 90%; padding-bottom: 40px; } .maincontainer2 { height: auto; width: 90%; } .mediacontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 85%; height: 400px; overflow: auto; overflow-x: hidden; } .mediacontainer iframe { width: 70%; height: 70%; } .newscontainer { height: 300px; width: 85%; margin-bottom: 20px; padding-right: 5px; padding-left: 60px; overflow-y: scroll; } .photo img { width: 70%; height: 70%; } p { font-size: 14px; } .shoplink { width: 250px; height: 43px; display: none; } .socialmedia { display: none; } .twitter-timeline { float: left; padding-left: 10px !important; } } /* Modal Window Popup */ #mask { position: absolute; left: 0; top: 0; z-index: 9000; background-color: #000; display: none; } #boxes .window { position: absolute; left: 0; top: 0; width: 440px; height: 200px; display: none; z-index: 9999; padding: 20px; border-radius: 15px; text-align: center; } #boxes #dialog { width: 750px; height: 600px; padding: 10px; background-color: #000; font-size: 25pt; } #popupfoot { font-size: 16pt; position: absolute; bottom: 0px; width: 250px; left: 250px; } #albumCover { float: left; transition: 0.5s; } #albumCover a:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } #popText { float: right; color: #FFF; width: 300px; height: 400px; background-color: #000; padding-right: 30px; } #popText a { color: #fff; } #popText a:hover { color: #6C3; } #popFooter { padding-top: 30px; width: 750px; height: 100px; float: left; transition: 0.5s } #popFooter a:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } Many thanks for your time, I appreciate any advice.

I'd like my navigation menu to show a different link background color to reflect the current/active page of my website. My html for the menu is this: <!doctype html> <html> <head> <link rel="shortcut icon" href="/img/favicon.ico"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>News - Lyle Christine</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div class="header"><h1><a href="http://www.lylechristine.com">LYLE CHRISTINE.com</a></h1></div> <ul class="nav"> <li><a href="news.html">News</a></li> <li><a href="greetings.html">Greetings</a></li> <li><a href="music.html">Music</a></li> <li><a href="media.html">Media</a></li> <li><a href="http://www.lylechristine.com/blog">Blog</a></li> <li><a href="links.html">Links</a></li> </ul> <div class="maincontainer"> <div class="newscontainer"> <h3>NEWS</h3> *NEWS COPY* </div> <p><a class="twitter-timeline" href="https://twitter.com/PithyArtist" data-widget-id="447044618178150400">Tweets by @LyleChristine</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </p> </div> <div class="maincontainer2"> <object id="EdgeID" type="text/html" width="420" height="220" data-dw-widget="Edge" data="edgeanimate_assets/shop_link_big/Assets/shop_link_big.html"> </object> </div> <ul class="socialmedia"> <li><a href="https://twitter.com/PithyArtist"><img src="img/32x32_twitter.png" width="32" height="32" alt=""/></a></li> <li><a href="https://www.facebook.com/lyle.christine"><img src="img/32x32_facebook.png" width="32" height="32" alt=""/></a></li> <li><a href="https://www.youtube.com/user/LylieChristine/videos"><img src="img/32x32_youtube.png" width="32" height="32" alt=""/></a></li> </ul> <div class="footer"> <div class="copyright">© 2015 <a href="contact.html">CONTACT</a></div> </div> </div> </div> </body> </html> and the css is this: /* CSS Document */ @charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic); @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900); a, a:hover, a:visited {font-weight: bold;} a { color: #FFFFFF; transition: 0.5s; text-decoration: none; } a:hover {color: #714BF0;} a:visited {color: #FFFFFF;} .albumcover { width: 300px; height: 300px; float: right; } .albumdetails { float: left; width: 400px; height: 350px; } .albumshop { width: 300px; height: 40px; float: right; text-align:center; transition: 0.5s; background-color: rgba(0,0,0,1.00); padding-top: 5px; } .albumshop a:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } #buyrecords { padding: 0px; } body { color: #FFFFFF; background-color: #000000; font-family: 'Lato', sans-serif; background-image: url(img/backgrounds/21.gif); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; overflow-y: hidden; overflow-y: scroll; margin-top: 0; margin-right: 0; margin-left: 0; } .containerleft { text-align: center; width: 200px; height: 400px; float: left; padding-left: 100px; } .containerleft p {margin: 0;} .containermiddle { text-align: center; width: 200px; height: 400px; float: left; } .containermiddle p {margin: 0;} .containerright { text-align: center; width: 200px; height: 400px; float: left; } .containerright p {margin: 0;} .copyright { font-size: 12px; font-weight: lighter; letter-spacing: 5px; padding-top: 10px; } .discogmaincontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 5px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: hidden; transition: 0.5s; } .discogmaincontainer h5 { color: rgba(88,88,88,1.00); letter-spacing: 2px; font-size:10px; margin: 0; padding: 0; } .discogcontainertop { text-align: center; display: inline-block; width: 750px; height: 220px; } .discogcontainertop ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } .discogcontainermiddle { text-align: center; display: inline-block; width: 750px; height: 230px; } .discogcontainermiddle ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } .discogcontainerbottom { text-align: center; display: inline-block; width: 750px; height: 250px; } .discogcontainerbottom ul li { display: inline-block; } #discogtoprow { list-style-type: none; } #discogmiddlerow { list-style-type: none; } #discogbottomrow { list-style-type: none; } #discogbottomrow h{ margin: 0; padding: 0; font-size: 14px; } .footer { color: #FFFFFF; position: fixed; text-align: center; left: 0px; bottom: 0px; height: 35px; width: 100%; background: #000000; z-index: 10; } .footer a {color: FFFFF;} .footer a:hover {color: #66D06B;} .greetingscontainer { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: auto; transition: 0.5s; } .greetingscontainer a { color: #C36700; } .greetingscontainer a:hover { color: #4B4B4B; } h1 { letter-spacing: 10px; font-size: 46px; margin: 0; padding: 0; font-weight: 900; } h2 { font-size: 12px; font-style: italic; font-weight: lighter; } h3 { font-size: 18px; font-style: bold; } h4 {font-size: 16px;} h5 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } h6 { font-size: 24px; margin: 0px; } h7 { font-size: 12px; margin: 0px; } .header { font-family: 'Source Sans Pro', sans-serif; font-weight: 900; text-align: center; transition: 0.5s; background-color: #000000; padding-top: 10px; width: 100%; } .header a {color: #FFFFFF;} .header a:hover {color: #FBA75F;} .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkdiscog { text-align: center; height: 190px; width: 150px; transition: 0.5s; padding: 0px; } .linkdiscog:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkscontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 480px; overflow: auto; transition: 0.5s; } .linkscontainer h4 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } .linkscontainertop { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainertop ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .linkscontainermiddle { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainermiddle ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .linkscontainerbottom { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainerbottom ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .maincontainer { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 415px; overflow: auto; transition: 0.5s; } .maincontainer a { color: #C36700; } .maincontainer a:hover { color: #4B4B4B; } .maincontainer2 { text-align: center; margin-left: auto; margin-right: auto; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 210px; } .mediacontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: auto; } .mediacontainer div { display: inline-block; transition: 0.5s; } .mediacontainer div:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; margin-left: auto; margin-right: auto; text-align: center; background-color: #000000; } .nav li {display: inline;} .nav a:link { display: inline-block; width: 120px; font-weight: lighter; color: #FFFFFF; background-color: #000000; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; transition: 0.5s; } .nav li a:focus {background-color: lightgreen;} .nav a:hover {background-color: #222222;} .newscontainer { float: left; height: 380px; width: 400px; overflow: auto; margin-bottom: 20px; } .newscontainer a { color: rgba(185,109,0,1.00); transition: 0.5s; } .newscontainer a:hover {color: rgba(66,66,66,1.00);} #socialmedia { padding: 0px; } .socialmedia { list-style-type: none; float: right; background-color: #000000; padding: 0; margin: 0; bottom: 0px; z-index: 11; position: fixed; right: 10px; } .socialmedia li {display: inline;} .socialmedia a:link, a:visited { display: inline-block; width: 32px; color: #FFFFFF; background-color: #000000; transition: 0.5s; } .socialmedia a:hover, .socialmedia a:active {background-color: #222222;} .twitter-timeline { float: right; height: 380px; width: 300px !important; } #streaming { padding: 0px; } @media screen and (max-width: 480px) { body { background-image: none !important; overflow-x: hidden; } #boxes { display: none; } .containerleft { text-align: center; width: 200px; height: 280px; padding-left: 70px; } .containermiddle { text-align: center; width: 200px; height: 250px; padding-left: 70px; } .containerright { text-align: center; width: 200px; height: 250px; padding-left: 70px; padding-bottom:20px; } .copyright { font-size: 12px; font-weight: lighter; } .discogmaincontainer { height: auto; width: 90%; padding-bottom: 40px; text-align: center; } .discogcontainertop { text-align: center; width: 200px; height: 280px; padding-left: 70px; float:left; } .discogcontainermiddle { text-align: center; width: 200px; height: 280px; padding-left: 70px; float:left; margin-top: 250px; } .discogcontainerbottom { text-align: center; width: 200px; height: 280px; padding-left: 70px; float:left; } #EdgeID { margin-top: 30px; } .greetingscontainer { width: 90%; padding-bottom: 20px; } h1 { letter-spacing: 4px; font-size: 20px; margin: 0; padding: 0; } .header { text-align: center; background-color: #000000; padding-bottom: 20px; } .header a {color: #FFFFFF;} .header a:hover {color: #FBA75F;} .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; margin-bottom: 20px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkscontainer { height: auto; width: 90%; padding-bottom: 40px; } .linkscontainer h4 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } .linkscontainertop { text-align: center; width: 200px; height: 280px; padding-left: 70px; float:left; } .linkscontainermiddle{ text-align: center; width: 200px; height: 250px; padding-left: 70px; float:left; margin-top: 30px; } .linkscontainerbottom { text-align: center; width: 200px; height: 250px; padding-left: 70px; margin-top: 60px; float:left; } .maincontainer { height: auto; width: 90%; padding-bottom: 40px; } .maincontainer2 { height: auto; width: 90%; } .mediacontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 90%; height: 400px; overflow: auto; } .newscontainer { height: 300px; width: 85%; margin-bottom: 20px; padding-right: 5px; padding-left: 60px; overflow-y: scroll; } p { font-size: 14px; } .shoplink { width: 250px; height: 43px; display: none; } .socialmedia { display: none; } .twitter-timeline { float: left; padding-left: 10px !important; } When I click on the 'news' link, the background changes to green for as long as I hold down the mouse button, but it doesn't stay green when on the active news page. Any ideas what I should change so that the green link background remains while on the active page? Many thanks for your time and help.

Hi everyone, I'm trying to design a grid layout to contain 9 button links. My current method uses 3 div columns like this: I'm thinking it would make more sense to use 3 div rows but I'm finding it quite difficult to evenly distribute the icons in the same way as using columns. The reason rows would help is I'm also trying to display these links vertically in a single line on mobile devices. Using the @media CSS code, I can achieve a single vertical column, but the links are in the wrong order (as in the 'buy records' links should be the first 3 icons, then the streaming icons, then the social media). How would you guys approach this? Here's my HTML & CSS so far: <div class="containerleft"> <br><br> <div class="link"><a href="http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias=digital-music&field-keywords=Lyle+Christine" target="_blank"><img src="img/amazon.png" width="48" height="48" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.com/s/ref=ntt_srch_drd_B00P0UWAMG?ie=UTF8&field-keywords=Lyle Christine&index=digital-music&search-type=ss" target="_blank"><img src="img/US.png" width="23" height="17" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.de/Lyle-Christine-Musik-Downloads/s?ie=UTF8&page=1&rh=n%3A77195031,k%3ALyle Christine" target="_blank"><img src="img/DE.png" width="23" height="17" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.fr/Lyle-Christine-Téléchargement-de-Musique/s?ie=UTF8&page=1&rh=n%3A77196031,k%3ALyle Christine" target="_blank"><img src="img/FR.png" width="23" height="17" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.es/s/ref=dm_ar_dp_rd?ie=UTF8&field-author=Lyle Christine&index=digital-music&search-type=ss" target="_blank"><img src="img/ES.png" width="23" height="17" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.co.jp/s/ref=ntt_srch_drd_B00OZOBSEO?ie=UTF8&field-keywords=Lyle Christine&index=digital-music&search-type=ss" target="_blank"><img src="img/JP.png" width="23" height="17" alt=""/></a></div><p>Amazon</p> <br><br><br><div class="link"><a href="https://play.spotify.com/artist/4l7u1k3NMn1Y1vsckJhaV6" target="_blank"><img src="img/spotify.png" width="48" height="48" alt=""/></a></div><p>Spotify <br><br><br><br><br><div class="link"><a href="https://twitter.com/PithyArtist" target="_blank"><img src="img/twitter.png" width="48" height="48" alt=""/></a></div><p>Twitter</p> <br> </div> <div class="containermiddle"> <p><b>Buy Records</b></p><br> <div class="link"><a href="https://itunes.apple.com/us/artist/lyle-christine/id929741998" target="_blank"><img src="img/itunes.png" width="48" height="48" alt=""/></a></div><p>iTunes</p><br><br> <p><b>Streaming</b></p> <br><div class="link"><a href="http://www.last.fm/music/Lyle+Christine" target="_blank"><img src="img/lastfm.png" width="48" height="48" alt=""/></a></div><p>Last.fm</p><br><br> <p><b>Social Media</b></p><br> <div class="link"><a href="https://www.facebook.com/lyle.christine" target="_blank"><img src="img/facebook.png" width="48" height="48" alt=""/></a></div><p>Facebook</p> <br> </div> <div class="containerright"> <br><br><div class="link"><a href="http://lylechristine.bandcamp.com/" target="_blank"><img src="img/bandcamp.png" width="48" height="48" alt=""/></a></div><p>Bandcamp</p> <br><br><br><br> <div class="link"><a href="https://soundcloud.com/lyle-christine" target="_blank"><img src="img/soundcloud.png" width="48" height="48" alt=""/></a></div><p>SoundCloud</p> <br><br><br><br><div class="link"><a href="https://www.youtube.com/user/LylieChristine/videos" target="_blank"><img src="img/youtube.png" width="48" height="48" alt=""/></a></div><p>YouTube</p> </div> @media screen and (max-width: 480px) { .containerleft { text-align: center; width: 200px; height: 280px; padding-left: 70px; } .containermiddle { text-align: center; width: 200px; height: 250px; padding-left: 70px; } .containerright { text-align: center; width: 200px; height: 250px; padding-left: 70px; padding-bottom:20px; } }

Cheers davep, really appreciate your input. I see now it's quite simple. When I tried it before, I think I was using the position:absolute/relative incorrectly. Many thanks.

Thanks for letting me know cibgraphics.

Right, got you EpicWebs - many thanks for the reply, that's a great help.

If it helps, my current CSS code is: .equalityresearchlink { display: inline-block; float: center; width: 200px; height: 525px; text-decoration: none; background: url("img/equality_research_link.png"); } .equalityresearchlink:hover { background-position: -200px 0; } Thanks

Hi everyone, I have an image link which is roughly in the centre of my page: Using CSS, I shift the background position on hover so that the purple band brightens slightly. I was wondering how I would recreate this link using just a plain version of the image and creating the purple band/text with HTML/CSS. It's easy enough for me to create a div box, fill it with a purple background, and add the text. But how would I exactly align this purple div on top of the image? And is there CSS hover code which would lighten the purple band on hover? Thanks for your help everyone.

I have 2 questions about a simple website I've just started. The test webpage is http://www.lylechristine.co.uk/test8.html It's a simple site - static background image, fixed header and footer, basic content in between. You can see on the left is news section which is a div box positioned on the page with the left and top values. On the right is protected twitter content. 1. For this style of page, should I really have two main columns on the left and right sides to contain this news/twitter content, rather than using top/left values as positions for individual div elements? If so, should I start with a large div container that would surround everything on the page? 2. On right hand side of the footer I have some social media icons. In the middle of the footer is some text: copyright and CONTACT. This text is set to align in the middle of the footer, but it's aligning the centre between the left hand side of the page and the first social media icon for twitter (these icons are actually in the footer). What changes should I make to get the text to align centrally with the left and right hand sides of the page and ignore these icons? Thanks a lot for your help guys, I really appreciate any info on these topics. Cheers, Floydy