Kodewerx
https://www.kodewerx.org/forum/

<div> help (css, positioning)
https://www.kodewerx.org/forum/viewtopic.php?f=5&t=925		 Page 1 of 1
Author:  Dualscreenman [ Wed Mar 07, 2007 6:42 pm ]
Post subject:  <div> help (css, positioning)
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:

Image

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.
Author:  cady_driver [ Wed Mar 07, 2007 7:21 pm ]
Post subject: 
Nice site Dualscreenman! Keep up the good work!
Author:  dexter0 [ Wed Mar 07, 2007 7:26 pm ]
Post subject: 
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.
Author:  Dualscreenman [ Wed Mar 07, 2007 7:46 pm ]
Post subject: 
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:

Image
Author:  dexter0 [ Wed Mar 07, 2007 7:49 pm ]
Post subject: 
That is how you wanted it, right?
Author:  Dualscreenman [ Wed Mar 07, 2007 7:50 pm ]
Post subject: 
No, all of them should be directly under the Top banner.
Author:  dexter0 [ Wed Mar 07, 2007 7:53 pm ]
Post subject: 
In that case I would use tables. Either that or CSS coordinate positioning. I highly recommend tables however.
Author:  Dualscreenman [ Thu Mar 08, 2007 5:16 am ]
Post subject: 
Oh, cool. It works. Tables worked beautifully.
Author:  Parasyte [ Thu Mar 08, 2007 5:39 am ]
Post subject: 
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>
Author:  Dualscreenman [ Thu Mar 08, 2007 5:53 am ]
Post subject: 
Well I'll be shitted.
That works really well. Thanks.
I guess it's apparent I'm not the best at CSS...
Author:  Dualscreenman [ Thu Mar 08, 2007 12:31 pm ]
Post subject: 
Image
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.
Author:  James0x57 [ Fri Mar 09, 2007 6:19 pm ]
Post subject: 
lol, why does it say "1337" at the bottom of your browser? XD
Author:  Dualscreenman [ Fri Mar 09, 2007 6:44 pm ]
Post subject: 
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. :(
Page 1 of 1 All times are UTC - 8 hours [ DST ]
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/