Jump to content
UncleStef Mentoring Update: New SEO course!

grabenair

Member
 View Profile  See their activity

  • Posts

    338

  • Joined

  • Last visited

  • Days Won

    2

 Content Type 

Posts posted by grabenair

  1. Php Code Help

    in PHP

    Posted · Edited by grabenair

    It is common practice to make your header an escape hatch to the home page. This will salve your problem.

     

    I have never used that program before, but there should be some kind of navigation for the pages. Then add the home link, or add a div to the page for your navigation.

  2. Help Web Design

    in Beginners Web Design

    Posted · Edited by grabenair

    Well not really, it looks good. But here are a few things for aeshetics that could be done but not necessary. On the rounded top above the logo there is a little corner pointing out. The header is one pixel to far to the right, this should fix the problem.

     

    One the drop down main nav children make them the same width as the parent and round the bottom corners of the last child to match the top corners of parent menu item, meaning on hover. Also put a 1px bottom border on each of the drop down children. On you sidebar menu instead of squares for bullets use >> or something else.

     

    Again the site looks nice and clean good job.

  5. Need Help For Header Css/design

    in Beginners Web Design

    Posted

    Andrea is awesome right. I would like to add just this little bit on the id and class thing. Although she explained it very well. Here is how I explain on when to use one over the other. Like she said id's only once per page, classes as many times as you need. I am adding this, use id's for your division of content and your classes for styling. This is just a good rule I read somewhere a while back somewhere and like the simple expination.

  15. Streamline My Site

    in Beginners Web Design

    Posted

    I do not know why I am so bone headed sometimes but I just figured out what you are doing. You should not have to have a whole new page for each large photo. You can use javascript and do a show hide on each one. Have it connected to your next and previous buttons. A gallery effect only you hide all but the one you want to view. This way you only have one page for all of the large images. Another Idea is to have the thumbnails horizontal say 4 or 5 depending on how they look with the larger image on top changing when the thumb is hovered on. Just throwing out suggestions.

     

    I like the lightbox, some say it is overused but it is all subjective. When I show my new sites to friends and family for testing they all say "cool" when they see the lightbox.

  16. Streamline My Site

    in Beginners Web Design

    Posted

    Mason city moto x is Wordpress and the other is a javascript script that I downloaded and edited. Just went and looked it is lightbox2. Another idea is disjointed rollover.

     

    I still do not understand what you mean by having to make a new code page. Not trying to sound like a smart butt, but could you not simply add a div to your page where your gallery is with a description and image?

     

    If you want I can give you the older lightbox 2, it is open source. Just let me know and I will go and download it and zip it up for you.

  17. Where Do I Find The Ftp Info In Joomla

    in Beginners Web Design

    Posted

    I would do what Ben said. To add to it, You log into to the Joomla admin and you make all changes there, no reason to download it to your pc. All of the files you can find there and edit. If you do download it to your PC it is not always that easy. For one I believe you will have to go into the database and change where it is pointing to meaning your local host and not the web.

     

    Here is a good place to start learning Joomla, http://www.joomla.org/about-joomla.html It will take some time. You will have to decide if it is worth it to you. Meaning you will probably loose money on this project until you learn Joomla.

     

    One more thing if you attempt a download (any CMS) do a backup first, very very important.

  19. Streamline My Site

    in Beginners Web Design

    Posted · Edited by grabenair

    I found some photo galleries on hotscripts.com just type in photo galleries in the search bar. Or you could move your site to a Wordpress site and use a plug in like nextgen gallery. You can check that out at one of my sites http://www.masoncitymotox.com it is easy to use and customize. The other alternative is to write a custom script to do the job.

     

    This is an update to the above. I think what you are doing is making a new page every time you click an image to view the larger one. If that is right you might want a light box. What that does is not change page it pops up the image over the current page like at http://www.meuzelaar21mxracing.com/photo_gallery.htm then you just add a thumbnail and a larger image to the gallary.

     

     

     

  20. Mybb Forum

    in Miscellaneous Software

    Posted

    Check the documentation there should be a link to their site. Also it could be that the widget is not playing nice with another one. Disable one at a time to see if this fixes it. This is all about all that I can say without looking at the site. With wordpress it could be a number of things.

  22. A Better Way To Clear Floats

    in CSS

    Posted

    I was trying to think of a good example as to why it is better. I thought of one this morning while drinking my coffee. Remember the scuba site that you made where you was having that float problem, where you said it always worked before. Well this would have fixed that problem if I would have known about it then. If you remember I said that I have had problems with the clear float sometimes and thought it was a html5 thing but was not for sure. Since I have been using this I have had no problems.

  23. How To Import Java Script Navigation Bar To Html Css

    in CSS

    Posted · Edited by grabenair

    Yes and no, Eddie. You can use and small image (sprite) for the arrows if you want them and you can use css transitions for a fade in effect. Here is all the code with comments. Personally I do not use javascript/jQuery if I do not have to, because it is less HTTP request to the server making your site load faster.

     

    For those that do not know about em's. Yes you can use pixes instead of em's. I just like em's better because it gives me more control than pixels do. For those that do not know em is a relative unit of measurement. It is the size of an uppercase M in whatever font that you are using. And the best thing about using em's is that it is a relative unit of measurement and that the element will scale if the view port is magnified or minified. This is especially nice with buttons.

     

    
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>horizontal menu with sub menu</title>
<style>
html {
background: #E6E3D4;
}
body {
font: 100% Georgia, "Times New Roman", Times, serif;
line-height: 1.4;
width: 70%;
margin: 0 auto;
}


/*horizontal menu styles*/
nav{
background:#916A31;
height:2.3em;/*what this does with the ul height is make the brown border on the bottom an option to making a bottom border*/
margin-top:100px;/*this is just here to push the nav away from the top of the screen to see the rounded corners.*/
}
ul, li{
margin: 0;
padding: 0;
list-style:none;
float:left;	
}
ul{
background:#D5973C;
height:2em;
width:100%;
}
li{
position:relative;/*this is because I am using absalute position on the submenu*/
}
li a{
display:block;
line-height:2em;/*using this with the ul height of 2em to make the height of the ul and the li*/
padding:0 1em;
color:#FFF;
text-decoration:none;
}
/*the > is a child cominater<--misspelled is simmler to a desendent selector. What is is doing is making the rule very specific. It says to target any li child the topMenu and only in the topMenue. And then any links that are a direct child of the li */
li a:hover, .topMenu > li:hover > a{
background:#916A31;
height:2em;
padding-top:.3em;
position:relative;/* postioning it this way instead of using a margin helps stop any conflicks that might acure with a eliment above or below it*/
top:-.3em;
border-radius:.3em .3em 0 0;
}
/* the .topMenu li:hover a.current keeps the above hover from overriding the current style*/
.current, a:hover.current, .topMenu li:hover a.current{
background:#AD9B75;
color:#EEE;
padding-top:.3em;
position:relative;
top:-.3em;
border-radius:.3em .3em 0 0;
border-bottom:.3em solid #917f63;
cursor:default;
}
/*dropdown menu styles*/
/*the reason that I built the submenues this way is that this way screen readers can read them*/
ul.subMenu{
float:none;
background:#916a31;
width:auto;
height:auto;
position:absolute;/*this with the top 2m keep the sub menu from being pushed down when the main nav is hovered*/
top:2em;
left:-5098em;/*this is to push the submenu off any size screen until hovered over. Use any number that you want just make sure that it is big enough to puse off any screen, even a telvision screen. Yes you could use dispaly none or something else but then again screen readers can not read them thus nither will google*/
max-height:0;/*this is for the transitions work right.*/
-mox-transition:max-height 0.5s ease-in-out;/*these are the transition rules that make the submenu ease in. For browsers that do not support them the submenu just pops in.*/
-webkit-transition:max-height 0.5s ease-in-out;
-o-transition:max-height 0.5s ease-in-out;
transition:max-height 0.5s ease-in-out;
overflow:hidden;/*this is to keep the text from the dropdown menu from showing up before the animation finishes*/
}
ul.subMenu li{
float:none;
}
.topMenu li:hover ul{
left:0;/*this makes the submenue comeback on hover*/
max-height:10em;/*this is not what the height will be it is just giving enough spase for the auot height to work.*/
}
ul.subMenu li a{
border-bottom:1px solid #FFF;
padding: .2em 1em;
white-space:nowrap;/*this is to make the link stay on one line no matter how long it is*/
}
ul.subMenu li:last-child a{
border-bottom:none;
}
ul.subMenu li a:hover{
background:#D5973C;
height:2em;
padding-top:.2em;
top:0;
border-radius:0;
}
</style>
</head>
<body>

<nav>
<ul class="topMenu">
<li><a href="horizontal_menu.htm"class="current">Home</a></li><!--the class current needs to be on the active page and only the active page ot it will show more than one active page.-->
<li><a href="#">tutorials</a><!-- inportent here the submenu has to be afte the closing </a> and before the closing </li> or ir will not work-->
	<ul class="subMenu">
         <li><a href="#">something</a></li>
         <li><a href="#">something Else</a></li>
         <li><a href="#">link 3</a></li>
         <li><a href="#">link 4</a></li>
	</ul>
</li>
<li><a href="#">contact</a>
	<ul class="subMenu">
         <li><a href="#">something</a></li>
         <li><a href="#">something Else</a></li>
         <li><a href="#">link 3</a></li>
         <li><a href="#">link 4</a></li>
	</ul>
</li>
<li><a href="#">fourm</a></li>
<li><a href="#">services</a>
<ul class="subMenu">
         <li><a href="#">something</a></li>
         <li><a href="#">something Else</a></li>
         <li><a href="#">link 3</a></li>
         <li><a href="#">link 4</a></li>
	</ul>
</li>
</ul>
</nav>
</body>
</html>

    • Upvote 1

  25. ? For Administrator Or A Moderater

    in Open Forum

    Posted · Edited by grabenair

    Hello again Ben, I just figured something out. I just posted a new topic titled, a better way to clear floats. I copied the code from DW but this time instead of using the icon to inject the code, I hand wrote the opening and closing tag and it worked fine. clap.gif

×
×
  • Create New...