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...

post #1 of 25
Thread Starter 
OK, so I'm in the middle of creating my photography website.

This is my html text:
Quote:
<html>
<body style="background-color:0a0a0a;">
<h2><img border="0" src="http://farm7.static.flickr.com/6130/6044117198_f58a36736e_o.jpg" alt="Pulpit rock" width="400" height="50" /></h2>
<center>
<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>
</body>
</html>
Now what I have is this:



Now I need the my webpage centered with a stylesheet (I believe that's what it's called) of this color.

So it will look like this:



Now I've tried adding a style sheet and it didn't work. How would I edit my html text to center my webpage and add a style sheet of this color I have here on both sides?

EDIT: OK, So I've got it all centered, just need to add the style sheet now.
Edited by xdanisx - 8/14/11 at 7:28pm
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 #2 of 25
I assume your using dreamweaver?
Current Rig
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel 6800k Gigabyte GA‑X99‑UD3P  Asus GTX 980ti Platinum edition 32 GB Crucial Ballistics 
Hard DriveHard DriveCoolingOS
Sandisk 512gb m.2 Western Digital reds Cooler Master 212 evo Windows 10 64bit 
Case
Fractal design define S 
  hide details  
Reply
Current Rig
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel 6800k Gigabyte GA‑X99‑UD3P  Asus GTX 980ti Platinum edition 32 GB Crucial Ballistics 
Hard DriveHard DriveCoolingOS
Sandisk 512gb m.2 Western Digital reds Cooler Master 212 evo Windows 10 64bit 
Case
Fractal design define S 
  hide details  
Reply
post #3 of 25
Since you're a newbie in web development, it's definitely O.K to learn everything on your own, but I'd a CMS such as Joomla or Wordpress, or Drupal to make your life 10000x easier.

Install a theme of your choice and then slowly learn and critique your site rather then starting from scratch.

Just my .02c.

EDIT: But to answer your question if I understood you correctly, you need to look up alignment and go from there.
     
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 #4 of 25
Thread Starter 
Quote:
Originally Posted by Kirus2012 View Post
I assume your using dreamweaver?
Well sort of. For now, I'm just just using notepad, but I do have Dreamweaver and will be using it when I get better.


Quote:
Originally Posted by Balsagna View Post
Since you're a newbie in web development, it's definitely O.K to learn everything on your own, but I'd a CMS such as Joomla or Wordpress, or Drupal to make your life 10000x easier.

Install a theme of your choice and then slowly learn and critique your site rather then starting from scratch.

Just my .02c.
Well that's really option 2 in case I can't do it from scratch.
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 #5 of 25
Quote:
Originally Posted by xdanisx View Post
Well sort of. For now, I'm just just using notepad, but I do have Dreamweaver and will be using it when I get better.
Use Notepad++ and don't bother with Dreamweaver at all.

post #6 of 25
Create a div or a table. If you use a div, use the css file and add a new element. Make the element say 400px. Center that div and then change the background of the div to black. Then change the page background to gray

Create a 3 colum, 1 row table. Set the border to 0. Change the background of the second cell to gray. Change background color to black

Divs are the "better" way to do things but tables are easier

Dreamweaver adds a lot of bloat, however with that said there is no reason you should be bashing on the guy cause he uses it. Would you be mad if I told you that I code in Microsoft Word?
    
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 #7 of 25
Basically what you want to do is wrap your main content in a div (just put <div id="main_content"> and a </div> end tag around the content. Take out the <center> tags. Now make a CSS sheet, and write:

#main_content {
width: 500px;
margin-left: auto;
margin-right: auto;
}

Play with the width as needed. Anything you put between the brackets will affect JUST whatever is in that div. You can give it a separate background color, etc.

EDIT: @SS Patrick. First, please don't encourage him to use tables. It's terrible coding practice and just way behind in terms of standards. And secondly, yes, I would be mad if you told me you code in Microsoft Word.
post #8 of 25
Quote:
Originally Posted by SS_Patrick View Post
Dreamweaver adds a lot of bloat, however with that said there is no reason you should be bashing on the guy cause he uses it. Would you be mad if I told you that I code in Microsoft Word?
Offering an opinion == bashing?

Dreamweaver and other WYSIWYG HTML editors can save you alot of time and effort in some cases, but you become too dependent on the software.

If you start by coding HTML in an editor like Notepad++, you'll be able to code HTML anywhere with pretty much any program.
post #9 of 25
Get notepad++ or GVIM. I would recommend doing everything from scratch at first. You will learn more this way. It will take longer and be more frustrating but worth it in my opinion. GVIM is a pain to learn to use, but once you do, it's fast to use. Either than that, notepad++ is great.
Liquid
(18 items)
 
  
CPUMotherboardGraphicsGraphics
3930k ASUS Rampage IV Gene EVGA GTX480 @ 900MHz @ 1.1V EVGA GTX480 @ 900MHz @ 1.1V 
RAMHard DriveOptical DriveOS
4 x 4Gb Corsair Dominator 1866MHz Samsung 830 256GB LG DVD Burner Win 7 x64 
MonitorMonitorMonitorKeyboard
DELL U3011 DELL U3011 DELL U2410 Ducy Shine 2 
PowerCaseMouseAudio
Enermax Platinum 1200W Silverstone FT03 G500 Native Instruments Komplete Audio 6 
Audio
Yamaha HS80m 
  hide details  
Reply
Liquid
(18 items)
 
  
CPUMotherboardGraphicsGraphics
3930k ASUS Rampage IV Gene EVGA GTX480 @ 900MHz @ 1.1V EVGA GTX480 @ 900MHz @ 1.1V 
RAMHard DriveOptical DriveOS
4 x 4Gb Corsair Dominator 1866MHz Samsung 830 256GB LG DVD Burner Win 7 x64 
MonitorMonitorMonitorKeyboard
DELL U3011 DELL U3011 DELL U2410 Ducy Shine 2 
PowerCaseMouseAudio
Enermax Platinum 1200W Silverstone FT03 G500 Native Instruments Komplete Audio 6 
Audio
Yamaha HS80m 
  hide details  
Reply
post #10 of 25
Thread Starter 
Quote:
Originally Posted by crazyap7 View Post
Basically what you want to do is wrap your main content in a div (just put <div id="main_content"> and a </div> end tag around the content. Take out the <center> tags. Now make a CSS sheet, and write:

#main_content {
width: 500px;
margin-left: auto;
margin-right: auto;
}

Play with the width as needed. Anything you put between the brackets will affect JUST whatever is in that div. You can give it a separate background color, etc.
OK so then to create a CSS sheet I need to save
Quote:
#main_content {
width: 500px;
margin-left: auto;
margin-right: auto;
}
in notepad as a .css?

Also, my html code looks like this:

Quote:
<html>
<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>
Is this correct?
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
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...