New Posts  All Forums:Forum Nav:

CSS help

post #1 of 5
Thread Starter 
Well I'm new to web coding and have a lot to learn. I need some help though with using CSS and setting the color of links.

I have the following stylesheet:

Code:
.magazine_cover {
    position: relative;
    margin: 0px; padding: 0px; 
     width:477px;
    _width:477px;
    height:556px;
    float:left;
    border-left:#000;
    padding-left: 15px;
    color: black;
}
.magazine_cover .title {
    position: absolute;
    top: 20px; left: 0px;
    width: 492px; text-align: center; 
    line-height: 30px;
    height: 30px;
    font-size: 30px; font-weight; bold; color: #fff;
}
.magazine_cover .link {
    position: absolute;
    width: 120px; 
    line-height: 20px;
    height:30px;
    font-size: 16px;
}
And in my .html file,

<div class="link" style="a:link {color:green}; a:visited {color:green};"> <a href="#">..</a></div>

Is that the proper way to set the color for a link? Is there an easy way to put that in a new class like:

Code:
.magazine .link .green {
....
....
}
Thanks!
BlackMesa
(14 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II x6 Gigabyte XFX RF460 16gb G.Skill 
Hard DriveHard DriveOSMonitor
OCZ Vertex2 Sata II Coorsair Force GS Sata III Debian (testing) Shimian 27" 
KeyboardMouse
Filco w/ blue cherries Who needs a mouse? 
  hide details  
Reply
BlackMesa
(14 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II x6 Gigabyte XFX RF460 16gb G.Skill 
Hard DriveHard DriveOSMonitor
OCZ Vertex2 Sata II Coorsair Force GS Sata III Debian (testing) Shimian 27" 
KeyboardMouse
Filco w/ blue cherries Who needs a mouse? 
  hide details  
Reply
post #2 of 5
You're doing it wrong.

For the HTML, it would be:

Code:
<div class="magazine_cover">
<a href="http://www.google.com">Google</a>
</div>
And the CSS for that would be:

Code:
.magazine_cover{
*put your parameters for the whole div here*
}

.magazine_cover a{
*put styling for links here*
}

.magazine_cover a:hover{
*put styling for hover on links here*
}

.magazine_cover a:visited{
*put styling for visited links here*
}
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
post #3 of 5
I thought Hobo started playing games. Guess not, lol.
    
CPUMotherboardGraphicsRAM
i7 4790k @ 4.7GHz Asus Z97 Pro Gaming EVGA 1080 Ti FTW3 @ 2050 MHz 32GB G Skill Sniper DDR3-2133 
Hard DriveHard DriveHard DriveOptical Drive
Intel 600p m.2 512GB Crucial M500 SSD 960GB Toshiba X300 HDD 3TB LG Blu Ray Burner 
CoolingOSMonitorMonitor
Cooler Master Nepton 240m Windows 10 Pro Samsung 34" Curved Ultrawide (3440x1440) Samsung 22" Portrait (1080x1920) 
KeyboardPowerCaseMouse
Poker II Cherry MX Brown, KBParadise V80 Cherry... EVGA G2 650W Cooler Master Silencio 652s Steelseries Sensei Wireless 
Mouse PadAudioAudio
Tekmat SIG 556 SMSL Q5 Pro DAC Bowers & Wilkins DM601 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i7 4790k @ 4.7GHz Asus Z97 Pro Gaming EVGA 1080 Ti FTW3 @ 2050 MHz 32GB G Skill Sniper DDR3-2133 
Hard DriveHard DriveHard DriveOptical Drive
Intel 600p m.2 512GB Crucial M500 SSD 960GB Toshiba X300 HDD 3TB LG Blu Ray Burner 
CoolingOSMonitorMonitor
Cooler Master Nepton 240m Windows 10 Pro Samsung 34" Curved Ultrawide (3440x1440) Samsung 22" Portrait (1080x1920) 
KeyboardPowerCaseMouse
Poker II Cherry MX Brown, KBParadise V80 Cherry... EVGA G2 650W Cooler Master Silencio 652s Steelseries Sensei Wireless 
Mouse PadAudioAudio
Tekmat SIG 556 SMSL Q5 Pro DAC Bowers & Wilkins DM601 
  hide details  
Reply
post #4 of 5
Thread Starter 
Well the stylesheet was given to me by my boss.

The problem is though I can't hard code the color in the stylesheet b/c its a RoR app.

So really in my code the div looks:

<div class="link" style="<%= next_cover_link_pos(count) %> a:link {color:<%= cover.link_color %>;}" >
<%= "<a href=\\""+link.url+"\\">"+link.title+"</a>" %>
</div>
BlackMesa
(14 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II x6 Gigabyte XFX RF460 16gb G.Skill 
Hard DriveHard DriveOSMonitor
OCZ Vertex2 Sata II Coorsair Force GS Sata III Debian (testing) Shimian 27" 
KeyboardMouse
Filco w/ blue cherries Who needs a mouse? 
  hide details  
Reply
BlackMesa
(14 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II x6 Gigabyte XFX RF460 16gb G.Skill 
Hard DriveHard DriveOSMonitor
OCZ Vertex2 Sata II Coorsair Force GS Sata III Debian (testing) Shimian 27" 
KeyboardMouse
Filco w/ blue cherries Who needs a mouse? 
  hide details  
Reply
post #5 of 5
Thread Starter 
Well I got what I needed. For anyone interested:
Little ugly if you don't know Ruby on Rails.

At the top of my page I load a stylesheet that lets me set the color according to the cover object.

Code:
<% content_for 'stylesheet' do %>
<style>
    a.link_color:link {color:<%= @cover.link_color %>;}
    a.link_color:visited {color: <%= @cover.link_color %>;}
    a.link_color:hover {color:blue;}
</style>
<% end %>
and then the div is simply:

Code:
<div class="link" style="<%= next_cover_link_pos(count) %>" >
   <%= "<a class=\\"link_color\\" href=\\""+link.url+"\\">"+link.title+"</a>" %>
 </div>
BlackMesa
(14 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II x6 Gigabyte XFX RF460 16gb G.Skill 
Hard DriveHard DriveOSMonitor
OCZ Vertex2 Sata II Coorsair Force GS Sata III Debian (testing) Shimian 27" 
KeyboardMouse
Filco w/ blue cherries Who needs a mouse? 
  hide details  
Reply
BlackMesa
(14 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II x6 Gigabyte XFX RF460 16gb G.Skill 
Hard DriveHard DriveOSMonitor
OCZ Vertex2 Sata II Coorsair Force GS Sata III Debian (testing) Shimian 27" 
KeyboardMouse
Filco w/ blue cherries Who needs a mouse? 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding