• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Css & Html

Joined
Jun 30, 2008
Messages
1,145 (0.20/day)
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
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,612 (0.52/day)
System Name TheReactor / HTPC
Processor AMD 7800x3d 5050Mhz / Intel 10700kf (5.1ghz All Core)
Motherboard ASrock x670e Taichi / ROG Strix z490-e gaming
Cooling HeatKiller VI CPU/GPU Block -2xBlackIce GTX 360 Radiators - Swiftech MCP655 Pump
Memory 32GB G.Skill 6000Mhz DDR5 / 32GB G.Skill 3400Mhz DDR4
Video Card(s) Nvidia 3090ti / Nvidia 2080ti
Storage Crucial T700 2TB Gen 5 / Samsung Evo 2Tb
Display(s) Acer Predator xb271hu - 2560x1440 @144hz
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
Joined
Jun 30, 2008
Messages
1,145 (0.20/day)
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
Cheers - I'll take a look later tonight.
 

W1zzard

Administrator
Staff member
Joined
May 14, 2004
Messages
26,958 (3.71/day)
Processor Ryzen 7 5700X
Memory 48 GB
Video Card(s) RTX 4080
Storage 2x HDD RAID 1, 3x M.2 NVMe
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 10 64-bit
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
 
Joined
Jan 5, 2006
Messages
17,697 (2.66/day)
System Name AlderLake / Laptop
Processor Intel i7 12700K P-Cores @ 5Ghz / Intel i3 7100U
Motherboard Gigabyte Z690 Aorus Master / HP 83A3 (U3E1)
Cooling Noctua NH-U12A 2 fans + Thermal Grizzly Kryonaut Extreme + 5 case fans / Fan
Memory 32GB DDR5 Corsair Dominator Platinum RGB 6000MHz CL36 / 8GB DDR4 HyperX CL13
Video Card(s) MSI RTX 2070 Super Gaming X Trio / Intel HD620
Storage Samsung 980 Pro 1TB + 970 Evo 500GB + 850 Pro 512GB + 860 Evo 1TB x2 / Samsung 256GB M.2 SSD
Display(s) 23.8" Dell S2417DG 165Hz G-Sync 1440p / 14" 1080p IPS Glossy
Case Be quiet! Silent Base 600 - Window / HP Pavilion
Audio Device(s) Panasonic SA-PMX94 / Realtek onboard + B&O speaker system / Harman Kardon Go + Play / Logitech G533
Power Supply Seasonic Focus Plus Gold 750W / Powerbrick
Mouse Logitech MX Anywhere 2 Laser wireless / Logitech M330 wireless
Keyboard RAPOO E9270P Black 5GHz wireless / HP backlit
Software Windows 11 / Windows 10
Benchmark Scores Cinebench R23 (Single Core) 1936 @ stock Cinebench R23 (Multi Core) 23006 @ stock
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,145 (0.20/day)
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
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.
 
Joined
Jan 5, 2006
Messages
17,697 (2.66/day)
System Name AlderLake / Laptop
Processor Intel i7 12700K P-Cores @ 5Ghz / Intel i3 7100U
Motherboard Gigabyte Z690 Aorus Master / HP 83A3 (U3E1)
Cooling Noctua NH-U12A 2 fans + Thermal Grizzly Kryonaut Extreme + 5 case fans / Fan
Memory 32GB DDR5 Corsair Dominator Platinum RGB 6000MHz CL36 / 8GB DDR4 HyperX CL13
Video Card(s) MSI RTX 2070 Super Gaming X Trio / Intel HD620
Storage Samsung 980 Pro 1TB + 970 Evo 500GB + 850 Pro 512GB + 860 Evo 1TB x2 / Samsung 256GB M.2 SSD
Display(s) 23.8" Dell S2417DG 165Hz G-Sync 1440p / 14" 1080p IPS Glossy
Case Be quiet! Silent Base 600 - Window / HP Pavilion
Audio Device(s) Panasonic SA-PMX94 / Realtek onboard + B&O speaker system / Harman Kardon Go + Play / Logitech G533
Power Supply Seasonic Focus Plus Gold 750W / Powerbrick
Mouse Logitech MX Anywhere 2 Laser wireless / Logitech M330 wireless
Keyboard RAPOO E9270P Black 5GHz wireless / HP backlit
Software Windows 11 / Windows 10
Benchmark Scores Cinebench R23 (Single Core) 1936 @ stock Cinebench R23 (Multi Core) 23006 @ stock
"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,145 (0.20/day)
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
"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
334 (0.06/day)
Location
UK
System Name Moose 5800X3D
Processor AMD Ryzen 7 5800X3D 3.4Ghz 4.5Ghz Boost 96MB L3 Cache
Motherboard Asus Prime X570-P
Cooling Custom Liquid Cooling covering CPU and GPU including liquid backplate for graphics memory cooling
Memory G.Skill Trident Z RGB 32GB (2 x 16GB) DDR4 DRAM 3600MHz CL18
Video Card(s) PNY GeForce RTX 3090 XLR8 Gaming 24GB
Storage WD Black SN770 2 TB PCIe 4.0 NVMe M.2 + Samsung 970 EVO 1TB PCIe NVMe M.2 + 2x WD Caviar Black 750GB
Display(s) AOC 34" CU34G2/BK Ultra Wide @ 3440x1440
Case Thermaltake Level 20 HT
Audio Device(s) Creative Sound Blaster Z SE
Power Supply Corsair TX850M 850W Semi Modular
Mouse Razer Viper Ultimate
Keyboard Rii K61c
Software Windows 11 Pro
I use tables for aligning stuff.
 

W1zzard

Administrator
Staff member
Joined
May 14, 2004
Messages
26,958 (3.71/day)
Processor Ryzen 7 5700X
Memory 48 GB
Video Card(s) RTX 4080
Storage 2x HDD RAID 1, 3x M.2 NVMe
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 10 64-bit
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,145 (0.20/day)
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
Okay - I'll have another shot tonight and post my result :)
 
Joined
Jan 5, 2006
Messages
17,697 (2.66/day)
System Name AlderLake / Laptop
Processor Intel i7 12700K P-Cores @ 5Ghz / Intel i3 7100U
Motherboard Gigabyte Z690 Aorus Master / HP 83A3 (U3E1)
Cooling Noctua NH-U12A 2 fans + Thermal Grizzly Kryonaut Extreme + 5 case fans / Fan
Memory 32GB DDR5 Corsair Dominator Platinum RGB 6000MHz CL36 / 8GB DDR4 HyperX CL13
Video Card(s) MSI RTX 2070 Super Gaming X Trio / Intel HD620
Storage Samsung 980 Pro 1TB + 970 Evo 500GB + 850 Pro 512GB + 860 Evo 1TB x2 / Samsung 256GB M.2 SSD
Display(s) 23.8" Dell S2417DG 165Hz G-Sync 1440p / 14" 1080p IPS Glossy
Case Be quiet! Silent Base 600 - Window / HP Pavilion
Audio Device(s) Panasonic SA-PMX94 / Realtek onboard + B&O speaker system / Harman Kardon Go + Play / Logitech G533
Power Supply Seasonic Focus Plus Gold 750W / Powerbrick
Mouse Logitech MX Anywhere 2 Laser wireless / Logitech M330 wireless
Keyboard RAPOO E9270P Black 5GHz wireless / HP backlit
Software Windows 11 / Windows 10
Benchmark Scores Cinebench R23 (Single Core) 1936 @ stock Cinebench R23 (Multi Core) 23006 @ stock
Joined
Jun 30, 2008
Messages
1,145 (0.20/day)
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
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.
 
Top