New Posts  All Forums:Forum Nav:

Easy HTML help.

post #1 of 6
Thread Starter 
Html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
    <title>My training page </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>

    <div id="top">
              <div id="toptext"><font color="green">Home</font>&nbsp About us / Contact us</div> 
                       <form id="searchbox" action="" name="search" method="POST"><input id="textinput" align="right" type="text"/><input id="submit" type="submit"> </form>
    </div>
    <div id="title">
        <h1>Hello.</h1>
    </div>

  </body>
</html>
CSS:

Code:
body { 
    background-color: #ffffff;
    margin:0;
    padding:0;
}

#top {
    margin-left: 25%;
    background-color: #000;
    width: 50%;
    height: 4%;
}

#toptext {
    color: greenyellow;
    font-size: 18px;
    float:left;
    margin-top: 0.5%;
    font-family:fantasy;
}

#searchbox {
    float: right;
    margin-top: 0.5%;
}

#title {
    margin-left: 25%;
    background-color: #000;
    width: 50%;
    float: left;
}
Problem is, the two black blocks doesn't want go together. I plan to recolour second block later. So I want it to be together.
The golden rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel 6600K @ 4.7 GHz ASUS Z170 Pro Gaming AMD Sapphire Fury Nitro Crucial Ballistix Sport 8GB DDR4 
Hard DriveHard DriveCoolingCooling
Samsung 840 Series 120GB Solid State Drive  6TB Western Digital Blue Corsair H105 Hydro Series Antec 120mm Tricool fan (pinched from Antec 300... 
OSMonitorKeyboardPower
Windows 10 ViewSonic 23" IPS 2 ms monitor (VX2363SMHL-W) M... Ducky Shine 5 750 W StealthXStream (pinched from 2009 AMD rig) 
CaseMouse
Inwin 303 (White) Generic mouse 
  hide details  
Reply
The golden rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel 6600K @ 4.7 GHz ASUS Z170 Pro Gaming AMD Sapphire Fury Nitro Crucial Ballistix Sport 8GB DDR4 
Hard DriveHard DriveCoolingCooling
Samsung 840 Series 120GB Solid State Drive  6TB Western Digital Blue Corsair H105 Hydro Series Antec 120mm Tricool fan (pinched from Antec 300... 
OSMonitorKeyboardPower
Windows 10 ViewSonic 23" IPS 2 ms monitor (VX2363SMHL-W) M... Ducky Shine 5 750 W StealthXStream (pinched from 2009 AMD rig) 
CaseMouse
Inwin 303 (White) Generic mouse 
  hide details  
Reply
post #2 of 6
1st before i even help you, rewrite your code, it looks like crap

EDIT:
(that may be your problem, too)
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #3 of 6
Thread Starter 
Quote:
Originally Posted by graphicsman View Post
1st before i even help you, rewrite your code, it looks like crap

EDIT:
(that may be your problem, too)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>
   <head>
       <link rel="stylesheet" type="text/css" href="style.css" />     
<title>My training page </title>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   

</head>
   <body>
     <div id="top">
               <div id="toptext"><font color="green">Home</font>&nbsp About us / Contact us</div>
                <form id="searchbox" action="" name="search" method="POST">
                   <input id="textinput" align="right" type="text"/><input id="submit" type="submit">
               </form>
     </div>
     <div id="title">
         <h1>Hello.</h1>
     </div>
   </body>
 </html>
Better?
The golden rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel 6600K @ 4.7 GHz ASUS Z170 Pro Gaming AMD Sapphire Fury Nitro Crucial Ballistix Sport 8GB DDR4 
Hard DriveHard DriveCoolingCooling
Samsung 840 Series 120GB Solid State Drive  6TB Western Digital Blue Corsair H105 Hydro Series Antec 120mm Tricool fan (pinched from Antec 300... 
OSMonitorKeyboardPower
Windows 10 ViewSonic 23" IPS 2 ms monitor (VX2363SMHL-W) M... Ducky Shine 5 750 W StealthXStream (pinched from 2009 AMD rig) 
CaseMouse
Inwin 303 (White) Generic mouse 
  hide details  
Reply
The golden rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel 6600K @ 4.7 GHz ASUS Z170 Pro Gaming AMD Sapphire Fury Nitro Crucial Ballistix Sport 8GB DDR4 
Hard DriveHard DriveCoolingCooling
Samsung 840 Series 120GB Solid State Drive  6TB Western Digital Blue Corsair H105 Hydro Series Antec 120mm Tricool fan (pinched from Antec 300... 
OSMonitorKeyboardPower
Windows 10 ViewSonic 23" IPS 2 ms monitor (VX2363SMHL-W) M... Ducky Shine 5 750 W StealthXStream (pinched from 2009 AMD rig) 
CaseMouse
Inwin 303 (White) Generic mouse 
  hide details  
Reply
post #4 of 6
#top {
margin-left: 25%;
background-color: #000;
width: 50%;
height: 4%;
}

Height's not tall enough. Your form is creating a 16px margin below the search box, which is separating the two divs. Height: 45px; connects the two for me.

Edit: See below
Edited by Xyxyll - 2/23/11 at 12:35pm
Gaming Monster
(21 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-3930k ASUS Rampage IV Extreme EVGA GTX Titan SC 8GB G.SKILL Ripjaws X CL8 1600MHz 
Hard DriveHard DriveHard DriveHard Drive
256GB Samsung 840 Pro 128GB Crucial C300 SSD 60GB OCZ Vertex 3 SSD 1TB Samsung F3 
Hard DriveCoolingOSMonitor
6TB External RAID 0 EK Block, XSPC 3x120mm Radiator Windows 8 64-bit 34" LG 34UC87C-B 21:9 IPS LED Monitor 
MonitorKeyboardPowerCase
27" ASUS VG278H Filco Majestouch Tenkeyless Corsair AX750 Cooler Master HAF 932 
MouseMouse PadAudioAudio
Steelseries Sensei Steelseries 9HD Audio Technica ATH-AD700 Samson C01U Condenser Microphone 
  hide details  
Reply
Gaming Monster
(21 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-3930k ASUS Rampage IV Extreme EVGA GTX Titan SC 8GB G.SKILL Ripjaws X CL8 1600MHz 
Hard DriveHard DriveHard DriveHard Drive
256GB Samsung 840 Pro 128GB Crucial C300 SSD 60GB OCZ Vertex 3 SSD 1TB Samsung F3 
Hard DriveCoolingOSMonitor
6TB External RAID 0 EK Block, XSPC 3x120mm Radiator Windows 8 64-bit 34" LG 34UC87C-B 21:9 IPS LED Monitor 
MonitorKeyboardPowerCase
27" ASUS VG278H Filco Majestouch Tenkeyless Corsair AX750 Cooler Master HAF 932 
MouseMouse PadAudioAudio
Steelseries Sensei Steelseries 9HD Audio Technica ATH-AD700 Samson C01U Condenser Microphone 
  hide details  
Reply
post #5 of 6
I wasn't quite sure WHY you were getting the margin-bottom, so I found this article. The margin is added by the browser by default unless the margin is otherwise set in CSS.

Change
#searchbox {
float: right;
margin-top: 0.5%; to margin: 0.5% 0 0;
}

You also still need to raise the height of your #top tag. You're using % yet your content uses px, so I would recommend setting your height in terms of pixels. At least 29px connects your blocks. To avoid separating the blocks when you zoom out, you should really incorporate a wrapper div tag with the #top background color. That way no matter what zoom level the page is, you'll still have connected divs.
Gaming Monster
(21 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-3930k ASUS Rampage IV Extreme EVGA GTX Titan SC 8GB G.SKILL Ripjaws X CL8 1600MHz 
Hard DriveHard DriveHard DriveHard Drive
256GB Samsung 840 Pro 128GB Crucial C300 SSD 60GB OCZ Vertex 3 SSD 1TB Samsung F3 
Hard DriveCoolingOSMonitor
6TB External RAID 0 EK Block, XSPC 3x120mm Radiator Windows 8 64-bit 34" LG 34UC87C-B 21:9 IPS LED Monitor 
MonitorKeyboardPowerCase
27" ASUS VG278H Filco Majestouch Tenkeyless Corsair AX750 Cooler Master HAF 932 
MouseMouse PadAudioAudio
Steelseries Sensei Steelseries 9HD Audio Technica ATH-AD700 Samson C01U Condenser Microphone 
  hide details  
Reply
Gaming Monster
(21 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-3930k ASUS Rampage IV Extreme EVGA GTX Titan SC 8GB G.SKILL Ripjaws X CL8 1600MHz 
Hard DriveHard DriveHard DriveHard Drive
256GB Samsung 840 Pro 128GB Crucial C300 SSD 60GB OCZ Vertex 3 SSD 1TB Samsung F3 
Hard DriveCoolingOSMonitor
6TB External RAID 0 EK Block, XSPC 3x120mm Radiator Windows 8 64-bit 34" LG 34UC87C-B 21:9 IPS LED Monitor 
MonitorKeyboardPowerCase
27" ASUS VG278H Filco Majestouch Tenkeyless Corsair AX750 Cooler Master HAF 932 
MouseMouse PadAudioAudio
Steelseries Sensei Steelseries 9HD Audio Technica ATH-AD700 Samson C01U Condenser Microphone 
  hide details  
Reply
post #6 of 6
Updated code with wrapper tag. Notice the header is now flexible depending on the height of your header.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>
   <head>
       <link rel="stylesheet" type="text/css" href="style.css" />     
<title>My training page </title>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   

</head>
   <body>
   <div id="wrapper">
     <div id="top">
               <div id="toptext"><font color="green">Home</font>&nbsp About us / Contact us</div>
                <form id="searchbox" action="" name="search" method="POST">
                   <input id="textinput" align="right" type="text"/><input id="submit" type="submit">
               </form>
     </div>
     <div id="title">
         <h1>Hello.</h1>
     </div>
 </div>
   </body>
 </html>
Code:
body { 
    margin:0;
    padding:0;
}

#top {
    background-color: #000;
}

#toptext {
    color: greenyellow;
    font-size: 18px;
    float:left;
    margin-top: 0.5%;
    font-family:fantasy;
}

#searchbox {
    float: right;
    margin: 0.5% 0 0;
}

#title {
    background-color: #000;
clear: both;
}

#wrapper {
margin: 0 auto;
background-color: #000;
width:50%;
}
Gaming Monster
(21 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-3930k ASUS Rampage IV Extreme EVGA GTX Titan SC 8GB G.SKILL Ripjaws X CL8 1600MHz 
Hard DriveHard DriveHard DriveHard Drive
256GB Samsung 840 Pro 128GB Crucial C300 SSD 60GB OCZ Vertex 3 SSD 1TB Samsung F3 
Hard DriveCoolingOSMonitor
6TB External RAID 0 EK Block, XSPC 3x120mm Radiator Windows 8 64-bit 34" LG 34UC87C-B 21:9 IPS LED Monitor 
MonitorKeyboardPowerCase
27" ASUS VG278H Filco Majestouch Tenkeyless Corsair AX750 Cooler Master HAF 932 
MouseMouse PadAudioAudio
Steelseries Sensei Steelseries 9HD Audio Technica ATH-AD700 Samson C01U Condenser Microphone 
  hide details  
Reply
Gaming Monster
(21 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-3930k ASUS Rampage IV Extreme EVGA GTX Titan SC 8GB G.SKILL Ripjaws X CL8 1600MHz 
Hard DriveHard DriveHard DriveHard Drive
256GB Samsung 840 Pro 128GB Crucial C300 SSD 60GB OCZ Vertex 3 SSD 1TB Samsung F3 
Hard DriveCoolingOSMonitor
6TB External RAID 0 EK Block, XSPC 3x120mm Radiator Windows 8 64-bit 34" LG 34UC87C-B 21:9 IPS LED Monitor 
MonitorKeyboardPowerCase
27" ASUS VG278H Filco Majestouch Tenkeyless Corsair AX750 Cooler Master HAF 932 
MouseMouse PadAudioAudio
Steelseries Sensei Steelseries 9HD Audio Technica ATH-AD700 Samson C01U Condenser Microphone 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding