Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    (noob)Need some alignment help please

    I am having a little trouble, I will post my code below, but basically, for some reason when I zoom in, some of my text moves way off, and also its not aligned how I want it. I kinda want 2 colums on the page, 1 under "Services" and one under "Estimated Cost" but for some reason its not very organized. I used Position for a lot of it, absolute and relative, but I know there is a way to do it, like natural flow way. If anyone could please help me out, that'd be great.

    I am not sure if it needs to be in a certain order in the notepad++ or what, just a little confused.
    Thanks

    Code:
    <!doctype html>
    <html>
    <head>
    <title> DV Custom Sabers</title>
    <meta charset="utf-8">
    <style type="text/css">
    body {background-image:url('images/space1.jpg');}
    
    body {color:white;}
    a, a:visited { 
        color:#3399FF; text-decoration:none; 
    }
    h1
    {
    position:absolute;
    right:0px;
    top:0px;
    }
    p.dv{
    position:absolute;
    right:0px;
    top:50px;}
    
    h2{
    font-size:200%;
    color:#3399FF;
    line-height:600%;
    text-align:center}
    
    p.services{
    text-align:left;
    color:white;
    font-size:250%;
    text-decoration:underline;}
    
    p.list{
    font-size:150%;
    text-align:left;
    color:white;
    width:18em; 
    text-wrap:none;
    position: relative;
    left:50px;}
    
    p.list1{
    font-size:150%;
    text-align:left;
    color:white;
    width:18em;}
    
    p.list2{
    font-size:120%;
    text-align:left;
    color:white;
    width:18em; 
    text-wrap:none;
    position: relative;
    left:50px;}
    
    p.list3{
    position:relative;
    left:1200px;
    top:-80px; 
    font-size:220%;}
    
    ul li.fourth {
    color: white;
    text-align: right;
    font-size: 24px;
    left:1150px;
    position:relative;
    bottom: 1250px;
    width:26em;
    line-height: 2.0;
    }
    
    ul li.misc {
    color: white;
    text-align: left;
    font-size: 24px;
    position:relative;
    left:50px;}
    
    p.list4{
    position:absolute;
    right:600px;
    top:750px; 
    font-size:220%;}
    
    p.list5{
    position:absolute;
    right:600px;
    top:850px; 
    font-size:175%;}
    
    ul li.misc1{
    color: white;
    text-align: right;
    font-size: 24px;
    line-height: 2.0;
    position:relative;
    width:24em;
    left:1150px;
    bottom:1150px;
    }
    
    span{
    position:absolute;
    left:0px;
    top:0px;}
    
    p.list6{
    position:absolute;
    right:540px;
    top:1150px; 
    font-size:175%;}
    
    
    
    ul li.misc2{
    color: white;
    text-align: right;
    font-size: 24px;
    line-height: 2.0;
    position:relative;
    width:24em;
    left:1150px;
    bottom:950px;}
    
    ul li.misc3{
    color: white;
    text-align: right;
    font-size: 24px;
    line-height: 2.0;
    position:relative;
    width:24em;
    left:840px;
    bottom:1150px;}
    
    
    
    
    
    
    
    </style>
    </head>
    <h1><a href="darthvix.html">Darthvix Custom Sabers</a></h1>
    <p class="dv">DV Custom Sabers is the place to go for your saber needs!</p>
    
    <h2><a href="darthvix.html">Home</a>&nbsp;&nbsp;&nbsp;
    <a href="Gallery.html">Gallery</a>&nbsp;&nbsp;&nbsp;
    <a href="services.html">Services</a>&nbsp;&nbsp;&nbsp;
    <a href="Buildlog.html">Build Log</a>&nbsp;&nbsp;&nbsp;
    <a href="aboutme.html">About Me</a>&nbsp;&nbsp;&nbsp;
    <a href="forsale.html">For Sale</a></h2>
    <p class="services"> Services</p>
    <p class="list3"><u> Estimated Costs of  a Custom Saber:</u></p>
    
    <p class="list">All the sabers created are either designed by the customer or by Darthvix Custom Sabers. The following prices listed for custom sabers are in no way meant to represent the actual final cost of your custom saber, but to be an estimate. </p>
    
    <p class="list">Every saber I make has a unique design, the time it takes to complete the saber is based on the sabers complexity. I will complete the saber as soon as possible, usually most sabers take 4-8 weeks, however sabers that require much machining will take longer. Over half of the sabers I have sold are MHS, which are sabers made from pre-machined parts from The Custom Saber Shop, and I modify the pieces to fit the customers design. </p>
    
    <p class="list">If you are looking for a accurate quote on your custom saber you are looking to have Darthvix Custom Sabers Create, please email me a render of the saber you have in mind. This can include a 3-D renger, a hand drawn photo, or a photoshopped image as well.  </p>
    
    <p class="list">Please keep in mind, it may take a few days for me to figure the costs out based on your render because I need to add up all the costs involved in creating your dream saber.</p>
    
    <p class="list1"><u>Blade Service:</u></p>
    <ul id="misc">
    <li class="misc">1Inch Transwhite Blade 32-36Inches$40+SH</li>
    <li class="misc">7/8 Inch Blades 32-36Inches $45+SH</li>
    </ul>
    
    <p class="list1"><u>Misc Electronic Component Install:</u></p>
    (Does NOT include components or return shipping to customer.)
    
    <ul id="misc">
    <li class="misc">Add Color Extender to Crystal Focus ™  V6 $60 Install Fee</li>
    <li class="misc">Add Flash on Clash™  to Crystal Focus ™ or Petit Crouton™ $25 Install Fee</li>
    <li class="misc">Add R.I.C.E. to Crystal Focus ™ or Petit Crouton™  $20 Install Fee</li>
    <li class="misc">Calibration of Crystal Focus ™ or Petit Crouton™ $20 Install Fee</li>
    <li class="misc">In-Hilt Recharge Port $20 Install Fee</li>
    <li class="misc">Accent LED Install $10 Install Fee</li>
    <li class="misc">Crystal Chamber/Pommel (only if possible on desired hilt) $55-75 Install Fee</li>
    </ul>
    
    <ul id="fourth">
    <li class="fourth">A Stunt Custom saber with no shrouds or Powdercoating: $150-$350</li>
    <li class="fourth">A Nano Biscotte™ powered custom saber with minimal shrouds and no Powdercoating: $400-$550</li>
    <li class="fourth">A Petit Crouton™  powered custom saber with shrouds and Powdercoating: $600-$850</li>
    <li class="fourth">A Crystal Focus™ powered custom saber with all the available features: $1200</li>
    </ul> 
    
    <p class="list4"><u>Saber Conversions</u></p>
    <p class="list5"><u>One Replica</u></p>
    
    <ul id="misc1" >
    <li class="misc1">Cost to install a Nano Biscotte™ Soundboard is $210 Plus cost of parts needed to convert the saber.</li>
    <li class="misc1">Cost to install a Petit Crouton™ is $315 plus cost of parts needed to convert the saber.</li>
    <li class="misc1">Cost to install a CFV5/6 is $300 plus cost of parts needed to convert the saber.</li>
    </ul>
    
    <p class="list6"><u>Parks/Korbanth Conversions</u></p>
    
    <ul id="misc2" >
    <li class="misc1">Please contact me directly if you would like a Parks or Korbanth Saber converted.</li>
    </ul>
    
    <p class="list6">Master Replica and Hasbro FX Conversions</p>
    <ul id="misc2" >
    <li class="misc1">To convert either a Master Replica or Hasbro FX Conversion with a Rebel/P4 LED $150</li>
    </ul>
    
    
    
    <span><a href="darthvix.html"><img src="images/logo.png" alt="schedule" height="250" width="400"></a></span>
    </html>

  • #2
    New Coder
    Join Date
    Jul 2013
    Posts
    39
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You need to know the best practice css positioning... try this link maybe it could help you.. good luck!

  • #3
    New Coder
    Join Date
    Sep 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what link? think you may of forgot it lol

  • #4
    New Coder
    Join Date
    Sep 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I looked at the 5 css positions, and I tried to use fixed but it wouldnt move the text, it didnt effect it, maybe i did something wrong? Is the best way to position text using relative?

  • #5
    New Coder
    Join Date
    Sep 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    also, why is my web page so big? I just want it as big as the text goes, it goes like a page further than the text


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •