Postioning orange boxes to left of page

[Johnathan]

Hello all,

I have managed to extend the grey box with my main product info across the page by increasing the box size and by'cutting and pasting' the orange boxes on the right to the bottom.

However this has left me with a slight problem in so much that I really would like the orange boxes to be postioned to the left of the page and extend outwards across.

Also very odd think has now happended in that my grey box has lost its smooth corners at the top.

The page can be viewed here:

http://www.usbtvtuner.co.uk/tvstick4.htm

Does anyone have any idea why this maybe so please?

Regards. John.

[unitedcraig]

Please post your code and a link to your site, would help when trying to figure out the problem

[Johnathan]

Hi Criag,

I have posted a link to my page. What code do you need, the CSS page? If so, that is below:

Code: Select all

/* project: internet music template
   author: luka cvrk (www.solucija.com) */

   
/* default styles
   -------------- */
  
body { 
    padding: 0; 
    margin: 0; 
    font: 0.74em Arial, Helvetica, sans-serif; 
    line-height: 1.5em;
    background: #fff; 
    color: #454545; 
}

a {
    color: #4A8EBC; 
    background: inherit;
}

a:hover {
    color: #C3593C;
    background: inherit;    
}

a.title {
    color: #FE6700;
    background: #FFF;
}

h1 {
    font: bold 2em "Trebuchet MS", Arial, Helvetica, sans-serif;
    letter-spacing: -1px; 
    padding: 2px 0 0 0px;
    margin: 0;
    color: #464548;
    background: inherit;
}

h1 a, h2 a {
    text-decoration: none;
    color: #464548;
    background: inherit;
}

h1 a:hover, h2 a:hover {
    color: #C3593C;
    background: #FFF;
}

h1 .red{
    color: #C3593C;
    background: inherit;
}


h2 { 
    margin: 0 0 5px 0; 
    padding: 0; 
    font: bold 1.5em Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    color: #000; 
    background: inherit;
}

h2 .yellow{
    color: #FFFCD1;
    background: inherit;
}

p {    margin: 0 0 5px 0; }

ul { 
    margin: 0; 
    padding : 0; 
    list-style : none; 
}

form { 
    margin: 0; 
}

input.search { 
    width: 145px; 
    height: 22px;
    border: none;
    background: #fff url(input.gif) no-repeat; 
    padding: 5px 10px 0 25px;
    color: #808080;
}

input.button {
    border: 0;
    height: 27px;
    width: 76px;
    background: #ABC43C url(button.gif) no-repeat;
    color: #FFF;
    font: bold 1.1em Arial, Helvetica, Sans-Serif;
}

input.login { 
    width: 150px;
    border: none; 
    background: url(logininput.gif); 
    padding: 4px; 
}

/* layout
   ------ */

.content { 
    margin: 10px auto;
    width: 760px; 
}

.logo {
    float: left;
    width: 180px;
    padding: 10px 0 11px 10px;
}

.header_right {
    float: right;
    width: 550px;
    height: 72px;
}

.logo p {
    font-size: 0.9em;
    color: #808080;
    padding: 0 0 0 7px;
    background: inherit;
}


.top_info {
    width: 540px;
    margin: 12px 0 5px 0;
    padding: 0 5px 5px 0;
    text-align: right;
    background: #FFF url(dot.gif) repeat-x bottom;
    color: #444;
}
    

.slogan {
    text-align: right;
    width: 160px;
}


.bar { 
    text-align: right;
    font-size: 1.1em;
    height: 30px; 
}

    .bar li { 
        
        padding: 0px 10px 8px 10px;
        color: #808080;
        background: #FFF;
        display: inline;
    }
    
    .bar li.active { 
        background: #FFF url(bar.gif) no-repeat center bottom; 
        color: #C3593C;
        font-weight: bold; 
        padding-bottom: 8px; 
    }

    .bar a { 
        font-weight: bold;
        color: #4A8EBC; 
        background: inherit;    
    } 

.search_field { 
    text-align: right;
    float: right;
    width: 540px;
    height: 38px;
    background: #464548 url(searchbg.gif) no-repeat top right; 
    color: #000;
    clear: both;
    padding: 10px 10px 0 0;
}

.grey {
    font-size: 1.2em;
    font-weight: bold;
    color: #ccc;
    background: inherit;
    
}

.search {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFF;
    background: inherit;    
}

.newsletter {
    float: left;
    height: 33px;
    padding: 15px 0 0 15px;
    width: 192px;
    background: #6E6E6E url(newsletterbg.gif) no-repeat;
    color: #FFF;
    margin: 0 0 3px 0;
}

.subheader {
    clear: both;
    margin: 3px 0 10px 0;
    padding: 8px;
    background: #f4f4f4;
    color: #808080;
    border-bottom: 1px solid #ccc;
}

/* left side
   --------- */

.left {
    float: left;
    width: 760px;
    margin: 0 0 10px 0;
}
    .left_articles {
        margin: 0 0 15px 0;
        padding: 0 0 0 10px;
    }

    .lt {
        height: 10px;
        background: #6E6E6E url(lt.gif) no-repeat;
        color: #FFF;
    }
    
    .lbox {
        color: #eee;
        padding: 3px 12px;
        margin: 0 0 15px 0;
        background: #6E6E6E url(lb.gif) no-repeat bottom left;
        height: auto;
    }
    
    .lbox a {
        color: #FFFCD1;
        background: inherit;
    }
    
    .lbox h2 {
        color: #FFF;
        background: #6E6E6E;
    }
    
    
.thumb {
    float: left;
    width: 160px;
    border: 1px solid #d4d4d4;
    color: #fff;
    background: #6e6e6e;
    margin: 0 15px 15px 0;
    padding: 5px;
}

.thumb p { margin: 0; padding: 3px; color: #FFF; background: #6e6e6e; }
    
/* right side
   ---------- */
        
.right {
    float: right;
    width: 245px;
    margin: 0 0 10px 0;
}

.right a {
    color: #FFFCD1;
    background: inherit;
}

        
    .rt {
        background: #C85E35 url(rt.gif) no-repeat;
        color: #FFF;
        height: 7px;
    }
        
    .right_articles {
        font-size: 0.9em;
        background: #C85E35 url(rb.gif) no-repeat bottom;
        color: #FEE1D5;
        padding: 4px 8px;    
        margin: 0 0 10px 0;
    }
    
            
.image {
    float: left;
    margin: 0 9px 3px 0;
}

/* footer
   ------ */

.footer { 
    clear: both; 
    text-align: center;
    line-height: 1.8em;
    color: #808080;
    background: #FFF url(dot.gif) repeat-x;
    padding: 8px 0;
}

.footer a {
    color: #C3593C;
    background: inherit;
}

Thanks John.

[unitedcraig]

Originally Posted by Johnathan

I really would like the orange boxes to be postioned to the left of the page and extend outwards across.

what exactly do you mean by this?

are the orange boxes navigation?

[danny322]

Your 'right_article' divs are inside a div class="right", this div is floated right. Thats why your orange boxes arent going left

[Johnathan]

Hi Dan,

Please take a look at http://www.usbtvtuner.co.uk/tvstick4.htmThe 3 orange boxes below the main grey box would look better postioned on the left and not on the right as they currently are. Also I would like the boxes to stretch right across the page.

Regards. John.

[Johnathan]

Thanks Dan,

Do you mind advising on the code I need to float them left please?

Regards. John.

[danny322]

Jonathan, sorry about the late reply getting back to u ive been very busy.

In your CSS file fint this piece of code.....

Code: Select all

.right {
float: right;
width: 245px;
margin: 0 0 10px 0;
}

and change it to this......

Code: Select all

.right {
float: left;
width: 245px;
margin: 0 0 10px 0;
}

im not too sure at the moment how to get them all on the same row

[Johnathan]

Thanks for that Danny,

I do not need the 3 orange boxes on the same row but do need them to be the same width as the grey box.

I have tried to increase the width in the css sheet from 245px as above to say 400 but the boxes look awful, i.e., the wound edges appear out of sync and in the middle.

Any idea how I can avoid this please?

The page can be viewed here

http://www.usbtvtuner.co.uk/tvstick4.htm

Regards. John.

[dab42pat]

I had a quick look at this today and to be honest its not straight forward. I will have another look later and let you know how i get on.

Pat

[dab42pat]

OK give this a try.

HTML: Select all

<div class="right">
                        
            <div class="rt"></div>
            <div class="right_articles">
            
                <p align="left">
                <b>
                <img src="../tn/tn_encoder440.jpg" width="96" height="94" border="0" align="left" />Lorem ipsum dolor sit amet</b><br />

              consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
            </div></div>
            <div class="right">
            <div class="rt"></div>
            <div class="right_articles">
                <p align="left">
                <b>

                <img src="../tn/tn_TV_Box_Working_Without_PC.jpg" width="96" height="94" border="0" align="left" />Lorem ipsum dolor sit amet</b><br />
              consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
            </div></div>
            <div class="right">
            <div class="rt"></div>
            <div class="right_articles" style="width: 245; height: 114">
                <p align="left">

                <b>
                <img src="../tn/tn_hauppage-hvr3000.jpg" width="96" height="94" border="0" align="left" />Lorem ipsum dolor sit amet</b><br />
              consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
            </div></div>
        </div>
      </div>

            
        <div class="footer">

[Johnathan]

Thanks Pat,

I have added the above code to my css sheet but need to know which of the below I need to delete from thr css sheet:

.right {
float: left;
width: 245px;
margin: 0 0 10px 0;
}

.right a {
color: #FFFCD1;
background: inherit;
}


.rt {
background: #C85E35 url(rt.gif) no-repeat;
color: #FFF;
height: 7px;
}

.right_articles {
font-size: 0.9em;
background: #C85E35 url(rb.gif) no-repeat bottom;
color: #FEE1D5;
padding: 4px 8px;
margin: 0 0 10px 0;
}


.image {
float: left;
margin: 0 9px 3px 0;
}

Regards. Pari.

[dab42pat]

The code I posted has to be inserted into your HTML not your CSS.
Leave your CSS as it is.

Here is a screen shot of what you should get.

HTH

Pat

I havent inserted your graphics.

[Johnathan]

Thanks Pat,

As always your comments are very helpful.

I have added the code to my webpage and it is not appearing as nicely as in your pic.

I know it is something that I am doing wrong. Sorry to be a pain so late in the evening.

Is there any other easier way to just add 3 rectangles with round edges to my site.

This is driving me bonkers!

Regards and thanks again for your help. John.

[dab42pat]

Just looked at your code and their were no chages.

Try replacing all your html code with the below code, dont alter the css.

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="author" content="Luka Cvrk (www.solucija.com)" />
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
    <link rel="stylesheet" href="basic.css" type="text/css" />
    <title>Internet Music</title>
</head>
<body>
    <div class="content">
        <div class="header_right">

            <div class="top_info">
                <div class="top_info_right">
                    <p><b>You are not Logged in!</b> <a href="#">Log in</a>  or <a href="#">register</a> to start downloading music!</p>                    
                </div>        
            </div>
                    
            <div class="bar">

                <ul>
                    <li class="slogan">:</li>
                    <li><a href="#">Links</a></li>
                    <li><a href="#">FAQ's</a></li>
                    <li class="active">&nbsp;Online PC TV forum</li>
                    <li><a href="#">Helpdesk</a></li>

                    <li><a href="#">About us</a></li>
                
                </ul>
            </div>
        </div>
      <div class="logo" style="width: 570; height: 82">
            <h1><a href="#" title="The best music on the net!">USBTVTUNER </a></h1>
            <p>independent review of PC TV</p>

      </div>
        
        <div class="search_field">
            <form method="post" action="?">
                <p><b><font color="#FEE1D5">Today's date: 30 December 2007</font></b></p>
            </form>
        </div>
        
        <div class="newsletter">
            <p>Subscribe to my Newsletter!</p>

        </div>
        
        <div class="subheader">
            <p><a href="#">USB Freeview DVB-T stick</a> The review below of the Pari Technology Freeview stick consistently comes out on top, when marketing testing. The product contains a good fast Philippe chipset and can work on  USB 2.0 speed. I do hope you find the review helpful. If you need any further help please contact me at the forum. I will be more than happy to help you if I can. Regards John. </p>
      </div>
        
        <div class="left">
          <div class="lbox">
                <h2>USB Freeview TV Stick: <span class="yellow">&pound;15</span></h2>

                <div class="thumb">
                    <img border="0" src="../tn/tn_USB_DVB-T_Stick.jpg" width="160" height="154" />
                    <p>
                    <img src="images/play.gif" alt="Play" width="9" height="9" /> 
                    USB Freeview TV Tuner with remote control</p>
                </div>
                    
                <p>Until recently to view high quality TV on a PC required a PCI          
                TV tuner card. Nowadays you can receive the same high quality TV 
                signal from a tiny device, no bigger than a USB pen drive. The 
                TV stick  recommend by usbtvtuner allows the viewing of all Freeview channels 
                ( including radio) and also comes complete with remote control, small ariel and an annennta cable 
                for use in areas where the TV signal may not be optimal. </p>
                <p>The device looks much like a USB memory stick, though a bit larger in cross-section. You may find it difficult to fit into a rear USB 2.0 socket if you have another similar size device plugged into a nearby socket. </p>

                <p> Sleek and black, it looks right at home plugged into my MacBook, and with a footprint slightly larger than your average thumb drive, it's incredibly portable. The only downside to the form factor is that it will block the adjacent USB port, which for some laptop users means you'll have to break out the USB hub if you plan on using any other devices while the tuner's plugged in. </p>
                <p> However, the base is also magnetic, so if it's on a magnetic surface (an apartment windowsill, car door, or edge of a folding table will do) it can be held sturdy. The magnet is quite powerful, actually able to hold the antenna even when positioned upside down or horizontally, so be sure to keep it away from your hard drive and credit cards. </p>
                <p> The supplied BlazeVideo HDTV Player is a full-featured and easy to use  software, combining HDTV playback, FM receiving, video record and DVD playback functions. You software allows you to take advantage of PC monitor's high resolution, watch, record, playback high definition HDTV program or teletext broadcast program. </p>
                <p> A neat feature of the the  BlazeVideo HDTV Player is it also acts as your multi-media center, and supports DVD, VCD, SVCD, MP3, MPEG and Pictures playback. The more advanced features, such as video/audio record, video capture, bookmark preview, picture slideshow, screen control, special audio effect, optional skin, only enhace the viewing experience. 


 The full feature listing of Snitz Forums can be viewed</p>
                <p> There are hundreds of other forum applications available. I have reviewed the most popular, but these may not suit your site. </p>

                <p>&nbsp;</p>
                <p>Below is a summary of the key features of the software:</p>
                <p></p>
                <p>Playing HDTV program </p>
                <ul><li>Playing teletext broadcasting </li>
                  <li>Playing FM radio with Visualization effect </li>
                  <li>Realtime record favorite HDTV program </li>

                  <li>Schedule record favorite HDTV program </li>
                  <li>EPG guide, live update program list and program guide </li>
                  <li>Auto &amp; manually scan all available channels </li>
                  <li>Display subtitle, support multiple language &amp; audio channels </li>
                  <li>Schedule watch HDTV program at specified time </li>

                  <li>TimeShifting, pause watching HDTV program </li>
                  <li>Capture HDTV program video as still image </li>
                  <li>Freely manage favorite channels </li>
                  <li>Multi-channel preview to quickly access favorite programs </li>
                  <li>Playing DVD/SVCD/VCD/CD disc </li>
                  <li>Record DVD video &amp; audio </li>

                  <li>DVD bookmark preview to quickly access favorite title/chapter </li>
                  <li>Playing most popular media files </li>
                  <li>Playing picture as slide show with background music </li>
                  <li>Playing external video devices <br />Advanced power saving scheme for notebook PC </li>
              </ul>
                <p>&nbsp; </p>

                <p>The program will automatically scan the frequency band and reports the channels it's found. The channel  selection lists for TV, radio and 'Favourites' are easy to configure to your personal liking. Your Favourites list can include both TV channels and radio stations. </p>
                <p>&nbsp;</p>
                <p>
                  <img src="file:///C|/Documents%20and%20Settings/Pari/Desktop/istockphoto_1725072_outdoor_picnic_03.jpg" width="150" height="229" border="1" align="left" /></p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>

                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp; </p>

                <table border="1" cellpadding="0" cellspacing="0" bordercolor="#666666" bgcolor="#666666">
                  <tr>
                    <td width="29%"><p>System Memory </p></td>
                    <td width="71%"><p> 128MB RAM or higher </p></td>
                  </tr>
                  <tr>
                    <td>Display Card </td>

                    <td> Have 24 Bits resolution and support DirectX, 8MB Video-ROM or more </td>
                  </tr>
                  <tr>
                    <td>Sound Card </td>
                    <td> PCI sound cards, Integration chipset on Mother Board, USB audio devices etc. compatible with Windows and stereo speakers </td>
                  </tr>

                  <tr>
                    <td><p>Hard-disk Available Capacity </p></td>
                    <td><p> At least 512 MB temporary disc space for TimeShift; <br />
        Large enough space for HDTV or DVD record </p></td>
                  </tr>
                  <tr>
                    <td height="56"><p>Device </p></td>

                    <td><p> All DVD drives; <br />
        HDTV receiver and its driver should be installed for HDTV playback </p></td>
                  </tr>
                </table>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>

                <p>&nbsp;</p>
              <p>&nbsp;</p>
            </div>
                                <div class="right">
                        
            <div class="rt"></div>
            <div class="right_articles">
            
                <p align="left">
                <b>
                <img src="../tn/tn_encoder440.jpg" width="96" height="94" border="0" align="left" />Lorem ipsum dolor sit amet</b><br />

              consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
            </div></div>
            
 

            <div class="right">
            <div class="rt"></div>
            <div class="right_articles">
                <p align="left">
                <b>

                <img src="../tn/tn_TV_Box_Working_Without_PC.jpg" width="96" height="94" border="0" align="left" />Lorem ipsum dolor sit amet</b><br />
              consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
            </div></div>
            <div class="right">
            <div class="rt"></div>
            <div class="right_articles" style="width: 245; height: 114">
                <p align="left">

                <b>
                <img src="../tn/tn_hauppage-hvr3000.jpg" width="96" height="94" border="0" align="left" />Lorem ipsum dolor sit amet</b><br />
              consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
            </div></div>
        </div>
      </div>

            
        <div class="footer">
            <p><b><font color="#008080">For a comparison off all review products 
            please click here</font></b></p>
            <p>&nbsp;</p>
            <p><a href="#">RSS Feed</a> | <a href="#">Contact</a> | <a href="#">Accessibility</a> | <a href="#">Products</a> | <a href="#">Disclaimer</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />

            &copy; Copyright 2006 Internet Music, Design: Luka Cvrk - <a href="http://www.solucija.com/" title="What's your solution?">Solucija</a></p>
        </div>
    </div>
</body>
</html>

[Johnathan]

Thanks Pat, John and Craig for helping me out.