|
HTML - Help! Can't Center Pages :(
http://soundcoremusic.com/USED%20GEAR/usedgear.html
I really need a webmaster to view my code and give me some options! I've done so much googling and had so many failed attempts to center this new page I'm working on but I just can't figure it out and its really holding me back Thanks! -Kurt edit: I feel like I've been placing the div container in the wrong place or something, i really need my code to be viewed and then some specific directions Similar TutorialsIf you recall back to this http://www.htmlforums.com/html-xhtml...ite-99670.html, I'm wanting to learn the same thing aswell. If you go to http://adobeflashgames.tk, press enter and you'll go inside the main.html. In there, you notice I have three frames. If you click the link on the left that says "+Action", the word "lmfao" shows up on the same frame. What I want is the lmfao to show up on the frame next to it. How would I do that? Basically, I would like whatever link I press on the left frame of the game category, to show up in the right frame. Would you guys be needing the html's I used for the individual frames? Thanks! This will be hard for me to explain so I will add an image: http://img75.imageshack.us/my.php?image=examplexu6.gif How do I go about loading a page within a page. For example, in the pic, if you clicked Cost it would load a page within the loading area without taking off to another location. I seen it on a site before, i remember the links were something like "/?p=cost" or something like that. And the page appeared to not navigate elsewhere, the cost page was just loaded within the page i was on. hope that makes sense, if so any examples on this? is it hard to do? messy? safe with most browsers? thanks I have a webpage with a header, column on each side, footer and a mainContainer in the middle. I would like to set up links on the left column that, when clicked, open a new 'page' in the center (mainContainer). I am using all div tags, no tables. Could someone point me in the right direction? TIA I Can't center my whole nav bar in the middle of the sidebar 1 div. Here is the link for the website. http://northwindappaloosas.com/NewHome.html I am learning how to use Div's to replace Tables for layout. Needless to say, there are many properties I need to learn with CSS's. A friend wants a Floating area on the left which I have created, however I would like to have the box be centered in the main text area. Not sure if that can be done with my prototype at http://www.toddcary.com/viewpoint/div_todd_a.html Any help would be appreciated... Todd I have several div tags that I want exactly where I place them regardless of a user's screen size / resolution ... if I place them right of left 200 px then they shfit depending on resolution ... samve if I place them right of left by, say 85%. I'm figuring if I place the div tage left of center or right of center then they will always position correctly because the center doesn't vary according to resolution. How do I do this? I tried document.getElementById("divid").style.center = "25"; (i was attempting 25 pixels right of center) but it doesn't work. Any suggestions? Thanks! <tr> <td class="contentarea_b"></td> </tr> <h3>=WFC= WAR FORCE CLAN AMERICAS ARMY</h3> <table cellpadding="0" cellspacing="0" border="0"><tr><td><object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=4279961105245592436&hl=en" height="350" width="425" style="width:400px; height:326px;" id="VideoPlayback"> <param name="movie" value="http://video.google.com/googleplayer.swf?docId=4279961105245592436&hl=en" /> <param name="allownetworking" value="internal" /> <param name="allowScriptAccess" value="ALWAYS" /> <param name="enableJSURL" value="TRUE" /> <param name="enableHREF" value="TRUE" /> <param name="saveEmbedTags" value="true" /> <param name="flashvars" value="" /> </object></td></tr><tr><td> </table> </td> Quick question. When using a generator to make a website, it seems that usually everything is placed into "DIV - ABSOLUTE" codes. How do I center everything up so it isn't all stuck to one side for users who have a higher resolution? Hey felllas. I really need some help here. I'm building this page, but can't get it to center. I bet it's somethign dumb I'm overlooking. could you please take a quick look at the source and LMK what I'm missing... http://bravoad.com/BravoTest2.html Thanks in advanced I am administering this forum www.br-eeze.com So please enter there as the flashing banner and the weather widgets. Both are positioned on the left. Now this is the code for the banner: <td align="center" valign="top" width="90" height="55"><A target = "_blank" HREF="http://www.br-eeze.com"><IMG SRC="http://www.xxx.com/test1.gif" border=0 width=728 height=90 ></a> As you can see I tried to center it. I even typed right but still everything is aligned to the left. PLEASE, how do I center the banner and the weather widgets? http://www.ivoog.com/test/help The boxes that have: Paypal, Policies, Financing, Wholesale, etc. How can these be centered in all browsers including IE6? I can't get it to work Here's the CSS: #othermain2 { width:850px; height:850px; float:left; } #middlestyle { width:850px; text-align:center; margin:auto; overflow:auto; } .middlebox { width:150px; text-align:center; float:left; font-size:24px; margin-left:50px; margin-top:50px; border:solid 5px #333; } .middlebox:hover { width:150px; text-align:center; float:left; font-size:24px; margin-left:50px; margin-top:50px; border:solid 5px #390; } FULL CSS: http://www.pics.ivoog.com/page/home.css Can anyone help me? Thanks. Hey im new at this html programming and im ok at it but i still need to learn more i need help centering the stuff on my page you will see what i mean if you go to my website. firefoxskins.awardspace.com. I would really like help thank you for your time. I can't get my whole nav bar to align to the center of my sidebar 1 div. Check it out please. http://northwindappaloosas.com i want the ads on the center. not there. please anyone can help? screenshot: I created my website in photoshop and sliced it up and exported it as HTML/Images so it would be coded in CSS and with div tags. But I am unable to center my website as a whole. If I export them as a table I can center it easily (Here is my site in tables.), but no one really like tables and I would much prefer it in CSS and with div tags. Here's the site when coded with CSS. HTML Code: <html>
<head>
<title>Linnit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Save for Web Styles (Linnit.psd) -->
<style type="text/css">
<!--
#Table_01 {
position:relative; right:50px
left:0px;
top:0px;
width:950px;
height:1250px;
padding-left: 200em;
}
#index-01 {
position:absolute;
left:0px;
top:0px;
width:950px;
height:14px;
}
#index-02 {
position:absolute;
left:0px;
top:14px;
width:198px;
height:1236px;
}
#Logo {
position:absolute;
left:198px;
top:14px;
width:175px;
height:87px;
}
#index-04 {
position:absolute;
left:373px;
top:14px;
width:392px;
height:87px;
}
#index-05 {
position:absolute;
left:765px;
top:14px;
width:185px;
height:1236px;
}
#index-06 {
position:absolute;
left:198px;
top:101px;
width:567px;
height:6px;
}
#Left-Nav {
position:absolute;
left:198px;
top:107px;
width:232px;
height:60px;
}
#index-08 {
position:absolute;
left:430px;
top:107px;
width:6px;
height:60px;
}
#Home {
position:absolute;
left:436px;
top:107px;
width:55px;
height:60px;
}
#About {
position:absolute;
left:491px;
top:107px;
width:47px;
height:60px;
}
#Linnit {
position:absolute;
left:538px;
top:107px;
width:52px;
height:60px;
}
#Contact {
position:absolute;
left:590px;
top:107px;
width:65px;
height:60px;
}
#index-13 {
position:absolute;
left:655px;
top:107px;
width:55px;
height:60px;
}
#Other {
position:absolute;
left:710px;
top:107px;
width:55px;
height:60px;
}
#index-15 {
position:absolute;
left:198px;
top:167px;
width:567px;
height:6px;
}
#Main {
position:absolute;
left:198px;
top:173px;
width:468px;
height:232px;
}
#index-17 {
position:absolute;
left:666px;
top:173px;
width:6px;
height:232px;
}
#Right {
position:absolute;
left:672px;
top:173px;
width:93px;
height:232px;
}
#index-19 {
position:absolute;
left:198px;
top:405px;
width:567px;
height:845px;
}
-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (something.psd) -->
<div id="Table_01">
<div id="index-01">
<img src="images/index_01.gif" width="950" height="14" alt="">
</div>
<div id="index-02">
<img src="images/index_02.gif" width="198" height="1236" alt="">
</div>
<div id="Logo">
<a href="index.html">
<img src="images/Logo.gif" width="175" height="87" border="0" alt="Logo"></a>
</div>
<div id="index-04">
<img src="images/index_04.gif" width="392" height="87" alt="">
</div>
<div id="index-05">
<img src="images/index_05.gif" width="185" height="1236" alt="">
</div>
<div id="index-06">
<img src="images/index_06.gif" width="567" height="6" alt="">
</div>
<div id="Left-Nav">
<img src="images/Left_Nav.gif" width="232" height="60" alt="">
</div>
<div id="index-08">
<img src="images/index_08.gif" width="6" height="60" alt="">
</div>
<div id="Home">
<a href="index.html">
<img src="images/Home.gif" width="55" height="60" border="0" alt=""></a>
</div>
<div id="About">
<a href="about.html">
<img src="images/About.gif" width="47" height="60" border="0" alt=""></a>
</div>
<div id="Linnit">
<a href="linnit.html">
<img src="images/Linnit.gif" width="52" height="60" border="0" alt=""></a>
</div>
<div id="Contact">
<a href="contact.html">
<img src="images/Contact.gif" width="65" height="60" border="0" alt=""></a>
</div>
<div id="index-13">
<img src="images/index_13.gif" width="55" height="60" alt="">
</div>
<div id="Other">
<a href="other.html">
<img src="images/Other.gif" width="55" height="60" border="0" alt=""></a>
</div>
<div id="index-15">
<img src="images/index_15.gif" width="567" height="6" alt="">
</div>
<div id="Main">
<img src="images/Main.gif" width="468" height="232" alt="">
</div>
<div id="index-17">
<img src="images/index_17.gif" width="6" height="232" alt="">
</div>
<div id="Right">
<img src="images/Right.gif" width="93" height="232" alt="">
</div>
<div id="index-19">
<img src="images/index_19.gif" width="567" height="845" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
Hello Guys, I have made some page with nested div's. I made it's width to 80%. I want that to be completely aligned to center of the page. I tried with css and with html and with parent div. But some thing makes it not to work. Can you see the below code and please suggest me to get that to center. HTML Code: <style type="text/css">
.nm-left { text-align:left; vertical-align:text-top; }
.nm-left .nm-video, .nm-right .nm-video-reverse, .nm-left .nm-avatar, .nm-left .nm-avatar-wrapper, .nm-left span.nm-button, .nm-left #user-form input#submit { float:left; }
.nm-right { text-align:right; vertical-align:text-top; }
.nm-right .nm-video, .nm-left .nm-video-reverse, .nm-right .nm-avatar, .nm-right .nm-avatar-wrapper, .nm-right span.nm-button, .nm-right #user-form input#submit { float:right; }
.nm-wrapper { clear:both; font-size:14px; line-height:21px; margin:20px 0; padding:0px; }
.nm-wrapper div { background-position:99% 10px; background-repeat:no-repeat; margin:0; padding:0; }
.nm-wrapper div div { }
.nm-wrapper div div div { overflow:hidden; }
#ninjamonials .nm-wrapper div div div div { background:transparent; padding:20px;}
#ninjamonials .nm-wrapper div div div div div { padding:0; }
blockquote.nm-summary div, blockquote.nm-testimonial div, blockquote.nm-summary, blockquote.nm-testimonial, blockquote.nm-summary p, blockquote.nm-testimonial p { background:transparent; border:none; padding:0; margin:0; text-decoration:none; font-style:normal; }
span.nm-button, #user-form input#submit { margin:5px; }
#user-form { background-position:left bottom; background-repeat:repeat-x; clear:both; font-size:14px; line-height:21px; margin-top:20px; padding:5px; }
.nm-testimonial, .nm-summary, .nm-author { padding-left:140px }
.nm-summary { font-weight:bold; }
.nm-author { display:block; font-size:12px; }
.nm-name { font-weight:bold; padding-right:5px; }
.nm-video, div.nm-video-reverse { margin:10px !important; }
.nm-audio, .nm-author { padding:5px !important; }
.nm-audio { display:block; }
.nm-name { font-style:italic; }
/* Oceanic Avatar-Specific CSS */
.nm-avatar { }
.nm-avatar img { background-color:#F7F7F7; border:1px solid #DBDBDB; margin:10px; padding:5px; }
/* Oceanic Module-Specific CSS */
.nm-module { overflow:hidden; margin: 5px; padding:4px!important; }
.nm-module div.nm-avatar img { }
.nm-module div.nm-avatar { }
/* Blue Style */
.nm-right.nm-oceanic-blue.nm-module, .nm-right.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue.nm-module, .nm-left.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat; color:#666; }
.nm-oceanic-blue .nm-wrapper div { background:url(oceanic_blue_tr.png) no-repeat 100% 0; }
.nm-oceanic-blue .nm-wrapper div div { background:url(oceanic_blue_bl.png) no-repeat 0 100%; }
.nm-oceanic-blue .nm-wrapper div div div { background:url(oceanic_blue_br.png) no-repeat 100% 100%; }
.nm-oceanic-blue #user-form { background-color:#EFF8FF; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_blue_quote.png) no-repeat 10px 10px !important; }
/* Green Style */
.nm-right.nm-oceanic-green.nm-module, .nm-right.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green.nm-module, .nm-left.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat; color:#666; }
.nm-oceanic-green .nm-wrapper div { background:url(oceanic_green_tr.png) no-repeat 100% 0; }
.nm-oceanic-green .nm-wrapper div div { background:url(oceanic_green_bl.png) no-repeat 0 100%; }
.nm-oceanic-green .nm-wrapper div div div { background:url(oceanic_green_br.png) no-repeat 100% 100%; }
.nm-oceanic-green #user-form { background-color:#EBF4D7; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_green_quote.png) no-repeat 10px 10px !important; }
/* Grey Style */
.nm-right.nm-oceanic-grey.nm-module, .nm-right.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey.nm-module, .nm-left.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat; color:#666; }
.nm-oceanic-grey .nm-wrapper div { background:url(oceanic_grey_tr.png) no-repeat 100% 0; }
.nm-oceanic-grey .nm-wrapper div div { background:url(oceanic_grey_bl.png) no-repeat 0 100%; }
.nm-oceanic-grey .nm-wrapper div div div { background:url(./images/oceanic_grey_br.png) no-repeat 100% 100%; }
.nm-oceanic-grey #user-form { background-color:#EFEFEF; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(./images/oceanic_grey_quote.png) no-repeat 10px 10px !important; }
/* White Style */
.nm-right.nm-oceanic-white.nm-module, .nm-right.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_tl.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white.nm-module, .nm-left.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_nq.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_tl.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_nq.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-oceanic-white .nm-wrapper div { background:url(oceanic_white_tr.png) no-repeat 100% 0; }
.nm-oceanic-white .nm-wrapper div div { background:url(oceanic_white_bl.png) no-repeat 0 100%; }
.nm-oceanic-white .nm-wrapper div div div { background:url(oceanic_white_br.png) no-repeat 100% 100%; }
.nm-oceanic-white #user-form { background-color:#FFF; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_white_quote.png) no-repeat 10px 10px !important; }
.nm-audio1 {padding:5px !important; }
.nm-summary1 {padding-left:140px }
</style>
<div id="ninjamonials" class="nm-oceanic-grey nm-left" style="width:80%">
<!--bof nm-wrapper -->
<div class="nm-wrapper">
<div>
<div>
<div>
<div class="nm-content">
<div class="nm-avatar-wrapper">
</div>
<blockquote
class="nm-testimonial">
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
</blockquote>
<div class="nm-author">
<span class="nm-name">Name</span>
(Website<span class="nm-title"></span>
~ <span class="nm-auth-url"><a
href="http://www.google.com/">www.google.com</a></span>
, <span class="nm-location">Mine</span>
) </div>
<!--eof nm-author -->
</div>
<!--eof nm-content -->
<!--eof wrapper -->
</div>
</div>
</div>
</div>
<div class="nm-wrapper">
<div>
<div>
<div></div></div></div></div></div>
Waiting for your solution. Thanks in advance! I have a centered container div with a width of 850px. How do I put an image on the left/right of the div? or even make a bigger image than 850px and have it centered with the center 850px in the image to be black or white and the rest show outside the div, but not rollover or mess up when someone with a low resolution views the site if possible Hi guys, Sorry if this is a stupid question, but I am having problems with a little script that keeps being left aligned no matter what I do. Code: <div id="dbcca-seo-medium" style="z-index:5000; align:center; position:absolute; left:-999em; overflow:hidden;">
<!-- For Search Engine Spiders -->
<h1>
www.know-the-number.com</h1>
<p style="text-align: center; ">
<a href="http://www.know-the-number.com">Our Climate is Changing!</a></p>
</div>
<script src="http://www.dbcca.com/dbcca/EN/_js/home/swfobject.js" type="text/javascript"></script><script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker = _gat._getTracker("UA-1825898-14"); pageTracker._setDomainName("none"); pageTracker._setAllowLinker(true); pageTracker._trackPageview();} catch(err) {}</script><script type="text/javascript">swfobject.embedSWF("http://www.dbcca.com/dbcca/EN/_swf/embed-widget.swf", "dbcca-medium", "419", "132", "9.0.0", "", {},{wmode:'transparent',base:'http://www.dbcca.com'},{});</script>
<p>
</p>
<div id="dbcca-medium" style="text-align: center; ">
Please download <a href="https://www.adobe.com/go/getflashplayer/">Flash Player</a>.</div>
Can anyone please tell me what to do to get it to center please. Thanks a million in advance! It is probably something so obvious that I cannot see it . The first image does not center, yet the second does. What am I missing? <body> <div style="text-align: center; width: 100%;"> <div style="width: 900px; text-align: center; vertical-align: middle;"> <img style="width: 900px; height: 84px;" alt="Header image" src="images/site_header.jpg"> </div> <div style="text-align: center; vertical-align: middle;"> <img style="width: 900px; height: 49px;" alt="Header sub-image" src="images/nav_back.jpg"> </div> </div> </body> Todd He is my code in godaddy blog. I've tried everything. Please help <img src="http://images.quickblogcast.com/8/5/8/1/4/251413-241858/PamBlog.JPG" border="0" width="110"><br> The image is to the far left. |
|||||||