WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » How was this achieved?

View previous topic View next topic Go down  Message [Page 1 of 1]

1 How was this achieved? on Thu Dec 16, 2010 2:53 am

COR3 POW3R


Registered Member
Registered Member
http://spotfeed.forumotion.com

How was the wrap nav bar achieved?

2 Re: How was this achieved? on Thu Dec 16, 2010 3:35 am

RecAgenda


WebArtz NewsReporter
WebArtz NewsReporter
The actual navigation bar up top? Or the one down below?

http://www.recagenda.wordpress.com

3 Re: How was this achieved? on Thu Dec 16, 2010 3:51 am

COR3 POW3R


Registered Member
Registered Member
Top.

4 Re: How was this achieved? on Thu Dec 16, 2010 12:05 pm

Guest


Guest
its just this image http://i51.tinypic.com/ka3hj6.jpg placed with css behind the real nav images Wink

5 Re: How was this achieved? on Sat Dec 18, 2010 11:25 am

COR3 POW3R


Registered Member
Registered Member
How did it wrap around the edge of the forum?

6 Re: How was this achieved? on Sat Dec 18, 2010 12:28 pm

ankillien


Administrator
Administrator
COR3 POW3R wrote:How did it wrap around the edge of the forum?


It is done with CSS width, padding and background properties.

7 Re: How was this achieved? on Sat Dec 18, 2010 1:43 pm

COR3 POW3R


Registered Member
Registered Member
Can I have a code?

8 Re: How was this achieved? on Sat Dec 18, 2010 1:50 pm

ankillien


Administrator
Administrator
The code may vary for different width of layouts and different background images.

Generally the code would look like this...

Code:
selector {
background: url(BG IMAGE URL) repeat-x;
padding: 0 10px;
width: 780px;
}

9 Re: How was this achieved? on Sat Dec 18, 2010 2:02 pm

COR3 POW3R


Registered Member
Registered Member
Why did it not work on my forum?

http://glossplate.forumotion.com/forum

10 Re: How was this achieved? on Sat Dec 18, 2010 2:11 pm

ankillien


Administrator
Administrator
As I said, the code varies for each site.
It depends on the overall layouts and the background image.

11 Re: How was this achieved? on Sat Dec 18, 2010 2:13 pm

COR3 POW3R


Registered Member
Registered Member
Is it perhaps of the already placed navigation?

12 Re: How was this achieved? on Sat Dec 18, 2010 2:31 pm

ankillien


Administrator
Administrator
No, its like that.
If you add this code to your CSS, it will work...

Code:
#page-header .navbar {
background: url(http://i51.tinypic.com/ka3hj6.jpg) no-repeat;
padding: 0px 30px !important;
}
#page-header .navbar .corners-top ,
#page-header .navbar .corners-bottom {
display: none;
}
#wrap {
width: 1065px;
}

13 Re: How was this achieved? on Sun Dec 19, 2010 12:44 pm

COR3 POW3R


Registered Member
Registered Member
Ok it worked, but it does not wrap around the board.. It just cuts off.

14 Re: How was this achieved? on Sun Dec 19, 2010 12:54 pm

ankillien


Administrator
Administrator
Because you changed the last line of my code Wink

The width should be 1065px only.

15 Re: How was this achieved? on Sun Dec 19, 2010 1:06 pm

COR3 POW3R


Registered Member
Registered Member
Which is what I set it as.

16 Re: How was this achieved? on Sun Dec 19, 2010 2:05 pm

ankillien


Administrator
Administrator
Code:
#wrap {
margin : 0px auto;
-moz-box-shadow : 0 0 7px #000;
-webkit-box-shadow : 0 0 7px #111;
width: 1022px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: white url(http://i67.servimg.com/u/f67/15/67/55/98/header13.png) top center;
background-repeat: repeat-x;
}

div#page-header div.navbar{
background-color: #FFFFFF;
height: 25px;
position: relative;
left: -70px !important;
}

#page-header .navbar ul.navlinks {
width: 1063px;
height: 36px;
padding-left: 80px;
background: url('http://i51.tinypic.com/ka3hj6.jpg') no-repeat top center;
border-bottom:0px;
margin: auto;
margin-bottom: -100px;
}

17 Re: How was this achieved? on Sun Dec 19, 2010 2:31 pm

COR3 POW3R


Registered Member
Registered Member
Works correctly but I got this problem;



It has the white bar to the side.

18 Re: How was this achieved? on Sun Dec 19, 2010 3:35 pm

ankillien


Administrator
Administrator
Add this code...

Code:
div#page-header div.navbar{
background-color: transparent !important;
}

19 Re: How was this achieved? on Sun Dec 19, 2010 4:46 pm

COR3 POW3R


Registered Member
Registered Member
Amazing. Thank you mate. I aspire to be like you.

20 Re: How was this achieved? on Sun Dec 19, 2010 7:14 pm

ankillien


Administrator
Administrator
Glad that I could help Very Happy

Solved | Locked

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » How was this achieved?

Permissions in this forum:
You cannot reply to topics in this forum