Pixel2Life Forum > Rounded corners to menu? CSS & HTML

Help - Search - Members - Calendar

Full Version: Rounded corners to menu? CSS & HTML

Pixel2Life Forum > Help Section > HTML, XHTML, CSS and General Web Design

xXx-Treme

Jun 3 2009, 09:09 AM

Well I may take photos, even maybe design a site, but with coding I'm not good. Anyway

This is what I want:

This is what I got:

Now as you can see I have this submit search button misplaced and the right edge of navigation menu.

So my code:
Search html:

CODE

<div id="searchbar"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div

Search css:

CODE

#searchbar{
    width: 165px;
    height: 41px;
    background-image:url(images/header_search.png);
    background-repeat:no-repeat;
    background-position:left;
    position:relative;
    float:right;
    right: 0;
    top: 0;
}

#searchform{
    width: 185px;
    padding: 4px 8px 0 8px;
    overflow: hidden;
}
#searchform input{float: left;}
#searchform #s{
    width: 145px;
    height: 19px;
    border: 0;
    color: #999;
    font-style:italic;
    font-weight: 500;
    font-size:12px;
    padding-top: 7px;
    padding-left: 7px;
    background: url("images/input-bg.gif") no-repeat 0 0;
}
#searchform #searchsubmit{
    width: 45px;
    height: 23px;
    background: url("images/submit.gif") no-repeat 0 0;
    margin-left: 5px;
    border: 0;
    cursor: pointer;
}

Navi html

CODE

<div id="navi_vasak" style="">
        <ul id="navigation">
                <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
                <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
                    </ul><div id="navi_parem"></div>

Navi CSS

CODE

#navigation{
    width: 718px;
    height: 32px;

    background-image:url(images/header_navi_bg.png);
    background-repeat:repeat-x;
    margin-left:14px;
    margin-right:14px;
}
#navi_vasak {
    width:14px;
    height: 32px;
    background-image:url(images/header_navi_left.png);
    background-repeat:no-repeat
}
#navi_parem {
    width:14px;
    height: 32px;
    background-image:url(images/header_navi_right.png);
    background-repeat:no-repeat;
}
#navigation li{
    list-style-type: none;
    height: 32px;
    text-align: center;
    float: left;
}
#navigation li a{

    height: 26px;
    display: block;
    padding-top: 8px;
    padding-left: 20px;
    padding-right: 20px;
    color: #929292;
    text-decoration: none;
}
#navigation li a:hover{
    background: url(images/header_navi_li.png);
    background-repeat:no-repeat;
    background-position:center;

}
#navigation .current_page_item a, #navigation .current_page_item a:hover{
    height: 26px;
    display: block;
    padding-top: 8px;
    color: #929292;
    text-decoration: none;
}

Brandonador

Jun 3 2009, 02:17 PM

I do understand your problem, but, I am no good at code EITHER, but my GUESS, is this:

You have this:

CODE

Try, changing the "background-position:" attribute to, "background-position:right;", instead of left.. maybe? Someone correct me if I am wrong. But that's only an educated guess from me. HOPE I helped--somehow.

xXx-Treme

Jun 4 2009, 12:35 AM

QUOTE (Brandonador @ Jun 3 2009, 10:17 PM)

I do understand your problem, but, I am no good at code EITHER, but my GUESS, is this:

Try, changing the "background-position:" attribute to, "background-position:right;", instead of left.. maybe? Someone correct me if I am wrong. But that's only an educated guess from me. HOPE I helped--somehow.

You do have logic in this. I allready tried this thing too, it didn't change a thing. But thx for drying dude

Da DreadLord

Jun 4 2009, 02:16 AM

you have to understand that the div tag will always want to start on a next line, so if you want to put those corners into divs, you have to use float stuff

in this case (the menu) your width will probably be predefined so you can just use 1 image (left corner, middle part and right corner together) as a background image

CODE

add the image as background to your menu id
add some padding/margin to your ul style to position the text

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.