Jump to content

HDRebel88

Members
  • Posts

    26
  • Joined

  • Last visited

About HDRebel88

  • Birthday 09/11/1988

Profile Information

  • Gender
    Male

HDRebel88's Achievements

Newbie

Newbie (1/5)

0

Reputation

  1. The below makes it so I can scroll vertically, but horizontally still gets clipped: article, aside, figure, footer, header, hgroup, main, menu, nav, section{display: block;} body{ padding: 0; margin: 0 auto; text-align: center; background-color: #dcdcdc; min-width: 1000px; } #wrapper { top: 50%; left: 50%; margin-top: -333px; marginleft: -480px; position: absolute; } #bgImage { min-width: 960px; min-height: 667px; width: 100%; height: 100%; background: url("http://www.tinasguitar.com/bg.jpg") no-repeat; } #socialBar { position: absolute; top: 80px; left: 100px; } #socialBar img { width: 33px; height: 33px; background-image: url("http://www.tinasguitar.com/social.png"); background-repeat: no-repeat; margin-left: 10px; } #twitter { background-position: -34px 0px; } #fb { background-position: -102px 0px; } #yt { background-position: -68px 0px; } #gp { background-position: 0px 0px; } The issue is I don't want it to resize the image, I want to force a hard minimum size of the body of the page so when the window is shrunk down the browsers minimum width is the width of the picture (if the window is smaller than the minimum width, then the window should be scrollable to access all portions of the image). This is because I am absolutely positioning another image over it that needs to stay in that exact location and the same size. I'm beginning to suspect this isn't possible. Not really surprising, seems the "powers that be" of HTML and CSS are making the language more and more difficult to accomplish what you want to with every subsequent revision. As soon as I hear "you can't do that", I think "flaw in the design of the system". I may just have to not vertically center (still don't understand why there isn't a simple verticle-align css rule to vertically center something within a page or within a containing element. This bullshit work around crap couldn't be any more irritating; especially since it never works.
  2. I have a vertically and horizontally centered image within a window. The layout as is perfect. The only issue is that when the window is resized, the image is clipped by the browser window. I wanted the image to remain 100% within the scroll bars of the window, so the page can be scrolled, so you can access any part of the image with the scroll bars. Development URL: http://www.tinasguitar.com/develop/ (Resize the window and you'll see what I mean. CSS and HTML follow: article, aside, figure, footer, header, hgroup, main, menu, nav, section{display: block;} body{ padding: 0; margin: 0; margin: 0 auto; text-align: center; background-color: #dcdcdc; } #wrapper { top: 50%; left: 50%; margin-top: -333px; /* Half the height */ ; /* Half the width */ position: absolute; } #bgImage { width: 960px; height: 667px; background: url("http://www.tinasguitar.com/bg.jpg"); } #socialBar { position: absolute; top: 80px; left: 100px; } #socialBar img { width: 33px; height: 33px; background-image: url("http://www.tinasguitar.com/social.png"); background-repeat: no-repeat; margin-left: 10px; } #twitter { background-position: -34px 0px; } #fb { background-position: -102px 0px; } #yt { background-position: -68px 0px; } #gp { background-position: 0px 0px; } <!DOCTYPE html> <html lang="en-US"> <head> <base href="http://www.tinasguitar.com/" /> <title>Tina S.</title> <meta charset="utf-8" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta content="index, follow" name="robots" /> <link href="/develop/style.css" rel="stylesheet" type="text/css" /> </head> <body> <section id="wrapper"> <img src="transparent.png" id="bgImage" name="bgImage" usemap="#vigierguitars"> <div id="note">This is an unofficial fan site that links to Tina's official social networking pages. The owner of this site has no affiliation with Tina.</div> <div id="socialBar"> <a href="https://twitter.com/Tina_S__"><img alt="Twitter" id="twitter" name="twitter" src="transparent.png" title="Twitter" /></a> <a href="https://www.facebook.com/pages/Tina-S/181555232026760"><img alt="FaceBook" id="fb" name="fb" src="transparent.png" title="FaceBook" /></a> <a href="https://plus.google.com/+TinaS"><img alt="Google+" id="gp" name="gp" src="transparent.png" title="Google+" /></a> <a href="https://www.youtube.com/user/malabar777"><img alt="YouTube" id="yt" name="yt" src="transparent.png" title="YouTube" /></a> </div> </section> <map name="vigierguitars"> <area shape="rect" coords="700,520,865,620" href="http://www.vigierguitars.com/" alt="Vigier Guitars" target="_blank"> </body> </html> Basically I need to some how create a hard border that the browser window observes as the definitive borders of the page, so the browser window can't clip off portions of the image.
  3. Actually, just had a quick go at it. Used the Ryan Fait method, and it works perfect. At least on my end in FireFox, haven't tested other browsers.
  4. I haven't had time to work on it recently. I'm in college, so I'm in the middle of a mid-term paper. I should be able to work on figuring out the css by tomorrow.
  5. So that would infer that the default CSS on the footer element is different than the div element. Thought they were suppoed to be nearly identical.
  6. The first thing I'm seeing is you seem to be missing semi-colons after the .action lines in both of your onButton() JS functions.
  7. No I don't. A fixed footer would stay at the bottom of the window regardless of where you scroll on the page. (For example, Facebook and Twitter's headers are fixed elements. Not what I want for my footer.) I want a footer that is at the bottom of the document, only visible when you scroll to it, unless the document is shorter than the window height, then the footer should be stuck to the bottom of the window.
  8. Yep... essentially already using that method. Got it from here: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Essentially identical... not working.
  9. I am trying to implement a sticky footer on my site, but I cannot get it to work. I've done it on about 5 sites prior to this, but this one is just not working. The footer sticks to the bottom of the window, not the bottom of the document. I need it to be the bottom of the document. This is the current state of the page: http://www.aspyrhosting.com/index.php HTML: <!DOCTYPE html> <html lang="en-US"> <head> <title></title> <meta charset="utf-8" /> <meta content="index, follow" name="robots" /> <meta content="0.0.1" name="revision" /> <link href="http://cdn2.aspyr.us/imgs/aspyrhosting/favicon.ico?v=0.0.1" rel="shortcut icon" /> <link href="http://cdn2.aspyr.us/css/aspyrhosting/style.css?v=0.0.1" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <header role="banner"> <section id="wrapper"> <div id="logoWrapper"> <img id="logo" src="./transparent.png?v=0.0.1" /> </div> <div id="headerRight"></div> </section> <section id="menuWrapper"> <div id="menuInnerWrapper"> <div id="menu"> </div> </div> <div id="searchbox"> Search: <input type="text" /> </div> </section> </header> <main id="content" role="main"> <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p> </main> <footer> <section id="left"> <div id="copyright" role="copyright"></div> </section> <section id="right"> </section> </footer> </div> </body> </html> CSS: article, aside, figure, footer, header, hgroup, main, menu, nav, section{display: block;} html,body { margin:0; padding:0; height:100%; } #container { height:100%; min-height:100%; min-width: 1115px; position:relative; } header { } #logo { background: url('http://cdn2.aspyr.us/imgs/aspyrhosting/logo.png'); } main { padding-bottom: 100px; /* Height of the footer */ } footer { position:absolute; bottom:0; width:100%; height: 100px; /* Height of the footer */ background:#39f; } #menuWrapper { background: #080000; clear: both; width: 100%; height: 40px; } #menuInnerWrapper { float: left; width: 850px; } #menu { margin: 0 auto; width: 710px; } ul{ padding: 0 3px; margin: 0 auto; list-style-type: none; display: block; float: left; } ul li{ display: inline-block; padding: 0 5px; margin: 0 auto; text-align: center; height: 40px; width: 90px; line-height: 40px; } ul li a { text-decoration: none; color: #fff; } #searchbox { float: right; line-height: 40px; padding-right: 10px; min-width: 200px; width: 10%; }
  10. Need some help finding out why this is returning a null result set: The below code is giving me a result set of an integer set to "0" (the id), a "word"and "def" both set to NULL. It's failing at my "Error #2" point. var_dumps on $id, $word, and $def all give the null output. Each $category is being shown when I var_dump($category). I know this shouldn't be the case because when I run this straight in PHPMyAdmin I get a non-null result set. (Not sure why my indentation is not carrying over to the forum. Sorry about that.) <?php session_start(); if(!isset($_SESSION['loopcatch']) || $_SESSION['loopcatch']==null || !is_int($_SESSION['loopcatch'])){ $_SESSION['loopcatch']=0; } if($_SESSION['loopCatch'] > 1){ //Email error die(); } require 'dbConnect.php'; $categories=array('business', 'music', 'film', 'drum'); //Pull Quotes //Query to Pull random quote $mainQuery="SELECT `r1`.`id`, `r1`.`word`, `r1`.`def` FROM `dictionary` AS `r1` JOIN (SELECT (RAND() * (SELECT MAX(`id`) FROM `dictionary`)) AS `id`) AS `r2` WHERE `r1`.`id` >= `r2`.`id` AND `category`=? AND `checked`=0 ORDER BY `r1`.`id` ASC LIMIT 1"; //prepare quotes query if($prepareQuote=mysqli_prepare($conn, $mainQuery)){ //filter through each category foreach($categories as $category){ //Bind the variable to the quotes query mysqli_stmt_bind_param($prepareQuote, "s", $category); //execute quotes statement mysqli_stmt_execute($prepareQuote); //Store quotes result set mysqli_stmt_store_result($prepareQuote); //Check how many rows are returned if(mysqli_stmt_num_rows($prepareQuote) > 0){ //Bind results to variables mysqli_stmt_bind_result($prepareQuote, $id, $word, $def); //If $id, $word, or $def is null abort and email error if(!is_null($id) && is_numeric($id) && !is_null($word) && !is_null($def)){ while($row=mysqli_stmt_fetch($prepareQuote)){ mysqli_autocommit($conn, FALSE); //Input into second table $updateQuery="UPDATE `quotes` SET `word`=?, `def`=? WHERE `category`=?"; //prepare insert query if($updateQuote=mysqli_prepare($conn, $updateQuery)){ //Bind the variables to the insert query mysqli_stmt_bind_param($updateQuote, "sss", $word, $def, $category); //execute insert statement mysqli_stmt_execute($updateQuote); //Store insert quote result set mysqli_stmt_store_result($updateQuote); //Check how many rows are returned on insert quote query if(mysqli_stmt_affected_rows($updateQuote) > 0){ //If query run sucessfully insert and update; if not rollback. //mark quote checked $checkedQuery="UPDATE `dictionary` SET `checked`=1 WHERE `id`=?"; //prepare checked query if($checkedQuote=mysqli_prepare($conn, $checkedQuery)){ mysqli_stmt_bind_param($checkedQuote, "i", $id); //execute checked statement mysqli_stmt_execute($checkedQuote); //Store checked quote result set mysqli_stmt_store_result($checkedQuote); //Check how many rows are returned on checked quote query if(mysqli_stmt_affected_rows($checkedQuote > 0)){ mysqli_commit($conn); } else{ echo 'Error #6 '; mysqli_rollback($conn); } } else{ echo 'Error #5'; //Email error die(); } } else{ echo 'Error #4'; mysqli_rollback($conn); } } else{ echo 'Error #3'; //Email error die(); } } } else{ echo 'Error #2'; //Query returned blank result set - Email Error } } else{ //If zero rows returned, uncheck rows in table for that specific category and re-run the query. $uncheckQuery="UPDATE `dictionary` SET `checked`=0 WHERE `category`=?"; if($uncheckQuotes=mysqli_prepare($conn, $uncheckQuery)){ //Bind the variable to the query mysqli_stmt_bind_param($uncheckQuotes, "s", $category); //execute statement mysqli_stmt_execute($uncheckQuotes); //Store result set mysqli_stmt_store_result($uncheckQuotes); //Check how many rows are returned if(mysqli_stmt_affected_rows($uncheckQuotes) > 0){ $_SESSION['loopCatch']++; header("Location: ./pullDailyQuotes.php"); } else{ //Email error } } } } } else{ //Email error echo 'Error #1'; die(); } ?>
  11. Solved... Needed to add `r1` to the beginning of each SELECTed column.
  12. I need some help working out this MySQL query: I need it to pull a random quote, that hasn't been used before (that's the 'checked' part of the query), and it needs to find it based on a specific category. I am using this alongside PHP with MySQLI Prepared method. SELECT `id`, `word`, `def` FROM `dictionary` AS `r1` JOIN (SELECT (RAND() * (SELECT MAX(`id`) FROM `dictionary`)) AS `id`) AS `r2` WHERE `r1`.`id` >= `r2`.`id` AND `category`=? AND `checked`=0 ORDER BY `r1`.`id` ASC LIMIT 1 This query yields an error stating that the id column is ambiguous.
  13. Nothing happens when a link is clicked. There's no link underline, and the page doesn't smoothly scroll to the section, it just jumps to the section (because of the HTML anchor tag).
  14. I'm trying to make a navigation bar that when a link it is clicked the page is scrolled to the corresponding section and the link is underlined. I also need it to underline the corresponding link when the page is manually scrolled to that section of the page. Here's the jQuery I'm using: $(document).ready(function(){ /** * This part causes smooth scrolling using scrollto.js * We target all a tags inside the nav, and apply the scrollto.js to it. */ $("#menuItems a").click(function(evn){ evn.preventDefault(); $('html,body').scrollTo(this.hash, this.hash); }); /** * This part handles the highlighting functionality. * We use the scroll functionality again, some array creation and * manipulation, class adding and class removing, and conditional testing */ var aChildren = $("#menuItems a").children(); // find the a children of the list items var aArray = []; // create the empty aArray for (var i=0; i < aChildren.length; i++) { var aChild = aChildren[i]; var ahref = $(aChild).attr('href'); aArray.push(ahref); } // this for loop fills the aArray with attribute href values $(window).scroll(function(){ var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page var windowHeight = $(window).height(); // get the height of the window var docHeight = $(document).height(); for (var i=0; i < aArray.length; i++) { var theID = aArray[i]; var divPos = $(theID).offset().top; // get the offset of the div from the top of page var divHeight = $(theID).height(); // get the height of the div in question if (windowPos >= divPos && windowPos < (divPos + divHeight)) { $("a[href='" + theID + "']").addClass("menuItem-active"); } else { $("a[href='" + theID + "']").removeClass("menuItem-active"); } } if(windowPos + windowHeight == docHeight) { if (!$("#menuItems:last-child a").hasClass("menuItem-active")) { var navActiveCurrent = $(".menuItem-active").attr("href"); $("a[href='" + navActiveCurrent + "']").removeClass("menuItem-active"); $("#menuItems:last-child a").addClass("menuItem-active"); } } }); }); } Here's my HTML: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" id="summary"> <head> <title>Hydralus Presentation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content=""> <meta name="description" content="" /> <meta name="author" content="Andrew McCarrick" /> <meta name="robots" content="index, follow" /> <link rel="stylesheet" type="text/css" href="./pres_style.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="./jquery-2.1.0.min.js"><\/script>')</script> <script src="./jquery.scrollTo.min.js"></script> <script src="./scroll.js"></script> </head> <body> <div id="wrapper"> <div id="menu"> <div id="logo"> <a href="./"><img src="./logo.png" /></a> </div> <div id="menuItems"> <div class="menuItem"><a href="pres_index.html#summary">Project Summary/Pitch</a></div> <div class="menuItem"><a href="pres_index.html#budget">Project Budget</a></div> <div class="menuItem"><a href="pres_index.html#wireframe">Wireframe</a></div> <div class="menuItem"><a href="pres_index.html#website">Website</a></div> </div> </div> <div id="contentPadder"></div> <div id="content"> <div id="summaryWrapper"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test vvv </div> <a id="budget"></a> <div> Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 </div> <a id="wireframe"></a> <div> Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 </div> <a id="website"></a> <div> Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 </div> </div> </div> </body> </html> And here's the relevant CSS code: #menuItems{ float: left; text-align: center; width: 65%; min-width: 650px; overflow: auto; } .menuItem{ display: inline-block; line-height: 120px; padding: 0 25px; font-size: 20px; font-family: Verdana; margin: 0 auto; } .menuItem a{ color: #FFFFFF; text-decoration: none; } .menuItem-active, .menuItem a:hover{ text-decoration: underline; }
  15. I'm trying to get a box-shadow to be applied to all sides but the top. Here's the page: http://www.hydralus.com/index.php The area in question is the div with the red box-shadow. I want to get rid of the top shadow and keep the left, right, and bottom exactly the way they are. I essentially want that protruding box to merge into the top black box. I've already tried z-index to force the smaller box behind the bigger one, but no dice. I'm basically trying to mimic the navigation look of this site: http://www.advancedlumonics.com/ HTML/PHP <?php header('X-UA-Compatible: IE=edge'); require 'pages.php'; ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <base href="//www.hydralus.com" /> <title>Hydralus</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="verify-v1" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="Hydralus, Andrew McCarrick, Raphael Ades-Aron, Nana Kvaratskheliya, Latisha Lewis" /> <meta name="robots" content="index, follow" /> <link rel="stylesheet" href="style.css" media="screen" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="//hydral.us/jquery/2.1.0.min.js"><\/script>')</script> </head> <body> <div id="wrapper"> <div id="head"> <div id="innerHeader"> <div id="logo"> Logo </div> <div id="navbar"> Navigation Bar </div> <div id="top"> || </div> </div> </div> <div id="contentWrapper"> <div id="content"> <?php echo $content; ?> Content </div> </div> <div id="footerWrapper"> <div id="footer"> Footer </div> </div> </div> </body> </html> CSS: html,body { margin:0; padding:0; height:100%; background-color: #F4F4F4; } #wrapper{ min-height:100%; position:relative; } #head{ height: 140px; border: 0; background-color: #080808; box-shadow: 0px 3px 4px #828282; } #innerHeader{ width: 1000px; margin: 0 auto; text-align: center; padding-top: 10px; color: #FFFFFF; } #logo{ height: 70px; } #navbar{ height: 40px; } #top{ width: 48px; height: 24px; position: relative; top: 17px; background-color: #080808; margin: 0 auto; box-shadow: 0 0 3px 4px #FF0000; overflow: hidden; } #contentWrapper{ padding-bottom: 65px; } #content{ padding: 5px; min-height: 500px; } #footerWrapper{ height: 60px; position: absolute; bottom: 0; width: 100%; }
×
×
  • Create New...

Important Information

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