Postioning orange boxes to left of page

Johnathan · #1 Feb 10th, 2008, 22:09

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 · #2 Feb 10th, 2008, 22:12

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

Johnathan · #3 Feb 10th, 2008, 22:22

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 · #4 Feb 10th, 2008, 22:41

Quote:

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 · #5 Feb 11th, 2008, 09:20

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

Johnathan · #6 Feb 11th, 2008, 20:09

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 · #7 Feb 11th, 2008, 20:45

Thanks Dan,

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

Regards. John.

danny322 · #8 Feb 14th, 2008, 08:19

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 · #9 Feb 14th, 2008, 21:03

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 · #10 Feb 14th, 2008, 21:51

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 · #11 Feb 14th, 2008, 21:59

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 · #12 Feb 14th, 2008, 22:24

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 · #13 Feb 14th, 2008, 22:33

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 · #14 Feb 14th, 2008, 22:49

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 · #15 Feb 14th, 2008, 22:54

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.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Postioning orange boxes to left of page