Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with making a css layout//html page

    I used a css layout generator to make the code below.
    How do I 'insert' content into the sections laid out in the css layout code below using HTML?
    I'm imagining it would be something like classid=#header but i'm not exactly sure how it works. Any help is appreciated!

    Code:
    html, body{ 
     margin:0; 
     padding:0; 
     text-align:center; 
    } 
     
    #pagewidth{ 
     width:90%; 
     text-align:left;  
    margin-left:auto; 
     margin-right:auto;  
    } 
     
    #header{
     position:relative; 
     height:150px; 
      background-color:#FFFFFF; 
     width:100%;
    } 
     
    #leftcol{
     width:10%; 
     float:left; 
     position:relative; 
     background-color:#FCFFFF; 
     }
     
    #twocols{
     width:90%; 
     float:right; 
     position:relative; 
      }
     
    #rightcol{
     width:12%; 
     float:right; 
     position:relative; 
     background-color:#FCFFFF;
     }
    
    #rightcol2{
     width:12%; 
     float:right; 
     position:relative; 
     background-color:#FCFFFF;
     }
     
    #maincol{background-color: #FCFFFF;  
     float: left; 
     display:inline; 
     position: relative; 
     width:88%; 
     }
     
    #footer{
     height:75px; 
      background-color:#FFFFFF; 
     clear:both;
     } 
     
    
     
     /* *** Float containers fix:
     http://www.csscreator.com/attributes/containedfloat.php *** */ 
    .clearfix:after {
     content: "."; 
     display: block; 
    height: 0; 
     clear: both; 
     visibility: hidden;
     }
     
    .clearfix{display: inline-block;}
    
    /* Hides from IE-mac \*/
    * html .clearfix{height: 1%;}
    .clearfix{display: block;}
    /* End hide from IE-mac */  
    
    
     
     /*printer styles*/ 
     @media print{ 
    /*hide the left column when printing*/ 
    #leftcol{display:none;} 
    
    /*hide the right column when printing*/ 
    #rightcol{display:none;} 
    #twocols, #maincol{width:100%; float:none;}
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    # in css indicates an id, .indicates a class. So your html might be something like:

    Code:
    ...
    <div id="pagewidth" class="clearfix">
        <div id="header">
         ...content...
        </div>
    </div>
    etc.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thx
    This is all starting to make a lot more sense.
    So the div pagewidth sort of opens the page, and then the header, content, and everything else is inside of it!

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Another question;

    I'm not sure how to refer to an image I've uploaded onto my server. I think it would be better for the image to be located on the server rather than photobucket.

    I used Firefox's FTP add-on to upload the image in a folder to the public_html folder.

    Is the image file allowed to have spaces in it? whats the html code to refer to the server to bring up the image. I tried googleing for the answer but my searches haven't shown any useful answers.

    Thanks!

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    http://www.w3schools.com/html/html_images.asp

    Much better to remove the spaces.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    http://www.w3schools.com/html/html_images.asp

    Much better to remove the spaces.
    Thanks for the link!

    So the html code would be:
    Code:
    <img src="/public_html/njfail_images/njfail_banner.JPG" border="0" alt="nice job failure">
    Or is the /public_html field assumed and not needed there? or does it HAVE to be in the 'images' folder, so the 'images' part is assumed?

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You don't need the public_html - that's the "root" folder of your website and everything is within that. Within that you can have whatever you want - images don't have to be in a folder called images - it's just neater that way.

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm having 3 problems with my layout;
    #1 the middle content is overlapping the left column

    #2 some of the background isn't black, is there a css code to make the entire background of the page black?

    #3 is there a css code to center the top banner image and the top banner ad? or do I just add <center> banner code </center> to the html file?

    I'd really like the page to be:
    left col ### px, mid col ### px, right col ###px, and then the margins act as a buffer, and if the person's screen is lets say 1600x1200 resolution, then the margins will be larger than if a person has a 1280x1080 resolution. how would I do that?

    the site is NJFAIL.COM

    this is my css layout:
    Code:
    html, body{ 
     margin:0; 
     padding:0; 
     text-align:center; 
    } 
     
    #pagewidth{ 
     width:90%; 
     text-align:left;  
    margin-left:auto; 
     margin-right:auto;
    } 
     
    #header1{
     position:relative;
     height:100px;
      background-color:#000000;
     width:100%;
    }
    
    #header2{
     position:relative; 
     height:100px; 
      background-color:#000000; 
     width:100%;
    } 
    
    #header3{
     position:relative;
     height:100px;
      background-color:#000000;
     width:100%;
    }
     
    #leftcol{
     width:10%; 
     float:left; 
     position:relative; 
     background-color:#000000; 
     }
     
    #maincol{background-color: #000000;  
     float: left; 
     display:inline; 
     position: relative; 
     width:75%; 
     }
     
    #rightcol{
     width:125px; 
     float:right; 
     position:relative; 
     background-color:#000000;
     }
    
    #footer{
     height:75px; 
      background-color:#000000; 
     clear:both;
     } 
     
    #footermenu a:hover {
    	color: #CCCCCC;
    	text-decoration: underline;
    	}
    
    #footermenu a:link {
    	color: #CCCCCC;
    	}
    
    #footermenu a:visited {
    	color: #FFFFFF;
    	}
    #footermenu a:active {
    	color: #333333;
    	}
     
    #yellbox { width: 300px; text-align: center; }
    #yellbox iframe { height: 250px; border: 1px inset; margin: 0px; width: 90%; }
    #yellbox input { width: 90%; }
    #yellbox button { height: 25px; }
    
     /* *** Float containers fix:
     http://www.csscreator.com/attributes/containedfloat.php *** */ 
    .clearfix:after {
     content: "."; 
     display: block; 
    height: 0; 
     clear: both; 
     visibility: hidden;
     }
     
    .clearfix{display: inline-block;}
    
    /* Hides from IE-mac \*/
    * html .clearfix{height: 1%;}
    .clearfix{display: block;}
    /* End hide from IE-mac */  
    
    
     
     /*printer styles*/ 
     @media print{ 
    /*hide the left column when printing*/ 
    #leftcol{display:none;} 
    
    /*hide the right column when printing*/ 
    #rightcol{display:none;} 
    #twocols, #maincol{width:100%; float:none;}
    }
    This is my html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <LINK REL=StyleSheet HREF="njstyle.css" TYPE="text/css" MEDIA=screen>
    <link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
    <title>Starcraft II Gaming News</title>
    <meta name="Copyright" content="&copy; 2010 NJFAIL">
    <meta http-equiv="Content-Language" content="EN-US">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Description" content="NJFAIL is a community site focused on Starcraft II, featuring pro-gaming news and information, videos, strategy, and replays, casts, and the latest info from Blizzard.">
    <meta name="keywords" content="Starcraft II 2 sc2 wc3 warcraft blizzard best rts computer game tournaments prizes gosu pro replays casts free real time strategy video videogame gaming community clan league guild terran zerg protoss" />
    </head>
    <body>
    <div id="pagewidth" class="clearfix">
    	<div id="header1">
    		<img src="njfail_images/njfail_banner.JPG" border="0" alt="nice job failure">
    	</div>
    	<div id="header2">
    		<!-- Begin: AdBrite, Generated: 2010-08-13 18:49:49  -->
    		<script type="text/javascript">
    		var AdBrite_Title_Color = '0000FF';
    		var AdBrite_Text_Color = '000000';
    		var AdBrite_Background_Color = 'FFFFFF';
    		var AdBrite_Border_Color = 'CCCCCC';
    		var AdBrite_URL_Color = '008000';
    		try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
    		</script>
    		<span style="white-space:nowrap;"><script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1700638&zs=3732385f3930&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
    		<a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1700638&afsid=1"><img src="http://files.adbrite.com/mb/images/adbrite-your-ad-here-leaderboard.gif" style="background-color:#CCCCCC;border:none;padding:0;margin:0;" alt="Your Ad Here" width="14" height="90" border="0" /></a></span>
    		<!-- End: AdBrite -->
    	</div>
    	<div id="header3">
    		<ul id="menu">
    		<li><a href="http://www.njfail.com/" target="_self">Home</a></li>
    		<li><a href="http://www.njfail.com/forums/" target="_self">Forums</a></li>
    		<li><a href="http://www.njfail.com/tournaments/" target="_self">Tournaments</a></li>
    		<li><a href="http://www.njfail.com/replays" target="_self">Replays</a></li>
    		<li><a href="http://www.njfail.com/calender" target="_self">Calender</a></li>
    		<li><a href="http://www.njfail.com/pro" target="_self">NJFAIL Pro</a></li>
    		</ul>
    	</div>
    	<div id="leftcol">
    
    		<div id="yellbox">
    		 <script language="Javascript" type="text/javascript" src="http://www.yellbox.com/ybscript.js"></script>
    		 <noscript><p>Nintendo <a href="http://www.wiisworld.com">Wii</a> is the most popular console around right now. You will need to <a href="http://convertpic.com">convert images</a> from GIF to JPG at some stage. The good thing about <a href="http://txtformat.com">text formatting</a> at TXTformat is it's really quick and reliable. Brighten up your desktop with <a href="http://www.wallpaperist.com">wallpapers</a> from the Internet. All my favorite <a href="http://www.avatarist.com">avatars</a> are on Avatarist. Look up lines and dialog from movies using online <a href="http://www.imsdb.com">movie scripts</a>. Big money in watching <a href="http://www.rateslist.com">exchange rates</a> and trading currency.</p></noscript>
    
    		 <iframe name="ybframe" frameborder="0" allowtransparency="true" src="http://www.yellbox.com/yellbox.php?name=njfail"></iframe>
    
    		 <form action="http://www.yellbox.com/addmessage.php" method="post" target="ybframe" name="yellform" style="margin: 1px;"> 
    		  <input type="hidden" name="sub_username" value="njfail" />
     		  <input name="sub_name" value="Name" maxlength="10" onfocus="if(this.value == 'Name')this.value = '';" /><br />
    		  <input name="sub_message" value="Message" maxlength="255" onfocus="if(this.value == 'Message')this.value = '';" /><br />
    		  <button onclick="return clearMessageBox();" style="width: 70%;">Say</button>	
    		  <button onclick="makeNewWindow(); return false;" style="width: 20%; border: none; background-color: transparent;"><img src="http://www.yellbox.com/images/smile.gif" alt="Smileys" /></button> 
    		 </form>
    		</div>
    
    		<br />
    
    		<!-- Begin: AdBrite, Generated: 2010-08-14 18:41:20  -->
    		<script type="text/javascript">
    		var AdBrite_Title_Color = '0033FF';
    		var AdBrite_Text_Color = '0099FF';
    		var AdBrite_Background_Color = '000000';
    		var AdBrite_Border_Color = '000000';
    		var AdBrite_URL_Color = '0033FF';
    		try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
    		</script>
    		<script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1729706&zs=3330305f323530&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
    		<div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1729706&afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div>
    		<!-- End: AdBrite -->
    	</div>
    
    	<div id="maincol">
    		<font color="0099ff">
    		<p>You'll notice some huge changes with the site's layout and features during the next week or so. If you have any suggestions or problems, feel free to voice them on the forums!</p>
    		</font>
    	</div>
    	
    	<div id="rightcol">
    		<font color="0099ff">
    		<p>Under Construction</p>
    		</font>
    		<br />
    		<br />
    		<!-- Begin: AdBrite, Generated: 2010-08-14 19:00:26  -->
    		<script type="text/javascript">
    		var AdBrite_Title_Color = '0033FF';
    		var AdBrite_Text_Color = '0099FF';
    		var AdBrite_Background_Color = '000000';
    		var AdBrite_Border_Color = '000000';
    		var AdBrite_URL_Color = '0033FF';
    		try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
    		</script>
    		<script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1729713&zs=3132305f363030&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
    		<div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1729713&afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div>
    		<!-- End: AdBrite -->
    	</div>
    
    	<div id="footer">
    		<div id="footermenu">
    			<ul>
    				<a href="sitemap.html">Site Map</a>
    				(&nbsp;)(&nbsp;)(&nbsp;)
    				<a href="privacypolicy.html">Privacy Policy</a>
    				(&nbsp;)(&nbsp;)(&nbsp;)
    				<a href="tournamentpolicy.html">Tournament Policy</a>
    				(&nbsp;)(&nbsp;)(&nbsp;)
    				<a href="contact.html">Contact Us</a>
    			</ul>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Last edited by njfail; 08-16-2010 at 03:53 AM.

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I've been trying to fix the overlapping problem;
    I set the values of the left and right column to px instead of %.
    I deleted the value for width for the center column. it works fine on my computer's screen, but if I change my internet browser's window size, the causes the center content to go below the left column, and the right column to go below that...

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I fixed the background, I was reading a tutorial and it said 'background-color', and i thought -color meant #000000, i didn't know I was suppose to keep the word color there, lol.

  • #11
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I added <center></center> to the top 3 headers and it centers the 2 banners but it doesn't center the menu buttons.

    I used a 'menu button generator' to produce the css and html for the menu, any idea how to center it? the css code for the menu is:

    Code:
    ul#menu
    {
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	width:auto;
    	position:relative;
    	display:block;
    	height:30px;
    	font-size:12px;
    	font-weight:bold;
    	background:transparent url(images/nav_bg.png) repeat-x top left;
    	font-family:Arial, Helvetica, sans-serif;
    	border-bottom:1px solid #000000;
    	border-top:1px solid #000000;
    }
    
    ul#menu li
    {
    	display:block;
    	float:left;
    	margin:0;
    	padding:0;
    }
    	
    ul#menu li a
    {
    	display:block;
    	float:left;
    	color:#999999;
    	text-decoration:none;
    	font-weight:bold;
    	padding:8px 20px 0 20px;
    }
    	
    ul#menu li a:hover
    {	
    	color:#FFFFFF;
    	height:22px;
    	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;		
    }
    	
    
    ul#menu li a.current
    {
    	display:inline;
    	height:22px;
    	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;	
    	float:left;
    	margin:0;
    }

  • #12
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    anyone?

  • #13
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The main problem I'm having right now is when the window is 'restore downed' (resized) the middle content and right content go below the left content.

    I would like it to add scroll bars when the window is too small to display the content, instead of repositioning it!

    I've been searching the forums, and can't seem to find a solution that works.

  • #14
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Apparently the css container did work, I just didn't clear my cache so it wasn't picking up the new layout!

  • #15
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by njfail View Post
    Apparently the css container did work, I just didn't clear my cache so it wasn't picking up the new layout!

    Now this has been an easy solution! Congrats, mate! Wish I would get my css issues sorted out this nicely....


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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