Log In · Register

 
Link & background colour?
anzbex
post Aug 24 2008, 02:16 AM
Post #1


Senior Member
****

Group: Official Designer
Posts: 214
Joined: Mar 2008
Member No: 626,536



Ok i am trying to get my background colour to appear the same as the colour of my image #eac90c i tried a code that worked but stuffed up the image div & nothing i did could fix the position.
My next problem is i am unable to get the nav links to change colour & the link hover?I have put my code & a screenshot here.I am very new at this & this is my first attempt at myspace,i am sorry if these questions have been asked several million times... i did do a search in the forum but couldn't find anything that explained it for me.

Here is an updated screenshot




YAY!!! I THINK I HAVE DONE IT!!!! But i would appreciate if someone could check out my code & see if all is ok as i would like to submit it ;)

CODE
<style>
table table div form {
display:inline !important;
}
.contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {
display:none;
height:0px;
!important;
visibility:hidden
}
td td td td {
border:0px;
width:0px;
text-align:left;
}
table, td, tr {
padding:0px;
width:;
background-color:transparent
}
table table table {
padding:1px;
height:.01%;
width:100%;
}
table table, table table table table, table, tr, td {
height:0px;
!important;
border:0px;
!important
}
a.text, table div font a, table div div, .navbar font, tr td font {
visibility:hidden;
display:none;
height:0px;
!important;
}
td.text table table {
display:inline;
visibility:visible;
}
table td table tr td.text table {
visibility:hidden;
}
table td table tr td.text table table, table td table tr td.text table table td.text {
visibility:visible;
}
table div div {
visibility:hidden;
!important;
}
table table table table, table table table table td.text, td.text td.text table {
display:none;
}
body div div form {
display:none !important;
}
td td embed, td td embed, td td object {
position:absolute;
top:0px;
right:0px;
width:45px;
}
div div div select {
position:absolute !important;
margin-left:-1000px !important;
left:0px !important;
display:none !important;
}
div div table div {
display:none;
}
div form, .mslogo, div ul {
display:none!important;
}
div div, div td {
background-color:transparent;
background-image:none!important;
}
div.profileWidth {
margin-top: -30px !important;
}
div.profileWidth div {
filter:alpha(opacity=0);
opacity:0.0001
}
div.profileWidth div.clearfix, i i i, div.profileWidth div div {
filter:none;
opacity:0.9999
}
div.profileWidth div.clearfix {
position:relative;
top:30px
}
div div select, div div form {
display:none !important;
}
</style>
<style>

body {
background-color: EAC90C;}

.div {
position: absolute;
left: 50%;
margin-left:-700px;
top: 90px;
z-index: 0;
}
.box1 {
position: absolute;
left: 50%;
margin-left:50px;
top: 250px;
z-index:1;
width: 285px;
height: 470px;
overflow: auto;
font: normal Arial 10px;
color:FFFFFF;
font-weight:normal;
line-height:normal;
}
.heading {
position: absolute;
left: 50%;
margin-left:150px;
top: 230px;
font: normal 14px Anson;
color:FFFFFF;
font-weight:bold;
text-transform: none;
line-height:12px;
}
.nav {
position: absolute;
left: 50%;
margin-left:-365px;
top: 700px;
z-index:5;
width: 450px;
height: 150px;
overflow: auto;

}
a:active,a:visited,a:link,a{
color:FFFFFF;
font-size:13px;
font-weight:bold;
font-family:anson;
text-decoration:none;
text-transform:none;
}
a:hover{
color:FFFFFF;
font-size:14px;
font-weight:bold;
letter-spacing:1px;
font-family:anson;
text-decoration:none;
text-transform:none;}

</style>


<div class="div"> <img src="http://img355.imageshack.us/img355/7439/bgcz3.jpg" /> </div>
<div class="heading">
<center>
About Me
</center>
</div>
<div class="box1">
This is my first ever myspace layout!! Yeah i know pretty boring & simple :/ This box will scroll as you plave your own content in it,as you can see.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tristique condimentum lacus. Sed id lacus non nisi volutpat malesuada. Duis ut elit dictum arcu ultricies vulputate. Cras sed lorem. Morbi sed nunc a magna lobortis pulvinar. Suspendisse iaculis nulla. Duis vehicula dapibus tellus. Maecenas ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent nec leo vehicula libero molestie commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames acturpis egestas. Vivamus hendrerit lorem at eros. Ut sed sapien. Curabitur felis elit, tincidunt at, mollis in, porta et, dui. Sed gravida vestibulum lacus. Nulla eget est. Sed sit amet massa fringilla velit tempor feugiat. Donec sagittis porttitor purus. Praesent nulla. Nam vel mi ut pede ullamcorper vulputate. Maecenas et lorem sed erat venenatis consequat. Nulla a quam eu sem dictum elementum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tristique condimentum lacus. Sed id lacus non nisi volutpat malesuada. Duis ut elit dictum arcu ultricies vulputate. Cras sed lorem. Morbi sed nunc a magna lobortis pulvinar. Suspendisse iaculis nulla. Duis vehicula dapibus tellus. Maecenas ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent nec leo vehicula libero molestie commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus hendrerit lorem at eros. Ut sed sapien. Curabitur felis elit, tincidunt at, mollis in, porta et, dui. Integer sagittis pretium neque. Quisque malesuada mattis dui. Sed fermentum. Phasellus tincidunt justo sed felis. Mauris tincidunt feugiat augue. Maecenas cursus. Nunc posuere, mauris vitae viverra aliquet, metus purus vulputate est, in tempor dolor quam non justo. Donec turpis. Suspendisse at neque ut erat sodales viverra. Sed gravida vestibulum lacus. Nulla eget est. Sed sit amet massa fringilla velit tempor feugiat. Donec sagittis porttitor purus. Praesent nulla. Nam vel mi ut pede ullamcorper vulputate. Maecenas et lorem sed erat venenatis consequat. Nulla a quam eu sem dictum elementum..
</div>

<div class="nav">
<center>
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyJk15VG9rZW49MWJmZGQ1Y2QtOWMxZC00NmZhLTgzYzQtN2YzMGUwZmUzZmZh">Home |</a>

<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5h
GRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPVhYWFhYWA==">Add |</a>

<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD1YWFhYWFgmTXlUb2tlbj02MDA3M2FmNS1lOTI5LTRjN2EtYjM1Ny0zZjFiNmRhM
JiZmI=">Message |</a>

<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD1YWFhYWFg=">Comment |</a>


<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld1BpY3R1cmUmZnJpZW5kSUQ9WFhYWFhY">Pics |</a>

<a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9WFhYWFhY">Blog |</a>

<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPVhYWFhYWA==">Block |</a>
</center>
</div>
 
 
Start new topic
Replies (1 - 8)
berrypop90
post Aug 24 2008, 07:28 AM
Post #2


Jooleeah <3
*****

Group: Official Designer
Posts: 687
Joined: Jun 2008
Member No: 662,481



You need to put your code in a scrolling codebox!

The layout looks better than before. You might want to think about using a repeating background. I made one for you and coded it:
CODE
body {
background-color: EAC90C;
background-image:url(http://img377.imageshack.us/img377/7854/orngbg2ee4.png);
background-position:top left;
background-repeat:repeat-x;}


Also, your box is a little misaligned. A few pixels to the left would look better.
 
anzbex
post Aug 24 2008, 08:56 AM
Post #3


Senior Member
****

Group: Official Designer
Posts: 214
Joined: Mar 2008
Member No: 626,536



QUOTE(berrypop90 @ Aug 24 2008, 10:28 PM) *
You need to put your code in a scrolling codebox!

The layout looks better than before. You might want to think about using a repeating background. I made one for you and coded it:
CODE
body {
background-color: EAC90C;
background-image:url(http://img377.imageshack.us/img377/7854/orngbg2ee4.png);
background-position:top left;
background-repeat:repeat-x;}


Also, your box is a little misaligned. A few pixels to the left would look better.



Box? misaligned? Everything is showing up ok for me in Opera,FF & IE.

Could you tell me a little more about what you are seeing?

Thanks for taking the time to look at my code and amend it,i really appreciate it biggrin.gif
 
berrypop90
post Aug 24 2008, 10:21 AM
Post #4


Jooleeah <3
*****

Group: Official Designer
Posts: 687
Joined: Jun 2008
Member No: 662,481



Well, the misalignment is really only when it scrolls I guess but do you see how the scrollbar is over the white line? That's what I mean, it's nothing big, but those things bother me. lol
 
anzbex
post Aug 24 2008, 05:31 PM
Post #5


Senior Member
****

Group: Official Designer
Posts: 214
Joined: Mar 2008
Member No: 626,536



QUOTE(berrypop90 @ Aug 25 2008, 01:21 AM) *
Well, the misalignment is really only when it scrolls I guess but do you see how the scrollbar is over the white line? That's what I mean, it's nothing big, but those things bother me. lol



Thats not showing up for me,the scrollbar is exactly on the line for me.Maybe its the screen size?
 
schizo
post Aug 24 2008, 05:38 PM
Post #6


Senior Member
******

Group: Staff Alumni
Posts: 2,435
Joined: Feb 2007
Member No: 506,205



Everything looks right for me as well.

I'd go ahead and submit it if that what you're planning to do. It looks really good from the screenshot, so it will most likely be accepted.
 
anzbex
post Aug 24 2008, 06:59 PM
Post #7


Senior Member
****

Group: Official Designer
Posts: 214
Joined: Mar 2008
Member No: 626,536



QUOTE(schizo @ Aug 25 2008, 08:38 AM) *
Everything looks right for me as well.

I'd go ahead and submit it if that what you're planning to do. It looks really good from the screenshot, so it will most likely be accepted.


Thanks schizo _smile.gif I must say your tutorials on your site helped me so much !! Easy to understand thumbsup.gif Ohhh & here is a working preview of it.

Working Preview
 
schizo
post Aug 24 2008, 07:07 PM
Post #8


Senior Member
******

Group: Staff Alumni
Posts: 2,435
Joined: Feb 2007
Member No: 506,205



Aw, well that's good to know. I'm always afraid I don't explain things well enough.

The only thing I'd fix about the layout before submitting would be the navigation. It comes out of the box a bit in IE. I can't seem to see the error in the coding, though. It might be the font choice. I've never even heard of "anson." Try staying with georgia or times new roman. :)

 
anzbex
post Aug 25 2008, 12:41 AM
Post #9


Senior Member
****

Group: Official Designer
Posts: 214
Joined: Mar 2008
Member No: 626,536



QUOTE(schizo @ Aug 25 2008, 10:07 AM) *
Aw, well that's good to know. I'm always afraid I don't explain things well enough.

The only thing I'd fix about the layout before submitting would be the navigation. It comes out of the box a bit in IE. I can't seem to see the error in the coding, though. It might be the font choice. I've never even heard of "anson." Try staying with georgia or times new roman. :)



No you explain things real well biggrin.gif
Ohhh bugger lmao i have already submitted it whistling.gif Yep i think it would be the font but thanks for your advice i will in future stick to the basic fonts like georgia & times new roman wink.gif
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: