|
HTML - A Simple Page With Content Centered And Two Background Columns (right And Left)
Hi All,
I have just started my first page and there is a little problem with it that is driving me nuts. Basically, Im trying to make a simple page where the content is centered and there are two background columns on the right and left: we see these pages everywhere. Here is the code (pseudo) I am trying <body> <centered content> <body_divis> <pic> insert picture (top left) <pic> </body_div> </centered content> <body> now im using a css file in which we have: <centetred content> : fix width (1000px), auto left and right margin, gray background. <body_div>: white background. <pic>: 0 margins. So far so good, I get the desired effect: white page in the middle, two side columns in gray. All of this starts at the very top of the page. Now I just want to move the picture slighlty down. As soon as I do that the whole white centered section moves down with it, creating a horizental gray bar on top of the page that is driving me nuts.... it seems that the white section starts where the first object is placed. I just want it to start at the top and then plance my objects wherever. All margins are good in my code as I have checked and rechecked. I appreciate any help. Thanks, Kakeez Similar TutorialsHi everyone, I'm trying to work out how to have a left and right side "column" both resize when the window is resized. An example of what I am after is : http://www.news.com.au/heraldsun/0,,,00.html. I played with margin-left and -right but don't think it is quite what I am after. Thanks. Greetings from Norway! This is my first post on this forum! I am currently developing my website, and when I checked the page in Firefox, Safari and Chrome it seemed perfectly fine, but when loading it in IE and Opera it looked strange. the page: http://aksjefinans.com/bilde.html In Opera and IE the text in the tables are centered while in the other browsers it is aligned to the left (this is how it should look). Why is the table text centered in IE and Opera? I have looked over my code several times and tried a lot of different moves, but it always ends up like this in IE and Opera. Centered text does not look any good. What should I do to make the page look the same in IE as in firefox? Hope someone could help me! hi i'm new to htm, infact new to making websites at all. i spent ages writting an intoduction, but some one deleted it. i have started writting my first HTML page : http://normington.superfreehost.org/...age%204.1.html so far it's just some embeded movies from youtube. my first problem is that i want to align text to the left of the video and centered vertically. my second problem is that when i view the page source through mozilla i find some extra text that i cant see if i view the page in wordpad. "<!-- Paste this code into the body section, not the head section of the page --> <script type="text/javascript"><!-- ch_client = "b0redum"; ch_non_contextual = 0; ch_keywords = "tech,free"; ch_linkStyle= "style3"; //--></script> <script src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" type="text/javascript"> </script> <div id="PaypopupStartCode" style="display:none"> </div> <script language="JavaScript1.1"> if (typeof(paypopupScriptStart) == 'undefined') {var paypopupScriptStart = false;} if (!paypopupScriptStart) { document.write(unescape("%3Cscript")+' src="http://www.bu520.com/popup.php?'+(new Date()).getTime()+'&id=azzamartin&pop=enter&t=1&subid=107931&blk=1&fc=-1"'+unescape("%3E%3C/script%3E")); paypopupScriptStart = true; } </script> <noscript> </noscript>" what does this text do, and how do i move it? any advice about my page would be apprichiated, items to add etc, the next thing i want to do is make a comments page. is this an easy thing? thanks for your help, Normington. Hi all, brand new here. I'm working on a simple website for a project I'm doing with a friend, but I'm having a problem with the layout. The site is www.Project217.com. On my Macbook, the content on all of the pages appears centered, which is where I want it. Firefox, Safari and IE all display properly. However, on my Windows computer at work all of the content within the black section of the pages is aligned to the left. Is there an issue with my source code that I'm missing? Thanks for any help, Aaron Hi I have a page designed to be centered in the browser... not a problem. However, I have just added a drop down menu (taken from http://www.dynamicdrive.com/dynamici...rome/index.htm) and now the divs which contain the drop down content seem to be centering inside the browser as opposed to sitting under the menu titles like they should. In other words, they are behaving independently of the top level menu... not good! Here's the link - http://www.horizonwebsites.co.uk/snoworks/ I've tried many little changes but I'm definately missing something here. Any help would be great. Kev Hello World! (Where did that tradition start anyways?) Yes, I am fairly new at web design, and am using the method of "search-Google-whenever-you-have-a-problem-as-you-go" to learn HTML. I am pretty happy with the results I am getting in Dreamweaver, but there is one nagging thing that is throwing a kink into my designs. I have the majority of the content that is unique to each page within a table cell (<td>). Since I wanted to have the background color of the cell match exactly to an image that tops off the page body, I decided to have the background be one pixel of that color that repeats across the whole table cell. Originally, I just defined the background in the starting tag using "style=" then specifying the background. (Dreamweaver made sure I had it right using its Code Hinting). The background shows up perfectly when in the Dreamweaver editing view, but when looking at the page in any other view (Live view, preview in browser, etc.), the background of that cell is just white. I tried defining the background with a CSS ID, which has worked on other parts of the page, but no beans. What am I doing wrong? Is the fact it is only one pixel that has to repeat an issue? Here is the code: <td width="100%" height="103" colspan="8" align="center" id="page_background_beige" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium;"> <!-- TemplateBeginEditable name="Body" --> //In here goes all of the content of the page <!-- TemplateEndEditable --></td> The CSS: #page_background_beige { background-image: url(Background_Pixel.png); background-repeat: repeat; } Thanks, Wookieguy (Heh, I know tables are a fairly sloppy way to do things, but this is a fairly simple site anyways.) Hello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. I have a parent div=body, and four child div's=sidebar (dark gray), spacer1, content (white), and spacer2. Those are not the backgrounds of the individual div's. I'm using a faux columns method of taking the parent's bg and y-repeating it. You can see the problem below. This works in IE6, but not in Firefox. This would lead me to assume there's a problem in my coding, but the way FF is displaying it...it's like firefox is placing it in a different column just to peeve me off. In IE6 (perfect): In FF (looks like script was placed in spacer1 column--padding:10 for content div) I noticed it repeated correctly for the first div, but it's like it started over with the spacer1 div and doesn't even repeat down: Here is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DCS College Football Ratings and College Football News</title>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
</head>
<body background="images/bg.png">
<div id="container" style=" width:785px; background:inherit; height:auto; margin:0 auto;">
<div id="header" style="background:url('images/layout_01.png'); width:785px; height:121px;"></div>
<div id="navbar" style="background:url('images/layout_02.png'); width:758px; height:26px; padding-top:9px; padding-left:27px; clear:both;">
<font color="#cecece" face="Verdana" size="2"><b>»Home »The D-Report »DCS Ratings »Custom Helmets »About the DCS</b></font></div>
<div id="subheader" style="background:url('images/layout_03.png'); width:785px; height:49px; clear:both;"></div>
<div id="body" style="background:url('images/contentbg.png'); width:785px; height:auto; float:left;">
<div id="sidebar" style="background:inherit; width:260px; padding:10px; height:auto; float:left; ">
<font face="verdana" color="#cecece" size="3"><b>The D-Report</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current DCS news article here. More typing going on to fill up some more space, ya know what I mean?</b></font><br><br><br><br><font face="verdana" color="#cecece" size="3"><b>DCS Ratings</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current DCS ratings update here. More typing going on to fill up some more space, ya know what I mean?</b></font><br><br><br><br><font face="verdana" color="#cecece" size="3"><b>Custom Helmets</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current custom helmet here. More typing going on to fill up some more space, ya know what I mean?</b></font></div>
<div id="spacer1" style="background:inherit; width:17px; height:auto; float:left; "></div>
<div id="content" style="background:inherit; width:440px; padding:10px; height:auto; float:left;">
<div id="myGallery" style="width: 438px !important;
height: 250px !important;" ><script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" title="open image" class="open"></a>
<img src="images/brugges2006/1.jpg" class="full" />
<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="mypage2.html" title="open image" class="open"></a>
<img src="images/brugges2006/2.jpg" class="full" />
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
</div></div>
<div id="spacer2" style="background:inherit; width:28px; height:auto; float:left; "></div>
</div>
<div id="footer" style="background:black; width:785px; height:86px; clear:both">
<div id="contentfooter" style="background:url('images/layout_10.png'); width:460px; height:52px; margin-left:297px;"></div>
</div>
</div>
</body>
</html>
Could it have something to do with the image scripting? I've made an incredibly simple html page as an active desktop for a gpo policy, however there's been an uproar about colours so I thought I'd give it a stab to have a drop-down box to select from a range of colours for the body style tag. Any suggestions? <html> <head> <!--808080--> <title>ArchitenBG</title> <STYLE type="text/css"> body { background-color:#3A6EA5; } #div1 { position: absolute; size: 50%; bottom: 0px; right: 0px;} </STYLE> </head> <body> <div id="div1"><img src="Talbg.png" /></div> </body> </html> I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center? Here is an example of a part of my code: Code: <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
<tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>
<tr>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table>
</td>
</tr>
</table>
1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right. 2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column. 3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column. My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line. I tried: style="margin-left:20px" and style="padding-left:20px" but when the title got too long it would not auto-collapse the left side, I want it to collapse! I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column. If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it. My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want. This code is a list of books that spans about 20 categories and about 400 book titles. Thanks in advance for any help you might offer. Hi, Basically I was wondering how I can give a page "columns" I want to set it up with the normal heading I'm using, then do something like this: (column 1) ______ | ______ (column 2) _______________ | ________ ... Sign Up ________ | _______ Member Name: _ [box] ___________________________ Password: _ [box] I'm brand new to the scene of html and tryiing to create a website. I'm currently using a drop-and-drag program that does allow for some html and other scripting to help modify the page. The problem I'm having is this. When the webpage I created with a margin of 1024 x 768 appears on my monitor (1440x900) as well the monitor of a few other people I have asked, it appears fine. When I change my monitor resolution to 1024 x 768 to view the webpage, I have to scroll over to the middle of the page to begin viewing. How do I fix this so that the page is centered regardless of the monitor resolution of whomever is viewing the page? Once again, I am a beginner with the world of html so I will do my best to try to understand whatever it is that I need to input into the html to try to fix the problem. Thank you. Anyone have any hints about why headings that are perfectly centered in Firefox are sometimes aligned left in IE? Hi all. I've been trying to accomplish a simple task with less to no luck, I hope somebody here can help... I'm trying to create a single page with a solid color background, with a square image (let's say 500px * 500px) centered in the page and above the solid color, with some text centered above the image. All of this should work even resizing the window: I mean, the image should resize mantainig its proportions. Is there any way to do this? I tried both tables and css, but had no luck... Thank you in advance. Melmoth http://tbsnyder.com/contentBoxes/index.html http://tbsnyder.com/contentBoxes/main.css (css file) This is what I've got. I would like to have content boxes for each different segment of information. The problem is that the header (Content Section 1) does not fit in its div when I put a border around it. Am I setting this content box up incorrectly? I have 2 divs. One for the header (which has a background image of a color gradient), and one for the actual content. Html: Code: <div id="contentheader">
<h4>Content Section 1</h4>
</div>
<div id="contentbox">
<p>content here</p>
</div>
Css: Code: #contentheader {
background: url(images/contentBox.gif);
background-repeat: repeat-x;
background-color: #ffffff;
border: solid thin;
height: 20px;
border-color: #25768e;
margin: 10px 10px 0px 10px;
}
#contentbox {
border-bottom: solid thin;
border-left: solid thin;
border-right: solid thin;
border-color: #25768e;
margin: 0px 10px 0px 10px;
padding: 10px;
}
The header only fits inside of its color gradient background if I don't put a border around it. I thought about keeping the borders inside of the actual header graphic, but I would prefer to keep things as dynamic as possible. I don't want to have to manually adjust the width of each segment. Any ideas? I'm aware I also have an issue with the footer, but I'll fix that later. I'm just starting to get into HTML / CSS and I had a question I was hoping someone would be able to give me a hand with... The page I'm working on has a logo in the top left corner that gets cut off when the browser window is reduced to a smaller size. The left navigation bar, however, always appears in the browser window, regardless of size. I'd like to have this left side "anchor" to include the logo so that it always appears. Please let me know if you require additional information or if I have not described the issue clearly enough. Thank you! Hi, I'm new here but know a little bit about making websites. This one has seemed to stumped me, my webpage he Edit: link removed, problem solved and the other links: Order online, testimonials, about us, and contact us all render exactly in firefox, however my products page gets shoved to the left a couple of clicks for some odd reason. I narrowed it down a bit; it seems as if its only letting me to post a few paragraphs until it does it, meaning i can remove the animation and some paragraphs, and it looks the way i want it, but when I add the paragraphs back even without the slideshow the problem persists. Using expression web 3. Thank You a bunch for your help. Hello Everyone, i am new to HTML, i am trying to develop my first website. I am using asp.net , C#, HTML, CSS and Visual studio2008 on windows Xp I had a page, in that i moved the tables to center. after moving the tables to center i found the white space on the left and right sides of the page. Now i want to fill the white space which is on the left and right sides of the page with the black color. Can anyone please help me thank you regards john. |
|||||||