I have the nivo slider pretty much set up on my home page, with one exception. I have a sidebar to the right of the slider and the slider bullets end up above the sidebar as opposed to below and centered below the slider. If I remove the sidebar and set the slider div to the full width of the page, then the bullets end up where the should be (centered and below the slider).
What do I have to do so that the bullets end up centered and below the slider when I have a sidebar to the right of the slider?
Thanks.
The site is not live so I don't know how to post a url for it for viewing. I inserted a print screen of the preivew in internet explorer from dreamweaver (I hope this helps), you can at least see the bullets for the slider above the sidebar. Also, the source code for the page is below. If this is not enough please let me know what else I can include that might allow someone to help me. Thanks.
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="nivo-slider.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither /
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="respond.min.js"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" media="screen" />
<script src="jquery.nivo.slider.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(images/Gradient%20Background%20with%20highlights.png);
background-repeat: no-repeat;
background-color: #000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
</head>
<body bgcolor="#404040">
<div class="gridContainer clearfix">
<div id="header">
<p style="background-position: center center; background-repeat: no-repeat; width: 850px; height: 115px; background-image: url(images/Montanaro%20Poker%20Logo%20Transparent%20Background%203.pn g); text-align: center; font-size: 40px; color: #ffffff; font-weight: bold;"></div>
<div id="menu">
<table width="979" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">HOME</a></li>
<li><a href="html/rules.html">RULES</a></li>
<li><a href="#">TOURNAMENT STRUCTURE</a></li>
<li><a href="#">LEAGUE EVENTS</a></li>
<li><a href="#">STANDINGS</a></li>
<li><a href="#">POKER FORUM</a></li>
<li><a href="#">R.S.V.P.</a></li>
<li><a href="#">CUSTOM TABLES</a></li>
</ul></td>
</tr>
</table>
</div>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider">
<img src="slider/images/nemo.jpg" title="nemo image">
<img src="slider/images/toystory.jpg" title=toystory image">
<img src="slider/images/up.jpg" title="up image">
<img src="slider/images/walle.jpg" title="#htmlcaption">
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
<div id="sidebar">
<form style="text-align:center;font-size:18px;color:#000000;font-weight:bol d;line-height:35pt;">UPCOMING EVENTS</form>
<p style="text-align:center;font-weight:bold;">LAST TOURNAMENT OF THE YEAR + <br>
WIN A FREE SEAT IN THE 2013 POKER LEAGUE
</p>
<p><a href="html/rsvp.html">Saturday, December 8th 8:00pm</a>
<p style="text-align:center;font-weight:bold;">FIRST LEAGUE EVENT
</strong></p>
<p><a href="html/rsvp.html">Saturday, January 12th 8:00pm</a>
</div>
<div id="body">
<p style="font-size:28px;color:#CC0000;font-weight:bold;">HOME</p>
<p>Montanaro Poker has evolved over the years to provide a fun, friendly atmosphere for friends/family to play in a social poker game. It is by inviatation only. It is not a public card room. The house will in no way ever take a rake. All buy-inswill be paid out to the winners of each event. All league fee's will be paid out to the Player of the Year winners.
</p>
<p>Small snacks (pretzels, popcorn, candy...) and drinks (water and soda) will generally be provided. Any player that wishes something else is welcome to bring their own, however, due to the friendly nature of the game, everyone usually shares. Also, no food or drink is allowed on the actual poker table.
</p>
<p>While we maintain a fun game, we try to maintiain a certain level of professionalism to each event. Please review the rules (located at the top of the page and in the poker room) before coming to an event or sitting down to the table. We like everyone to be on as level of a playing field as possible.
</p>
<p>We love hanging out with friends/family and tossing in a little competition. We are glad that you can join us and wish you the best of luck! (just not too much).
</p>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
I appreciate your help. This is my first time using dreamweaver and my first time creating a website from scratch. I've only used weebly or word press before. I haven't started trying to figure out how to upload the files to my site or a temporary page for that matter. If you could advise me on how to do that I will. Thanks.
Judging from the code that you have posted here, you have already defined a site in Dreamweaver. To upload the files to a remote server, you now need to define the connection details for the remote server.
You can find detailed instructions on how to do so in the following article: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt6.htm l. It's the final part of a tutorial about creating your first site in Dreamweaver. It should be fairly straightforward, but ask if you have any questions.
I assume that you have a hosting plan on a web server. The hosting company will provide you with the necessary login details.
Rather than put the page in the main website, I suggest that you create a folder called test or temp, and use that as the Root Directory instead of check_cs5 (see Figure 3 in the article).
I appreciate the help and the link the the article...and I am close but have a slight issue...hoping you can help.
I did have a site in dreamweaver. I managed to setup a remote server and ftp connect to my website. (I clicked test and it said I was connected). Then when I typed in the root directory /home/myusername/public_html/test/ and click test I get an error:
An FTP error occured - cannot open server folder /home/myusername/public_html/test/. Access denied. The file may not exist or there could be a permission problem.
I signed into the file manager of my site and I'm pretty sure that the path is correct, unless I am missing something. and the permissions for that folder are 755.
Any thoughts?
Unless these folders all exist on your server, DW will not be able to find them.
/home/myusername/public_html/test/
To create a folder in Dreamweaver, right click on yourSiteName in the local files panel and select New Folder.
That said, if you can connect to your server with FileZilla, use that to upload your test page.
Nancy O.
I am still unable to connect through dreamweaver but was able to do it through filezilla, so I know the path was correct. Anyways, below is the link...I hope this helps you help me figure out why the bullets for the slider are out of place. Thanks again.
http://www.montanaropoker.com/test/Montanaro%20Poker%20Website/
P.S. I haven't really set up the links to the other tabs and what not because my focus was the main page.
To contain the slider bullets, you need to apply the width and float properties to the slider-wrapper <div> rather than to the slider <div>.
I did a quick experiment with your page at full width, changing the width of the slider-wrapper class to 65% and floating it left. I also changed the width of the slider <div> to 100%. This brought the bullets under control because they're nested inside the slider-wrapper, not the slider.
First, I would like to thank you for your help. I am still learning and appreciate it greatly.
I followed your directions (I think correctly): I adjusted the slider div (box to 100%) in css, and I adjusted the slider wrapper div (box to 100% and floated left) in css.
It did fix the bullets to below the slider (yeah), however it proceeded to kick my sidebar to below the slider now. I updated the page so the link above will show you what I am talking about.
The problem is that you have accidentally changed the width of the .gridContainer class on line 169 of layout.css to 65%. I'm not sure what it was originally, but it should be something like 90%.
You have also added a wrapper div around the slider. The wrapper needs to have a width of approximately 65%, and should be floated left.
Thanks. The quick asnwer is I got it to work!!!!!!!!
At first I changed the div.slider-wrapper.theme-default to 65% which correlated to line 169 of layout.css. So I adjusted it to back to 90%.
The div#wrapper did not have a class assigned. I had to add a new css rule to layout.css so that the wrapper was actually 65% and floated left.
Hopefully that is what was needed (since it appears to be working) and I didn't mess anything up. And I'm sure I have more questions, but will play around for a little first.
Thank you again. I ran out of ideas on my own to make this work. Onto the next pieces of the puzzle.
I apologize for asking another question so quickly, but I have a feeling its a very simple fix if you know where to make the adjustment. I adjusted the sidebar to match the width of the body below, and I adjusting the header width to center my logo to the page, however I'm having trouble making the spry menu bar extend the same width. I tried setting it to 100%, and that extended the little black border thing around the menu bar (which looks foolish without the tabs extending to that length.
Can I stretch the individual tabs width so it extends the full width, however I want to make sure the menu bar stays on 1 line. Some titles are longer than other and I want them all on 1 line.
The link has been updated for viewing.
Thanks so much
Sorry but Spry isn't well suited to responsive layouts.
If you need to keep all menu items on one line AND you have a budget to work with, look at PVII's responsive Tab Panel Magic.
http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/f inished-page.htm
Or roll your own with one of the jQuery Responsive Menus below.
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and -tutorials/
Nancy O.
Well instead of delving into one of the jQuery responsive menus you listed (which was my back-up plan), I ended up extending some of the titles of my tabs to get the menu to display across most of the page and then I adjusted the divs below it to match up and I am happy with the way that it currently looks.
However, I am stuck again (I'm not sure if I should start a new thread or just continue on here?). My menu is in a table that is set to 1178.25px so that the box border can't be seen extending beyond the width of the menu as it was prior to my adjustments.
I am now trying to incorporate 2 other tables (1 in my tournament structure tab and 1 in my player of the year standings), and I am having the same issue with both of these table.
First, I don't want these 2 tables to be 1178.25px as is the table in the menu. I want them a smaller width. I can't seem to get them to adjust without affecting the menu bar and the table that that's in.
Secondly, and I have been researching this issue, but am still struggling, I would like to set the columns widths of the 2 tables. The table on the tournament structure tab should be all the same, and the table on the player of the year standings will have a smaller 1st and 3rd column and a larger 2nd column. But in both cases, no matter what I seem to do works...the first column is huge and the other columns are squished to the right and are small. (Even when I select set column width to be equal for the table in the tournament structure tab).
Do you have any advice for my 2 problems? Thanks again!
PS - The link is still the same as above but I put it below for easy reference. Also, the tabs now work on the top so you can navigate to the tournament structure and player of the year standings tabs.
http://www.montanaropoker.com/test/Montanaro%20Poker%20Website/
With regard to your "Player of the Year" table, check this out:
http://css-tricks.com/examples/ResponsiveTables/responsive.php
Also, validate code often during development and fix reported errors. You're using obsolete HTML tags and attributes that HTML5 can't support.
Nancy O.
Thanks.
I adjusted the menu so it is no longer in a table. I found some tutorials that said to do that so that you could center the menu to the page. I then re-adjusted my other divs to match up to the width of the menu.
The responsive table link is interesting, (I think I may be getting tired and will need to re-look at it later), but do I just copy and paste the 2 css sections from the link and paste them at the bottom of my layout.css?
And in regards to the second link, validating code...I have started to fix some of the errors. But if I didn't fix all of them, what would happen? When I follow the link to my website everything appears to be working fine. For example, I don't have %20 between the blank spaces for all of my links but they all seem to be working? Also, one code says that I can't use the <ol> the way that I am. I've been using that to indent certain lines like sub bullets., and the lines appear the way intended in my site. (but if I did need to change that code, how else could I go about that)
I hate to keep bugging you with questions but I just can't seem to figure out certain things and I'm sorry for the multitude of question in my last 2 posts....this time back to the nivo slider. I was working perfectly, so I then wanted to switch the pictures from the pixar images that came with the slider download to my own. I made sure I adjusted all of my images to 618x418 as that was the size of the pixar images. It shows perfectly in the preview in internet explorer, but when I upload to my site, there is an x in the top left corner and the loading image in the center of the picture.
I thought maybe it was the file size, as my images were about 150kb and the pixar images were roughly 75kb, so I adjusted the size down in one of my pictures to 70kb and it still does the same thing. I am cofused. They are in the same folder and display with no problem in preview in internet explorer.
What else could be happening as to why my images are not showing up. Thanks.
http://www.montanaropoker.com/test/Montanaro%20Poker%20Website/
right now I have images alternating between the pixar images and my images. (4 total).
#1 CMYK images are for print and not rendered by all browsers.
Save your images for the web as RGB.
# 2 Do not use spaces or special characters (^&%$#@) in file or folder names as this may cause problems on the web. It's ok to use underscores_, hyphens - or dots . between words but no spaces.
Nancy O.
North America
Europe, Middle East and Africa
Asia Pacific