Help with designing my site, multiple questions

Hello, I would like to introduce myself first. I have medium skills in PHP programming and Im willing to recreate my site. Its based on TBDev Open Source script, but its so damn old, so Im rewriting most of the functions and recreating design. I have not used CSS much before, just edited something, so its quit hard for me to understand all the possibilities now, but Im learning.

So my first question would be about <div>`s.

Im willing to make my site look like this: http://i53.tinypic.com/9kxiq9.jpg ([FONT="Arial Black"]Warning[/FONT], its an adult home page, I forgot to remove site`s URL, adult content is prohibited here, but there is no pornographic content in the screenshot)

My code now looks something like this:



<h2>Jaunumi<font class=small> - <font class=small>[<a class=altlink href=news.php><b>New</b></a>]</font></font></h2><div class='box'>
 <div class='boxtop'><div></div></div>
  <div class='boxcontent'>
<ul class='news'><li>2010-12-17 - .<br />
zzzzzzzzzzzzzzzzzzzzzzzzz<br />
zzzzzzzzzzzzzzzzzzzzzzzzz<br />
zzzzzzzzzzzzzzzzzzzzzzzzz<br />
zzzzzzzzzzzzzzzzzzzzzzzzz<br />
zzzzzzzzzzzzzzzzzzzzzzzzz<br />
zzzzzzzzzzzzzzzzzzzzzzzzz<br />

 <font size="-2">[<a class=altlink href=news.php?action=edit&newsid=70&returnto=%2Fnew%2Findex.php><b>E</b></a>]</font> <font size="-2">[<a class=altlink href=news.php?action=delete&newsid=70&returnto=%2Fnew%2Findex.php><b>D</b></a>]</font></li>
 </div><div class='boxbottom'><div></div></div>
</div><div><div class="clear">&nbsp;</div>
</div>

<h2>Jaunumi<font class=small> - <font class=small>[<a class=altlink href=news.php><b>New</b></a>]</font></font></h2><div class='box'>
 <div class='boxtop'><div></div></div>
  <div class='boxcontent'>
xxxxxxxxxx<br>
xxxxxxxxxx<br>
xxxxxxxxxx<br>
xxxxxxxxxx<br>
xxxxxxxxxx<br>
xxxxxxxxxx<br>

 </div><div class='boxbottom'><div></div></div>
</div><div class="clear">&nbsp;</div>


and CSS:



.box { 
margin: 0px 0px 0px 15px;
  background: #F0F0F0; 
  width:50%;
}
.boxtop { 
  background: url(ne.gif) no-repeat top right; 
}
.boxtop div { 
  font-size: 0;
  height: 10px; 
  background: url(nw.gif) no-repeat top left; 
}
.boxbottom { 
  background: url(se.gif) no-repeat bottom right; 
}
.boxbottom div { 
  font-size: 0;
  height: 10px; 
  background: url(sw.gif) no-repeat bottom left; 
}
.boxcontent {
  padding: 0px 10px 0px 10px;
}
ul.news {
list-style:none;
}
.clear {font-size: 1px; height: 1px}


I tried like a billion variations from many CSS tutorials, but no luck, best I got was extra small tables in left top of site.

Well thats first question, I will wait until this is solved and then ask the rest :slight_smile:

Cheers!

Firstly, avoid old code like <font> tags. They are totally out of date now. There are better ways to style parts of text, but I’d worry about that later.

To have boxes side-by-side, firstly give them a desired width, and the do something like float them. So, for example,

div {
  width: 300px;
  float: left;
}

You can float items right or left.

As Ralph said you would give the box a width and float it left and then they will line up side by side.


<div class='box'>
    <div class='boxtop'><div></div></div>
        <div class='boxcontent'>
            <ul class='news'>
                <li>2010-12-17 -</li>
                <li>2010-12-17 -</li>
                <li>2010-12-17 -</li>
                <li>2010-12-17 -</li>
                <li>2010-12-17 -</li>
           <ul>
        </div>
    <div class='boxbottom'><div></div></div>
</div>



.box {
  width: 300px;
  float: left;
 margin :0 10px 0 0;
}

However the question is whether these are individual elements or do you in fact want a three column layout with 3 distinct columns? If the answer is yes 3 columns then you would be better creating the three floated columns first and then stacking the content in each column as required.

You have a fixed width so just work out the width of each column and float them left. next just stack your content in each column as required. (This inner content will most likely not need to be floated.)

The only thing to remember is that floats need to be cleared or they float out of the container so you need a clearing mechanism which can be as simple as using overflow;hidden on the main wrapper if visible overflow isn’t required (see faq on floats for more info on this).

As usual the way you approach this depends on what happens next.

Thanks I kinda got the idea. Here is more about what I`m willing to do.

I`m willing to have 2 columns.

Right side (banner etc) and left/middle side for everything else.

In top of the page there should be 2 boxes (as in screenshot) but under them there would be only one but bigger.

So here goes my questions:

How can I make right side seperate from left/middle so it would be like

Second: can I somehow make Box2 be same size as box1 always. Lets say box1 contains really big text but box2 contains less text, can it be streched to same size as box1? I do not want to put a fixed width or height.

If i type in box1 really long word like qwertyuiopasdfghjklzxcvbnm (ok it needs to be longer than this, but u get the point) it goes out the box and not continue in new line like:
qwertyuiopasdf
ghjklzxcvbnm

It seems I can not edit my post, just wanted to let you know I somehow myself figured out how to make design from two colums, so there is right side and left/middle side. <----- I thought I fixed it ,but problem starts when I inserted 2 divs in right side, so my [other left/middle stuff (see picture)] goes under right side divs not under left site divs as it should

Hi,

You would need two floated columns. One for the double boxes on the left and another for the boxes on the right.

Then you’d float the two single boxes inside the left column and then clear them and continue the full width boxes.

Equal height boxes are hard to achieve and best avoided but can be done with some hacks (see demo below).

To stop unbroken text escaping from a container you can use word-wrap:break-word which is css3 and works in ie6 and upwards but only in other relatively modern versions of other browsers Firefox, safari and opera.

here’s a template you can work from that matches your design and you would just need ot match dimensions to your layout to fit.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main {
    width:1100px;
    word-wrap:break-word;/*CSS3 supported only in IE and modern browsers only*/
    overflow:hidden;
    border:1px solid #000;
    padding:10px 0;
    margin:auto;
}
/* left column*/
.main-column {
    float:left;
    width:749px;
    border-right:1px solid #000;
}
/* right column */
.side-column {
    float:right;
    width:349px;
    border-left:1px solid #000;
    position:relative;
    left:-1px;
}
/* equal height boxes */
.row {
    width:100%;
    position:relative;
    float:left;
    clear:both;
    margin:0 0 10px;
}
.row p, .content p, .side-content p {
    margin:10px;
}
/* .box cannot be position:relative or this won't work */
/* use an inner if stacking context needed but leave .bg outside */
.box {
    width:324px;
    margin:0 25px;
    display:inline;
    float:left;
}
/* if you don't want an inner then use this instead
.box * {
    position:relative;
    z-index:2;
}
*/
.inner {
    position:relative;
    z-index:2;
    width:100%;
}
.box .bg {
    width:332px;
    border:1px solid #e8e6c7;
    background:#f7f6eb;
    position:absolute;
    top:0;
    bottom:0;
    z-index:1;
}
/* full width elements */
.content {
    clear:both;
    width:706px;
    margin:0 0 15px 25px;
    border:1px solid #e8e6c7;
    background:#f7f6eb;
}
/* content in right column */
.side-content {
    width:297px;
    border:1px solid #e8e6c7;
    background:#f7f6eb;
    margin:0 0 10px 10px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
* html .inner{
    border-top:1px solid #e8e6c7;
}
* html .row{overflow:hidden}
* html .box .bg{
    top:auto;
    bottom:0;
    height:999em;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
    <div class="main-column">
        <div class="row">
            <div class="box">
                <div class="inner">
                    <p>test</p>
                    <p>testxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxshjkhkjshkjshkjhskjhkjhskjhkjshkjhskhioeuiueoiuoiu</p>
                    <p>test</p>
                </div>
                <div class="bg"></div>
            </div>
            <div class="box">
                <div class="inner">
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                </div>
                <div class="bg"></div>
            </div>
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
        </div>
    </div>
    <div class="side-column">
        <div class="side-content">
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div class="side-content">
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div class="side-content">
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div class="side-content">
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
</div>
</body>
</html>


Hey, Paul! Thanks for the preview it works just perfect. I tried to add it to my site, but after 2 hours of changing everything I gave up, because I can not make it work with rounded corners.

As you can see in my site, I have done it in my own screwed up way, can you take a look and tell me if its totally wrong and I should try to rewrite it or its just another way to make it work?

I will try to add box1 box2 same size thingy and long word bugfix from your code, hope it works!

Adding round corners will be awkward due to the equalising effect you wanted on the first two boxes (unless you just wanted to support CSS3 capable browsers with border-radius (IE9, Firefox, Safari)).

As you can see in my site, I have done it in my own screwed up way, can you take a look and tell me if its totally wrong and I should try to rewrite it or its just another way to make it work?

Send me the link via PM and I’ll take a look (I couldn’t find the new elements on the previous link) .

About adding rounded corners, the thing is I did succeed to add them to box1 and box2 while playing with preview code you gave (so it had the sizing thing) and I did not see anything awkward about them, maybe you are thinking boxes would be like really small so corners would look ugly, but they will be about the same size you can now see on site.
I sent you the link :slight_smile:

I updated my example to have round corners but it does complicate things a bit with the equal columns.

Ok, you seem to be making progress. :slight_smile:

I would usually float two columns rather than just floating the right column as IE6 will have the three pixel jog which could upset things and there is also the issue that if you have to clear a float it will clear the whole right column as well if all the content in the left isn’t contained within a floated parent. (Just add clear:both to .pakreisi to see the effect.)

For ie6 you will need to add display:inline to the outer floats that have margins or they will suffer from the double margin bug. Just add display:inline to any float that you have side margins on and it will cure it (see faq on floats for more info).

Don’t account for the whole 100% width when you don’t have to. If one float is 65% wide and one is 30% wide don’t add a 5% margin just to make it 100% because with rounding errors that may end up being to big. You could just float the left float to the left width a 65% width and then float the right float to the right with a 30% width and then there will be an automatic gutter (safety net) of 5% between them without having to say it.

However you seem to be making progress and you can now start on those tables and font tags :slight_smile:

If you want a good round corner tutorial to read then Jason has a new one here.

Ok, now I don`t have any idea how to edit the width of left side, because when I do table just gets ruined.

Also about right side, I tried adding padding, so banner would show up more nicely in the table, but then my rounded corners went deeper in the table too, so it was not what I expected.

Thanks for the tut on rounded corners although I`m too scared to mess something up if I touch them now :slight_smile:

Also in your example I saw you using <p></p> everywhere instead of <br />. Is it better? I know you can add styles to <p> but is it necessary to do so if I just need a line break or is there something else?

No, you will rarely use a break and it should never be used to either create space or to create pseudo paragraphs. A break is purely a line-break when the text calls for a line break such as in a poem or an address (or maybe between form elements).

Everything else has its own container and if a paragraph ends then you end the paragraph and not stick a break in there. You control the margins on the paragraphs and that menas you can control the space of the document 100%. Breaks on the other hand are almost impossible to control or to style and some browsers will ignore twe breaks together and only apply the one.

The content of your document must go in the most semantic element available and 9 times out of ten there is a suitable element available and when there is none you use a div (or span for inline content).

Having bare text inside a div is nonsense.


<div> I am a heading but I'm stuck in a div</div>
<div>I am a paragraph of content but someone stuck me in a div.</div>

It should be:


<h1>I am a heading </h1>
<p>I am a paragraph of content Hello I am a paragraph of content Hello I am a paragraph of content .</p>

lso about right side, I tried adding padding, so banner would show up more nicely in the table, but then my rounded corners went deeper in the table too, so it was not what I expected.

Add the padding to the inner elements instead. If there are no suitable inner elements then you can always add an inner wrapper as a last resort.

Hello again, Paul! Thanks, so I did succeed to get most of the site working, but I forgot the new design has to be ready before Christmas so I thought, forget the 100% nice new site, I will make this design live and fix small errors after Christmas :slight_smile: So for now those 2 boxes in one row are taken out.

Now I`m having these big problems I can not solve:
#1 The adspace placeholder on top in the right (right next to logo), I can not get the border off. Before it it had a thicker line around it, but I found it was because of td element, but this one I just can not get rid of.

#2 In index.php you can see Top torrents div. It contains table,tbody,th,td etc.
But it`s not how I need it to look. If you take the /new/ part out of the URL you can see how it should look. So is there a way to get rid of the tables completely or maybe you can tell me how to fix it so it would show up normally with tables and change everything to divs after christmas?

The second question is kinda about browse.php too because there is this really big, complicated table too.

Thanks again :slight_smile:

Do you mean this one?


#toplogoad img{border:none}

#2 In index.php you can see Top torrents div. It contains table,tbody,th,td etc.
But it`s not how I need it to look. If you take the /new/ part out of the URL you can see how it should look. So is there a way to get rid of the tables completely or maybe you can tell me how to fix it so it would show up normally with tables and change everything to divs after christmas?

The second question is kinda about browse.php too because there is this really big, complicated table too.

Thanks again :slight_smile:

That Top Torrents section looks like tabular data and should be in a table.

I would just give it some adding and a border and it will look much like the other one.


.aktivitorrenti td{
border:1px solid #000;
padding:5px 10px;
}
span.toptorrents{margin:0}
[/code[