Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Simple HTML Text Help Please
New Posts  All Forums:Forum Nav:

Simple HTML Text Help Please

post #1 of 5
Thread Starter 
Ok - I'm making a website like this for a final in my web design class.

1800-01-design.png

That's just an example I found on the web that looks like mine kind of.
Simple setup:
1)Background image
2)Blank or empty area/shape where information would go
3)Links

I wish I had the damn project on hand to show, but I don't right now.

The problem I'm having is that I can't get text to stay in place. In other words, lets say I put text in that white area - if I reshape the window or open on a computer with a lower resolution: The text automatically shapes and changes location. It's supposed to stay in the white box.

Example: Where it says "DESIGN: We're not going to get into how to design a website artistically blah blah blah". If I reshape my website, that text moves out of the box or otherwise becomes off centered.

Now, the project I'm doing is in Frontpage. Yes - stupid as hell. I normally do my HTML RAW but in school we're doing FP. I can edit the code directly, I don't think it matters. But this is a problem I've always had for awhile now, since the days where I used to do simple MOTD HTML pages for Counter-Strike Source servers. I'm a novice, and I just can't figure out how to get text to either stay absolute or "linked" to the shape's position on the page.

Using Frontpage, I can use a "quick fix" by creating a Text Box Area. This keeps the text from moving out of place but it's very shoddy method imo. Hell, FP on a whole is kind of a "quick fix" in and of itself from my experience with it lol

Any help: whether it's direct HTML code or even a Frontpage fix would be helpful.
Nemesis NE-α
(15 items)
 
   
CPUMotherboardGraphicsRAM
Intel Core i7 4790k (Devil's Canyon) AsRock Z97 Extreme 4 Visiontek AMD 6990 Corsair XMS3 DDR3 1600 
Hard DriveCoolingOSMonitor
Samsung EVO 840 XSPC Raystorm Windows 8.1 Dell U2311H 1920x1080 IPS 
MonitorMonitorKeyboardPower
Dell U2311H 1920x1080 IPS Dell U2311H 1920x1080 IPS Ducky Blue Overclock.net Themed Mechanical Keyb... Corsair Silver 1kw  
CaseMouseAudio
Case Labs TH10 Logitech G502 Logitech 5.1 speakers w/ Onkyo Receiver 
CPUMotherboardGraphicsRAM
Intel Xeon W3520 i7 4.0ghz EVGA X58 Classified Visiontek 6990 GSkill 6GB DDR3 Pi 
Hard DriveOptical DriveOSMonitor
2x OCZ Vertex 60GB SSD ; 2x 1TB ; 2x 2TB Samsung BluRay Burner Windows 7 Ultimate 64x 3x Dell U2311H 23" 1080p IPS 
KeyboardPowerCaseMouse
Logitech G15 Gaming Keyboard SilverStone Strider 1000w Modular Power Supply Lian Li V2000 Plus Logitech G9 Gaming Laser Mouse 
Mouse Pad
Cyba Sniper Tracer (Acrylic Glass) 
  hide details  
Reply
Nemesis NE-α
(15 items)
 
   
CPUMotherboardGraphicsRAM
Intel Core i7 4790k (Devil's Canyon) AsRock Z97 Extreme 4 Visiontek AMD 6990 Corsair XMS3 DDR3 1600 
Hard DriveCoolingOSMonitor
Samsung EVO 840 XSPC Raystorm Windows 8.1 Dell U2311H 1920x1080 IPS 
MonitorMonitorKeyboardPower
Dell U2311H 1920x1080 IPS Dell U2311H 1920x1080 IPS Ducky Blue Overclock.net Themed Mechanical Keyb... Corsair Silver 1kw  
CaseMouseAudio
Case Labs TH10 Logitech G502 Logitech 5.1 speakers w/ Onkyo Receiver 
CPUMotherboardGraphicsRAM
Intel Xeon W3520 i7 4.0ghz EVGA X58 Classified Visiontek 6990 GSkill 6GB DDR3 Pi 
Hard DriveOptical DriveOSMonitor
2x OCZ Vertex 60GB SSD ; 2x 1TB ; 2x 2TB Samsung BluRay Burner Windows 7 Ultimate 64x 3x Dell U2311H 23" 1080p IPS 
KeyboardPowerCaseMouse
Logitech G15 Gaming Keyboard SilverStone Strider 1000w Modular Power Supply Lian Li V2000 Plus Logitech G9 Gaming Laser Mouse 
Mouse Pad
Cyba Sniper Tracer (Acrylic Glass) 
  hide details  
Reply
post #2 of 5
You probably want to do something like this:


TEXT GOES HERE


This makes the text have a fixed width of 800 pixels. You could also add a fixed height if you need (ex
)
post #3 of 5
to keep stuff centered you do margin: 1337px auto in normal browsers and ie9, and you have to text-align: center the parent for ie8 and below (and then reset the text-align in the component). only for block elements iirc.
Rena
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Phenom II x6 1055T Asus M4A88TD-M/USB3 XFX 8800gt 512mb 2x2GB 1333MHz 
Hard DriveOptical DriveOSMonitor
250gb WD + 1tb WD + 2tb WD LG GSA-H55L Aptosid amd64 Samsung Syncmaster 216BW 
KeyboardPowerMouse
Genius Thermaltake TR2 W0379RU 500W Generic Microsoft Mouse 
  hide details  
Reply
Rena
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Phenom II x6 1055T Asus M4A88TD-M/USB3 XFX 8800gt 512mb 2x2GB 1333MHz 
Hard DriveOptical DriveOSMonitor
250gb WD + 1tb WD + 2tb WD LG GSA-H55L Aptosid amd64 Samsung Syncmaster 216BW 
KeyboardPowerMouse
Genius Thermaltake TR2 W0379RU 500W Generic Microsoft Mouse 
  hide details  
Reply
post #4 of 5
If the text is going outside the box, and you want it to scroll inside you can use overflow: scroll;.
Big Pimpin'
(13 items)
 
  
CPUMotherboardGraphicsRAM
Athlon 64 X2 4800+ ASUS M4A785-M 4870 X2 (Obviously bottlenecked) Mushkin 2 x 2GB DDR2 800 
Hard DrivePowerCase
OCZ Vertex 2 60GB Thermaltake 600W Ultra X-Blaster 
  hide details  
Reply
Big Pimpin'
(13 items)
 
  
CPUMotherboardGraphicsRAM
Athlon 64 X2 4800+ ASUS M4A785-M 4870 X2 (Obviously bottlenecked) Mushkin 2 x 2GB DDR2 800 
Hard DrivePowerCase
OCZ Vertex 2 60GB Thermaltake 600W Ultra X-Blaster 
  hide details  
Reply
post #5 of 5
Check to make sure that the width on the box isn't using a percent. If there is a percent width, it will resize the div and text with the browser resize. It needs to be a fixed width.
iCode
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5 2500K ASUS P8Z68 Deluxe 2X EVGA DS GTX 580 Superclocked SLI CORSAIR Vengeance 8GB (2x4GB) 
Hard DriveOptical DriveOSMonitor
OCZ Vertex 3 MAX IOPS Edition ASUS DRW Win 7 Ultimate x64 HP ZR30w 
KeyboardPowerCaseMouse
Logitech Ultra-Thin Illuminated Keyboard COOLER MASTER Silent Pro Gold Series 1000W LIAN LI PC-B25FWB Black Logitech MX518 
  hide details  
Reply
iCode
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5 2500K ASUS P8Z68 Deluxe 2X EVGA DS GTX 580 Superclocked SLI CORSAIR Vengeance 8GB (2x4GB) 
Hard DriveOptical DriveOSMonitor
OCZ Vertex 3 MAX IOPS Edition ASUS DRW Win 7 Ultimate x64 HP ZR30w 
KeyboardPowerCaseMouse
Logitech Ultra-Thin Illuminated Keyboard COOLER MASTER Silent Pro Gold Series 1000W LIAN LI PC-B25FWB Black Logitech MX518 
  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 › Simple HTML Text Help Please