• We've upgraded our forums. Please post any issues/requests in this thread.

Css & Html

Joined
Jun 30, 2008
Messages
1,135 (0.33/day)
Likes
67
Location
England
System Name Wasleys PC
Processor Intel i5 2400 3.10GHz
Motherboard Asus P8z68-V
Cooling AC Freezer Pro
Memory Kingston 4GB (2x2GB) DDR3 Hyperx Memory
Video Card(s) HIS ATi 6850 1GB DDR3
Storage Seagate ST3500320AS 500GB Hard Drive SATA II 7200rpm *32MB Cache*
Case Antec 900 with mods
Audio Device(s) On Board
Power Supply OCZ Stealth Xtream 500W
Software Windows 7
#1
Hello all,

Im a little stuck and I need some expert advice. I'm trying to create a website template, and i'm half way there. But unfortunatly, i'm stuck.

I've created and sliced the template in Adobe Photoshop but I can't work out how to position the images in Dreamweaver. Let me give you an example:

My web template had a side bar on each side. Left and right. However - I'm stuck. How do I position the images through the code without moving other images. I need to put two side bars in, a banner and a text box. I know where there meant to go, but i'm not sure how to place them there.

Could someone point me in the right direction ?
 
Joined
Mar 4, 2005
Messages
3,099 (0.66/day)
Likes
812
System Name TheReactor
Processor i7 6700k @ 4.95ghz - delid
Motherboard ASUS Maximus VIII Genie z170
Cooling EK EVO NIckle/Pump, 2xBlackIce GTX 240's
Memory 32GB G.Skill 3200Mhz Cas 14
Video Card(s) MSI GTX 980ti Gaming 6G
Storage Samsung 960 EVO 500GB
Display(s) HP ZR30W - 2560X1600
Case Corsiar 550
Audio Device(s) on board
Power Supply Antec Quattro 1000W
Mouse Logitech G502
Keyboard Corsair Gaming k70
Software Windows 10 Pro 64bit
#2
Joined
Jun 30, 2008
Messages
1,135 (0.33/day)
Likes
67
Location
England
System Name Wasleys PC
Processor Intel i5 2400 3.10GHz
Motherboard Asus P8z68-V
Cooling AC Freezer Pro
Memory Kingston 4GB (2x2GB) DDR3 Hyperx Memory
Video Card(s) HIS ATi 6850 1GB DDR3
Storage Seagate ST3500320AS 500GB Hard Drive SATA II 7200rpm *32MB Cache*
Case Antec 900 with mods
Audio Device(s) On Board
Power Supply OCZ Stealth Xtream 500W
Software Windows 7
#3
Cheers - I'll take a look later tonight.
 

W1zzard

Administrator
Staff member
Joined
May 14, 2004
Messages
17,047 (3.44/day)
Likes
17,916
Processor Core i7-4790K
Memory 16 GB
Video Card(s) GTX 1080
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 7
#4
use css style float: and/or css absolute/relative positioning. make sure you try your result on ie6,7, ff2,3 and opera. also check how it look on different screen widths
 

P4-630

The Way It's Meant to be Played
Joined
Jan 5, 2006
Messages
9,179 (2.11/day)
Likes
8,943
Location
Vinewood
System Name Sansaya / Sansaya Laptop
Processor Intel i5 6500 / Intel i3 7100U
Motherboard Asus Z170 Pro Gaming / HP 83A3 (U3E1)
Cooling Cooler Master Hyper 212 Evo + Thermal Grizzly Kryonaut + Scythe 1200rpm + 4 case fans / Fan
Memory 16GB DDR4 Corsair Vengeance LPX 3000MHz CL15 / 6GB DDR4 Samsung 2400MHz CL15
Video Card(s) MSI GTX1070 Gaming X 8GB / Intel HD620
Storage Samsung 850 Pro 512GB + Hitachi 2.5" 7200rpm 750GB / Samsung 256GB M.2 SSD
Display(s) 23.8" Dell S2417DG 165Hz G-Sync 1440p + 21.5" LG 22MP67VQ IPS 60Hz 1080p / 14" 1080p IPS Glossy
Case Be quiet! Silent Base 600 - Window / HP Pavilion
Audio Device(s) SupremeFX Onboard / Realtek onboard + B&O speaker system
Power Supply Be quiet! Straight Power 10 500 Watt CM / Powerbrick
Mouse Logitech MX Anywhere 2 Laser wireless / Logitech Nano Laser wireless
Keyboard RAPOO E9270P Black 5GHz wireless / HP backlit
Software Windows 8.1 x64 / Windows 10
Benchmark Scores Superposition 14106 (1080p medium) Fire Strike 21169 graphics score. Valley 8xAA 4218
#5
If you dont know much about css you could create a simple table instead:

Example:

Code:
<html>

<table border="1" cellpadding="0" cellspacing="0" width="800px">
<tr>
<td colspan="3" height="50px">place top image here</td>
</tr>
<tr height="300px">
<td width="100px">column left</td>
<td width="600px">center column</td>
<td width="100px">column right</td>
</tr>
<tr>
<td colspan="3" height="50px">place bottom image here</td>
</tr>
</table>

</html>
You can adjust the column sizes to your images.
To remove the table border change the table border="1" to
table border="0".
 
Joined
Jun 30, 2008
Messages
1,135 (0.33/day)
Likes
67
Location
England
System Name Wasleys PC
Processor Intel i5 2400 3.10GHz
Motherboard Asus P8z68-V
Cooling AC Freezer Pro
Memory Kingston 4GB (2x2GB) DDR3 Hyperx Memory
Video Card(s) HIS ATi 6850 1GB DDR3
Storage Seagate ST3500320AS 500GB Hard Drive SATA II 7200rpm *32MB Cache*
Case Antec 900 with mods
Audio Device(s) On Board
Power Supply OCZ Stealth Xtream 500W
Software Windows 7
#6
Thanks for your help guys.

Belows is the template im hoping to code (Perhaps a little to tricky for my first template?):
http://flux-graphics.co.uk/Gamingtemplate/

As for wizzard - What do you mean by:
''use css style float: and/or css absolute/relative positioning''

As you can tell, i'm new to all of this. I can edit basic parts of CSS but starting it from scratch is a bigger challenge.
 

P4-630

The Way It's Meant to be Played
Joined
Jan 5, 2006
Messages
9,179 (2.11/day)
Likes
8,943
Location
Vinewood
System Name Sansaya / Sansaya Laptop
Processor Intel i5 6500 / Intel i3 7100U
Motherboard Asus Z170 Pro Gaming / HP 83A3 (U3E1)
Cooling Cooler Master Hyper 212 Evo + Thermal Grizzly Kryonaut + Scythe 1200rpm + 4 case fans / Fan
Memory 16GB DDR4 Corsair Vengeance LPX 3000MHz CL15 / 6GB DDR4 Samsung 2400MHz CL15
Video Card(s) MSI GTX1070 Gaming X 8GB / Intel HD620
Storage Samsung 850 Pro 512GB + Hitachi 2.5" 7200rpm 750GB / Samsung 256GB M.2 SSD
Display(s) 23.8" Dell S2417DG 165Hz G-Sync 1440p + 21.5" LG 22MP67VQ IPS 60Hz 1080p / 14" 1080p IPS Glossy
Case Be quiet! Silent Base 600 - Window / HP Pavilion
Audio Device(s) SupremeFX Onboard / Realtek onboard + B&O speaker system
Power Supply Be quiet! Straight Power 10 500 Watt CM / Powerbrick
Mouse Logitech MX Anywhere 2 Laser wireless / Logitech Nano Laser wireless
Keyboard RAPOO E9270P Black 5GHz wireless / HP backlit
Software Windows 8.1 x64 / Windows 10
Benchmark Scores Superposition 14106 (1080p medium) Fire Strike 21169 graphics score. Valley 8xAA 4218
#7
"float:left" or "float:right" is used to align an element (CSS).

The page at http://flux-graphics.co.uk/Gamingtemplate/ is using a table to for the page lay-out.
Using tables is the most easy way to create a simple webpage lay-out.

As you can tell, i'm new to all of this. I can edit basic parts of CSS but starting it from scratch is a bigger challenge.
The challenge when using CSS is to make each page compatible for every(most popular) web browser(s).

About pages that use tables for the lay-out: All webbrowsers can display these pages correctly as it was designed.
 
Last edited:
Joined
Jun 30, 2008
Messages
1,135 (0.33/day)
Likes
67
Location
England
System Name Wasleys PC
Processor Intel i5 2400 3.10GHz
Motherboard Asus P8z68-V
Cooling AC Freezer Pro
Memory Kingston 4GB (2x2GB) DDR3 Hyperx Memory
Video Card(s) HIS ATi 6850 1GB DDR3
Storage Seagate ST3500320AS 500GB Hard Drive SATA II 7200rpm *32MB Cache*
Case Antec 900 with mods
Audio Device(s) On Board
Power Supply OCZ Stealth Xtream 500W
Software Windows 7
#8
"float:left" or "float:right" is used to align an element (CSS).

The page at http://flux-graphics.co.uk/Gamingtemplate/ is using a table to for the page lay-out.
Using tables is the most easy way to create a simple webpage lay-out.
That was just imported from Adobe Photoshop. Am I alright using that page still, even if it is just tables ? Or am i best starting from scratch, creating a page for the interface and a page for the CSS and building it from there ?

I've been asked to design a website for a company and I don't want to do a scrappy job. I can make it look professional but I need to learn how to code the thing in CSS.
 
Joined
Sep 1, 2007
Messages
316 (0.08/day)
Likes
27
Location
UK
System Name Moose 1055
Processor AMD Phenom II X6 1055T
Motherboard ASRock 990FX Extreme3
Cooling Thermaltake PW 850i Liquid Cooler and loads of Case Fans
Memory OCZ (2x2GB) + Crucial (2x4GB) = 12GB DDR3 1600MHz
Video Card(s) Powercolor R9 285
Storage Corsair BX100 250GB + 2 x Western Digital Caviar Black 750GB
Display(s) Hanns G LCD 22" + Acer LCD 22"
Case NZXT Hades Mid Tower Case
Audio Device(s) Realtek ALC892
Power Supply Antec Earthwatts 650W
Mouse Gigabyte M6900
Software Windows 10 Enterprise
#9
I use tables for aligning stuff.
 

W1zzard

Administrator
Staff member
Joined
May 14, 2004
Messages
17,047 (3.44/day)
Likes
17,916
Processor Core i7-4790K
Memory 16 GB
Video Card(s) GTX 1080
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 7
#10
use google to find answers to the keywords given to you. it's certainly the easiest and most productive way because you will learn a lot more in the process of searching
 
Joined
Jun 30, 2008
Messages
1,135 (0.33/day)
Likes
67
Location
England
System Name Wasleys PC
Processor Intel i5 2400 3.10GHz
Motherboard Asus P8z68-V
Cooling AC Freezer Pro
Memory Kingston 4GB (2x2GB) DDR3 Hyperx Memory
Video Card(s) HIS ATi 6850 1GB DDR3
Storage Seagate ST3500320AS 500GB Hard Drive SATA II 7200rpm *32MB Cache*
Case Antec 900 with mods
Audio Device(s) On Board
Power Supply OCZ Stealth Xtream 500W
Software Windows 7
#11
Okay - I'll have another shot tonight and post my result :)
 

P4-630

The Way It's Meant to be Played
Joined
Jan 5, 2006
Messages
9,179 (2.11/day)
Likes
8,943
Location
Vinewood
System Name Sansaya / Sansaya Laptop
Processor Intel i5 6500 / Intel i3 7100U
Motherboard Asus Z170 Pro Gaming / HP 83A3 (U3E1)
Cooling Cooler Master Hyper 212 Evo + Thermal Grizzly Kryonaut + Scythe 1200rpm + 4 case fans / Fan
Memory 16GB DDR4 Corsair Vengeance LPX 3000MHz CL15 / 6GB DDR4 Samsung 2400MHz CL15
Video Card(s) MSI GTX1070 Gaming X 8GB / Intel HD620
Storage Samsung 850 Pro 512GB + Hitachi 2.5" 7200rpm 750GB / Samsung 256GB M.2 SSD
Display(s) 23.8" Dell S2417DG 165Hz G-Sync 1440p + 21.5" LG 22MP67VQ IPS 60Hz 1080p / 14" 1080p IPS Glossy
Case Be quiet! Silent Base 600 - Window / HP Pavilion
Audio Device(s) SupremeFX Onboard / Realtek onboard + B&O speaker system
Power Supply Be quiet! Straight Power 10 500 Watt CM / Powerbrick
Mouse Logitech MX Anywhere 2 Laser wireless / Logitech Nano Laser wireless
Keyboard RAPOO E9270P Black 5GHz wireless / HP backlit
Software Windows 8.1 x64 / Windows 10
Benchmark Scores Superposition 14106 (1080p medium) Fire Strike 21169 graphics score. Valley 8xAA 4218
#12
Joined
Jun 30, 2008
Messages
1,135 (0.33/day)
Likes
67
Location
England
System Name Wasleys PC
Processor Intel i5 2400 3.10GHz
Motherboard Asus P8z68-V
Cooling AC Freezer Pro
Memory Kingston 4GB (2x2GB) DDR3 Hyperx Memory
Video Card(s) HIS ATi 6850 1GB DDR3
Storage Seagate ST3500320AS 500GB Hard Drive SATA II 7200rpm *32MB Cache*
Case Antec 900 with mods
Audio Device(s) On Board
Power Supply OCZ Stealth Xtream 500W
Software Windows 7
#13
Yeah - I did read about that website. It seems to me that my biggest problem is going to be having the template compatible with all browsers.

If it was my own personal site, I would'nt be to bothered, but seeing as Im designing for a business - I feel as if I should put extra effort into it.