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

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]

1How was this achieved? Empty How was this achieved? Thu Dec 16, 2010 4:23 am

COR3 POW3R


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

How was the wrap nav bar achieved?

2How was this achieved? Empty Re: How was this achieved? Thu Dec 16, 2010 5:05 am

RecAgenda

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

http://www.recagenda.wordpress.com

3How was this achieved? Empty Re: How was this achieved? Thu Dec 16, 2010 5:21 am

COR3 POW3R


Registered Member
Registered Member
Top.

4How was this achieved? Empty Re: How was this achieved? Thu Dec 16, 2010 1:35 pm

Guest


Guest
its just this image https://2img.net/h/oi51.tinypic.com/ka3hj6.jpg placed with css behind the real nav images Wink

5How was this achieved? Empty Re: How was this achieved? Sat Dec 18, 2010 12:55 pm

COR3 POW3R


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

6How was this achieved? Empty Re: How was this achieved? Sat Dec 18, 2010 1:58 pm

ankillien

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.

7How was this achieved? Empty Re: How was this achieved? Sat Dec 18, 2010 3:13 pm

COR3 POW3R


Registered Member
Registered Member
Can I have a code?

8How was this achieved? Empty Re: How was this achieved? Sat Dec 18, 2010 3:20 pm

ankillien

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

9How was this achieved? Empty Re: How was this achieved? Sat Dec 18, 2010 3:32 pm

COR3 POW3R


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

http://glossplate.forumotion.com/forum

10How was this achieved? Empty Re: How was this achieved? Sat Dec 18, 2010 3:41 pm

ankillien

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

11How was this achieved? Empty Re: How was this achieved? Sat Dec 18, 2010 3:43 pm

COR3 POW3R


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

12How was this achieved? Empty Re: How was this achieved? Sat Dec 18, 2010 4:01 pm

ankillien

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

13How was this achieved? Empty Re: How was this achieved? Sun Dec 19, 2010 2:14 pm

COR3 POW3R


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

14How was this achieved? Empty Re: How was this achieved? Sun Dec 19, 2010 2:24 pm

ankillien

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

The width should be 1065px only.

15How was this achieved? Empty Re: How was this achieved? Sun Dec 19, 2010 2:36 pm

COR3 POW3R


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

How was this achieved? 2w1shau

16How was this achieved? Empty Re: How was this achieved? Sun Dec 19, 2010 3:35 pm

ankillien

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

17How was this achieved? Empty Re: How was this achieved? Sun Dec 19, 2010 4:01 pm

COR3 POW3R


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

How was this achieved? 2u4in1x

It has the white bar to the side.

18How was this achieved? Empty Re: How was this achieved? Sun Dec 19, 2010 5:05 pm

ankillien

ankillien
Administrator
Administrator
Add this code...

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

19How was this achieved? Empty Re: How was this achieved? Sun Dec 19, 2010 6:16 pm

COR3 POW3R


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

20How was this achieved? Empty Re: How was this achieved? Sun Dec 19, 2010 8:44 pm

ankillien

ankillien
Administrator
Administrator
Glad that I could help Very Happy

Solved | Locked

Sponsored content


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