|
CSS - Page Jumps From Left To Center
Every time I switch Web pages, the display starts at the far left and jumps to center. Is there a way to correct this and still allow for variations in screen sizes and resolution.
http://www.madjazz.org/index.html http://www.madjazz.org/CSS/RobustLayout.css Thank you Similar TutorialsHi, Please help! I have multiple ul lists and I'm trying to float each list left and center on the screen all of them using css. I'm not trying to have an inline list. I'm trying to keep the three list, float left but center on the page. floating works but I'm having problems centering on the page. I have used margin-left and right:auto but because I'm using float left if stays on the left. Does anyone have any solutions. thank-you in advance i want to position a div 383 pixels left of the center of my browser. i've tried using left:50% and a negative margin..anyone have suggestions on things to try? Hi, Code: <div class="paginator"> <span style="float:left"><span class="prev_next"><a href="">PREV</a></span> <span class="page_links"><a href="">2</a><a href="">3</a><a href="">4</a></span> <span style="float:right"><span class="prev_next"><a href="">NEXT</a></span></span> </div> How do I create this layout? ------------------------------------ |PREV...............123..............NEXT| ------------------------------------ 123 must be in the middle. I have been trying to position it correctly but it always comes up messed up. Thank you. Ok, so I'm really new to this, but I've spent several hours over the last few days tinkering with things but nothing I'm doing works: In my two column CSS layout my left navigational column is stuck hanging out underneath the center column. It looks like this both in IE and Firefox. I've searched around on here and haven't found anything, but maybe I'm not using the right keywords. Any help or suggestions for this newbie greatly appreciated! My html 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=us-ascii" />
<title>Art</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- begin header -->
<div id="header"><center><img src="logo.jpg" alt="logo" /></center></div>
<!-- end header -->
<!--begin container div - no content should be outside of the container div -->
<div id="container">
<!-- begin main content -->
<div id="center" class="column">
<br />
<img alt="Still Life" src="slc08.jpg" height="391" width="784" />
<h5>Still Life with Colour '08</h5>
</div>
<!-- end main content -->
<!--begin left nav list -->
<div id="left" class="column">
<br />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About the Artist</a></li>
<li><a href="resume.html">Artist's Resume</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>
<!--end left nav list -->
<!--close content div -->
</div>
<!--begin footer information -->
<div id="footer">
<center><p class="foot">Copyright 2008</p></center>
</div>
<!-- end footer information -->
</body>
</html>
My CSS Code: Code: body{
background-color: White;
font-size: 16px;
margin: 0;
padding: 0;
}
#header{
background-color:#333;
height:150px;
}
#container {
padding-left: 200px; /* LC width */
padding-right: 100px; /* RC width */
}
#left{
float:left;
width:200px;
background-color:#afeeee;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#center {
background-color:#ffffff;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color:#48d1cc;
height:100px;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
ul.nav {
list-style: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: large;
}
ul.resume {
list-style: disc;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
line-height: 1.3em;
}
#left a {
border-bottom: 1px solid #333;
border-top: 1px solid #333;
display: inline;
font-family: tahoma,verdana,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 2.75em;
margin: 0;
margin-right: 2px;
text-align: center;
text-decoration: none;
}
#foot {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
}
Hi all, http://www.jaysonsgroup.com/zpip2/z.html - please see the bottom four links (home, glossary, contact, credits) The HTML is as follows: Code:
<div class="centerlinks">
<table align='center'>
<tr>
<td>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Glossary</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Credits</a></li>
</ul>
</td>
</tr>
</table>
</div>
The CSS: Code:
.centerlinks {
float: left;
width: 550px;
text-align: center;
}
.centerlinks ul {
list-style-type: none;
}
.centerlinks li {
float: left;
padding-left: 10px;
padding-right: 10px;
}
As you can see, what I want is a simple UL list that is horizontal, plain text, and centers within the 550px div that surrounds it , even if I add a fifth <li> link in the future. On Internet Explorer, the <table align='center'> hacks fixes the problem. But it doesn't work on Firefox. Any ideas how I can center this? (I know I can use padding-left or margin-left but then this isnt a good solution when more menu items are added to that list) Thanks in advance!! I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong? <DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV> Hello I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help. What I'm trying to do All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify. NOTES The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px. I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse. Here is a print screen of the header: [IMG]URL[/IMG] Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message. The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now. CSS Code Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that. Code: #myHeader {width:auto;height:133px;
background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}
#myLogo {
float:left;
width:10%;
height:150px ;
margin-left:2.22%;
display:inline;
background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
#myConame {
width: 15.33%;
height:90px;
margin-left:auto;
margin-right:auto;
background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
#myBanner {
float:right;
width: 29.73%;
height:150px;
background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}
The HTML Code Code: <div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
<ul>
<li><a href="http://shuttermaster.co">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
I hope I have been clear enough. Hoping someone can point me the right direction. Regards, and thanks.... Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! Hi, I have a front page which is one image only, no text. The image is centered horizontally (i.e. a simply text-align: center; ). My question is - how do I centre it vertically? (no matter what the resolution of the website visitor is). i.e. Currently the image is at the top of my screen. I would like it to be in the centre, both horizontally and vertically. Many thanks! I am trying to center this entire page, and it does show up centered in IE; however, after checking with BrowserShots.org, in all browsers other than IE, the header image is centered, but the rest is aligned on the left side....??!! Here is the page: http://www.georgiaspinal.com/indexTESTBR2.html Here is the CSS file I am using: Code: body {margin:25px; font:12px Verdana, Arial, Helvetica; }
* {padding:0; margin:0}
#wrapper {
text-align: center;
width: 770px;
margin-left: auto;
margin-right: auto;
}
.hidden { display: none; }
.unhidden { display: block; }
<div id="article" class="hidden">
Thanks for any help here!!! I have a div sitting on a html page that will be included in the main page. I include this page into a table and I would like the div to be centered horizontally inside the table cell. It isn't working for me at the moment. Am I doing something wrong? Here is what I have so far: Code: #mybox{
border-style: solid;
border-width: 1px;
border-color: #000000;
padding: 5px;
width: 400px;
left-margin:auto;
right-margin:auto;
}
Brad. Is there a way to center the entire page using CSS? Reidy I have a single column layout with a fixed width (say, 700 px), centered in the window, composed of header, body, and footer divs in a wrapper div. I would like background images, left and right of the center column (two images, because they sort of fade up to the edge of the centerd div). How is this done? I am working on a slide show that uses css for formating. The problem is when I click on any of the navigation icons they jump down by about 10-15px when using IE6 or less. All I can do is direct you to the page and look at the source code. I worked on it all day yesterday without success. http://www.discovervoyages.com/ships/polar-star/12/ thanks for your help I'm trying to center a gridview on a page. Pretty straightforward. I just don't understand why this gridview will not center on the page. I have no other css. They instructions are left aligned fine. This is the code I have for the css. Code:
#mid
{
text-align:center;
}
p.instr
{
text-align:left;
color:Silver;
}
<div id="maincontainer">
<div id="mid">
<p class="instr">bunch of instructions</p>
<asp:Panel ID="pnlMainMenu" runat="server">
<asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1">
</asp:GridView>
</asp:Panel>
</div>
</div>
Fixed the problem myself. I added a strict doctype, and it fixed itself. Previous Issue: ------------------ I wrote out all the code to my website. However, everything is aligned to the left (default). In an attempt to center everything, I simply stuck everything into a <div> tag, and said this: Code: <div style="width:630px; margin: 4px auto;"> //My entire website </div> This solution works both with FF and Chrome, but not with IE. Any ideas? Okay, because of a conflict with Sothink Menu Builder I cannot use the container or wrapper tag the way I normally would on my CSS. Instead, I've done this: Code: * { margin:0; padding:0; }
body {
margin: 0 auto;
width: 1000px;
text-align: center;
background-color: #e0d7e6;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
letter-spacing: normal;
vertical-align: top;
word-spacing: normal;
white-space: normal;
line-height: normal;
padding: 0px;
background-image: url(../images/shared/gifs/bacgrnd.gif);
background-repeat: repeat-x;
}
#wrapper {
text-align: left;
position: relative;
z-index: 0;
}
And the HTML: Code: </head> <body><div id="wrapper"> webpage content </div></body> And it works well, except the page is off center (to the right) by a couple of pixels. It's in all browsers. Does anyone have a fix? Thanks in advance. Hi guys. I am building a website where some pages are long (and the slidebar appears) and others are short (so the slidebar doesnt appear) The problem is that the page is centered and when the slidebar appears, the page moves a bit to the left. I could set the left-margin to X pixels but then it wont work as expected with different resolutions. Is there anyway to solve this problem? |
|||||||