Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical menu + border + images query

    I am trying to layout a site that contains...

    a) A vertical menu containing a series of buttons on the left hand side.
    b) A border (or box) to the right of the menu so the top of the box aligns with the top of the first rollover button in the menu.
    c) Just inside the border I would like to layout a series of about 6 images in two rows of three.

    The problem is knowing what order all of the above elements should be stated in html and css.

    There will obviously be a header banner and footer, but I've got those sorted elsewhere and can simply copy and paste the existing coding.

    Is the above brief layout possible? Any thoughts or assistance would be much appreciated.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    From what you've described it seems feasible although i'm not 100% sure of what the intended look is.

    Also not too sure what you mean what "order" they should be stated in, the HTML is the markup for the page then the CSS is used to control the presentation of this markup..

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good morning Scriptet and many thanks for your contribution.

    This is a screen shot of where I am at the moment. As you can see I'm trying to get the three menu buttons in the bottom left hand corner to the side of the orange box - either aligned to the top of the box, or probably better still aligned to the bottom of the box.



    On an earlier version I've managed to get the first 'about' button to align to the top of the box, but then the other 'portfolio' and 'contact' buttons are underneath the box in pretty much the position they are now.

    Within the orange box I am trying to layout 6 images.

    Any thought or guidance would be gratefully appreciated, and to fill you in a little more, I am fairly new to html / css coding - which might be obvious from my efforts so far.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Hi,

    What you are looking for here is to use CSS floats, so you can float the menu to the left of the box. So ideally you want to float your menu and box to the left so they appear side by side.

    So it depends on what HTML markup you are using for your menu and box, but it should look something like this:

    Code:
    <ul id="menu">
    	<li><a href="#">About</a></li>
    	<li><a href="#">Porfolio</a></li>
    	<li><a href="#">Contact</a></li>
    </ul>
    <div id="box">
    	<p>Box Content / 6 images</p>
    </div>
    As you can see i've used an un-ordered list (UL) for the menu, which is the common way to do it seeing as a menu is a list of links.

    Then the CSS (which controls the presentation, the HTML is just the bare bones coding) for the above HTML would look something like:

    Code:
    /*This controls the menu as a whole*/
    #menu{
    	list-style:none; /*Removes bullet points from the menu*/
    	background:#000 url('linktoimage.png'); /*Add menu background image here*/
    	width:210px; /*Total width of menu*/
    	float:left; /*So it appears next to the box*/
    }
    
    /*This controls each individual link/button inside the menu*/
    #menu li a{
    	display:block;
    	width:200px; /*Width of each button*/
    	height:50px; /*Height of each button*/
    	text-indent:-9999em; /*Hides text inside each button so that the bg image shows through*/
    	border:5px solid #F60;
    }
    
    /*This controls what happens when each button is hovered over*/
    #menu li a:hover{
    	background:#333;
    }
    
    /*This controls the box*/
    #box{
    	float:left; /*So the box appears next to the menu*/
    	width:600px; /*Width of the box*/
    	height:400px; /*Height of box if known, will possibly be dynamic height so can be left out*/
    	border:1px solid #F60;
    }
    So joining them together to get this example document which you can save and test in your browser:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css" media="screen">
    /*This is a CSS reset*/
    *{
    	margin:0;
    	padding:0;
    }
    
    /*This controls the menu as a whole*/
    #menu{
    	list-style:none; /*Removes bullet points from the menu*/
    	background:#000 url('linktoimage.png'); /*Add menu background image here*/
    	width:210px; /*Total width of menu*/
    	float:left; /*So it appears next to the box*/
    }
    
    /*This controls each individual link/button inside the menu*/
    #menu li a{
    	display:block;
    	width:200px; /*Width of each button*/
    	height:50px; /*Height of each button*/
    	text-indent:-9999em; /*Hides text inside each button so that the bg image shows through*/
    	border:5px solid #F60;
    }
    
    /*This controls what happens when each button is hovered over*/
    #menu li a:hover{
    	background:#333;
    }
    
    /*This controls the box*/
    #box{
    	float:left; /*So the box appears next to the menu*/
    	width:600px; /*Width of the box*/
    	height:400px; /*Height of box if known, will possibly be dynamic height so can be left out*/
    	border:1px solid #F60;
    }
    </style>
    </head>
    
    <body>
    <ul id="menu">
    	<li><a href="#" class="about">About</a></li>
    	<li><a href="#" class="portfolio">Porfolio</a></li>
    	<li><a href="#" class="contact">Contact</a></li>
    </ul>
    <div id="box">
    	<p>Box Content / 6 images</p>
    </div>
    </body>
    </html>
    The menu CSS is pretty advanced for a newbie because it turns as bullet pointed list into how you want the menu to look so it takes some time to learn how they can work. You want to join the three menu buttons into one single image (using your image program), and then add that image as the background image for #menu.

    You can see from the comment which parts of the CSS control which parts of the document, and what certain CSS statements are doing.

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks for your assistance Scriptet - but I never thought it would have involved that much work for yourself!

    I appreciate your version, but I must admit that I have created it in a slightly different way - although as a newbie I am unsure if there is an actual wrong way and a right way to do things?

    I should have included my coding in my first post, as all I really needed from yours was to include a float: right coding within CSS coding for my box. That automatically moved the box up to the right of my three menu buttons.

    The latter were created by inserting a Div Tag for each one, and then using the Insert Rollover Image in Dreamweaver. Prior to that I had obviously created my separate button icons - both with a #000 background but one version with #636466 grey text, and the other rollover version with #ff6600 orange text.

    Thanks again for your help. Now I need to work out how to place some images inside the box, and then allocate each one with an url link to different areas of the site that I am building.

    Cheers again and apologies if I involved you in a great deal more work than was really necessary - gulp!
    Last edited by David.W.S; 05-25-2010 at 05:10 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    There's many different ways to do things in HTML and CSS which makes it so easy and fun, but some should be avoided for different reasons e.g you have to take into account browser compatability as you will learn and other things like speed, usabilty and accessiblity.

    For example the rollover DW images use excessive code and JavaScript from what I remember, hence why CSS rollovers are preferred.
    And a list is sometimes preferred to using DIV boxes for menu button is because it's more semantic and easier to control but these are only petty things.

    Anyway the HTML code for an image is simply:

    <img src="img.jpg" width="200" height="200" />

    The HTML code for a linked image would therefore be:

    <a href="link.html">
    <img src="img.jpg" width="200" height="200" />
    </a>


    Obviously you'd change the bits in bold. The link.html text is what page the image will link to.

    Oh and don't worry it didn't take that long only 2 mins, it's all very easy once you get your head around it!

  • #7
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see what you mean about the excessive coding and Javascript now! I've done a quick internet search and am now trying to use simply HTML and CSS for my rollover buttons rather than using Dreamweaver.

    So far this is my HTML for the first button...

    Code:
    <div class="cssnav">
    <a href="http://www.xxxxxxxxxx/about.html" class="cssnav"><img src="images/about.jpg" width="190" height="31" alt="Alternative text" /></a>
    </div>
    And this is my CSS for the first button...

    Code:
    .cssnav
    {
    	font-family: Verdana, Geneva, sans-serif;
    	width: 190px;
    	height: 31px;
    	background-image: url(images/about_hover.jpg);
    }
    
    .cssnav a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 190px;
    height: 31px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    }
    
    .cssnav img
    {
    width: 190px;
    height: 31px;
    border: 0
    }
    
    * html a:hover
    {
    visibility:visible
    }
    
    .cssnav a:hover img
    {
    visibility:hidden
    }
    Any thoughts or comments Scriptet, or is what I'm doing a lot better way of getting to the end result that I'm looking for? Please advise if anything contradicts or over rules any other element, or if there is anything within the above that is surplus to requirements.

    Many thanks.

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Well rather than having the image in the HTML like you have done here:

    Code:
    <div class="cssnav">
    <a href="http://www.xxxxxxxxxx/about.html" class="cssnav"><img src="images/about.jpg" width="190" height="31" alt="Alternative text" /></a>
    </div>
    It probably makes more sense, and it's more common to add it as a background image inside the CSS, rather than in the HTML document. This also makes it easier to add the hover effect. For example the HTML can be like this:

    Code:
    <div class="cssnav">
    <a href="http://www.xxxxxxxxxx/about.html' class="cssnav"></a>
    </div>
    Notice there's no image in there now and i've added the class "about" to the <a>..so the CSS for this would now be:

    Code:
    .cssnav
    {
    	font-family: Verdana, Geneva, sans-serif;
    	width: 190px;
    	height: 31px;
    }
    
    .cssnav a
    {
    display: block;
    color: #000000;
    font-size: 11px;
    width: 190px;
    height: 31px;
    display: block;
    float: left;
    color: black;
    text-decoration: none;
    background-image: url(images/about.jpg);
    }
    
    .cssnav a:hover
    {
    background-image: url(images/about_hover.jpg);
    }
    So now it just changes the background image on hover, rather than messing around with the visiblity thing. But you were pretty much on the right track already, this is just another method which is a bit better, and could be taken further but it's best not to go into too much detail atm..

  • #9
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks for the tip - adding the background image in CSS worked exactly as you stated - ta muchly!

    So that's the first 'About' rollover / hover button sorted. What do I do about the other 'Portfolio' and 'Contact' buttons that I want to place below 'About'? Or is it simply a matter of repeating the above depending on how many buttons I have?

    I also want to move the rollover / hover buttons down so that the bottom edge of the bottom button lines up with the bottom of the box. I guess it's a simple matter of adding padding-top or margin-top to the very first rollover / hover button, but no matter what I do it doesn't seem to work?
    Last edited by David.W.S; 05-27-2010 at 11:28 AM.

  • #10
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    SECONDLY, I can't seem to link the header jpg to the home page url even though I have used the <a href="URL"></a> within the <div id="header"></div> as advised to do so elsewhere. What am I doing wrong?

    Code:
    <div id="header"><a href="http://www.xxxxxxxxxx.co.uk/index.html"></a></div>

  • #11
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've sorted the latter issue by removing the image from CSS and placing it within HTML. I did have a purple line around my header jpg but I managed to remove that by inserting border="0" in <img /> which seems to have worked.

    What I do get momentarily though is a very thin red dotted line around my header jpg (when I click down on my mouse button), which then changes to a thin purple dotted line (when I let go of my mouse button) before it directs me to the url that I linked it to. When I then press the 'back' button, the thin purple dotted line is still there and it only disappears once I have clicked elsewhere on the page.

    Any thoughts about getting rid of these red and purple dotted lines?

  • #12
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    So that's the first 'About' rollover / hover button sorted. What do I do about the other 'Portfolio' and 'Contact' buttons that I want to place below 'About'? Or is it simply a matter of repeating the above depending on how many buttons I have?
    It's pretty much repeating, obviously there will probably be a bit of repeated code, and there's different ways of doing things but you will learn these over times. The HTML for the three buttons would then probably look something like this:

    Code:
    <div class="nav">
    	<div class="about">
    		<a href="http://www.xxxxxxxxxx/about.html"></a>
    	</div>
    	<div class="portfolio">
    		<a href="http://www.xxxxxxxxxx/portfolio.html"></a>
    	</div>
    	<div class="contact">
    		<a href="http://www.xxxxxxxxxx/contact.html"></a>
    	</div>
    </div>
    I added a bit of tabbing just to make it look neater, and also a div with the class nav to hold all three of the buttons.

    The CSS would then look something like:

    Code:
    .nav{
    	width: 190px;
    	height: 31px;
            float:left;
    }
    
    .nav a{
    	display: block;
    	width: 190px;
    	height: 31px;
    }
    .nav about a{background-image: url(images/about.jpg);}
    .nav about a:hover{background-image: url(images/about_hover.jpg);}
    
    .nav portfolio a{background-image: url(images/portfolio.jpg);}
    .nav portfolio a:hover{background-image: url(images/portfolio_hover.jpg);}
    
    .nav contact a{background-image: url(images/contact.jpg);}
    .nav contact a:hover{background-image: url(images/contact_hover.jpg);}
    Assuming all the buttons were the same height/width but you could define them individually if they were different widths/heights.

    I also want to move the rollover / hover buttons down so that the bottom edge of the bottom button lines up with the bottom of the box. I guess it's a simple matter of adding padding-top or margin-top to the very first rollover / hover button, but no matter what I do it doesn't seem to work?
    Well you can now add a margin-top to the "holder div" which holds all three of the buttons.

    Code:
    <div class="cssnav">
    <a href="http://www.xxxxxxxxxx/about.html' class="cssnav"></a>
    </div>
    Quote Originally Posted by David.W.S View Post
    I've sorted the latter issue by removing the image from CSS and placing it within HTML. I did have a purple line around my header jpg but I managed to remove that by inserting border="0" in <img /> which seems to have worked.
    Yea you were correct in removing the border, all linked images have a thick blue/purple border round them by default..

    It could have worked with the background image, the CSS was probably a bit wrong, maybe you didn't have display:block and the correct width/height set to the <a> link for the header, as a random guess.

    Quote Originally Posted by David.W.S View Post
    What I do get momentarily though is a very thin red dotted line around my header jpg (when I click down on my mouse button), which then changes to a thin purple dotted line (when I let go of my mouse button) before it directs me to the url that I linked it to. When I then press the 'back' button, the thin purple dotted line is still there and it only disappears once I have clicked elsewhere on the page.

    Any thoughts about getting rid of these red and purple dotted lines?
    This sounds like when the link is being activated, but not clicked on..so try something like this inside your CSS:

    a:active{ border:none; }

    You can make this happen just for your header link by adding the class name for the header e.g

    This would apply for all <a>'s with the class classname
    a.classname:active{ border:none; }

    This would apply for all <a>'s within an element which has the class classname (so the a is a child of the element)
    classname a:active { border:none; }

    Try to understand how to refer to elements inside the HTML from your CSS stylesheet as briefly shown above, and also how the rollovers are working.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •