SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css layout (site check)

    Hello,

    I finished my site but I was wondering if you guys can look at the site and see if there is any problems and possibly how to fix it to? (Browser to be checked on mostly if possible are IE, Firefox, and Safari.)

    Here is the url http://members.cox.net/19kash88/sd/index.html

    Also,

    On the text part I want it to be able to go beneath the poll box then continue from left to right. How do I do that?

    Thanks,

  2. #2
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you got to enclose it with <div>'s
    and then use float

    this is just an example
    but i didn't care about factorizing the css
    (was practising for speed of development more than anything else)
    so forgive me for the code mess

    nevertheless its there and it works.


  3. #3
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what you are talking about. I did enclose them with divs and float them but they are not going with the flow.

    Ellobrate on it please

  4. #4
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i gave you an example
    you just have to reverse-engineer my code
    it's there if you want it

    to flow then a <div> have to be inside a <p>

    <p><div>box</div> text text text text </p>

    to correct stuff you may need extra layers of divs.
    eventually the solution works on (probably) all modern browsers


  5. #5
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you please do it on my codes becasue i tried that but it didn't work?

    Also, do you think i should put the box on one div and the other on the different div. THen div with in them. What is your opinion on that?

    THanks

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    i am not shure how you want it, so here is a test

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Saint Demiana Coptic Orthodox Church in San Diego, California</title>
    <link href="css/sd.css" rel="stylesheet" type="text/css">
    
    
    
    </head>
    
    <body>
    	
    <div id="container">
    		 
    		  <div id="mainnav">
    				<ul id="navlist">
    					<li><a href="#">home</a></li>
    					<li><a href="#">articles</a></li>
    					<li><a href="#">church schedule</a></li>
    					<li><a href="#">forums</a></li>
    					<li><a href="#">our priest</a></li>
    					<li><a href="#">presentations</a></li>
    					<li><a href="#">contact us</a></li>
    				</ul>
    		  </div>
    		
    		<div class="header"></div>
    		
    		
    		
    		
    				<div id="content">
    				<div id="websitenews"></div><div id="clear"></div>
    
    <div class="sidenav">
    <strong>Navigations</strong>
    <ul id="secondnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Saint Demiana</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="Contact.html">Audio</a></li>
    <li><a href="#">Church Schedule</a></li>
    <li><a href="#">Forums</a></li>
    <li><a href="#">Learn Coptic</a></li>
    <li><a href="#">Our Priest</a></li>
    <li><a href="#">Presentations</a></li>
    <li><a href="#">Photo Gallery</a></li>
    <li><a href="#">Sunday School</a></li>
    <li><a href="#">Youth</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    				
    <div id="serach" >Search box </div>
    				
    <div id="poll" >Poll </div>
    				
    				
    		
    		       
    		 <p>&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure doloesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui offr in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit icia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot; </p>
      </div>
      
     
    <div id="right"></div>
    
    
            <div id="footer"><a href="#">articles</a> |
    					<a href="#">church schedule</a> |
    					<a href="#">forums</a> |
    					<a href="#">our priest</a> |
    					<a href="#">presentations</a> |
    					<a href="#">contact us</a><br>
       2005 StDemiana.com</div>
    		
    </div>
    	
    </body>
    
    </html>
    Code:
    body {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	margin:0px auto 0px auto;
    	background-image:url(../media/images/bg/bg.jpg);
    	background-repeat:repeat;
    	background-attachment: fixed;
    
    }
    
    p {
    	text-align:justify;
    	line-height: 14px;
    }
    
    
    #container {
    	width: 770px;
    	height:auto;
    	padding:10px 10px 0 10px;
    	margin: 0 auto;
    	background-image:url(../media/images/bg/contentbg.gif);
    	background-repeat:repeat-y;
    	
    }
    
    #mainnav {
    	text-align:right;
    	padding-top:1px;
    	padding-right: 20px;
    	padding-bottom:10px;
    	
    
    	
    }
    
    #navlist li {
    	display: inline;
     	list-style-type: none;
     	padding-right: 10px;
     	padding-top:10px;
    
    }
    
    ul#navlist a:link, ul#navlist a:visited{
     	text-decoration:underline;
     	color: #990000;
    
    }
    
    ul#navlist a:hover, ul#navlist a:active{
     	text-decoration: none;
     	color: #74150a;
    
    }
    
    .header {
    	background-image:url(../media/header/header.jpg);
    	background-repeat:no-repeat;
    	background-position:center;
    	height:125px;
    	width: 740px;
    	padding:5px;
    	
    }
    
    #websitenews {
    	background-image:url(../media/header/websitenews.jpg);
    	background-repeat:no-repeat;
    	float:right;
    	height:50px;
    	width:450px;
    	padding-right:20px;
    	margin-top:10px;
    	padding-left:20px;
    	padding-bottom:5px;
    	
    }
    
    #content {
    	width:740px;
     	clear: right;
    	padding:1px 9px 10px 5px;
    
    	
    }
    	
    #right {
    	clear:right;
    	
    }
    
    #clear {
    	clear:both;
    	
    }
    
    .sidenav {
    	margin-top:-60px;
    	margin-left:0px;
    	margin-right:15px;
    	width:210px;
    	height:300px;
    	background-color:#f1f1f1;
    	clear: both;
    	border: 1px solid black;
    	float: left;
    	
    }
    
    #footer {
            font-size: 10px;
            height: 50px;
            border-top:1px solid black;
            vertical-align: bottom;
    		
    		width: 750px;
            color: #333300;
            text-align: center;
            line-height: 25px;
            background: #e4e4d8;
          	clear: both;
      }
    
    
    a:link {
     	text-decoration:underline;
     	color: #990000;
    }
    a:visited {
     	text-decoration:underline;
     	color: #990000;
    }
    a:hover {
     	text-decoration: none;
     	color: #74150a;
    }
    a:active {
     	text-decoration: none;
     	color: #74150a;
    }
    
    #serach {
    	margin-left:0px;
    	margin-right:15px;
    	margin-top:10px;
    	width:210px;
    	height:100px;
    	background-color:#f1f1f1;
    	clear: both;
    	border: 1px solid black;
    	float: left;
    
    	
    }
    
    #secondnav {
    	list-style-image:url(../media/images/bullet/arrow.gif);
    	list-style-position: outside;
    	list-style-type:none;
    	line-height:20px;
    	
    
    }
    
    #secondnav ul {
    	color: #000;
    	font-size: 13px;
    	font-weight: bold;
    	margin:0px;
    
    }
    
    #secondnav li a, #secondnav li a:visited {
    	padding: 0px 0px 0px 0px;
    	width: 200px;
    }
    
    #poll {
    	margin-left:0px;
    	margin-right:15px;
    	margin-top:10px;
    	width:210px;
    	height:400px;
    	background-color:#f1f1f1;
    	clear: both;
    	border: 1px solid black;
    	float: left;
    	margin-bottom: 10px;
    
    	
    }


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
  •