...

View Full Version : Help with making a css layout//html page



njfail
08-12-2010, 11:26 PM
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!



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;}
}

SB65
08-13-2010, 09:12 AM
# in css indicates an id, .indicates a class. So your html might be something like:


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


etc.

njfail
08-13-2010, 08:32 PM
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!

njfail
08-14-2010, 01:59 AM
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!

SB65
08-14-2010, 10:47 AM
http://www.w3schools.com/html/html_images.asp

Much better to remove the spaces.

njfail
08-14-2010, 11:40 PM
http://www.w3schools.com/html/html_images.asp

Much better to remove the spaces.

Thanks for the link!

So the html code would be:

<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?

SB65
08-15-2010, 08:51 AM
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.

njfail
08-16-2010, 04:27 AM
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:



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


<!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=encodeUR IComponent(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=encodeUR IComponent(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=encodeUR IComponent(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>

njfail
08-16-2010, 04:41 AM
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...

njfail
08-16-2010, 04:48 AM
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.

njfail
08-16-2010, 05:01 AM
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:



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;
}

njfail
08-17-2010, 07:19 AM
anyone?

njfail
08-17-2010, 10:15 PM
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.

njfail
08-18-2010, 12:13 AM
Apparently the css container did work, I just didn't clear my cache so it wasn't picking up the new layout!

mikehandersons
08-18-2010, 12:54 PM
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.... :thumbsup:

njfail
08-18-2010, 11:21 PM
Now this has been an easy solution! Congrats, mate! Wish I would get my css issues sorted out this nicely.... :thumbsup:

what is your problem? maybe I can help, i'm starting to feel like an expert at this stuff :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum