A little CSS/html help...?

penski · 24 Dec 2008 at 15:29

Hey,

I'm relearning CSS after about four years and my brain's dead.

I have:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>...</TITLE>
    <STYLE type="text/css">
      BODY { height: 5in } 
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #main {
        position: fixed;
        width: 775px;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 20px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY BACKGROUND="/images/backgroundplain.gif">
    <DIV id="header">  </DIV>
    <DIV id="sidebar">   </DIV>
    <DIV id="main">  </DIV>
    <DIV id="footer">  </DIV>
  </BODY>
</HTML>

All I want to do is use sidebar links to load seperate pages (currently located on subdomains blog.xxxxxxxxxxxxxxx.com and forum.xxxxxxxxxxxxxxxxxx.com) into the main DIV (which is 775px wide, the width of my forum and blog for this site)

How do I do it? I've had a complete brainfart. Do I need to use a 'load in' style command?

*n

LiE · 24 Dec 2008 at 15:53

I thought this was done with php?

penski · 24 Dec 2008 at 15:54

Just thought of something; If I do this, it is going to have to load EVERYTHING at launch of index.html

Should I just create individual *.html files with identical layouts and different 'content' in the main DIV? That way, I can have index.html load with the blog in the main div, and then get 'index2.html' with the forum in the main div, loaded via a simple a href in the sidebar....

Or am I still barking up the wrong tree?

*n

penski · 24 Dec 2008 at 15:54

msm722 said:
I thought this was done with php?

Yeah but I don't know PHP

*n

knowledge123 · 24 Dec 2008 at 16:01

Are you referring to something like this ?

penski · 24 Dec 2008 at 16:29

knowledge123 said:
Are you referring to something like this ?

Yarse...Although could iFrames be used?

*n

knowledge123 · 24 Dec 2008 at 16:40

penski said:
Yarse...Although could iFrames be used?

*n

I would have thought so

No harm in trying it.

penski · 24 Dec 2008 at 17:23

Had a rethink...

Just gonna use an iFrame within div="main" to show the blog and a link in the blog header to launch the forum.

One thing though...

Code:

/*
Theme Name: Plainscape
Theme URI: http://srinig.com/wordpress/themes/plainscape/
Description: A plain and simple 

theme that just works. Fixed width, two columns, left sidebar, standards compliant.
Version: 1.0
Author: Srini G
Author 

URI: http://srinig.com/wordpress/
Tags: fixed width, two columns, right sidebar, widgets, gravatars, blue, white, 

simple, minimalist, clean, valid XHTML, valid CSS

	The CSS, XHTML and design is released under GPL:
	

http://www.opensource.org/licenses/gpl-license.php

*/



body {
	font-size: 62.5%; /* Resets 1em to 10px */
	

font-family: 'Lucida Grande', Sans-Serif;
	color:#555;
	}

small {
	font-family: Arial, Helvetica, Sans

-Serif;
	font-size: 0.8em;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Arial, 

Sans-Serif;
	font-weight: bold;
	text-transform:uppercase;
}

h1 { font-size: 2.4em; }
h2 { font-size: 2em; }
h3 { 

font-size: 1.2em; }
h4 { font-size: 1em; }

pre {
	overflow:auto;
}

acronym, abbr
{
	font-size: 0.9em;
	letter-

spacing: .07em;
	cursor: help;
	border-bottom: 1px dashed #999;
}

strong {	
	color:#666;
}

a {
	color: #26a;
	

text-decoration: none;
}


a:hover {
	background:#ffc;
}


hr {
	display: none;
	}

a img {
	border: none;
	}


/* 

Layout */

body {
	margin: 0;
	padding: 0;
}

#page {
	margin: 0 auto;
	padding: 0;
	width: 600px;
}

#header {
	margin: 0 20px;
	padding: 30px 0;
}

#wrapper {
	padding:20px;
}

#content {
	margin:0;
	padding:0 0 0 0;
	width:400px;
	float:left;
}
	
#sidebar {
	width:200px;
	float:right;	
	margin:0;
	padding:20px 0;
}	

#footer {
	margin: 20px auto;
	clear: both;
}

/* Header */
#header h1 {
	margin:10px 0;
}

#header .description {
	font-size:1.2em;
}

#hmenu {
	margin:0 20px;
	padding:5px 0;
}

#hmenu ul {
	display:inline;
	margin:0;
	padding:0;
}

	
#hmenu ul li {
	padding:0;
	display:inline;
	margin:0 20px 0 0;
}

#hmenu ul li {
	font-size:1.2em;
	font-weight:bold;
	text-transform:uppercase;
}	

#hmenu ul li#hmenu_rss {
	background:url('images/rss.png') no-repeat;
	padding-left:20px;
}	

#header, #hmenu {
	background:url('images/border_h.png') repeat-x bottom;
}


/* End header */

/* Post */

.post {
	margin: 0;
	padding:20px 0; 
	text-align: justify;
	overflow:hidden;
	clear:both;
	}

.post h2 {
	margin:0;
	padding:0;
	text-align:left;
}

.post h3.post-title {
	font-weight:bold;
	

font-size:1.8em;
	margin:0;
	padding:0;
	text-align:left;
}	


div.archive-title {
	font-

size:1.6em;
	font-weight:bold;
}

.post hr {
	display: block;
	}

.postmetadata {
	clear: both;
	font-size:1.1em;
	color:#888;
}

.clear {
	clear: both;
}

.entry {
	font-size:1.4em;
	line-height:1.4em;
	margin:20px 0;
}

.entry blockquote {
	border:1px 

dashed #ccc;
	font-size:0.9em;
	padding:5px 20px;
	margin:10px 0;
	background:#f8f8f8;
}

.entry 

blockquote blockquote {
	font-size:1em;
}

.entry fieldset {
	border:1px dashed #ccc;
}

.entry fieldset legend {
	

font-weight:bold;
	text-transform:uppercase;
}

.entry table {
	border-width:0 1px 1px 0;
	border-

style:solid;
	border-color:#ccc;
	font-size:0.9em;
}


.entry table tr td {
	padding:5px 10px;
	border-

width:1px 0 0 1px;
	border-style:solid;
	border-color:#ccc;

}

.entry table tr th {
	border-width:1px 0 0 1px;
	

border-style:solid;
	border-color:#ccc;
	padding:5px 10px;
	background:#f4f4f4;
	color:#666;
	

font-weight:bold;
	text-transform:uppercase;
	text-align:center;
}

.entry ol { list-style-type:decimal; }
.entry ol ol {	list-style-type:lower-alpha; }
.entry ol ol ol {	list-style-type:lower-roman; }


p img {
	padding: 0;
	

max-width: 100%;
	}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

.alignright 

{
	padding:0;
	margin: 2px 0 5px 10px;
	display: inline;
	float:right;
	}

.alignleft {
	padding:0;
	

margin: 2px 10px 5px 0;
	display: inline;
	float:left;
	}

.aligncenter,
div.aligncenter {
	display: block;
	

margin-left: auto;
	margin-right: auto;
}

.navigation .alignleft {
	text-align:left;
}
.navigation .alignright {
	

text-align:right;
}

.navigation {
	font-size:1.2em;
	clear:both;
	margin:20px 0;
}	


.wp-caption {
	border: 1px 

solid #ccc;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
}


.wp-caption img {
	

margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 

17px;
	padding: 0 4px 5px;
	margin: 0;
}

.searchbox {
	padding:20px;
	text-align:center;
	clear:both;
}

.center 

{
	text-align: center;
	}

.hidden {
	display: none;
	}


/* Comments*/

#comments {
	font-size:1.4em;
	

line-height:1.4em;
}

.commentlist {
	margin:20px 0;
	padding:0 0 1px 0;
	background:url

('images/border_h.png') repeat-x bottom;
}

.commentlist li {
	list-style:none;
	margin:0;
	padding:0;
	

background:url('images/border_h.png') repeat-x top;
}

li.comment div, li.pingback div {
	padding:20px;
	

overflow:auto;
}

li.comment div div, li.pingback div div {
	padding:0;
	overflow:visible;
}

.commentlist 

li.even {
	background-color:#fafafa;
}

.commentlist li.odd {
	background-color:#f6f6f6;
}

ul.children li {
	

list-style:none;
}

img.avatar {
	float:right;
	border:1px solid #eee;
	padding:2px;
	margin:0;
	

background:#fff;
}

.comment-meta, .reply {
	margin:0;
	padding:0;
	font-size:0.8em;
}

.comment-author 

cite {
	font-style:normal;
	font-weight:bold;
}


textarea#comment {
	width:100%;

}

#comments div.navigation {
	

font-size:0.8em;
}

/* Sidebar */

#sidebar {
	font: 1.2em 'Lucida Grande', Arial, Sans-Serif;
	}

#sidebar h2 {
	

font-family: 'Lucida Grande', Sans-Serif;
	font-size: 1.2em;
	}

#sidebar h2 {
	padding: 0;
	

background:url('images/border_h.png') repeat-x bottom;
	}


#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
	

}

#sidebar ul li {
	margin:0;
	padding:0;
	list-style-type: none;
	list-style-image: none;
	margin-

bottom: 20px;
	}


#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}

#sidebar ul ul, #sidebar ul ol {
	

margin: 5px 0 0 0;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 20px;
	}

#sidebar ul ol li {
	

list-style: decimal outside;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}
	
/* Calendar */
#wp-calendar {
	empty-cells: show;
	width: 155px;
	}

#wp-calendar #next a {
	padding-right: 10px;
	

text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a {
	

display: block;
	font-weight:bold;
	}

#wp-calendar caption {
	font-weight:bold;
	text-transform:uppercase;
	

text-align:left;
	margin:0 0 5px 8px;
	color:#666;
	}

#wp-calendar td {
	padding: 3px 5px;
	

text-align: center;
	}
	
#wp-calendar td#today {
	background:#eee;
}	

#wp-calendar td#prev a {
	

padding: 0;
	text-align:left;
	font-weight:normal;
}

#wp-calendar td#next a {
	padding: 0;
	text-

align:right;
	font-weight:normal;
}


/* End Calendar */


/* Footer */	

#footer {
	background: url

('images/border_h.png') repeat-x top;
	padding:10px;
	text-align:center;
	font-size:1.1em;
	color:#888;
	

margin:20px;
}

I'm trying to shrink this to 600px...Where am I going wrong?!

Thanks,

*n

knowledge123 · 24 Dec 2008 at 17:38

What size is it showing as at the moment ?

edit: 775px ?

try (you should be able to just add it, provided you've put the div with the id of 'main' into the page)

#main {
width:600px;
}

difficult to say without the full source of the page

penski · 24 Dec 2008 at 17:54

Okay

....Full source of index.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>...</TITLE>
    <STYLE type="text/css">
      BODY { height: 5in } /* Required for percentage heights below */
      #header {
        position: fixed;
        width: 100%;
        height: 145px;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #main {
        position: fixed;
        width: 850px;
        height: auto;
        top: 145px;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 20px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY BACKGROUND="/images/backgroundplain.gif">
    <DIV id="header">  </DIV>
    <DIV id="sidebar">  </DIV>
    <DIV id="main"> <iframe src ="http://blog.xxxxxxxxxxxxxx.com" frameborder="0" scrolling="auto" width="800px" height="450px" align="right">
  <p>Your browser does not support iframes.</p>
</iframe> </DIV>
    <DIV id="footer" align="right"><FONT FACE="Tahoma, sans-serif"></DIV>
  </BODY>
</HTML>

And the style.css for the blog theme:

Code:

/*
Theme Name: Plainscape
Theme URI: http://srinig.com/wordpress/themes/plainscape/
Description: A plain and simple 

theme that just works. Fixed width, two columns, left sidebar, standards compliant.
Version: 1.0
Author: Srini G
Author 

URI: http://srinig.com/wordpress/
Tags: fixed width, two columns, right sidebar, widgets, gravatars, blue, white, 

simple, minimalist, clean, valid XHTML, valid CSS

	The CSS, XHTML and design is released under GPL:
	

http://www.opensource.org/licenses/gpl-license.php

*/



body {
	font-size: 62.5%; /* Resets 1em to 10px */
	

font-family: 'Lucida Grande', Sans-Serif;
	color:#555;
	}

small {
	font-family: Arial, Helvetica, Sans

-Serif;
	font-size: 0.8em;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Arial, 

Sans-Serif;
	font-weight: bold;
	text-transform:uppercase;
}

h1 { font-size: 2.4em; }
h2 { font-size: 2em; }
h3 { 

font-size: 1.2em; }
h4 { font-size: 1em; }

pre {
	overflow:auto;
}

acronym, abbr
{
	font-size: 0.9em;
	letter-

spacing: .07em;
	cursor: help;
	border-bottom: 1px dashed #999;
}

strong {	
	color:#666;
}

a {
	color: #26a;
	

text-decoration: none;
}


a:hover {
	background:#ffc;
}


hr {
	display: none;
	}

a img {
	border: none;
	}


/* 

Layout */

body {
	margin: 0;
	padding: 0;
}

#page {
	margin: 0 auto;
	padding: 0;
	width: 600px;
}

#header {
	margin: 0 20px;
	padding: 30px 0;
}

#wrapper {
	padding:20px;
}

#content {
	margin:0;
	padding:0 0 0 0;
	width:400px;
	float:left;
}
	
#sidebar {
	width:200px;
	float:right;	
	margin:0;
	padding:20px 0;
}	

#footer {
	margin: 20px auto;
	clear: both;
}

/* Header */
#header h1 {
	margin:10px 0;
}

#header .description {
	font-size:1.2em;
}

#hmenu {
	margin:0 20px;
	padding:5px 0;
}

#hmenu ul {
	display:inline;
	margin:0;
	padding:0;
}

	
#hmenu ul li {
	padding:0;
	display:inline;
	margin:0 20px 0 0;
}

#hmenu ul li {
	font-size:1.2em;
	font-weight:bold;
	text-transform:uppercase;
}	

#hmenu ul li#hmenu_rss {
	background:url('images/rss.png') no-repeat;
	padding-left:20px;
}	

#header, #hmenu {
	background:url('images/border_h.png') repeat-x bottom;
}


/* End header */

/* Post */

.post {
	margin: 0;
	padding:20px 0; 
	text-align: justify;
	overflow:hidden;
	clear:both;
	}

.post h2 {
	margin:0;
	padding:0;
	text-align:left;
}

.post h3.post-title {
	font-weight:bold;
	

font-size:1.8em;
	margin:0;
	padding:0;
	text-align:left;
}	


div.archive-title {
	font-

size:1.6em;
	font-weight:bold;
}

.post hr {
	display: block;
	}

.postmetadata {
	clear: both;
	font-size:1.1em;
	color:#888;
}

.clear {
	clear: both;
}

.entry {
	font-size:1.4em;
	line-height:1.4em;
	margin:20px 0;
}

.entry blockquote {
	border:1px 

dashed #ccc;
	font-size:0.9em;
	padding:5px 20px;
	margin:10px 0;
	background:#f8f8f8;
}

.entry 

blockquote blockquote {
	font-size:1em;
}

.entry fieldset {
	border:1px dashed #ccc;
}

.entry fieldset legend {
	

font-weight:bold;
	text-transform:uppercase;
}

.entry table {
	border-width:0 1px 1px 0;
	border-

style:solid;
	border-color:#ccc;
	font-size:0.9em;
}


.entry table tr td {
	padding:5px 10px;
	border-

width:1px 0 0 1px;
	border-style:solid;
	border-color:#ccc;

}

.entry table tr th {
	border-width:1px 0 0 1px;
	

border-style:solid;
	border-color:#ccc;
	padding:5px 10px;
	background:#f4f4f4;
	color:#666;
	

font-weight:bold;
	text-transform:uppercase;
	text-align:center;
}

.entry ol { list-style-type:decimal; }
.entry ol ol {	list-style-type:lower-alpha; }
.entry ol ol ol {	list-style-type:lower-roman; }


p img {
	padding: 0;
	

max-width: 80%;
	}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

.alignright {
	

padding:0;
	margin: 2px 0 5px 10px;
	display: inline;
	float:right;
	}

.alignleft {
	padding:0;
	

margin: 2px 10px 5px 0;
	display: inline;
	float:left;
	}

.aligncenter,
div.aligncenter {
	display: block;
	

margin-left: auto;
	margin-right: auto;
}

.navigation .alignleft {
	text-align:left;
}
.navigation .alignright {
	

text-align:right;
}

.navigation {
	font-size:1.2em;
	clear:both;
	margin:20px 0;
}	


.wp-caption {
	border: 1px 

solid #ccc;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
}


.wp-caption img {
	

margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 

17px;
	padding: 0 4px 5px;
	margin: 0;
}

.searchbox {
	padding:20px;
	text-align:center;
	clear:both;
}

.center 

{
	text-align: center;
	}

.hidden {
	display: none;
	}


/* Comments*/

#comments {
	font-size:1.4em;
	

line-height:1.4em;
}

.commentlist {
	margin:20px 0;
	padding:0 0 1px 0;
	background:url

('images/border_h.png') repeat-x bottom;
}

.commentlist li {
	list-style:none;
	margin:0;
	padding:0;
	

background:url('images/border_h.png') repeat-x top;
}

li.comment div, li.pingback div {
	padding:20px;
	

overflow:auto;
}

li.comment div div, li.pingback div div {
	padding:0;
	overflow:visible;
}

.commentlist 

li.even {
	background-color:#fafafa;
}

.commentlist li.odd {
	background-color:#f6f6f6;
}

ul.children li {
	

list-style:none;
}

img.avatar {
	float:right;
	border:1px solid #eee;
	padding:2px;
	margin:0;
	

background:#fff;
}

.comment-meta, .reply {
	margin:0;
	padding:0;
	font-size:0.8em;
}

.comment-author 

cite {
	font-style:normal;
	font-weight:bold;
}


textarea#comment {
	width:80%;

}

#comments div.navigation {
	

font-size:0.8em;
}

/* Sidebar */

#sidebar {
	font: 1.2em 'Lucida Grande', Arial, Sans-Serif;
	}

#sidebar h2 {
	

font-family: 'Lucida Grande', Sans-Serif;
	font-size: 1.2em;
	}

#sidebar h2 {
	padding: 0;
	

background:url('images/border_h.png') repeat-x bottom;
	}


#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
	

}

#sidebar ul li {
	margin:0;
	padding:0;
	list-style-type: none;
	list-style-image: none;
	margin-

bottom: 20px;
	}


#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}

#sidebar ul ul, #sidebar ul ol {
	

margin: 5px 0 0 0;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 20px;
	}

#sidebar ul ol li {
	

list-style: decimal outside;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}
	
/* Calendar */
#wp-calendar {
	empty-cells: show;
	width: 155px;
	}

#wp-calendar #next a {
	padding-right: 10px;
	

text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a {
	

display: block;
	font-weight:bold;
	}

#wp-calendar caption {
	font-weight:bold;
	text-transform:uppercase;
	

text-align:left;
	margin:0 0 5px 8px;
	color:#666;
	}

#wp-calendar td {
	padding: 3px 5px;
	

text-align: center;
	}
	
#wp-calendar td#today {
	background:#eee;
}	

#wp-calendar td#prev a {
	

padding: 0;
	text-align:left;
	font-weight:normal;
}

#wp-calendar td#next a {
	padding: 0;
	text-

align:right;
	font-weight:normal;
}


/* End Calendar */


/* Footer */	

#footer {
	background: url

('images/border_h.png') repeat-x top;
	padding:10px;
	text-align:center;
	font-size:1.1em;
	color:#888;
	

margin:20px;
}

I think its #hmenu causing the problem...But I dunno how.

*n

Sic · 24 Dec 2008 at 18:12

don't use iframes. Give me an hour and I'll get on MSN and give you a tickle

knowledge123 · 24 Dec 2008 at 18:27

Can you confirm that the page looks like this ?
The outlines shows how firefox renders the 3 main areas; #header, #sidebar and #main.
Which level is correct for the main and sidebar elements ? Should the sidebar be down to the level of the main or vice versa ?

penski · 24 Dec 2008 at 20:44

I think I've got it sussed...

Not what I originally set out to do but click the link in my sig...

J-boy, I'm on MSN now

Webcam ready as usual...

*n

knowledge123 · 24 Dec 2008 at 21:10

penski said:
I think I've got it sussed...

Not what I originally set out to do but click the link in my sig...

Cool stuff, I like the art scheme.

penski · 24 Dec 2008 at 21:29

Thanks

*n

Inazuma · 26 Dec 2008 at 11:39

Or you can do this
http://www.tizag.com/phpT/include.php