Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Multiple HTML files one CSS file - help :)
New Posts  All Forums:Forum Nav:

Multiple HTML files one CSS file - help :)

post #1 of 14
Thread Starter 
Hi,

I am having trouble with coding some pages, I want to add a table and some text but it comes up as black which I cannot see with my background ?
Edit* seems a bit messy when I put it on here, If someone is interested in helping me, I can send the html in zip folder smile.gif
Thanks smile.gif

I will put my code here.

Index:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/assignment.css" />
<title>PC HARDWARE</title>
</head>
<body>
<div class = "container">
<header>
</br>
<h1> PC Hardware </h1>
</header>

<nav> 
        <img src="./images/HDD.png" alt = "HDD" width="25" height="25" >
<a href ="./html/Internal HDD's.html">Internal HDD's</a>
        </br>
        </br>
        </br>
        <img src="./images/gfxcard.png" alt = "Graphics Card" width="25" height="25" >
<a href ="./html/Graphics cards.html">Graphics cards</a>
        </br>
        </br>
        </br>
        <img src="./images/ram.png" alt = "ram" width="25" height="25" >
<a href ="./html/RAM.html">Ram</a>
        </br>
        </br>
        </br>
                <img src="./images/Monitor.png" alt = "Monitor" width="25" height="25" >
<a href ="./html/Monitors.html">Monitors</a>
</nav>

<section>


<article id = "art1">
<img src="./images/Computer.png" alt = "Computer" width="12%" height="12%" />
Computing hardware has evolved from simple devices to aid calculation, to mechanical calculators, 
punched card data processing and then to modern stored-program computers.
</br>
Before the 20th century, most calculations were done by humans. 
Early mechanical tools to help humans with digital calculations were called "calculating machines",
</br>
by proprietary names, or even as they are now, calculators.
The machine operator was called the computer. 
 </article>
 


 <article id = "art2" >
 <img src="./images/Computer2.png" class="Computer2" alt = "Computer" width="12%" height="12%" />
Computing hardware has evolved from simple devices to aid calculation, to mechanical calculators, 
punched card data processing and then to modern stored-program computers.
</br>
Before the 20th century, most calculations were done by humans. 
Early mechanical tools to help humans with digital calculations were called "calculating machines",
</br>
by proprietary names, or even as they are now, calculators.
The machine operator was called the computer. 
 </article>
 
<p class= "first-letter">

</p> 

</section>


</div>
<!--Jordan  19/03/2014-->

</body>
</html>

Css
Code:
.container {width:80%;max-width:1260px;min-width:780px;margin:0 auto;}
header{background-color:blue;background: url(../images/Header.jpg); position:absolute;top:0px;left:0px;width:100%;height:200px;}
nav{float:left; background-color:#2E2525;position:absolute;top:200px;left:0px;width:20%;height:780px;}
section {float:left; background-color:black;position:absolute;top:200px;left:200px;width:100%;height:780px;}
p:first-letter {margin-left: 0px; color:#F00000; font-family: "Times New Roman"; font-size:100%; float:left;}
p:{color:#F00000; font-family:"Time New Roman"; font-size:100%; float:left;}
a:link {color: #009966; text-decoration: none;} 
a:visited { color: #006600; text-decoration: none;} 
a:hover {background-color: #009966; color: #FFFFFF; text-decoration: none;}
{color:#FFFFFF;font-family:geneva,arial,helvetica;font-size:200px;text-align:center;}
#art1 {position:absolute;top:400px;left:80px;color:#F00000;font-family:geneva,arial,helvetica;font-size:12px;text-align:center;}
#art2{position:absolute;top:100px;left:250px;color:#F00000;font-family:geneva,arial,helvetica;font-size:12px;text-align:center;}
h1{color: #009966; text-decoration: none; text-align:center;}
#art1:first-letter{margin-left:0px; color:#660000; font-family:"Times new Roman"; font-size:100%; float:left;}
#test1 {background: #F0FFFF; font-family: courier;}
This is the page that I want to add the paragraph of text to with a list etc.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/assignment.css" />
<title>PC HARDWARE</title>
</head>
<body>
<div class = "container">
<header><h1>Graphics Card Comparison <h1></header>

<nav> 
        <img src="../images/Home.png" alt = "HDD" width="25" height="25">
<a href ="../index.html">Home</a>
</br>
</br>
</br>
        <img src="../images/HDD.png" alt = "HDD" width="25" height="25" >
<a href ="../html/Internal HDD's.html">Internal HDD's</a>
        </br>
        </br>
        </br>
        <img src="../images/gfxcard.png" alt = "Graphics Card" width="25" height="25" >
<a href ="../html/Graphics cards.html">Graphics cards</a>
        </br>
        </br>
        </br>
        <img src="../images/ram.png" alt = "ram" width="25" height="25" >
<a href ="../html/RAM.html">Ram</a>
        </br>
        </br>
        </br>
                <img src="../images/Monitor.png" alt = "Monitor" width="25" height="25" >
<a href ="../html/Monitors.html">Monitors</a>
</nav>

<section>

<p class= "first-letter">
A 
</p> 

<p>
video card (also called a video adapter, display card, graphics card, graphics board, 
display adapter or graphics adapter and sometimes preceded by the word discrete or dedicated to emphasize the distinction between this implementation and integrated graphics)
 is an expansion card which generates a feed of output images to a display (such as a computer monitor). 
Within the industry, video cards are sometimes called graphics add-in-boards, abbreviated as AIBs, with the word "graphics" usually omitted. 
Virtually all current video cards are built with either AMD-sourced or Nvidia-sourced graphics chips.
 Most video cards offer various functions such as accelerated rendering of 3D scenes and 2D graphics, MPEG-2/MPEG-4 decoding, TV output, or the ability to connect multiple monitors (multi-monitor).
 </p>

<ol>
Top 3 highest performing graphics cards. 
<li>GTX TITAN-Z</li> 
<li>R9 290X</li> 
<li>GTX 780TI</li> 
</ol>



</section>


</div>
<!--Jordan  19/03/2014-->

</body>
</html>

Thanks for your help in advanced !
post #2 of 14
Ok here is your first error remove the colon after p. That will show up all the text in your p tags
Code:
p:{color:#F00000; font-family:"Time New Roman"; font-size:100%; float:left;}

To sort out the content in the ol tags you need to write it in the CSS file like the other stuff hope this helped a bit smile.gif
post #3 of 14
Well.. You defined black background in your CSS:
>>> section { float:left; background-color:black;position:absolute;top:200px;left:200px;width:100%;height:780px; }

And then you write things using black color.. That's why you didn't see anything..
Quote:
Originally Posted by Jordan32 View Post

Hi,
Code:
.container {width:80%;max-width:1260px;min-width:780px;margin:0 auto;}
header{background-color:blue;background: url(../images/Header.jpg); position:absolute;top:0px;left:0px;width:100%;height:200px;}
nav{float:left; background-color:#2E2525;position:absolute;top:200px;left:0px;width:20%;height:780px;}
/* --- this makes the background black  */
section {float:left; background-color:black;position:absolute;top:200px;left:200px;width:100%;height:780px;}
/* --- */
p:first-letter {margin-left: 0px; color:#F00000; font-family: "Times New Roman"; font-size:100%; float:left;}
p:{color:#F00000; font-family:"Time New Roman"; font-size:100%; float:left;}
a:link {color: #009966; text-decoration: none;} 
a:visited { color: #006600; text-decoration: none;} 
a:hover {background-color: #009966; color: #FFFFFF; text-decoration: none;}
{color:#FFFFFF;font-family:geneva,arial,helvetica;font-size:200px;text-align:center;}
#art1 {position:absolute;top:400px;left:80px;color:#F00000;font-family:geneva,arial,helvetica;font-size:12px;text-align:center;}
#art2{position:absolute;top:100px;left:250px;color:#F00000;font-family:geneva,arial,helvetica;font-size:12px;text-align:center;}
h1{color: #009966; text-decoration: none; text-align:center;}
#art1:first-letter{margin-left:0px; color:#660000; font-family:"Times new Roman"; font-size:100%; float:left;}
#test1 {background: #F0FFFF; font-family: courier;}
post #4 of 14
You need to watch the spaces in your HTML files:

bad
Code:
class= "classname"
class ="classname"
class = "classname"


good
Code:
class="classname"

edit: same with ALT and the other HTML properties.
post #5 of 14
Thread Starter 
hey there guys, I have as simple question that is bugging me, how do I make the first letter of my article big ?


CSS:
Code:
#art1:first-letter{margin-left:0px; color:#660000; font-family:"Times new Roman"; font-size:200%; float:left;}

HTML:
Code:
<article id = "art1" > 

that is how I have started it.

but I seem to get no big letter, it does work when I change it to a paragraph though.

Paragraph:
Code:
<p class= "first-letter">
Code:
p:first-letter {margin-left: 50px; color: #660000; font-family: "Times New Roman"; font-size:200%; }

really bugging me.

Thanks
post #6 of 14
Quote:
Originally Posted by Plan9 View Post

You need to watch the spaces in your HTML files:

bad
Code:
class= "classname"
class ="classname"
class = "classname"


good
Code:
class="classname"

edit: same with ALT and the other HTML properties.

Quote:
Originally Posted by Jordan32 View Post

hey there guys, I have as simple question that is bugging me, how do I make the first letter of my article big ?


CSS:
Code:
#art1:first-letter{margin-left:0px; color:#660000; font-family:"Times new Roman"; font-size:200%; float:left;}

HTML:
Code:
<article id = "art1" > 

that is how I have started it.

but I seem to get no big letter, it does work when I change it to a paragraph though.

Paragraph:
Code:
<p class= "first-letter">
Code:
p:first-letter {margin-left: 50px; color: #660000; font-family: "Times New Roman"; font-size:200%; }

really bugging me.

Thanks

Did you see the post above you? HTML Attributes (like class) are separated by spaces unless a double quote has been started.

This is valid HTML
Code:
<a class="links outlinks" href="http://overclock.net">Link</a>

This is invalid HTML
Code:
<a class ="links outlinks" href= "http://overclock.net">Link</a>

(notice the spaces?)
Some browsers might treat it differently, but stick to the standards and you have the best chance that it will work in the most common browsers.

The reason why it works is because your #art1 selector does not get applied since the browser does not see the attribute being set, since you have incorrect spacing inside your tag.
The <p> selector gets applied, but because :first-letter is a pseudo-element. The class you're trying to set in the <p> tag does not get applied either, but that doesn't matter since the CSS rule does not match it.
#well
(18 items)
 
Lenovo L530
(8 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7 4770k Gigabyte Z87X-UD4H Sapphire RX 580 2x G.Skill F3-2400C10-8GTX 
Hard DriveOptical DriveCoolingOS
Samsung 840 EVO Generic DVD±RW Burner Noctua NH-D14 Windows 10 
MonitorMonitorKeyboardPower
Dell U2711 Samsung SyncMaster 2233 Ducky DK9008 Overclock.net Edition, Cherry MX B... Corsair TX850 
CaseMouseMouse PadAudio
Fractal Design Core 2500 Logitech G303 QPAD HeatoN L M-Audio Fast Track USB 
AudioAudio
Beyerdynamic DT-770 80 Ohm AntLion ModMic v3 
CPUGraphicsRAMRAM
Intel Ivy Bridge 3210M Intel HD 4000 Graphics OEM Hard Mounted Corsair Vengeance  
Hard DriveOptical DriveOSMonitor
OCZ Vertex 3 240GB DVD-+RW Arch Linux 1600x900 TN 
  hide details  
Reply
#well
(18 items)
 
Lenovo L530
(8 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7 4770k Gigabyte Z87X-UD4H Sapphire RX 580 2x G.Skill F3-2400C10-8GTX 
Hard DriveOptical DriveCoolingOS
Samsung 840 EVO Generic DVD±RW Burner Noctua NH-D14 Windows 10 
MonitorMonitorKeyboardPower
Dell U2711 Samsung SyncMaster 2233 Ducky DK9008 Overclock.net Edition, Cherry MX B... Corsair TX850 
CaseMouseMouse PadAudio
Fractal Design Core 2500 Logitech G303 QPAD HeatoN L M-Audio Fast Track USB 
AudioAudio
Beyerdynamic DT-770 80 Ohm AntLion ModMic v3 
CPUGraphicsRAMRAM
Intel Ivy Bridge 3210M Intel HD 4000 Graphics OEM Hard Mounted Corsair Vengeance  
Hard DriveOptical DriveOSMonitor
OCZ Vertex 3 240GB DVD-+RW Arch Linux 1600x900 TN 
  hide details  
Reply
post #7 of 14
Last I checked it was also considered to be poor practice to use percentage based sizes for fonts; but that was many years ago when CSS2 was the standard and HTML4.1 had just hit the street.
    
CPUMotherboardGraphicsRAM
Core i7 920 D0 4.2ghz HT (1.3625v) Asus R3E 2xGTX 460 (non SLi, no overclock) 6x2gb G.skill @ 6-8-6-24-1T 
Hard DriveOptical DriveOSMonitor
WD-VR 300GBx1, 2xWD 1tb,2x60gb Agility Some crappy combo burner... Arch x64 3xDell U2410f rev A02 
KeyboardPowerCaseMouse
X-Armor U9BL TT Toughpower 1200w (NTB more efficient) Mountain Mods Pinnacle 24 CYO Roccat Kone (R.I.P. A4Tech x7) 
Mouse Pad
Steelpad Experience I-1 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Core i7 920 D0 4.2ghz HT (1.3625v) Asus R3E 2xGTX 460 (non SLi, no overclock) 6x2gb G.skill @ 6-8-6-24-1T 
Hard DriveOptical DriveOSMonitor
WD-VR 300GBx1, 2xWD 1tb,2x60gb Agility Some crappy combo burner... Arch x64 3xDell U2410f rev A02 
KeyboardPowerCaseMouse
X-Armor U9BL TT Toughpower 1200w (NTB more efficient) Mountain Mods Pinnacle 24 CYO Roccat Kone (R.I.P. A4Tech x7) 
Mouse Pad
Steelpad Experience I-1 
  hide details  
Reply
post #8 of 14
further to the above:
Code:
p:first-letter {margin-left: 50px; color: #660000; font-family: "Times New Roman"; font-size:200%; }
I believe (and please someone step in if I'm wrong here) that p and :first-letter needs a space between them
post #9 of 14
Lately, this site might be of use to you:
http://validator.w3.org/
post #10 of 14
Quote:
Originally Posted by Xaero252 View Post

Last I checked it was also considered to be poor practice to use percentage based sizes for fonts; but that was many years ago when CSS2 was the standard and HTML4.1 had just hit the street.

Agreed. Using em is recommended - not px. While it may work to use percentage, it's not exactly standards-compliant so you may run into undefined behavior.
Quote:
Originally Posted by Plan9 View Post

further to the above:
Code:
p:first-letter {margin-left: 50px; color: #660000; font-family: "Times New Roman"; font-size:200%; }
I believe (and please someone step in if I'm wrong here) that p and :first-letter needs a space between them

It doesn't need it.
Edited by gonX - 4/4/14 at 2:50am
#well
(18 items)
 
Lenovo L530
(8 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7 4770k Gigabyte Z87X-UD4H Sapphire RX 580 2x G.Skill F3-2400C10-8GTX 
Hard DriveOptical DriveCoolingOS
Samsung 840 EVO Generic DVD±RW Burner Noctua NH-D14 Windows 10 
MonitorMonitorKeyboardPower
Dell U2711 Samsung SyncMaster 2233 Ducky DK9008 Overclock.net Edition, Cherry MX B... Corsair TX850 
CaseMouseMouse PadAudio
Fractal Design Core 2500 Logitech G303 QPAD HeatoN L M-Audio Fast Track USB 
AudioAudio
Beyerdynamic DT-770 80 Ohm AntLion ModMic v3 
CPUGraphicsRAMRAM
Intel Ivy Bridge 3210M Intel HD 4000 Graphics OEM Hard Mounted Corsair Vengeance  
Hard DriveOptical DriveOSMonitor
OCZ Vertex 3 240GB DVD-+RW Arch Linux 1600x900 TN 
  hide details  
Reply
#well
(18 items)
 
Lenovo L530
(8 items)
 
 
CPUMotherboardGraphicsRAM
Intel Core i7 4770k Gigabyte Z87X-UD4H Sapphire RX 580 2x G.Skill F3-2400C10-8GTX 
Hard DriveOptical DriveCoolingOS
Samsung 840 EVO Generic DVD±RW Burner Noctua NH-D14 Windows 10 
MonitorMonitorKeyboardPower
Dell U2711 Samsung SyncMaster 2233 Ducky DK9008 Overclock.net Edition, Cherry MX B... Corsair TX850 
CaseMouseMouse PadAudio
Fractal Design Core 2500 Logitech G303 QPAD HeatoN L M-Audio Fast Track USB 
AudioAudio
Beyerdynamic DT-770 80 Ohm AntLion ModMic v3 
CPUGraphicsRAMRAM
Intel Ivy Bridge 3210M Intel HD 4000 Graphics OEM Hard Mounted Corsair Vengeance  
Hard DriveOptical DriveOSMonitor
OCZ Vertex 3 240GB DVD-+RW Arch Linux 1600x900 TN 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Multiple HTML files one CSS file - help :)