Jump to content


Photo

Rounded corners to menu? CSS & HTML


  • Please log in to reply
3 replies to this topic

#1 xXx-Treme

xXx-Treme

    Jedi In Training

  • Members
  • PipPip
  • 464 posts
  • Gender:Male
  • Location:Tartu, Estonia
  • Interests:Photography, Photoshop, Parkour, Buildering, Rock Climbing, Adrenaline, Extreme sports, Extreme lifestyle

Posted 03 June 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:
Posted Image
This is what I got:
Posted Image

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

So my code:
Search html:
<div id="searchbar"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div
Search css:
#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
<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
#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;
}


#2 Brandonador

Brandonador

    Young Padawan

  • Members
  • Pip
  • 238 posts
  • Gender:Male
  • Location:Michigan
  • Interests:I really love computers. Especially the internet, and discovering new people's ideas, and designs. Love to look at different layouts and coded designs that people come up with. And Flickr, one of my favorite sites...

Posted 03 June 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:

#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;
}

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.

#3 xXx-Treme

xXx-Treme

    Jedi In Training

  • Members
  • PipPip
  • 464 posts
  • Gender:Male
  • Location:Tartu, Estonia
  • Interests:Photography, Photoshop, Parkour, Buildering, Rock Climbing, Adrenaline, Extreme sports, Extreme lifestyle

Posted 04 June 2009 - 12:35 AM

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 :censored:

#4 Da DreadLord

Da DreadLord

    Young Padawan

  • Members
  • Pip
  • 14 posts
  • Gender:Male
  • Location:Aalst, Belgium

Posted 04 June 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 :censored:

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

<div id="menu"><ul>...</ul></div>
add the image as background to your menu id
add some padding/margin to your ul style to position the text

Edited by Da DreadLord, 04 June 2009 - 02:17 AM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users