Results 1 to 12 of 12

Thread: divs and CSS

  1. #1
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts

    divs and CSS

    At this point i'm far from stressed. I want it to do something very simple but i use firebird and when testing it in IE it just screws up

    my new site design

    That URL is the site problem, if you view it in IE and then firebird if you have it you can see the problem. Firebird tends to display it fine.

    The CSS file

    There's the CSS file. Any help would be much appreciated. I've been coding CSS and HTML for quite a while now, i'm fluent in both languages but i've never worked with divs and CSS before. Someone mentioned to use some XHTML syntax but i'm not sure where to start

    Cheers

  2. #2
    '~'+'~' Enverex's Avatar
    Join Date
    Oct 2003
    Location
    West Midlands
    Posts
    903
    Thanks
    0
    Thanked
    0 times in 0 posts
    • Enverex's system
      • Motherboard:
      • Gigabyte H77n-WiFi
      • CPU:
      • Intel i5-3570K with Scythe Shuriken
      • Memory:
      • 16GB Crucial Ballistix Tactical 1600Mhz
      • Storage:
      • Samsung 840 500GB SSD
      • Graphics card(s):
      • MSI GTX 670 2GB OC Power Edition
      • PSU:
      • EVGA SuperNOVA 550W G2
      • Case:
      • Silverstone Sugo SG11
      • Operating System:
      • Windows 10 Pro 64bit
      • Monitor(s):
      • LG 42LW550T 42" TV
      • Internet:
      • BT Infinity
    Er..... whats it supposed to look like?

    NS

  3. #3
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    Well it's meant to be two boxes next to each other on the right hand side of the page. Now i've sorted it out so it will work in IE but then it won't work in firebird but then if i make it work in firebird it won't work in IE. For some reason the size of a pixel is different in IE then it is in firebird. In firebird the box will be only half way across the page but it will be on the right hand side in IE.

  4. #4
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    put the two boxes into a div with position: absolute and aligned to the right. Make the width of that outline box equal to the width of the two boxes, that way they will stay together. Alternatively just use absolute positioning for both boxes to make them pixel perfect.

    Get editCSS from http://editcss.mozdev.org. It allows you to modify style sheets in mozilla on the fly and see them update dynamically

    if you need more help let me know

  5. #5
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    i still have trouble doing it. I've applied position:absolute then aligned them to the right and one will stay on the left and one will go to the very edge of the screen =/

  6. #6
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    try this or something similar

    try this

    <html>
    <head>
    <style type="text/css">
    #header {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100px;
    border: 1px #333333 solid;}

    #mainSection {
    position:absolute;
    top: 100px;
    height: 320px;
    width: 100%;
    border: 1px #333333 solid;}
    #bar1 {
    position: absolute;
    top : 110px;
    right: 10px;
    height: 300px;
    width: 150px;
    border: 1px #333333 solid;}
    #bar2 {
    position: absolute;
    top: 110px;
    right: 170px;
    height: 300px;
    width: 150px;
    border: 1px #333333 solid;}
    </style>
    <title>Untitled Document</title>
    </head>

    <body>
    <div id="header">header here</div>
    <div id="mainSection">main section here</div>
    <div id="bar1">rightmost bar</div>
    <div id="bar2">next to rightmost bar</div>
    </body>
    </html>

  7. #7
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    well preferably i was just going to use divs and CSS for these 2 boxes since it is for a college project

    The boxes would go like |BOX1| |BOX2| in that order with a header on them like the ones you can see on my site but they don't want to align properly

    I'm going to shove them in some td's see if that will work

  8. #8
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    Ok got it sorted. I simply had to re-do all the tables and then put each box into a td to make it easier. I've still got the problem of the box screwing up in IE though. Works fine in firebird. The box should be nice neat and all tucked up but there's a gap between the header of the box and the first bit of text in main body of the box. i'm confused.

  9. #9
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    putting each box in a <td> kind of defeats the purpose of using <div> and CSS for layout. The code I pasted works fine in IE and Mozilla so I'm not sure why you couldn't use that as a basis ?

  10. #10
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    ah could do but then i realised that i had alignment problems with the navigation bar so i had to make three tables to make it right. The next site i'm going to do will have no tables in it at all i hope.

    This is just for some simple college work. The teachers don't even know any programming or markup languages it's just more of implementation of websites

  11. #11
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    I would like to know why a CSS box creates spaces either side when a form is placed within it. It's kind of like auto <br> but even more annoying. How do i tell the box to stay the same size no matter what?

  12. #12
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    forms automtically have a border around them. To remove the spacing from all forms on the site simply add this to your main style sheet

    body form {
    margin: 0px;}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •