Welcome Guest ( Log In | Register )

Bump Topic Add Reply RSS Feed

Outline · [ Standard ] · Linear+

 Cascading Style Sheets, Need help

views
     
TSikram_zidane
post Oct 15 2005, 12:50 PM, updated 21y ago

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
i have a questions.. how do i change the color for the link and when we hover it... i check a lot of sources..but there's many differences....
CODE

#content
{
position: absolute;
width: 491px;
margin-top:115px;
left:58px;
text-decoration: none;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
word-spacing:0.1em;color:#66851B;
font-size:11px;line-height:20px;
}

#nav
{
position: absolute;
width: 166px;
margin-top:120px;
left:563px;
text-decoration: none;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
word-spacing:0.1em;color:#506C1A;
font-size:11px;line-height:20px;
}


i've tried this ::

CODE
#content
{
position: absolute;
width: 491px;
margin-top:115px;
left:58px;
text-decoration: none;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
word-spacing:0.1em;color:#66851B;
font-size:11px;line-height:20px;
}
a:link, a:visited, a:active {
color:#536625;
text-decoration: none;
}
a:hover {
color:#8EA654;
text-decoration: none;
}



#nav
{
position: absolute;
width: 166px;
margin-top:120px;
left:563px;
text-decoration: none;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
word-spacing:0.1em;color:#506C1A;
font-size:11px;line-height:20px;
}
a:link, a:visited, a:active {
color:#536625;
text-decoration: none;
}
a:hover {
color:#FFFFF;
text-decoration: none;
}


but both of the layers are using the same attributes...its like both layer depends on one css code.anyone plz help me...
TSikram_zidane
post Oct 15 2005, 12:54 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
also how do i make automated borders like in this page ?? (look like a frame somehow)..
http://alvinwoon.com/blog/index.php/2005/1...s-not-standard/
crynobone
post Oct 15 2005, 12:59 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth
QUOTE(ikram_zidane @ Oct 15 2005, 12:50 PM)
but both of the layers are using the same attributes...its like both layer depends on one css code.anyone plz help me...
*
Use this
CODE
#content
{
position: absolute;
width: 491px;
margin-top:115px;
left:58px;
text-decoration: none;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
word-spacing:0.1em;color:#66851B;
font-size:11px;line-height:20px;
}
#content a:link, #content a:visited, #content a:active {
color:#536625;
text-decoration: none;
}
#content a:hover {
color:#8EA654;
text-decoration: none;
}
#nav
{
position: absolute;
width: 166px;
margin-top:120px;
left:563px;
text-decoration: none;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
word-spacing:0.1em;color:#506C1A;
font-size:11px;line-height:20px;
}
#nav a:link, #nav a:visited, #nav a:active {
color:#536625;
text-decoration: none;
}
#nav a:hover {
color:#FFFFF;
text-decoration: none;



QUOTE(ikram_zidane @ Oct 15 2005, 12:54 PM)
also how do i make automated borders like in this page ?? (look like a frame somehow)..
http://alvinwoon.com/blog/index.php/2005/1...s-not-standard/
*
Which part are you referring to?
TSikram_zidane
post Oct 15 2005, 01:50 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
the border for the pictures/screenshot...
crynobone
post Oct 15 2005, 02:02 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth
QUOTE(ikram_zidane @ Oct 15 2005, 01:50 PM)
the border for the pictures/screenshot...
*
For example you want to set image under div called #content to have border. Use this

HTML
<div id='content'>Some text <img src='filename.jpg' alt='' /> some other text</div>


inside the CSS write this.

CODE
#content img {
padding: 2px 2px 2px 2px; border:1px solid #333; vertical-align:middle;
}


Padding depend or how far you want to set it from the image.
TSikram_zidane
post Oct 15 2005, 02:07 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
i'm using blogger.. it'll work right ? thanks a lot..
etsuko
post Oct 15 2005, 02:15 PM

Spaced out person
Group Icon
Elite
4,210 posts

Joined: Jan 2003
From: Malaysia
can just use..

img.picture {
properties
}

then in your <img> tag place it <img 'attributes' class="picture />
TSikram_zidane
post Oct 15 2005, 02:23 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
anyone knows the default code to insert the blog content,content's title, content's date,archives for blogger ?
its too hard for me to detect the code in the blogger default templates..
TSikram_zidane
post Oct 16 2005, 02:16 AM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
CODE
#content img {
display: block;
position: relative;
background-color: #ffffff;
border: 1px solid #66851B;
margin: 6px 6px 6px 6px;
padding: 4px;
}

why it's isn't working in IE ?? and also why there's only one pictures in a row..
check my blog http://2ali-bodoh.blogspot.com to see what i meant..anyone plz help me..
etsuko
post Oct 16 2005, 09:23 AM

Spaced out person
Group Icon
Elite
4,210 posts

Joined: Jan 2003
From: Malaysia
Blogger default codes:

<$BlogTitle$> - Entry Title

<Blogger> - Start Blogger Body

<BlogDateHeader>
<$BlogDateHeaderDate$> - 3 lines of code for Entry Date
</BlogDateHeader>

<$BlogItemBody$> - Entry Body

</Blogger> - End Blogger Body

<$BlogMemberProfile$> - Blogger Profile

<BloggerPreviousItems>
<$BlogPreviousItemTitle$> - Previous Entries
</BloggerPreviousItems>

<BloggerArchives>
<$BlogArchiveName$> - Blogger Monthly Archives
</BloggerArchives>

I think I know why the img properties aren't being picked up in IE. It's because currently your img tags are like this:

CODE

<div style="text-align: center;"><img.. /></div>


In IE, sometimes the browser won't pick up the scent of your CSS coz it's hidden inside another DIV. Try removing the CENTER properties and see if it works.

Cheers.
TSikram_zidane
post Oct 16 2005, 06:50 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
nope...that doesn't change it...
etsuko
post Oct 17 2005, 09:36 AM

Spaced out person
Group Icon
Elite
4,210 posts

Joined: Jan 2003
From: Malaysia
Hmm.. this might be a tedious process to do when you have images, but it might help solve the problem temporarily.

img.picture {
properties
}

then in all your IMGs.. <img.. class="picture" />

by right #content img should work, tried flipping the code to img#content ? tongue.gif
earthkid
post Oct 17 2005, 09:38 AM

muggs rocks
*****
Senior Member
970 posts

Joined: Jan 2003
From: damansara & segamat
QUOTE(ikram_zidane @ Oct 15 2005, 12:54 PM)
also how do i make automated borders like in this page ?? (look like a frame somehow)..
http://alvinwoon.com/blog/index.php/2005/1...s-not-standard/
*
i'm starting to elarn CSS and i was wondering how was it done in the page of the link which you gave here..the shadowing border...how can it be done in CSS..thanks lots
SUSchewxy
post Oct 17 2005, 10:21 AM

Flying Side By Side with my beloved Pretty Swallow
********
Senior Member
11,234 posts

Joined: Jan 2003
QUOTE(earthkid @ Oct 17 2005, 09:38 AM)
i'm starting to elarn CSS and i was wondering how was it done in the page of the link which you gave here..the shadowing border...how can it be done in CSS..thanks lots
*
Pictures and repeats and nested divs
earthkid
post Oct 17 2005, 11:45 AM

muggs rocks
*****
Senior Member
970 posts

Joined: Jan 2003
From: damansara & segamat
alrity..pictures n nested divs
what do u mean by nested divs?
etsuko
post Oct 17 2005, 11:26 PM

Spaced out person
Group Icon
Elite
4,210 posts

Joined: Jan 2003
From: Malaysia
http://www.alistapart.com/articles/cssdropshadows/

Read that.. smile.gif
StonerJuan
post Oct 18 2005, 01:10 AM

Casual
***
Junior Member
309 posts

Joined: Apr 2005
From: Springfield
that shadow thingy its brilliant.
TSikram_zidane
post Oct 18 2005, 01:13 AM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
thanks for the links.
kaixiang
post Oct 18 2005, 02:48 PM

No Pain, No Gain
*****
Senior Member
741 posts

Joined: Jan 2003
From: LowYat.NeT
izzit that css can only used in html ?
etsuko
post Oct 18 2005, 04:32 PM

Spaced out person
Group Icon
Elite
4,210 posts

Joined: Jan 2003
From: Malaysia
You plan on using it on something else..? Say it and we'll tell you. smile.gif
crynobone
post Oct 18 2005, 07:31 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth
QUOTE(kaixiang @ Oct 18 2005, 02:48 PM)
izzit that css can only used in html ?
*
I can be use with any Server-Side Scipting technology as long at it still use HTML Tag to display the result inside a browser.
earthkid
post Oct 19 2005, 02:04 PM

muggs rocks
*****
Senior Member
970 posts

Joined: Jan 2003
From: damansara & segamat
thanks etsuko...
TSikram_zidane
post Oct 19 2005, 03:37 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
> crynobone
i've viewed your portfolio..and you've edited an ipb skin right?
so, plz help me..i'm making a skin for my friends (for some dt game...even i donno what's that)

CODE
html { overflow-x: hidden; overflow-y: auto; }

form { display:inline; }
img  { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #FFFFFF; margin:0px 10px 0px 10px;background-color:#060606 }
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #FFFFFF; }
a:link, a:visited, a:active { text-decoration: none; color: #FFFFFF }
a:hover { color: #cccccc; text-decoration:none }

fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer; }

img.attach { border:2px outset #EEF2F7;padding:2px }

.googleroot  { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help    { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#555 }
.caldate  { text-align:right;font-weight:bold;font-size:11px;color:#777;background-color:#DFE6EF;padding:4px;margin:0px }

.warngood { color:green }
.warnbad  { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg  { text-align:center; margin-top:15px }

#ucpmenu    { line-height:150%;width:22%; border:1px solid #345487;background-color: #F5F9FD }
#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #F5F9FD; border:1px solid #345487;line-height:150%; width:auto }
#ucpcontent p  { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:1px solid #4A4949;background-color: #060606;background-image:url(http://xmgimg.com/uploads/113_title_back.jpg);padding:0px;margin:0px; }
#submenu  { border:1px solid #4A4949;background-color: #2E2E2E;font-size:10px;margin:3px 0px 3px 0px;color:#FFFFFF;font-weight:bold;}
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #FFFFFF; }
#userlinks { border:1px solid #4A4949;background-color: #2E2E2E;}
#userlinks a:link, #userlinks  a:visited, #userlinks a:active { font-weight:normal;font-size:10px;text-decoration: none; color: #FFFFFF; }
#userlinks a:hover { font-weight:normal;font-size:10px;text-decoration: none; color: #cccccc; }


#navstrip  { font-weight:bold;padding:6px 0px 6px 0px; }

.activeuserstrip { background-color:#BCD0ED; padding:6px }

.pformstrip { background-color: #D1DCEB; color:#3A4F6C;font-weight:bold;padding:7px;margin-top:1px }
.pformleft  { background-color: #F5F9FD; padding:6px; margin-top:1px;width:25%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }
.pformleftw { background-color: #F5F9FD; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }
.pformright { background-color: #F5F9FD; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; }

.post1 { background-color: #F5F9FD }
.post2 { background-color: #EEF2F7 }
.postlinksbar { background-color:#D1DCEB;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://67.18.37.14/style_images/1/tile_sub.gif) }

.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }

.darkrow1 { background-color: #C2CFDF; color:#4C77B6; }
.darkrow2 { background-color: #BCD0ED; color:#3A4F6C; }
.darkrow3 { background-color: #D1DCEB; color:#3A4F6C; }


.hlight { background-color: #DFE6EF }
.dlight { background-color: #EEF2F7 }

.titlemedium { font-weight:bold; color:#FFFFFF; padding:7px; margin:0px; background-image: url(http://xmgimg.com/uploads/113_tile_sub.gif) }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: none; color: #FFFFFF }
.titlemedium  a:hover { text-decoration: none; color: #cccccc }

.maintitle { vertical-align:middle;font-weight:bold; color:#FFF; letter-spacing:1px; padding:8px 0px 8px 5px; background-image: url(http://xmgimg.com/uploads/113_tile_cat.gif) }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #FFF }
.maintitle a:hover { text-decoration: none; color: #cccccc }

.plainborder { border:1px solid #345487;background-color:#F5F9FD }
.tableborder { border:1px solid #345487;background-color:#FFF; padding:0px; margin:0px; width:100% }
.tablefill  { border:1px solid #345487;background-color:#F5F9FD;padding:6px;  }
.tablepad    { background-color:#F5F9FD;padding:6px }
.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

.wrapmini    { float:left;line-height:1.5em;width:25% }
.pagelinks  { float:left;line-height:1.2em;width:35% }

.desc { font-size:10px; color:#434951 }
.edit { font-size: 9px }

.signature  { font-size: 10px; color: #339 }
.postdetails { font-size: 10px }
.postcolor  { font-size: 12px; line-height: 160% }

.normalname { font-size: 12px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #900 }

.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE  { font-family: Courier, Courier New, Verdana, Arial;  font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }

.codebuttons  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.forminput, .textinput, .radiobutton, .checkbox  { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #FFF;border-bottom:1px solid #FFF }

.purple { color:purple;font-weight:bold }
.red    { color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue  { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }


user posted image
etsuko
post Oct 19 2005, 04:45 PM

Spaced out person
Group Icon
Elite
4,210 posts

Joined: Jan 2003
From: Malaysia
CODE
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #FFFFFF; }

#userlinks { border:1px solid #4A4949;background-color: #2E2E2E;}

#userlinks a:link, #userlinks  a:visited, #userlinks a:active { font-weight:normal;font-size:10px;text-decoration: none; color: #FFFFFF; }

#userlinks a:hover { font-weight:normal;font-size:10px;text-decoration: none; color: #cccccc; }

.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: none; color: #FFFFFF }

.titlemedium  a:hover { text-decoration: none; color: #cccccc }

.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #FFF }

.maintitle a:hover { text-decoration: none; color: #cccccc }

just view the source and discover which CLASS or ID controls what text.

Cheers.
TSikram_zidane
post Oct 19 2005, 10:37 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
it's not that.. there already a tutorials about the classes..

i just want to change the 'row4' and 'row2''s type to white color...
Gamers
post Oct 19 2005, 10:49 PM

Gamers.com.my
****
Senior Member
564 posts

Joined: Sep 2004
QUOTE(ikram_zidane @ Oct 19 2005, 10:37 PM)
it's not that.. there already a tutorials about the classes..

i just want to change the 'row4' and 'row2''s type to white color...
*
U mean from

CODE

.row2 { background-color: #DFE6EF }
.row4 { background-color: #E4EAF2 }


to this?

CODE

.row2 { background-color: #FFFFFF }
.row4 { background-color: #FFFFFF }
TSikram_zidane
post Oct 19 2005, 11:38 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
nope..that will just change the background..i want the text..
don't worry..i already got it..
Gamers
post Oct 19 2005, 11:46 PM

Gamers.com.my
****
Senior Member
564 posts

Joined: Sep 2004
QUOTE(ikram_zidane @ Oct 19 2005, 11:38 PM)
nope..that will just change the background..i want the text..
don't worry..i already got it..
*
Aih. Me must be getting old. How could I miss "background-color". cry.gif

Note to self: Don't surf at night
TSikram_zidane
post Oct 19 2005, 11:52 PM

Casual
***
Junior Member
489 posts

Joined: Dec 2004
From: malaysia
btw, when setting the behaviour/properties of images...
what's the differences between padding and margin ?
etsuko
post Oct 20 2005, 10:19 AM

Spaced out person
Group Icon
Elite
4,210 posts

Joined: Jan 2003
From: Malaysia
*slap forehead*

http://www.redmelon.net/tstme/box_model/

http://www.ilovejackdaniels.com/css/box-model/

there you go..
crynobone
post Oct 20 2005, 01:38 PM

1'm n0t @ n00b n0t y3t @ 1337
*******
Senior Member
2,811 posts

Joined: Jan 2003
From: Somewhere in middle earth
QUOTE(ikram_zidane @ Oct 19 2005, 10:37 PM)
it's not that.. there already a tutorials about the classes..

i just want to change the 'row4' and 'row2''s type to white color...
*
*Just gotten online since my phone connection failed for some reason*

For using black oriented skin I wouldn't really suggest setting BODY color attribute to white since there would tend to be much hassle making everything look nice with it. One option is to create a personalize class or ID attribute in CSS just to cater the part which use blackish background.

But to do that you must first now how tweak the overall HTML properties.
« Next Oldest · Arts & Designs · Next Newest »
 

Add ReplyOptions
 

Change to:
| Lo-Fi Version
 0.0216sec    0.42    5 queries    GZIP Disabled
Time is now: 25th November 2025 - 05:48 PM
All Rights Reserved © 2002- 2025 Vijandren Ramadass (~unite against racism~)
Removal Request
Powered by Invision Power Board © 2025  IPS, Inc.