8 Replies - 9039 Views - Last Post: 26 September 2013 - 07:08 AM

#1 jordfc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-November 12

Split navigation bar

Posted 26 September 2013 - 01:44 AM

Hi, I have recently designed a website for a client of mine and I wondered how I would create this navigation bar, at the moment its all image files and i want to turn it into an actual web page however I am unsure as how to split the menu in half with a gap for their logo because im not sure really where to start.

Image preview:
Posted Image

Uploaded with ImageShack.us

Thanks, any advice is much appreciated

Is This A Good Question/Topic? 0
  • +

Replies To: Split navigation bar

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,058
  • Joined: 08-June 10

Re: Split navigation bar

Posted 26 September 2013 - 02:08 AM

that mostly depends on how you code the navigation bar.

Iíd probably try to make the logo part of the nav bar and override the navís CSS for that one place.
Was This Post Helpful? 0
  • +
  • -

#3 jordfc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-November 12

Re: Split navigation bar

Posted 26 September 2013 - 04:56 AM

I don't quite understand, the way i would initially try would be to make the logo and the curved edges as one image and then make 2 divs one for each side of the logo containing their options then just repeat the background along x to cover the page but i wondered if there was a more effective / efficient way.

Is that similar to what you meant?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,058
  • Joined: 08-June 10

Re: Split navigation bar

Posted 26 September 2013 - 05:21 AM

not at all.

I wouldn’t make a (logic-wise) difference between the options and the logo. this way you have one element for navigation, bearing 7 options of that 1 happens to be the logo.
<!doctype html>
<html>
	<head>
		<title>navigation Bar Test</title>
		<style>
nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
nav li {
	display: inline-block;
	width: 10em;
	padding: 1em 0;
	background-color: black;
}
nav a {
	background-color: yellow;
	color: red;
	width: 10em;
	height: 1em;
	display: inline-block;
	text-align: center;
	padding: 0.5em 0;
	font-family: sans-serif;
	font-size: 1em;
	line-height: 1.2em;
}
nav a:hover {
	background-color: orange;
}
nav li#logo {
	/* use a background-image instead */
	background-color: green;
}
nav li#logo a {
	visibility: hidden;
}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a>HOME</a>
				</li><li>
					<a>ABOUT</a>
				</li><li id="logo">
					<a>LOGO</a>
				</li><li>
					<a>EVENTS</a>
				</li><li>
					<a>CONTACT</a>
				</li>
			</ul>
		</nav>
	</body>
</html>

This post has been edited by Dormilich: 26 September 2013 - 05:21 AM

Was This Post Helpful? 0
  • +
  • -

#5 jordfc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-November 12

Re: Split navigation bar

Posted 26 September 2013 - 06:15 AM

Ah i see now, makes much more sense that way, thank you.

The only problem with that would be that would give straight edges instead of the curved edges like the design.

i guess i could play around with a few things and possibly try and do it so the logo div looks something like:

border-radius: 50%;
width: 100;
height: 100px;

and then make the background transparent or something.

thanks for your help
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,058
  • Joined: 08-June 10

Re: Split navigation bar

Posted 26 September 2013 - 06:18 AM

Quote

The only problem with that would be that would give straight edges instead of the curved edges like the design.

what prevents you from making the curved edges into the background image?
Was This Post Helpful? 0
  • +
  • -

#7 jordfc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-November 12

Re: Split navigation bar

Posted 26 September 2013 - 06:26 AM

its a png so it just squares the edges off when i try and include it in the list?
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,058
  • Joined: 08-June 10

Re: Split navigation bar

Posted 26 September 2013 - 06:38 AM

why not using this one?

Attached Image
Was This Post Helpful? 0
  • +
  • -

#9 jordfc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 09-November 12

Re: Split navigation bar

Posted 26 September 2013 - 07:08 AM

Thats what i thought initially by using the logo and curved edges as one image but then i got thrown off, think im back on track now and i know what i have to do now.

Thanks for you advice, much appreciated.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1