Kodewerx • View topic - <div> help (css, positioning)

View unanswered posts | View active topics

Board index » Non-Gaming/Non-Hacking » Dial 911

All times are UTC - 8 hours [ DST ]

<div> help (css, positioning)

Page 1 of 1

[ 13 posts ]

Print view

Previous topic | Next topic

Author

Message

Dualscreenman

Post subject: <div> help (css, positioning)

Posted: Wed Mar 07, 2007 6:42 pm

Komrade

Joined: Mon Oct 02, 2006 5:56 pm
Posts: 1978
Title: Mr. Bitches

Okay, I'm making this small localhost homepage for me, one that will have some links, throw out some crap from a php, and show some sort of statistics for the day. Here's a picture of what I have now:

The banner and the W3C Validator button on the bottom are okay, I need help with the stuff in between that.

The links are supposed to be at the left, the second line of text is supposed to be in the middle, and the line of text below that is supposed to be aligned ot the right.

But it isn't. It's all underneath each other. Here's the code as well as the CSS driving it:
XHTML:

Code:

<div class="mainpage">   
            <!-- Left Sidebar Menu -->
            <ul>
               <li><a href="">Link 1</a></li>
               <li><a href="">Link 2</a></li>
                  <li><a href="">Link 3</a></li>
               <li><a href="">Link 4</a></li>
               <li><a href="">Link 5</a></li>
            </ul>
            
            <!-- Middle Section Module -->
            <p>
            Junk for today goes here!
            </p>
            
            <!-- Right Sidebar Module -->
            <p>
            More sidebar crap to go here. (Aligned right)
            </p>
         </div>

CSS

Code:

div.mainpage
{
width: 100%;
text-align: center;
}

I need to know how i can get these three "modules" of sorts to be next to each other, the links aligned left, middle crap in the middle, and right stuff to the right.

_________________

<EggWerx> MetalOverlord: Dsman and lemmayoshi will be used for taco meat, ask mo he knows me.

jleemero wrote:

Being required to learn Java for a Comp Sci MAJOR is like being required to shit on a lawnmower to be an astronaut.

Top

cady_driver

Post subject:

Posted: Wed Mar 07, 2007 7:21 pm

Kunt (Banned)

Joined: Wed Jan 24, 2007 2:20 pm
Posts: 121
Location: Durant Oklahoma......Please send help!

Nice site Dualscreenman! Keep up the good work!

_________________

^courtesy of Z3R0^

Top

dexter0

Post subject:

Posted: Wed Mar 07, 2007 7:26 pm

Kommunist

Joined: Sat Oct 14, 2006 5:41 pm
Posts: 99
Location: 38.90N 77.03W

Everything is aligned in the middle because div has been assigned a CSS style telling it that it is centered. Since UL,P, and P are children of the div tag, they too will be aligned in the center. You should create 3 different CSS styles (one left, middle, and right) then assign them to their respected elements and remove the style assigned to div.

That is how I would attempt to do it anyway.

Top

Dualscreenman

Post subject:

Posted: Wed Mar 07, 2007 7:46 pm

Komrade

Joined: Mon Oct 02, 2006 5:56 pm
Posts: 1978
Title: Mr. Bitches

CSS

Code:

<style type="text/css">
            div.banner
            {
            text-align: center;
            }
            
            p.sidebarLeft
            {
            text-align: left;
            }
            
            p.middleModule
            {
            text-align: center;
            }
            
            p.sidebarRight
            {
            text-align: right;
            }
            
            div.bottombanner
            {
            text-align: center;
            }
         </style>

And

HTML

Code:

<div class="mainpage">   
            <!-- Left Sidebar Menu -->
            <p class="sidebarLeft>
            <ul>
               <li><a href="">Link 1</a></li>
               <li><a href="">Link 2</a></li>
               <li><a href="">Link 3</a></li>
               <li><a href="">Link 4</a></li>
               <li><a href="">Link 5</a></li>
            </ul>
            </p>
            
            <!-- Middle Section Module -->
            <p class="middleModule">
            Junk for today goes here!
            <p>
            
            <!-- Right Sidebar Module -->
            <p class="sidebarRight">
            More sidebar crap to go here. (Aligned right)
            <p>
         </div>
            
         <!-- Bottom Banner Module -->
         <div class="bottombanner">
            <p>
               <a href="http://validator.w3.org/check?uri=referer"><img
               src="http://www.w3.org/Icons/valid-xhtml10"
               alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
            </p>
         </div>

Yeilds:

_________________

<EggWerx> MetalOverlord: Dsman and lemmayoshi will be used for taco meat, ask mo he knows me.

jleemero wrote:

Being required to learn Java for a Comp Sci MAJOR is like being required to shit on a lawnmower to be an astronaut.

Top

dexter0

Post subject:

Posted: Wed Mar 07, 2007 7:49 pm

Kommunist

Joined: Sat Oct 14, 2006 5:41 pm
Posts: 99
Location: 38.90N 77.03W

That is how you wanted it, right?

Top

Dualscreenman

Post subject:

Posted: Wed Mar 07, 2007 7:50 pm

Komrade

Joined: Mon Oct 02, 2006 5:56 pm
Posts: 1978
Title: Mr. Bitches

No, all of them should be directly under the Top banner.

_________________

<EggWerx> MetalOverlord: Dsman and lemmayoshi will be used for taco meat, ask mo he knows me.

jleemero wrote:

Being required to learn Java for a Comp Sci MAJOR is like being required to shit on a lawnmower to be an astronaut.

Top

dexter0

Post subject:

Posted: Wed Mar 07, 2007 7:53 pm

Kommunist

Joined: Sat Oct 14, 2006 5:41 pm
Posts: 99
Location: 38.90N 77.03W

In that case I would use tables. Either that or CSS coordinate positioning. I highly recommend tables however.

Top

Dualscreenman

Post subject:

Posted: Thu Mar 08, 2007 5:16 am

Komrade

Joined: Mon Oct 02, 2006 5:56 pm
Posts: 1978
Title: Mr. Bitches

Oh, cool. It works. Tables worked beautifully.

_________________

<EggWerx> MetalOverlord: Dsman and lemmayoshi will be used for taco meat, ask mo he knows me.

jleemero wrote:

Being required to learn Java for a Comp Sci MAJOR is like being required to shit on a lawnmower to be an astronaut.

Top

Parasyte

Post subject:

Posted: Thu Mar 08, 2007 5:39 am

Krew (Admin)

Joined: Sun Oct 01, 2006 9:26 pm
Posts: 3768
Title: All in a day's work.

Negative!

Paragraphs (like divisions, as I told you on IRC before I went to sleep) are block-level elements. They always have an appended line break. You can use display: inline; to change them to inline elements, or you can use an inline element like span:

Code:

<style type="text/css">
div.banner {
   text-align: center;
}

div.banner span.banner {
   font-size: 50px;
}

div.mainpage span.sidebarLeft {
   float: left;
   width: 20%;
}

div.mainpage span.middleModule {
   float: left;
   width: 60%;
   text-align: center;
}

div.mainpage span.sidebarRight {
   float: right;
   width: 20%;
}

div.mainpage div.endstop {
   clear: both;
}

div.bottombanner {
   text-align: center;
}
</style>

And HTML:

Code:

          <!-- Top Banner Module -->
          <div class="banner">
            <span class="banner">Temporary Thing</span>
          </div>

          <div class="mainpage">
            <!-- Left Sidebar Menu -->
            <span class="sidebarLeft">
            <ul>
               <li><a href="">Link 1</a></li>
               <li><a href="">Link 2</a></li>
               <li><a href="">Link 3</a></li>
               <li><a href="">Link 4</a></li>
               <li><a href="">Link 5</a></li>
            </ul>
            </span>
            
            <!-- Middle Section Module -->
            <span class="middleModule">
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            Junk for today goes here!<br />
            </span>
            
            <!-- Right Sidebar Module -->
            <span class="sidebarRight">
            More sidebar crap to go here. (Aligned right)
            </span>
            
            <div class="endstop"></div>
         </div>
            
         <!-- Bottom Banner Module -->
         <div class="bottombanner">
            <p>
               <a href="http://validator.w3.org/check?uri=referer"><img
               src="http://www.w3.org/Icons/valid-xhtml10"
               alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
            </p>
         </div>

_________________
I have to return some video tapes.

Feed me a stray cat.

Top

Dualscreenman

Post subject:

Posted: Thu Mar 08, 2007 5:53 am

Komrade

Joined: Mon Oct 02, 2006 5:56 pm
Posts: 1978
Title: Mr. Bitches

Well I'll be shitted.
That works really well. Thanks.
I guess it's apparent I'm not the best at CSS...

_________________

<EggWerx> MetalOverlord: Dsman and lemmayoshi will be used for taco meat, ask mo he knows me.

jleemero wrote:

Being required to learn Java for a Comp Sci MAJOR is like being required to shit on a lawnmower to be an astronaut.

Top

Dualscreenman

Post subject:

Posted: Thu Mar 08, 2007 12:31 pm

Komrade

Joined: Mon Oct 02, 2006 5:56 pm
Posts: 1978
Title: Mr. Bitches

Heh, I'll probably make some different php to do something more useful than the random picture generator <.<
But it works now.
I guess I need to learn how to make sexy graphics now.

_________________

<EggWerx> MetalOverlord: Dsman and lemmayoshi will be used for taco meat, ask mo he knows me.

jleemero wrote:

Being required to learn Java for a Comp Sci MAJOR is like being required to shit on a lawnmower to be an astronaut.

Top

James0x57

Post subject:

Posted: Fri Mar 09, 2007 6:19 pm

Krew (Admin)

Joined: Sun Oct 01, 2006 9:46 pm
Posts: 2331
Location: *poof*
Title: The Mad Hacker

lol, why does it say "1337" at the bottom of your browser? XD

_________________

Top

Dualscreenman

Post subject:

Posted: Fri Mar 09, 2007 6:44 pm

Komrade

Joined: Mon Oct 02, 2006 5:56 pm
Posts: 1978
Title: Mr. Bitches

It's the 1337speak translator extension.

But I've gotten good enough that I don't need it anymore. It's a bit too unreadable to be funny anyway.

_________________

<EggWerx> MetalOverlord: Dsman and lemmayoshi will be used for taco meat, ask mo he knows me.

jleemero wrote:

Being required to learn Java for a Comp Sci MAJOR is like being required to shit on a lawnmower to be an astronaut.

Top

Page 1 of 1

[ 13 posts ]

Board index » Non-Gaming/Non-Hacking » Dial 911

All times are UTC - 8 hours [ DST ]

Who is online

Users browsing this forum: No registered users and 61 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum