School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 307,109
  • Replies: 841,757
  • Topics: 140,667
  • Snippets: 4,467
  • Tutorials: 1,166
  • Total Online: 2,043
  • Members: 111
  • Guests: 1,932

Welcome to Dream.In.Code
Become an Expert!

Join 307,109 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,043 people online right now. Registration is fast and FREE... Join Now!




Css trouble?

 

Css trouble?
Dannyboy997

27 Oct, 2009 - 12:37 PM
Post #1

D.I.C Head
**

Joined: 17 Apr, 2009
Posts: 77



Thanked: 2 times
My Contributions
hi i have made a few test websites and i spent a year learning html css php, etc.. and know all my websites are all different on every browser and computer with the same browser. I know my problem now but not how to resolve it. I have been using the css position:absolute rule and thats what makes it different on every browser! so if i can't use absolute what else can i use for positioning the div tags and text, etc...

Please reply!!!

User is offlineProfile CardPM
+Quote Post


arthurakay

RE: Css Trouble?

27 Oct, 2009 - 01:54 PM
Post #2

D.I.C Head
**

Joined: 17 Feb, 2009
Posts: 187



Thanked: 17 times
My Contributions
Post some links so we can see the sites. With no code and nothing to look at, I don't know what you expect us to say.
User is offlineProfile CardPM
+Quote Post

Dannyboy997

RE: Css Trouble?

27 Oct, 2009 - 02:06 PM
Post #3

D.I.C Head
**

Joined: 17 Apr, 2009
Posts: 77



Thanked: 2 times
My Contributions
here is INDEX.php
CODE

<html>

    <head>

        <title>Ironco Security Inc.</title>
    
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    

    
    </head>
    <body id='body' background='http://ai2.webatu.com/images/body.jpg'>
    
            <div class='header_wrapper'>
            
                <div id='header_title_logo'>
            
                <!--<a href='http://localhost/client2/index.php' title='Ironco Security Inc.'><img src='http://localhost/client2/images/logo.jpg' alt='Ironco Security Inc.'></a>-->
            
                    <h2>Ironco Security Inc.</h2>
            
            
                </div>
                <div id='search_engine'>
            
                    <div id='sub_search'>
            
                        <form action='search.php'>
            
                            <input type='text' name='query' size='25' id='query'><input type='submit' name='search' id='search' value='Search'>

                        </form>
                        
                    </div>
                    
                </div>
        
            </div>
            
            
            
            <p class='top_line' />
            
            
        
            
            
            <div id='navigation'>
                
                <ul id='nav'>
                
                    <li><a href='http://ai2.webatu.com/' title='1'>Services</a></li>
                    <li><a href='http://ai2.webatu.com/' title='2'>Experience</a></li>
                    <li><a href='http://ai2.webatu.com/' title='3'>Resources</a></li>
                    <li><a href='http://ai2.webatu.com/' title='4'>Careers</a></li>
                    <li><a href='http://ai2.webatu.com/' title='5'>About Us</a></li>
                    
                </ul>
                    
            </div>
    
        <div id='picture_1'>
        
            <img width='945px' height='150px' src='http://ai2.webatu.com/images/picture_1.jpg' title='Sample Picture' />
        
        </div>
        
            <div id='sub_main'>
            
                <ul id='sub_nav'>
                
                    <li id='top_nav'>Services:
                        
                        <div id='subnav1'>
                        
                            <li><a href='http://ai2.webatu.com/#' title='sublink1'>Assessments</a></li>
                            <li><a href='http://ai2.webatu.com/#' title='Link1'>Training</a></li>
                            <li><a href='http://ai2.webatu.com/#' title='Link1'>Crisis Management</a></li>
                            <li><a href='http://ai2.webatu.com/' title='Link1'>Protective Services</a></li>
                            <li><a href='http://ai2.webatu.com/' title='Link1'>Support Services</a></li>
                            
                        </div>
                    
                    </li>
                    
                    <li id='top_nav'>Resources:
                    
                        <div id='subnav2'>
                        
                            <li><a href='http://ai2.webatu.com/' title='Link1'>Contact Information</a></li>
                            <li><a href='http://ai2.webatu.com/' title='Link1'>GSA Schedules</a></li>
                            <li><a href='http://ai2.webatu.com/' title='Link1'>Brochures and Fact Sheets</a></li>
                            <li><a href='http://ai2.webatu.com/' title='Link1'>Events</a></li>
                        
                        </div>
                    
                    </li>
                
                </ul>
            
            </div>
            
            <div id='whatwedo'>
            
            <b>What We Do:</b>
            <hr />
            
                <p id='whatwedo_text'>This is the box Where you will put what your company does!
                
                    <p/>
                
                        
                        
                
                
            </div>
    
        <div id='control_1'>
            <a href='#' onclick='show_whatwedo()' id='control_1_1' title='Show This Box'>Show 'What We Do' Box!</a> <a href='#' id='control_1_2' onclick='hide_whatwedo()' title='Hide Box This Box!'>Hide This Box!</a>
        </div>
        
        <div id='news'>
        
            <b>News:</b>
            <hr />
            
                <p id='news_text'>This is the box Where you will put all the companies news!
                
                    
                    
                        <p><b>2009-09-23:</b> - Went Online!</p><p/>
        
        </div>
        
        
            <div id='control_2'>
                <a href='#' onclick='show_news()' id='control_2_1' title='Show This Box'>Show 'News' Box!</a> <a href='#' id='control_2_2' onclick='hide_news()' title='Hide Box This Box!'>Hide This Box!</a>
            </div>
        
        <div id='footer'>
        
        
        <span id='footer_left'><a href='http://ai2.webatu.com/' title='Home'>Home</a> <a href='http://ai2.webatu.com/contact.php' title='Contact Us'>Contact</a> <a href='http://ai2.webatu.com/sitemap.php' title='Site Map'>Site Map</a> <a href='http://ai2.webatu.com/terms-of-use.php' title='Terms of Use'>Terms of Use</a> <a href='http://ai2.webatu.com/privacy-policy.php' title='Privacy Policy'>Privacy Policy</a></span>
        <span id='footer_right'>Copyright © 2009 Ironco Security Inc. All rights reserved.</span>
            
        
        </div>
        
    </body>

</html>


and here is the css code
CODE


#body{
font-family:arial;
}
.header_wrapper{
position:absolute;
width:80%;
left:12%;
top:8%;    
height:35%;
}
#header_title_logo{
float:left;

}
#search_engine{
position:absolute;
float:right;
left:62%;
top:5%;
color:#424242;
width:350px;
height:32px;
background:url(http://ai2.webatu.com/images/search_background.jpg) no-repeat;
border:1px solid #FFFFFF;
}
#sub_search{
position:absolute;
top:20%;
left:25px;

}
#navigation{

}

#nav {
    list-style:none;
    position:absolute;
    padding:0;
    margin: 10px 0 20px 0;
    display: block;
    font-size: 0.9em;
    height:45px;
    top:107px;
    left:170px;
    width:80%;
    text-align:center;
    text-transform:capitalize;
    border:3px solid #0000000;
    font-family:arial;
    color:#000000;
    
    }
    #nav li {
    display: inline;
    }
    #nav li a {
    display: block;
    float:left;
    text-align:center;
    padding: 8.5px 20px;
    color: #000000;
    text-decoration: none;
    width:150px;
    background:url(http://ai2.webatu.com/images/navigation_background.jpg) repeat-x;
    top:35%;
    
    }
    #nav ul{
    margin:2px;
    padding:2px;
    color:#000000;
    
    }
    #nav ul li {
    display: inline;
    float:right;
    height:37px;
    list-style:none;
    margin-right:20px;
    position:relative;
    color:#000000;
    
    }
    #nav li a {
    color:grey;
    text-decoration: none;
    
    }
    #nav li:hover ul{
    display:block;
    width:210px;
    height:140px;
    
    }
    #nav li a:hover{
    background: url(http://ai2.webatu.com/images/navigation_background_o.jpg)  repeat-x;
    float:left;
    left:0px;
    color:#FFFFFF;
    
    }
    #nav li li{
    list-style:none;
    display:list-item;
    
    }
    #nav li ul{
    margin:1px;
    padding:1px;
    display:none;
    position:absolute;
    left:0px;
    top:32px;
    float:left;
    background: #006245  repeat-x;
    
    }
    #nav li li a:hover {
    text-decoration:underline;
    color:#fff;
    
    }
#header_title_logo h2{
color:#FFFFFF;
font-family:arial;
position:absolute;
}
.top_line{
position:absolute;
border:2px solid orange;
width:77%;
top:93px;
left:11.7%;
}
.main{
position:absolute;
width:77.3%;
border:1px solid #000000;
background:#FFFFFF;
top:21.6%;
left:11.8%;
left:11.8%;
height:50%;
}
.title #myh3{
color:orange;

}
#somelinks{
color:blue;

}

#sub_main{
width:200px;
position:fixed;
margin:12.5%;
top:13%;

}
#top_nav{
color:orange;
text-decoration:none;
}
#sub_nav{
margin-left:0;
padding-left:0;
list-style-type:none;
font-family:Arial, Helvetica, sans-serif;
text-transform:capitalize;
text-decoration:none;
}
#sub_nav li a{
display: block;
padding:3px;
width: 160px;
background:#FFFFFF;
border:1px solid #000000;
text-decoration:none;
}
#sub_nav li{
text-transform:capitalize;
}
#sub_nav li a{
color:black;

}
#sub_nav li a:hover{
background:url(http://ai2.webatu.com/images/navigation_background_o.jpg)  repeat-x;
text-decoration:none;
color:#000000;
}
#picture_1{
position:absolute;
margin:12.5%;
top:0px;
border:1px solid #000000;

}
#whatwedo{
position:absolute;
left:28%;
background:#FFFFFF;
width:300px;
height:150px;
border:1px solid #006245;
top:42%;

}
#whatwedo_text{
font-size:0.7em;
color:#006245;

}
#control_1{
font-size:0.7em;
color:blue;
font-family:arial;
position:absolute;
left:45%;
top:60%;
}
#control_1_1{
display:none;
}
#control_2{
font-size:0.7em;
color:blue;
font-family:arial;
position:absolute;
left:65%;
top:60%;
}
#news{
position:absolute;
left:55%;
background:#FFFFFF;
width:300px;
height:150px;
border:1px solid #006245;
top:42%;

}
#news_text{
font-size:0.7em;
color:#006245;

}
#footer{
position:absolute;
top:72%;
margin:12.5%;
border:1px solid #000000;
width:80%;
}
#footer_text a{
color:#FFFFBF;
font-size:0.8em;
position:relative;
left:0px;

}
#footer_left{
color:#FFFFBF;
position:relative;
top:0px;
left:0px;
}
#footer_right{
color:#FFFFBF;
position:relative;
top:0px;
float:right;
}
#footer_left a{
color:#000000;

}
#footer_left a:hover{
color:#006245;

}




thanks and if you find any link related errors e.g. <a href> i fixed all of them.
User is offlineProfile CardPM
+Quote Post

Daegan

RE: Css Trouble?

28 Oct, 2009 - 07:50 PM
Post #4

D.I.C Head
Group Icon

Joined: 17 Mar, 2009
Posts: 64



Thanked: 3 times
Dream Kudos: 25
My Contributions
Try giving pages a set width in a container item that encompasses the entire page, then use floats to position elements where they need to be.

position:absolute is in 99% of cases a TERRIBLE idea. You can use floating and width setting to solve almost all positioning in web design.
User is offlineProfile CardPM
+Quote Post

Dannyboy997

RE: Css Trouble?

29 Oct, 2009 - 01:07 PM
Post #5

D.I.C Head
**

Joined: 17 Apr, 2009
Posts: 77



Thanked: 2 times
My Contributions
thanks very much! i try that!
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/21/09 12:43PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month