Advanced Search

Results 1 to 7 of 7

Thread: Ack! now I have a new problem with my divs!

  1. #1
    Join Date
    Mar 2007
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ack! now I have a new problem with my divs!

    Well, my old problem still exists so check that one out also. But now, on my site, the div on the left sticks out for some reason. And I cannot seem to fix this one either. All I was doing, was trying to make my stuff valid. I edited one thing and... kablam. Now I can't fix it even by going back to what I had originally.

    The site is http://cyanideperfection.net and the stylesheet can be found at http://cyanideperfection.net/styles/sleek.css

  2. #2
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    What did you change that 'one thing' to and from?
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  3. #3
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    send your HTMl with it and I think I can fix it

  4. #4
    Join Date
    Mar 2007
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I fixed "float:none" because I had center (I thought center was a value for float then later realized it wasn't) and I added padding to the columns. And how is the HTML going to do anything? I only changed the CSS.

  5. #5
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    so I can see what your css is connected to. it's easier to fix if you're looking at both. Also you need to get a book on CSS.

  6. #6
    Join Date
    Mar 2007
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You couldn't hit "view page source"?


    HTML Code:
    <body>
    <div id="container">
    
    <div id="top">
    <img src="http://www.cyanideperfection.net/images/head.png" alt="top" />
    </div>
    
    <div id="logo">
    <center>
    <img src="http://cyanideperfection.net/styles/logo.gif" alt="logo" />
    </center>
    </div>
    
    <div id="navigation">
    <center>
    <a href="http://cyanideperfection.net/">Home</a>
    &nbsp;&nbsp;&nbsp;
    <a href="http://www.cyanideperfection.net/gallery/index.php">Gallery</a>
    
    &nbsp;&nbsp;&nbsp;
    <a href="http://www.cyanideperfection.net/blog.php">Updates/News</a>
    &nbsp;&nbsp;&nbsp;
    <a href="http://www.cyanideperfection.net/bio.php">Bio</a>
    &nbsp;&nbsp;&nbsp;
    <a href="http://www.cyanideperfection.net/contact.php">Contact Me</a>
    </center>
    <br />
    </div><div id="lcol">
    <img class="me" src="http://cyanideperfection.net/images/thumb.jpg" alt="me"> I am me! I am my own person. I don't take anything from anyone! 
    </div>
    <div id="rcol">
    <p>
    
    Hello there! Welcome to my site. This is where I can display my works to the world, or sneak into seclusion from society. My gallery is just beginning to from, but I love it and I am constantly helping it grow. I am also here to help other photographers. I offer a place to put your photographs. So check out the <a href="apply/host.php">hosting</a> page to find out more.
    </p>
    </div>
    
    
    <div id="colbottom">
    
    </div>
    
    </div>
    </body>
    </html>

  7. #7
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    okay that was a bit hard. oh I think this is what your main problem was. when you start adding styles to your page before you go any farther with anything make sure everything you add styles to; add their possition first.

    that is the first thing you must do.I think I fixed your page but don't add position to to anything else I was able to fix it with out having to mess with your code to much.



    you should also use

    top down right and left more then using margin when ever you can

    Code:
    <style type="text/css">
    body, html{
    background-color: #000;
    background-image: url();
    }
    
    div, p{
    font-size: 1em;
    font-family: "Georgia";
    color: #000;
    background-color: #fff;
    }
    
    #logo{
    background-color: #fff;
    background-image: url();
    }
    
    #navigation{
    background-color: #fff;
    background-image: url();
    }
    
    #lcol, #rcol{
    background-color: #fff;
    background-image: url();
    }
    
    #colbottom{
    background-color: #fff;
    background-image:
    url('foot2.png');
    }
    
    #top{
    background-color: #fff;
    background-image:
    url('foot2.png')
    background-repeat: none;
    }
    
    /* link formatting */
    a:link{ 
    	text-decoration: underline; 
    	color: #000;
            background-color: #fff; }
    
    a:visited{ 
    	text-decoration: underline; 
    	color: #000;
            background-color: #fff; }
    
    a:hover{ 
    	text-decoration: underline; 
    	color: #000; 
            background-color: #fff; }
    
    a:active{ 
    	text-decoration: underline; 
    	color: #000;
            background-color: #fff; }
    
    /* Structure */
    
    #container{
    	background-color: #fff;
    	left: 0%;
    	margin-left: 154px;
    	width: 706px;
    	z-index: 1;
    	position: absolute;
    	top: 100px;
    }
    
    #logo{
    left: 50%;
    width: 700px;
    z-index: 2;
    }
    
    #navigation{
    left: 50%;
    width: 700px;
    z-index: 2;
    padding: 3px;
    }
    
    #lcol{
    float: left;
    width: 226px;
    z-index: 2;
    overflow: auto;
    padding: 2px;
    }
    
    #rcol{
    float: right;
    width: 428px;
    z-index: 2;
    overflow: auto;
    border-left: 2px double;
    }
    
    #colbottom{
    width: 600px;
    margin-left: -8px;
    z-index: 2;
    }
    
    #top{
    	width: 619px;
    	margin-left:-6px;
    	z-index: 2;
    	position: absolute;
    	top: -47px;
    }
    
    #imggal{
    float: none;
    width: 690px;
    z-index: 2;
    padding-left: 5px;
    padding-right: 5px;
    border-left: 0px double #fff;
    }
    
    /* Various Tags */
    
    #logo .img{
    background-color: #fff;
    border: 0px solid #000;
    }
    
    #rcol .img{
    border: 5px solid #fff;
    }
    
    img.me(
    width: 100px;
    height: 133px;
    vertical-align: middle;
    )
    
    </style>

Bookmarks

Posting Permissions

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