Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML question about moving div tables
New Posts  All Forums:Forum Nav:

HTML question about moving div tables

post #1 of 8
Thread Starter 
I have too get this nav. bar moved, I so was not hired for web design sorry if this is a noobish question

I am using Notepad++
I believe the DIV codes are setting it up, someone else designed this site, I am just trying too fix it...
Code:
<div class="glossymenu">
<div class="menuitem" style="color: #FFFF00; font-size: 14px; padding-left: 30px">POOLS</div><a class="menuitem" href="algatec.html">Algatec®</a><a class="menuitem" href="beautec.html">Beautec®</a><a class="menuitem" href="pooltec.html">Pooltec Summer®</a><a class="menuitem" href="pooltec_winter.html">Pooltec Winter®</a><a class="menuitem" href="scaletecplus.html">Scaletec Plus®</a><a class="menuitem" href="startuptec.html">Startup-Tec®</a>
<div class="menuitem" style="color: #FFFF00; font-size: 14px; padding-left: 30px">SPAS</div><a class="menuitem" href="spatec.html">Spatec®</a><a class="menuitem" href="beautec.html">Beautec®</a>
<div class="menuitem" style="color: #FFFF00; font-size: 14px; padding-left: 20px">FOUNTAINS</div><a class="menuitem" href="fountec.html">Fountec®</a><a class="menuitem" href="protec.html">Protec®</a></div><!--End Menu--></div><!--End content_left-->
<div id="benefits_algatec">

I have this Picture as an example of where I am trying to get the navbar too go.
Code:
http://imageshack.us/f/835/exampleq.jpg/

I hope someone out there knows this because I have been reading HTML books and watching youtube but nothing seems to cover this all of its very time consuming as well and I need something to show for my time on this project soo thanks to anyone that can help and +rep all around cheers.gif
Viperware x 2
(14 items)
 
   
CPUMotherboardGraphicsRAM
i7 4770 Asus SaberTooth Mark S EVGA GTX 980 SC Corsair Vengeance DDR3 8GBs 
Optical DriveOSMonitorMonitor
LG Optical drive Windows 8.1 Dell u2414h Dell u2414h 
KeyboardPowerCaseMouse
corsair k70 EVGA 1000 G2 corsair 750D Corsair M65 
Mouse PadAudio
steel series game pad LG sound bar 
CPUMotherboardGraphicsRAM
Q6600 Go @ 3.8GHz Rocksolid ASUS P5E eVGA GTX 285 4 Gb Corsair XMS2 
Hard DriveOptical DriveOSMonitor
750 GB Hiatachi 7200 RPM 32MB cache Drive.. Win7 Ultx64/Ubuntu 10.04 Samsumg 26'' 
PowerCaseMouse
PC Power and cooling 750 watt Cooler Master Cosmos S Kone 
  hide details  
Reply
Viperware x 2
(14 items)
 
   
CPUMotherboardGraphicsRAM
i7 4770 Asus SaberTooth Mark S EVGA GTX 980 SC Corsair Vengeance DDR3 8GBs 
Optical DriveOSMonitorMonitor
LG Optical drive Windows 8.1 Dell u2414h Dell u2414h 
KeyboardPowerCaseMouse
corsair k70 EVGA 1000 G2 corsair 750D Corsair M65 
Mouse PadAudio
steel series game pad LG sound bar 
CPUMotherboardGraphicsRAM
Q6600 Go @ 3.8GHz Rocksolid ASUS P5E eVGA GTX 285 4 Gb Corsair XMS2 
Hard DriveOptical DriveOSMonitor
750 GB Hiatachi 7200 RPM 32MB cache Drive.. Win7 Ultx64/Ubuntu 10.04 Samsumg 26'' 
PowerCaseMouse
PC Power and cooling 750 watt Cooler Master Cosmos S Kone 
  hide details  
Reply
post #2 of 8
You need to be looking in the CSS (cascading style sheet) See in the first div, class="glossymenu" somewhere on that site it will either link to a .css file (in the section at top of page) or at the top of the code it will list out the style.

If the css is linked externally, then it will have it's own file, something like styles.css for example, which you can open and edit.

So find the css named glossymenu, and it should have the positioning in place, which you can then change. You might also look through the other classes, if they need to be edited.

The other option is to actually put that div somewhere else on the page, which may have to be done in conjunction with editing the css anyways.
post #3 of 8
Thread Starter 
I am guessing you mean this part
Code:
[B]<link href="css/styles_test.css[/B]" rel="stylesheet" type="text/css" />
<script type="text/javascript">


</script>
Heres the part about the glossmenu
Code:
.glossymenu{

margin: 10px 0 0 10px;

padding: 0;

width: 130px; 

border: 1px solid #9A9A9A;

border-bottom-width: 0;

float:left;

}



.glossymenu a.menuitem, .menuitem{

background: #0099FF url(../images/glossyback.gif) repeat-x bottom left;

font: bold 12px Verdana, Geneva, sans-serif;

color: white;

display: block;

position: relative;

width: auto;

padding: 6px 0;

padding-left: 10px;

text-decoration: none;

}



.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{

color: white;

}



.glossymenu a.menuitem .statusicon{

position: absolute;

top: 5px;

right: 5px;

border: none;

}



.glossymenu a.menuitem:hover{

background-image: url(../images/glossyback2.gif);

}



.glossymenu div.submenu{

background: white;

}



.glossymenu div.submenu ul{ 

list-style-type: none;

margin: 0;

padding: 0;

}



.glossymenu div.submenu ul li{

border-bottom: 1px solid blue;

}



.glossymenu div.submenu ul li a{

display: block;

font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;

color: black;

text-decoration: none;

padding: 2px 0;

padding-left: 10px;

}



.glossymenu div.submenu ul li a:hover{

background: #C8E3FF;

color: white;

}




#menu {

width: 130px;
border-style: solid solid none solid;
border-color: #0e69be;
border: 1px solid;
border-width: 1px;
margin-left:10px;
margin-top:10px;

}



#menu ul{

list-style:none;

margin:0px;

padding:0px;

}

#menu li a {

font: bold 12px Verdana, Geneva, sans-serif;

text-decoration: none;

}





#menu li a:link, #menu li a:visited {
color:#ffffff;
display: block;

background: #0099FF url(../images/glossyback.gif) repeat-x bottom left;

padding: 6px 0 6px 10px;

}


.menu_cat {

color: #ffffff;

display: block;

background: #0099FF url(../images/glossyback.gif) repeat-x bottom left;

padding: 6px 0 6px 10px;

}



#menu li a:hover {

color: #ffffff;

background-image: url(../images/glossyback2.gif);
    padding: 6px 0 6px 10px;

}



#menu li a:active {

color: #ffffff;

background: url(../images/glossyback2.gif);
    padding: 8px 0 0 10px;

} 


#beautec_header{

height:350px;

background-image:url(../images/beautec_header.jpg);

background-repeat:no-repeat;

}

I really don't know CSS heres the full code for it I would guess I just need to change the X,Y values
Code:
/* CSS Document */



body{

background-color: #00A4E3;

background-image:url(../images/splash_tile_bg.jpg);

background-repeat:repeat-x;

margin:0;

}

#pagecell{

width:1024px;
margin: 0 auto;
background-color:#FFF;
border:6px solid #FFD758;
overflow:auto;
}

ul,li {

list-style-type: none; /* to minimize problems */

margin: 0;

padding:0;
line-height: 30px; /* extra space */


}

#docs ul{

font-size:12px;

text-align:center;

}



ul#pdf{
 font-family:Arial, Helvetica, sans-serif;
line-height:140px;
}

#pdf li{


text-align:left;

font-family:"Myriad Pro";

font-size: 16px;

font-weight: normal;
line-height:20px;
padding-bottom:10px;

}



#pdf a:link{

text-decoration:none;

}

#pdf a:visited{
text-decoration:none;
}



#pdf a:hover{

color:#990033;

}



#docs{

margin-right:0px;

margin-top:20px;

float:right;

width:280px;

display:inline;

/*border:1px solid #000000;

*/font-family:"Myriad Pro";

font-size: 16px;

font-weight: normal;

padding:10px 10px 10px 0px;

}


#features_bullets { 

margin-top: 30px;

padding-right:20px;

width: 250px;

font-weight:bold;

padding-left: 1.5em;

text-indent: -1.3em;

line-height:15px;

float:right;

list-style-type:disc;

list-style-position:inside;

font-family:"Myriad Pro";

font-size:14px;

}

#benefits_bullets {

margin-top: 30px;

margin-right:20px;

width: 250px;

font-weight:bold;

padding-left: 1.5em;

text-indent: -1.3em;

line-height:15px;

float:right;

list-style-type:disc;

list-style-position:inside;

font-family:"Myriad Pro";

font-size:14px;

}

#features_bullets li{

list-style-type:disc;

list-style-position:inside;

line-height:20px;

padding-bottom:10px;

}





#benefits_bullets li{

list-style-type:disc;

list-style-position:inside;

line-height:20px;

padding-bottom:10px;

}





#content_left{

float:left;

width:475px;

height:auto;



}




#algatec_header{

height:350px;

background-image:url(../images/algatec_header.jpg);

background-repeat:no-repeat;

}



#algatec_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding:0;

color:#006875;

text-align:center;

}



#algatec2_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding-left:40px;

color:#006875;

}

#content #para_algatec{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;

width:300px;
height:200px;

float:right;

margin-left:0px;

margin-top:0;

padding-left:0px;

}




#feature_lower{

width:160px;

float:left;

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

margin-top:380px;

margin-left:65px;

color: #FF0000;



}



#algatec_h4{

color:#006875;

}



#benefits_algatec{

width:500px;

height:600px;

background-image:url(../images/algatec_benefits2.jpg);

background-repeat:no-repeat;

padding:0px 30px 0px 0px;

float:right;

}





#para_algatec{

width:430px;

float:left;

margin-left:0px;

margin-top:0;

padding-left:0px;

}


#scaletec_header{

height:350px;

background-image:url(../images/scaletec_header.jpg);

background-repeat:no-repeat;

}



#scaletec_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding:0;

color:#990033;

text-align:center;

}

#benefits_scaletec{

width:500px;

height:600px;

background-image:url(../images/scaletec_benefits.jpg);

background-repeat:no-repeat;

padding:0px 30px 0px 0px;

float:right;

}

#scaletec2_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding-left:40px;

color:#990033;

}


#pooltec_header{

height:350px;

background-image:url(../images/pooltec_header.jpg);

background-repeat:no-repeat;

}



#pooltec_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding:0;

color:#273e92;

text-align:center;

}



#pooltec2_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding-left:40px;

color:#273e92;

}

#benefits_pooltec{

width:500px;

height:600px;

background-image:url(../images/pooltec_benefits.jpg);

background-repeat:no-repeat;

padding:0px 30px 0px 0px;

float:right;

}

#pooltec_winter_header{

height:350px;

background-image:url(../images/pooltec_winter_header.jpg);

background-repeat:no-repeat;

}


#benefits_pooltec_winter{

width:500px;

height:600px;

background-image:url(../images/pooltec_benefits_winter.jpg);

background-repeat:no-repeat;

padding:0px 30px 0px 0px;

float:right;

}

/*Fountec CSS Start*/



#fountec_header{

height:350px;

background-image:url(../images/fountec_header.jpg);

background-repeat:no-repeat;

}



#fountec_h3{

margin:0;

padding:0;

color: #1E78AE;

}



#fountec_h4{

color:#1E78AE;

}



#benefits_fountec{

width:500px;

height:455px;

background-image:url(../images/fountec_bottle_64oz.jpg);

background-repeat:no-repeat;

padding:0px 0px 0px 0px;

float:right;

}



/*Fountec CSS End*/

/*Protec CSS Start*/



#protec_header{

height:350px;

background-image:url(../images/protec_header.jpg);

background-repeat:no-repeat;

}



#protec_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding-left:40px;

color:#009966;


}



#protec_h4{

color:#009966;

}



#benefits_protec{

width:500px;

height:455px;

background-image:url(../images/protec_bottle.jpg);

background-repeat:no-repeat;

padding:0px 0px 0px 0px;

float:right;

}



/*Protec CSS End*/

#navcell{

width:1024px;

height:30px;

margin-left:175px;
}



#navcontainer{

width:1024px;

background:#0099FF url(../images/glossyback.gif) repeat-x scroll left bottom;

height:30px;



}



#navcontainer li

{

height:30px;

padding-left: 0;

margin-left:0px;

color: White;

width: 600px;

font-family: arial, helvetica, sans-serif;

}



#navcontainer li { display: inline;

 }



#navcontainer li a

{

padding: 0px 10px 5px 20px;

background:#0099FF url(../images/glossyback.gif) repeat-x scroll left bottom;

color: White;

text-decoration: none;

float: left;

height:25px;

}



#navcontainer  li a:hover

{

background-color: #369;

color: #0000FF;

}









#content{

width:1005px;

height:900px;
}




#benefits_about{

width:700px;

height:auto;

padding:20px 20px 0px 60px;

float:left;

}



#content_about{

background-color:#FFFFFF;

height:900px;

border-left:2px solid #ffd758;

border-right:2px solid #ffd758;

border-bottom:2px solid #ffd758;

font-family: "Myriad Pro";}





.outer{

list-style:none;

margin:0px;

padding:0px;

}

.glossymenu{

margin: 10px 0 0 10px;

padding: 0;

width: 130px; 

border: 1px solid #9A9A9A;

border-bottom-width: 0;

float:left;

}



.glossymenu a.menuitem, .menuitem{

background: #0099FF url(../images/glossyback.gif) repeat-x bottom left;

font: bold 12px Verdana, Geneva, sans-serif;

color: white;

display: block;

position: relative;

width: auto;

padding: 6px 0;

padding-left: 10px;

text-decoration: none;

}



.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{

color: white;

}



.glossymenu a.menuitem .statusicon{

position: absolute;

top: 5px;

right: 5px;

border: none;

}



.glossymenu a.menuitem:hover{

background-image: url(../images/glossyback2.gif);

}



.glossymenu div.submenu{

background: white;

}



.glossymenu div.submenu ul{ 

list-style-type: none;

margin: 0;

padding: 0;

}



.glossymenu div.submenu ul li{

border-bottom: 1px solid blue;

}



.glossymenu div.submenu ul li a{

display: block;

font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;

color: black;

text-decoration: none;

padding: 2px 0;

padding-left: 10px;

}



.glossymenu div.submenu ul li a:hover{

background: #C8E3FF;

color: white;

}




#menu {

width: 130px;
border-style: solid solid none solid;
border-color: #0e69be;
border: 1px solid;
border-width: 1px;
margin-left:10px;
margin-top:10px;

}



#menu ul{

list-style:none;

margin:0px;

padding:0px;

}

#menu li a {

font: bold 12px Verdana, Geneva, sans-serif;

text-decoration: none;

}





#menu li a:link, #menu li a:visited {
color:#ffffff;
display: block;

background: #0099FF url(../images/glossyback.gif) repeat-x bottom left;

padding: 6px 0 6px 10px;

}


.menu_cat {

color: #ffffff;

display: block;

background: #0099FF url(../images/glossyback.gif) repeat-x bottom left;

padding: 6px 0 6px 10px;

}



#menu li a:hover {

color: #ffffff;

background-image: url(../images/glossyback2.gif);
    padding: 6px 0 6px 10px;

}



#menu li a:active {

color: #ffffff;

background: url(../images/glossyback2.gif);
    padding: 8px 0 0 10px;

} 


#beautec_header{

height:350px;

background-image:url(../images/beautec_header.jpg);

background-repeat:no-repeat;

}



#beautec_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding:0;

color:#9B3D96;

text-align:center;

}



#beautec2_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding-left:40px;

color:#9B3D96;

}

#beautec_h4{

color:#9B3D96;

}



#benefits_beautec{

width:500px;

height:600px;

background-image:url(../images/beautec_benefits2.jpg);

background-repeat:no-repeat;

padding:0px 30px 0px 0px;

float:right;

}





#para_beautec{

width:430px;

float:left;

margin-left:0px;

margin-top:0;

padding-left:0px;

}

#startuptec_header{

height:350px;

background-image: url(../images/startuptec_header.jpg);

background-repeat:no-repeat;

}


#startuptec2_h3{

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

margin:0;

padding-left:40px;

color:#7a3c2c;

}




#startuptec_h4{

color:#7a3c2c;

}

#testimonials_table{

border:1px solid #7a3c2c;
margin-bottom:0px;
float:right;
margin-top:40px;
}



#benefits_startuptec{

width:500px;

height:455px;

background-image:url(../images/startuptec_benefits.jpg);

background-repeat:no-repeat;

padding:0px 0px 0px 0px;

float:right;
margin-bottom:10px;

}

#footer{

clear:both;

height: 20px;

font-family: Tahoma, Arial, Helvetica, Sans-serif;

font-size: 12px;

color: #FFF;

padding: 13px 25px;

line-height: 18px;

width:800px;

margin:0 auto;

text-align:center;

}



#footer a {

color: #FFF;

text-decoration: none;

}



#footer a:hover {

color: #0099FF;

}

Edited by Darkice - 6/3/11 at 10:48am
Viperware x 2
(14 items)
 
   
CPUMotherboardGraphicsRAM
i7 4770 Asus SaberTooth Mark S EVGA GTX 980 SC Corsair Vengeance DDR3 8GBs 
Optical DriveOSMonitorMonitor
LG Optical drive Windows 8.1 Dell u2414h Dell u2414h 
KeyboardPowerCaseMouse
corsair k70 EVGA 1000 G2 corsair 750D Corsair M65 
Mouse PadAudio
steel series game pad LG sound bar 
CPUMotherboardGraphicsRAM
Q6600 Go @ 3.8GHz Rocksolid ASUS P5E eVGA GTX 285 4 Gb Corsair XMS2 
Hard DriveOptical DriveOSMonitor
750 GB Hiatachi 7200 RPM 32MB cache Drive.. Win7 Ultx64/Ubuntu 10.04 Samsumg 26'' 
PowerCaseMouse
PC Power and cooling 750 watt Cooler Master Cosmos S Kone 
  hide details  
Reply
Viperware x 2
(14 items)
 
   
CPUMotherboardGraphicsRAM
i7 4770 Asus SaberTooth Mark S EVGA GTX 980 SC Corsair Vengeance DDR3 8GBs 
Optical DriveOSMonitorMonitor
LG Optical drive Windows 8.1 Dell u2414h Dell u2414h 
KeyboardPowerCaseMouse
corsair k70 EVGA 1000 G2 corsair 750D Corsair M65 
Mouse PadAudio
steel series game pad LG sound bar 
CPUMotherboardGraphicsRAM
Q6600 Go @ 3.8GHz Rocksolid ASUS P5E eVGA GTX 285 4 Gb Corsair XMS2 
Hard DriveOptical DriveOSMonitor
750 GB Hiatachi 7200 RPM 32MB cache Drive.. Win7 Ultx64/Ubuntu 10.04 Samsumg 26'' 
PowerCaseMouse
PC Power and cooling 750 watt Cooler Master Cosmos S Kone 
  hide details  
Reply
post #4 of 8
You should remove that first code block, you are showing your Google Analytics ID.

Also, it's a little more work than just editing the CSS file. I was able to look at the site since I could see the URL from your screenshot.

You need to move the glossymenu DIV out of the content_left DIV and place it in it's own DIV after the other main content DIVs

Here's what I mean, this will put the nav after the other text. It doesn't look the best yet as you'll need to do some more work to align it want it to appear. Also probably want to change from vertical to horizontal nav.
Code:
<div id="content">

<div id="content_left">

<div id="docs"><h3 id="algatec_h3">Algatec&reg; Documents</h3>

<ul id="docs_lower">(View and print Algatec documents)</ul>
<ul id="pdf">

<li><a href="files/algatec_brochure.pdf" target="_blank">Algatec&reg; Brochure</a></li>

    <li><a href="files/algatec_product_data_sheet.pdf" target="_blank">Product Data Sheet</a></li>

    <li><a href="files/algatec_bottle.pdf" target="_blank">Photo of Algatec&reg; Bottle</a></li>

    <li><a href="files/algatec_msds.pdf" target="_blank">Material Safety Data Sheet (MSDS)</a></li>

    <li><a href="files/algaecide_comparison.pdf" target="_blank">Algaecide Comparison Report</a></li>

        <li><a href="#" target="_blank">"Got Algae" Ad</a></li>
        <li>
          <a href="files/easy_pool_care_tips.pdf" target="_blank">Tips for the Easiest Water Care</a>
        </li>
        <li><a target="_blank" href="files/Phosphate_Facts_and_Myths.pdf">Phosphates Facts &amp; Myths</a></li>
        <li><a target="_blank" href="files/Algatec-Pooltec-Trifold-Inside-Spanish.pdf">Algatec-Pooltec Trifold Inside "Spanish"</a></li>
        <li><a target="_blank" href="files/Algatec-Pooltec-Trifold-Outside-Spanish.pdf">Algatec-Pooltec Trifold Outside "Spanish"</a></li>




    </ul>
</div>


<!--Start Nav Menu-->

<!--End Menu-->

 

 

</div><!--End content_left-->

<div id="benefits_algatec">

<ul id="features_bullets"><h3 id="algatec2_h3" style="padding-bottom: 10px;">Algatec&reg; Features</h3>

<li>Kills and controls ALL algae...green, yellow and black.</li>

    <li>Powerful algae removal with chlorine<br>

synergy      . Fast cleanup results.</li>

    <li>Eradicates   difficult algae blooms.</li>

    <li>Strong water clarifier.</li>

    <li>No salt cell chlorinator interference.</li>

    <li>Algatec is free of copper, silver, bromides<br>

quats, and ammonia that may stain<br>

surfaces or consume clorine residuals. </li>

</ul>



<ul id="benefits_bullets">

  <h3 id="algatec2_h3" style="padding-bottom: 10px;">Algatec&reg; Benefits</h3>

  <li>Easy and fast algae removal.</li>

    <li>No wait, swim immediately after treatment.</li>

    <li>Minimal brushing for green and yellow algae.</li>

    <li>Will not upset chlorine and water balance.</li>

    </ul>

    </div><!--End Benefits--><div id="para_algatec">
      <p>Algatec provides superior cleanup especially in chlorine and  salt pools due to its strong killing action with all types of chlorine  products. The product is both an algaecide and algastat (prevents re-growth).  Algatec also eradicates Black Algae (fungi) with chlorine in just 7 to 10 days.  Unlike phosphate remover products that seek to control algae by phosphate  starving, Algatec kills algae and prevents its re-growth. This amazing product  makes it easy to control algae blooms and leaves pool water sparkling clear.</p>

</div><div style="clear: both; margin: 0pt 400px;" class="glossymenu">

<div class="menuitem" style="color: rgb(255, 255, 0); font-size: 14px; padding-left: 30px;">POOLS</div>



<a class="menuitem" href="http://www.mcgrayel.com/algatec.html">Algatec&reg;</a>

<a class="menuitem" href="http://www.mcgrayel.com/beautec.html">Beautec&reg;</a>

<a class="menuitem" href="http://www.mcgrayel.com/pooltec.html">Pooltec Summer&reg;</a>

<a class="menuitem" href="http://www.mcgrayel.com/pooltec_winter.html">Pooltec Winter&reg;</a>

<a class="menuitem" href="http://www.mcgrayel.com/scaletecplus.html">Scaletec Plus&reg;</a>

<a class="menuitem" href="http://www.mcgrayel.com/startuptec.html">Startup-Tec&reg;</a>

<div class="menuitem" style="color: rgb(255, 255, 0); font-size: 14px; padding-left: 30px;">SPAS</div>

<a class="menuitem" href="http://www.mcgrayel.com/spatec.html">Spatec&reg;</a>

<a class="menuitem" href="http://www.mcgrayel.com/beautec.html">Beautec&reg;</a>

<div class="menuitem" style="color: rgb(255, 255, 0); font-size: 14px; padding-left: 20px;">FOUNTAINS</div>

<a class="menuitem" href="http://www.mcgrayel.com/fountec.html">Fountec&reg;</a>

<a class="menuitem" href="http://www.mcgrayel.com/protec.html">Protec&reg;</a>

</div></div>

Edited by Jonowxeno - 6/3/11 at 10:40am
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
post #5 of 8
Thread Starter 
Does anyone know if I could load my code into indesign or the likes and do some drag and drop to get the menu where I want it?

and Jonowxeno your navbar code still comes out vertical was it supposed too?
Viperware x 2
(14 items)
 
   
CPUMotherboardGraphicsRAM
i7 4770 Asus SaberTooth Mark S EVGA GTX 980 SC Corsair Vengeance DDR3 8GBs 
Optical DriveOSMonitorMonitor
LG Optical drive Windows 8.1 Dell u2414h Dell u2414h 
KeyboardPowerCaseMouse
corsair k70 EVGA 1000 G2 corsair 750D Corsair M65 
Mouse PadAudio
steel series game pad LG sound bar 
CPUMotherboardGraphicsRAM
Q6600 Go @ 3.8GHz Rocksolid ASUS P5E eVGA GTX 285 4 Gb Corsair XMS2 
Hard DriveOptical DriveOSMonitor
750 GB Hiatachi 7200 RPM 32MB cache Drive.. Win7 Ultx64/Ubuntu 10.04 Samsumg 26'' 
PowerCaseMouse
PC Power and cooling 750 watt Cooler Master Cosmos S Kone 
  hide details  
Reply
Viperware x 2
(14 items)
 
   
CPUMotherboardGraphicsRAM
i7 4770 Asus SaberTooth Mark S EVGA GTX 980 SC Corsair Vengeance DDR3 8GBs 
Optical DriveOSMonitorMonitor
LG Optical drive Windows 8.1 Dell u2414h Dell u2414h 
KeyboardPowerCaseMouse
corsair k70 EVGA 1000 G2 corsair 750D Corsair M65 
Mouse PadAudio
steel series game pad LG sound bar 
CPUMotherboardGraphicsRAM
Q6600 Go @ 3.8GHz Rocksolid ASUS P5E eVGA GTX 285 4 Gb Corsair XMS2 
Hard DriveOptical DriveOSMonitor
750 GB Hiatachi 7200 RPM 32MB cache Drive.. Win7 Ultx64/Ubuntu 10.04 Samsumg 26'' 
PowerCaseMouse
PC Power and cooling 750 watt Cooler Master Cosmos S Kone 
  hide details  
Reply
post #6 of 8
Yeah, I left it vertical since I didn't know how you wanted to look.

You could try loading it into Dreamweaver, Sharepoint Designer (free) or Visual Studio (probably overboard) and drag/drop but it may or may not mess up what you already have.

I always code with notepad++/textmate or Visual Studio Code View so I don't know how useful GUI Editing is. You always have more control with editing the code directly.
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
post #7 of 8
Thread Starter 
Yeah But I dont really know how to do code I know basic's My job was supposed to be maintaining computers virus fixing stuff data entry not making web sites so, drag drop might be quicker for me, as you can see the sites not very pretty already, yeah in my top post I showed a JPG showing it need to be on the bottom horizontal.
Viperware x 2
(14 items)
 
   
CPUMotherboardGraphicsRAM
i7 4770 Asus SaberTooth Mark S EVGA GTX 980 SC Corsair Vengeance DDR3 8GBs 
Optical DriveOSMonitorMonitor
LG Optical drive Windows 8.1 Dell u2414h Dell u2414h 
KeyboardPowerCaseMouse
corsair k70 EVGA 1000 G2 corsair 750D Corsair M65 
Mouse PadAudio
steel series game pad LG sound bar 
CPUMotherboardGraphicsRAM
Q6600 Go @ 3.8GHz Rocksolid ASUS P5E eVGA GTX 285 4 Gb Corsair XMS2 
Hard DriveOptical DriveOSMonitor
750 GB Hiatachi 7200 RPM 32MB cache Drive.. Win7 Ultx64/Ubuntu 10.04 Samsumg 26'' 
PowerCaseMouse
PC Power and cooling 750 watt Cooler Master Cosmos S Kone 
  hide details  
Reply
Viperware x 2
(14 items)
 
   
CPUMotherboardGraphicsRAM
i7 4770 Asus SaberTooth Mark S EVGA GTX 980 SC Corsair Vengeance DDR3 8GBs 
Optical DriveOSMonitorMonitor
LG Optical drive Windows 8.1 Dell u2414h Dell u2414h 
KeyboardPowerCaseMouse
corsair k70 EVGA 1000 G2 corsair 750D Corsair M65 
Mouse PadAudio
steel series game pad LG sound bar 
CPUMotherboardGraphicsRAM
Q6600 Go @ 3.8GHz Rocksolid ASUS P5E eVGA GTX 285 4 Gb Corsair XMS2 
Hard DriveOptical DriveOSMonitor
750 GB Hiatachi 7200 RPM 32MB cache Drive.. Win7 Ultx64/Ubuntu 10.04 Samsumg 26'' 
PowerCaseMouse
PC Power and cooling 750 watt Cooler Master Cosmos S Kone 
  hide details  
Reply
post #8 of 8
Ok let's try this out

replace content div with this new one
Code:
<div id="content">
<div id="content_left">
<div id="docs">
<h3 id="algatec_h3">Algatec&reg; Documents</h3>
<ul id="docs_lower">
(View and print Algatec documents)
</ul>
<ul id="pdf">
<li><a href="files/algatec_brochure.pdf" target="_blank">Algatec&reg; Brochure</a></li>
<li><a href="files/algatec_product_data_sheet.pdf" target="_blank">Product Data Sheet</a></li>
<li><a href="files/algatec_bottle.pdf" target="_blank">Photo of Algatec&reg; Bottle</a></li>
<li><a href="files/algatec_msds.pdf" target="_blank">Material Safety Data Sheet (MSDS)</a></li>
<li><a href="files/algaecide_comparison.pdf" target="_blank">Algaecide Comparison Report</a></li>
<li><a href="#" target="_blank">"Got Algae" Ad</a></li>
<li> <a href="files/easy_pool_care_tips.pdf" target="_blank" >Tips for the Easiest Water Care</a> </li>
<li><a  target="_blank" href="files/Phosphate_Facts_and_Myths.pdf">Phosphates Facts & Myths</a></li>
<li><a  target="_blank" href="files/Algatec-Pooltec-Trifold-Inside-Spanish.pdf">Algatec-Pooltec Trifold Inside "Spanish"</a></li>
<li><a  target="_blank" href="files/Algatec-Pooltec-Trifold-Outside-Spanish.pdf">Algatec-Pooltec Trifold Outside "Spanish"</a></li>
</ul>
</div>
<!--Start Nav Menu-->
</div>
<!--End content_left-->
<div id="benefits_algatec">
<ul id="features_bullets">
<h3 id="algatec2_h3" style="padding-bottom:10px;">Algatec&reg; Features</h3>
<li>Kills and controls ALL algae...green, yellow and black.</li>
<li>Powerful algae removal with chlorine<br />
synergy      . Fast cleanup results.</li>
<li>Eradicates   difficult algae blooms.</li>
<li>Strong water clarifier.</li>
<li>No salt cell chlorinator interference.</li>
<li>Algatec is free of copper, silver, bromides<br />
quats, and ammonia that may stain<br />
surfaces or consume clorine residuals. </li>
</ul>
<ul id="benefits_bullets">
<h3 id="algatec2_h3" style="padding-bottom:10px;">Algatec&reg; Benefits</h3>
<li>Easy and fast algae removal.</li>
<li>No wait, swim immediately after treatment.</li>
<li>Minimal brushing for green and yellow algae.</li>
<li>Will not upset chlorine and water balance.</li>
</ul>
</div>
<!--End Benefits-->
<div id="para_algatec">
<p>Algatec provides superior cleanup especially in chlorine and  salt pools due to its strong killing action with all types of chlorine  products. The product is both an algaecide and algastat (prevents re-growth).  Algatec also eradicates Black Algae (fungi) with chlorine in just 7 to 10 days.  Unlike phosphate remover products that seek to control algae by phosphate  starving, Algatec kills algae and prevents its re-growth. This amazing product  makes it easy to control algae blooms and leaves pool water sparkling clear.</p>
</div>
<div style="clear: both;" class="newmenu">
<ul>
<li><span style="color: rgb(255, 255, 0); font-size: 14px; padding-left: 15px;">POOLS</span></li>
<li><a href="http://www.mcgrayel.com/algatec.html">Algatec&reg;</a></li>
<li><a href="http://www.mcgrayel.com/beautec.html">Beautec&reg;</a></li>
<li><a href="http://www.mcgrayel.com/pooltec.html">Pooltec Summer&reg;</a></li>
<li><a href="http://www.mcgrayel.com/pooltec_winter.html">Pooltec Winter&reg;</a></li>
<li><a href="http://www.mcgrayel.com/scaletecplus.html">Scaletec Plus&reg;</a></li>
<li><a href="http://www.mcgrayel.com/startuptec.html">Startup-Tec&reg;</a></li>
<li><span style="color: rgb(255, 255, 0); font-size: 14px; padding-left: 15px;">SPAS</span></li>
<li><a href="http://www.mcgrayel.com/spatec.html">Spatec&reg;</a></li>
<li><a href="http://www.mcgrayel.com/beautec.html">Beautec&reg;</a></li>
<li><span style="color: rgb(255, 255, 0); font-size: 14px; padding-left: 15px;">FOUNTAINS</span></li>
<li><a href="http://www.mcgrayel.com/fountec.html">Fountec&reg;</a></li>
<li><a href="http://www.mcgrayel.com/protec.html">Protec&reg;</a></li>
</ul>
</div>
</div>

and add the following to your CSS, I used a new class for the new menu. Doesn't fit on one line since there's so much text, needs a little more work to make it look perfect but I think this gets you started
Code:
.newmenu {
background:url("../images/glossyback.gif") repeat-x scroll left bottom #0099FF;
height:54px;
font:bold 10px Verdana,Geneva,sans-serif;
}
.newmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.newmenu ul li {
display:inline;
}
.newmenu li a {
padding:5px;
height:44px;
color:white;
text-decoration:none;
line-height:20px;
}
.newmenu li a:hover {
background:url("../images/glossyback2.gif") repeat-x;
}
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  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 › HTML question about moving div tables