Search jQuery

jQuery Forum

Using jQuery UI

jagatnibas

3 vertical divs

in Using jQuery UI • 4 months ago

what i am trying to do is

3 vertical divs with categories, grid of images (pagination i will do next step) and messages

i try following way, but grid and accordion are screwed up. request wisemen to advise, i am kinda stuck here

____________________________________________________

<html>

<head>

<style>

#mainContainer {

text-align: center;

width='100%'

}

#categories {

float: left;

border: 10px;

background-color:red;

width: 25%;

height:500px;

}

#album {

display: inline;

border: 1px;

background-color:green;

width: 50%;

height:200px;

}

#messages {

float: right;

border: 1px;

background-color:blue;

width: 25%;

height:100%;

}

</style>

<style>

#feedback {

font-size: 1.4em;

}

#selectable .ui-selecting {

background: #FECA40;

}

#selectable .ui-selected {

background: #F39814;

color: white;

}

#selectable {

list-style-type: none;

margin: 0;

padding: 0;

width: 450px;

}

#selectable li {

margin: 3px;

padding: 1px;

float: left;

width: 100px;

height: 80px;

font-size: 4em;

text-align: center;

}

</style>

</head>

<body>

<div id='categories'>categories

<h3>Category 1</h3>

<div>

<p>

<ul>

</ul>

</p>

</div>

<h3>Category 2</h3>

<div>

<p>

<ul>

</ul>

</p>

</div>

<h3>Category 3</h3>

<div>

<p>

<ul>

</ul>

</p>

</div>

<h3>Category 4</h3>

<div>

<p>

<ul>

</ul>

</p>

</div>

<div>

</ol>

</div>

<div id='messages'>messages

<marquee behavior="scroll" direction="up" height="250" scrollamount="2"

scrolldelay="10" ">

</marquee>

</div>

</body>

</html>

____________________________________________________

Replies(4)

chrisward..

Re: 3 vertical divs

4 months ago

Hi,

Not sure I understand the problem.

I dropped your stuff into this new fiddle - is this showing the problem?

I've only just started using jfiddle, it's a very useful way to show bugs/questions.

Chris

jagatnibas

Re: 3 vertical divs

4 months ago

yes it is showing, ideally the middle div should have shown like 3x4 rectangular view, the red div top should have been same as blue div and middle div

i tried the following way without using jqueryui grid, but still, it is better not the what i want.

i want the table of squares arranged in a 5x5 square in the middle, and right most div same top as others.

______________________________________________

<html>

<head>

<style>

#mainContainer {

text-align: center;

width='100%'

}

#categories {

float: left;

border: 10px;

background-color:red;

width: 25%;

height:100%;

}

#album {

display: inline;

border: 10px solid green;

background-color:green;

width: 50%;

height:100%;

}

#messages {

float: right;

border: 1px;

background-color:blue;

width: 25%;

height:100%;

}

</style>

<style>

#feedback {

font-size: 1.4em;

}

#selectable .ui-selecting {

background: #FECA40;

}

#selectable .ui-selected {

background: #F39814;

color: white;

}

#selectable {

list-style-type: none;

margin: 0;

padding: 0;

width: 450px;

}

#selectable li {

margin: 3px;

padding: 1px;

float: left;

width: 100px;

height: 80px;

font-size: 4em;

text-align: center;

}

#dwrap div {

width: 100px;

height: 100px;

border: 1px solid #FF00FF;

float: left;

}

</style>

</head>

<body>

<div id='categories'>categories

<h3>Category 1</h3>

<div>

<p>

<ul>

</ul>

</p>

</div>

<h3>Category 2</h3>

<div>

<p>

<ul>

</ul>

</p>

</div>

<h3>Category 3</h3>

<div>

<p>

<ul>

</ul>

</p>

</div>

<h3>Category 4</h3>

<div>

<p>

<ul>

</ul>

</p>

</div>

<div>HELLO</div>

</div>

<!--

<div>

</ol>

</div>

-->

</div>

<div id='messages'>messages

<marquee behavior="scroll" direction="up" height="250" scrollamount="2"

scrolldelay="10" ">

</marquee>

</div>

</body>

</html>

______________________________________________

jagatnibas

Re: 3 vertical divs

4 months ago

Is it something very unusual I am trying to do ? No replies astonishes me. I am kinda stuck ! If any other approach can solve this problem I am willing to change approach.

just i need 3 independent vertical section in the html with a header at the top so that none of the contents interfere other div's appearance !

it seems

following css arrangement works, but i am a little worried about giving fixed width in terms of pixels. if anybody has more generic way of doing this !

_____________________________________________

#mainContainer {

text-align: center;

width=500px;

}

#categories {

float: left;

border: 10px;

background-color:red;

width: 100px;

height:500px;

}

#album {

float: left;

border: 1px;

background-color:green;

width: 300px;

height:500px;

}

#messages {

float: left;

top: 0;

border: 1px;

background-color:blue;

width: 100px;

height:500px;

}

</style>

<style>

#feedback {

font-size: 1.4em;

}

#selectable .ui-selecting {

background: #FECA40;

}

#selectable .ui-selected {

background: #F39814;

color: white;

}

#selectable {

list-style-type: none;

margin: 0;

padding: 0;

width: 100%;

}

#selectable li {

margin: 3px;

padding: 1px;

float: left;

width: 80px;

height: 80px;

font-size: 4em;

text-align: center;

}

_____________________________________________

regards

Muralidha..

Re: 3 vertical divs

4 months ago

The messing up of the grid and the div's is you are using margin's and padding, and you're giving 25%,50% & 25% width to the div's. I've modified couple of things. Check it and modify as needed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
    <script type='text/javascript' src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <style type="text/css">
      #mainContainer {
        text-align: center;
        width='100%'
      }
      #categories {
        float: left;
        border: 10px;
        background-color:red;
        width: 24.5%;
        height:100%;
      }
      #album {
display: inline;
        border: 10px solid green;
        background-color:green;
        width: 49%;
        height:100%;
        float:left;
        margin:0 1px;
      }
      #messages {
        float: left;
        border: 1px;
        background-color:blue;
        width: 24.5%;
        height:100%;
      }
    </style>
    <style type="text/css">
        #feedback
        {
            font-size: 1.4em;
        }
        #selectable .ui-selecting
        {
            background: #FECA40;
        }
        #selectable .ui-selected
        {
            background: #F39814;
            color: white;
        }
        #selectable
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 450px;
        }
        #selectable li
        {
            margin: 3px;
            padding: 1px;
            float: left;
            width: 100px;
            height: 80px;
            font-size: 4em;
            text-align: center;
        }

        #dwrap div
        {
            width: 100px;
            height: 100px;
            border: 1px solid #FF00FF;
            float: left;
        }
    </style>
</head>
<body>
    <div id='mainContainer'>
        <div id='categories'>
            categories
            <div id="accordion">
                <h3>
                    Category 1</h3>
                <div>
                    <p>
                        <ul>
                            <li>sc1</li>
                            <li>sc2</li>
                            <li>sc3</li>
                        </ul>
                    </p>
                </div>
                <h3>
                    Category 2</h3>
                <div>
                    <p>
                        <ul>
                            <li>sc1</li>
                            <li>sc2</li>
                            <li>sc3</li>
                        </ul>
                    </p>
                </div>
                <h3>
                    Category 3</h3>
                <div>
                    <p>
                        <ul>
                            <li>sc1</li>
                            <li>sc2</li>
                            <li>sc3</li>
                        </ul>
                    </p>
                </div>
                <h3>
                    Category 4</h3>
                <div>
                    <p>
                        <ul>
                            <li>sc1</li>
                            <li>sc2</li>
                            <li>sc3</li>
                        </ul>
                    </p>
                </div>
            </div>
        </div>
        <div id='album'>
            <div id="dwrap">
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
                <div>
                    HELLO</div>
            </div>
        </div>
        <div id='messages'>
            messages
            <marquee behavior="scroll" direction="up" height="250" scrollamount="2" scrolldelay="10">
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
<ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
</marquee>
        </div>
    </div>
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

3 vertical divs

Replies(4)

Re: 3 vertical divs

Re: 3 vertical divs

Re: 3 vertical divs

Re: 3 vertical divs

Statistics

Tags

Actions

Related Posts