Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Wow, creating a website is hard...
New Posts  All Forums:Forum Nav:

Wow, creating a website is hard... - Page 2

post #11 of 25
I would have to 2nd using Notepad first before using Dreamweaver. Not that it's not easier, it just promotes better coding practices. Instead of having a program fix it for you, or showing what the hell is wrong. It forces you to look for the mistake, which you learn more from it in my opinion.
     
CPUMotherboardGraphicsGraphics
Core i7 2600K Asus Maximus IV Extreme AMD Radeon 7970 AMD Radeon 7970 
RAMHard DriveOptical DriveCooling
16gb Gskill 1866mhz Vertex 3 240gb. 1TB Seagate 7200. 160gb WD 7200. LG 24x DVD XSPC Raystorm, MCP655, Frozen-Q Tvirus, RS360mm... 
OSMonitorKeyboardPower
Windows 7 24'' 1080p by Asus Razer Blackwidow Ultimate Corsair 1000watt HX Modular 
CaseMouseMouse PadAudio
Corsair 800D Razer Mamba Razer Ironclad Razer Megalodon's  
  hide details  
Reply
     
CPUMotherboardGraphicsGraphics
Core i7 2600K Asus Maximus IV Extreme AMD Radeon 7970 AMD Radeon 7970 
RAMHard DriveOptical DriveCooling
16gb Gskill 1866mhz Vertex 3 240gb. 1TB Seagate 7200. 160gb WD 7200. LG 24x DVD XSPC Raystorm, MCP655, Frozen-Q Tvirus, RS360mm... 
OSMonitorKeyboardPower
Windows 7 24'' 1080p by Asus Razer Blackwidow Ultimate Corsair 1000watt HX Modular 
CaseMouseMouse PadAudio
Corsair 800D Razer Mamba Razer Ironclad Razer Megalodon's  
  hide details  
Reply
post #12 of 25
Quote:
Originally Posted by xdanisx View Post
OK so then to create a CSS sheet I need to save

in notepad as a .css?
http://www.w3schools.com/css/default.asp
post #13 of 25
Quote:
Originally Posted by xdanisx View Post
OK so then to create a CSS sheet I need to save

in notepad as a .css?

Also, my html code looks like this:



Is this correct?
Yep, that's correct! Save it as a .css, and then include the stylesheet in your HTML. To do that, you have to have a <head></head> section. Just put that section right above the body section, and in between the head tags add this:

<link rel="stylesheet" type="text/css" href="path/to/.css/file" />
post #14 of 25
I used this style sheet to make a website. See the attachments and play around with it for yourself. I've redacted some stuff, but the substance of what I have done should be obvious.
4690K System
(12 items)
 
HTPC
(9 items)
 
HP dv6 laptop
(13 items)
 
CPUMotherboardGraphicsRAM
Core i5 4690K ASRock Z97 Extreme4 XFX Radeon 7950 32 GB DDR3-2133 
Hard DriveOptical DriveCoolingOS
Samsung 850 EVO SSD Samsung DVD/CD-writer Corsair Hydro H60 Windows 7 
MonitorMonitorPowerCase
ASUS PA248Q Dell U2412M XFX 850W Black Edition XXX Fractal Design Arc Midi 2 
CPUMotherboardGraphicsRAM
Pentium Dual Core E6700 MSI G41M-P33 Combo ATI HD4350 Kingston ValueRAM DDR3-1333 
RAMHard DriveOSMonitor
Kingston ValueRAM DDR3-1333 WD Caviar Blue Windows 7 64-bit Sony 32" TV set 
Case
Apex TX-381 
CPUGraphicsRAMHard Drive
Core i5 430M GT230M (1 Gb dedicated) 8 GB DDR3-1066 640 GB 
OSMonitor
Windows 7 Home Premium (64-bit) 15.6" 
  hide details  
Reply
4690K System
(12 items)
 
HTPC
(9 items)
 
HP dv6 laptop
(13 items)
 
CPUMotherboardGraphicsRAM
Core i5 4690K ASRock Z97 Extreme4 XFX Radeon 7950 32 GB DDR3-2133 
Hard DriveOptical DriveCoolingOS
Samsung 850 EVO SSD Samsung DVD/CD-writer Corsair Hydro H60 Windows 7 
MonitorMonitorPowerCase
ASUS PA248Q Dell U2412M XFX 850W Black Edition XXX Fractal Design Arc Midi 2 
CPUMotherboardGraphicsRAM
Pentium Dual Core E6700 MSI G41M-P33 Combo ATI HD4350 Kingston ValueRAM DDR3-1333 
RAMHard DriveOSMonitor
Kingston ValueRAM DDR3-1333 WD Caviar Blue Windows 7 64-bit Sony 32" TV set 
Case
Apex TX-381 
CPUGraphicsRAMHard Drive
Core i5 430M GT230M (1 Gb dedicated) 8 GB DDR3-1066 640 GB 
OSMonitor
Windows 7 Home Premium (64-bit) 15.6" 
  hide details  
Reply
post #15 of 25
Code:

<html>
<head>
<style type="text/css">
html,body {
   margin:0;
   padding:0;
   background-color: gray;
}
p {
margin:0; 
padding: 0;

</style>
</head>
<body>
<center>
<div style="background-color: black; width: 700px; height: 100%; margin-top:0;">
<h2><img border="0" src="http://farm7.static.flickr.com/6130/6044117198_f58a36736e_o.jpg" alt="Pulpit rock" width="400" height="50" /></h2>
<a href="http://www.flickr.com/photos/mattdanis/sets/72157627308056403/">
<img border="0" src="http://farm7.static.flickr.com/6068/6040044974_76d6d39b14_z.jpg" width="640" height="427" />
</a>
</center>
</div>
</body>
</html> 
You'll have to fight with firefox and css, but that should get you done
    
CPUMotherboardGraphicsGraphics
i7 2600k Gigabyte P67-UD4-B3 GTX 580 GTX 580 
RAMHard DriveOSMonitor
Who cares? Intel SSD  Windows 7 Dell u3011 
MonitorPowerCaseMouse
Dell u3011 Seasonic x1200 800D G700 
AudioAudio
Xonar STX Beyerdynamic DT 990 
  hide details  
Reply
    
CPUMotherboardGraphicsGraphics
i7 2600k Gigabyte P67-UD4-B3 GTX 580 GTX 580 
RAMHard DriveOSMonitor
Who cares? Intel SSD  Windows 7 Dell u3011 
MonitorPowerCaseMouse
Dell u3011 Seasonic x1200 800D G700 
AudioAudio
Xonar STX Beyerdynamic DT 990 
  hide details  
Reply
post #16 of 25
Oh yeah, and before that site? I'd never used a style sheet in my life. It was all just blockquotes and a couple of little divs.
4690K System
(12 items)
 
HTPC
(9 items)
 
HP dv6 laptop
(13 items)
 
CPUMotherboardGraphicsRAM
Core i5 4690K ASRock Z97 Extreme4 XFX Radeon 7950 32 GB DDR3-2133 
Hard DriveOptical DriveCoolingOS
Samsung 850 EVO SSD Samsung DVD/CD-writer Corsair Hydro H60 Windows 7 
MonitorMonitorPowerCase
ASUS PA248Q Dell U2412M XFX 850W Black Edition XXX Fractal Design Arc Midi 2 
CPUMotherboardGraphicsRAM
Pentium Dual Core E6700 MSI G41M-P33 Combo ATI HD4350 Kingston ValueRAM DDR3-1333 
RAMHard DriveOSMonitor
Kingston ValueRAM DDR3-1333 WD Caviar Blue Windows 7 64-bit Sony 32" TV set 
Case
Apex TX-381 
CPUGraphicsRAMHard Drive
Core i5 430M GT230M (1 Gb dedicated) 8 GB DDR3-1066 640 GB 
OSMonitor
Windows 7 Home Premium (64-bit) 15.6" 
  hide details  
Reply
4690K System
(12 items)
 
HTPC
(9 items)
 
HP dv6 laptop
(13 items)
 
CPUMotherboardGraphicsRAM
Core i5 4690K ASRock Z97 Extreme4 XFX Radeon 7950 32 GB DDR3-2133 
Hard DriveOptical DriveCoolingOS
Samsung 850 EVO SSD Samsung DVD/CD-writer Corsair Hydro H60 Windows 7 
MonitorMonitorPowerCase
ASUS PA248Q Dell U2412M XFX 850W Black Edition XXX Fractal Design Arc Midi 2 
CPUMotherboardGraphicsRAM
Pentium Dual Core E6700 MSI G41M-P33 Combo ATI HD4350 Kingston ValueRAM DDR3-1333 
RAMHard DriveOSMonitor
Kingston ValueRAM DDR3-1333 WD Caviar Blue Windows 7 64-bit Sony 32" TV set 
Case
Apex TX-381 
CPUGraphicsRAMHard Drive
Core i5 430M GT230M (1 Gb dedicated) 8 GB DDR3-1066 640 GB 
OSMonitor
Windows 7 Home Premium (64-bit) 15.6" 
  hide details  
Reply
post #17 of 25
Thread Starter 
Quote:
Originally Posted by crazyap7 View Post
Yep, that's correct! Save it as a .css, and then include the stylesheet in your HTML. To do that, you have to have a <head></head> section. Just put that section right above the body section, and in between the head tags add this:

<link rel="stylesheet" type="text/css" href="path/to/.css/file" />
OK, so then what did I do wrong here?

My html is now:

Quote:
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\\Users\\Matt\\Desktop\\New folder (14)\\style.css" />
</head>
<body style="background-color:0a0a0a;">
<div id="main_content">
<h2><img border="0" src="http://farm7.static.flickr.com/6130/6044117198_f58a36736e_o.jpg" alt="Pulpit rock" width="400" height="50" /></h2>
<a href="http://www.flickr.com/photos/mattdanis/sets/72157627308056403/">
<img border="0" src="http://farm7.static.flickr.com/6068/6040044974_76d6d39b14_z.jpg" width="640" height="427" />
</a>
</div>
</body>
</html>
My .css is styl.css and it is in "new folder 14" along with my html doc.
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #18 of 25
No need for a dedicated style sheet unless you are wanting to create multiple pages with the same layout. Careful though if you do that. One change the the style sheet changes everything linked to it
    
CPUMotherboardGraphicsGraphics
i7 2600k Gigabyte P67-UD4-B3 GTX 580 GTX 580 
RAMHard DriveOSMonitor
Who cares? Intel SSD  Windows 7 Dell u3011 
MonitorPowerCaseMouse
Dell u3011 Seasonic x1200 800D G700 
AudioAudio
Xonar STX Beyerdynamic DT 990 
  hide details  
Reply
    
CPUMotherboardGraphicsGraphics
i7 2600k Gigabyte P67-UD4-B3 GTX 580 GTX 580 
RAMHard DriveOSMonitor
Who cares? Intel SSD  Windows 7 Dell u3011 
MonitorPowerCaseMouse
Dell u3011 Seasonic x1200 800D G700 
AudioAudio
Xonar STX Beyerdynamic DT 990 
  hide details  
Reply
post #19 of 25
Thread Starter 
Quote:
Originally Posted by SS_Patrick View Post
Code:

<html>

<head>
<style type="text/css">
html,body {
   margin:0;
   padding:0;
   background-color: gray;
}
p {
margin:0; 
padding: 0;

</style>
</head>
<body>
<center>
<div style="background-color: black; width: 700px; height: 100%; margin-top:0;">
<h2><img border="0" src="http://farm7.static.flickr.com/6130/6044117198_f58a36736e_o.jpg" alt="Pulpit rock" width="400" height="50" /></h2>
<a href="http://www.flickr.com/photos/mattdanis/sets/72157627308056403/">
<img border="0" src="http://farm7.static.flickr.com/6068/6040044974_76d6d39b14_z.jpg" width="640" height="427" />
</a>
</center>
</div>
</body>
</html> 
You'll have to fight with firefox and css, but that should get you done
Haha, many thanks.

OK so that's it for now. I'm going to look at this code, my code, see what's different, and then finally learn pretty much everything at w3schools.com.

Thank you guys so much for all the help.
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #20 of 25
I know you said you's consider a dedicated "blog" client as option 2 but, if you want to make your life a whole lot easier download and install WordPress and activate one of their many photography templates, most are free and extremely easy to use. The end. It'll take you half hour tops. But you still need to know the basics of creating and editing HTML, CSS, and some PHP if you want to fully customize your site. I'd go that route since it will make your site look much much cleaner. It's a start. Anyway that's my two cents. Good luck man.

Here's a helpful link to show some options you'd have with WordPress: Link
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 › Wow, creating a website is hard...