I’ve tried modifying much of the css based on other recommendations I’ve seen on the forum.
Here is a link to my site - I would greatly appreciate ANY help!!
(I forgot to mention = site works fine in chrome, but not IE)
Thank you!
Hi akweb2012. Welcome to the forums. 
I think the reason for that little right jump of the links is because of this rule on line 5 of the common.css file:
:focus {
outline-style: none;
[COLOR="#FF0000"]margin-left: 15px;[/COLOR]
}
However, your site does have some problems even in Chrome. The main page container is really set far too wide for most screens, meaning that the site is pushed well to the right on most screens and the user needs to scroll right to see the content. (Maybe you have a very wide screen?)
I can’t see all the reasons for this, but the absolute positioning through the design makes the page harder to set back on track. You could start by vasly reducing the width of the #page div. Otherwise it’s not going to be a pleasant browsing experience for most users, even though the design does look nice.
OH my goodness - thank you so much! Yes, I do have a wide screen, and I have the faded sunset in the background, which I didn’t want to “cut” off. I thought I should make the site extra wide (I’m obviously not a coding pro).How would you recommend making the site more narrow? Do you think this would affect viewing on a wide monitor?
I really appreciate your help!!
Have a great evening,
Lynette
Yes, the reality is that it will be cut off on smaller screens, but that’s OK. You just have to live with that.
I would say firstly put the the sunset background on the #top div, and remove position: absolute from that div.
Then set the #page div to the width of your content area and keep it centered as it is.
Those are the first steps I’d take.
Do you think this would affect viewing on a wide monitor?
No, not at all. It will stay the same there, but look better in more standard monitors.
Awesome - thank you!! I will definitely try it.
I appreciate your feedback - you have no idea how long I’ve been trying to problem-solve
Lynette
Great! Well, I’m sure more will be needed, but this is a start. However, make sure to keep a copy of your original CSS, just in case you want to revert for the time being, as things may get messed up during the process. (Sometimes you have to go backwards to go forwards.)
I made your suggested changes (plus a number of others), and I can’t seem to make it more left justified (it isn’t centered in small windows). I reduced the width on every setting I could find (from 1700+ to 1076). I even tried 800px and it didn’t seem to make a difference. Any suggestions?
I also couldn’t get the faded background sunset all the way to the top?
Here is a new link to the temp site:
http://test.avisualvoice.com/ - - I only focused on the index page for now - disregard the others.
Oh and somehow the menu links wont work -(never mind fixed those)…
Any ideas?
You still have things like
#leftcontent {
width: [COLOR="#FF0000"]1664px[/COLOR];
height: 384px;
}
The only real purpose of something like a #top div is for background images. The sunset image should be a background image there, not in the HTML.
Unfortunately, there’s a lot to change here, so it’a gradual process. Using positioning like position: absolute is not a good idea most of the time, and the only thing it’s really handy for her is the bird image. In this situation, if possible it would be better to start from the ground up, at least as a test, and firstly add the wood bg to the body (which you have) then add the sunset image to the #top div, then add the #page wrapper with a set width and centered, and then add in elements bit by bit inside that.
I see I missed that width. I changed it and it didn’t seem to make a difference, darn.
I also tried setting the sunset as the background in the #top div and it threw the entire content off. I’m trying to figure out if it is the sunset that is making the page content bump over to the right, or if it is the “leftcontent” square. Unfortunately I don’t have time to rebuild - on a time crunch… I could always move in the upper sea otter, but I don’t think that is affecting the page positioning in the browser.
Hi Ralph,
I was able to set everything to relative positioning - basically rebuilt the pages. There are minor alignment tweaks, but for the most part it’s functioning pretty well in small windows / resizing!
Would you happen to be able to tell why the top two menu links are not working on chrome? they work in IE… - - (never mind - I fixed it!)
the other thing I’m not sure about is why the page is so long (beyond the “bottom” of the content)?
Thank you for all your advice! I’m getting there!
Lynette
Not sure about all the issues, but one thing I’d do is change the width here:
#page {
margin: 0px auto 0px auto;
width: [COLOR="#FF0000"]966px[/COLOR]; // change from 800px
position: relative;
left: 0px;
right: 0px;
}
Not sure what you mean about “top menu links not working”, though. Which ones? What is not working about them?
OH - I had added right after I posted that I had corrected the menu problem…
YES - that made the page centered!! How did you come up with that number?
(I do see that it knocked the footer out of alignment but I can adjust that)
Thank you!
I have a little tool called XScope, which measures things on screen. That was the width of your content area, not 800px.
how neat!!
any advice on the extra page length beneath each footer?
I tried to remove the “leftcontent” div, which seems to be taking up that space (I removed the image associated with it). When I remove the div it knocks everything out of position so I hesitate to do that.
I still can’t see the cause of that. There are things like this that are out of place:
<div id="captiontext" class="text_link">
<!-- --> <p>Dr. Young and his wife, Molly</p>
<!-- -->
</div>
But that’s not the whole story. I can’t see where leftcontent is.
OK, just fixed the caption…thanks for catching that.
on line 130 of “services” page:
<div id=“leftcontent” class=“leftcontent”> - - - although it is on all pages.
I used to have a large image in that div and when I viewed the css layout backgrounds I could see it down toward the bottom of page.
It seems like it is still taking up that space, but I might just need to live with it.
#leftcontent {
z-index: 1;
width: 200px;
height: 144px;
margin-left: 0px;
margin-top: 0px;
}
I don’t know enough to give helpful advice, but I surely do like that site!
Hi,
The big gap at the bottom of the page is because of your use of relative positioning where you have moved elements form their original position. Relative positioning does not remove the element from the flow so it actually still occupies its original position in the flow and takes up space in the flow of the page at that point although visually it may appear to be somewhere else. You have used many large negative top positions using relative positioning to move certain elements into place and this is why there are big gaps at the bottom of the page where the elements originally resided. (It also looks very unprofessional to have a great big gap at the bottom of the page and a horizontal scrollbar when none is needed so really does need addressing.)
Suffice to say you don’t use relative positioning in this way as it is not meant for structural layout like this but for more subtle overlapping effects where the flow of the page is not compromised.
You should either float elements where you want horizontal alignment or if you want overlaps you can use absolute positioning (assuming the flow of the document is controlled within that region) or to use negative margins. However it is also not a good idea to drag things up from the bottom used pixel dimensions because that relies on the content above always being the same size which will hardly ever be the case especially if more content is added later or even if the user increases the text size in their browser.
There is little need for all those adjustments in your page if you construct it logically with one element following and relying on the previous one for its position. You can use absolute positioning for the images you want overlaid but using position:relative on a parent to create the current context. Basically you have a two column site with footer which is pretty simple. A lot of those img elements in the html are decoration and should be in the background anyway. You don’t really need all those empty elements as existing elements could hold a number of those backgrounds anyway.
You obviously have an eye for design but seem to have taken the wrong approach. As Ralph said above you need to start over using a more consistent and robust approach and not one that relies on elements being dragged up by 2530px as in your footer
Hi,
Here’s a start and should show how easy this is if you just stay logical.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background:#fff url(http://www.midnightsunsmiles.com/picts/browserbackground2.jpg) repeat 50% 0;
padding:100px 0 0;
}
#outer {
background: url(http://www.midnightsunsmiles.com/picts/bothcontent3.png) no-repeat 50% 0;
min-width:1076px;
margin:auto;
}
#inner {
padding:1px 55px 20px;
width: 965px;
margin:auto;
background:url(http://www.midnightsunsmiles.com/picts/purplecontentsvs.png) repeat 0 0;
}
#page {
margin: 0 auto;
position: relative;
width:965px;
background:url(http://www.midnightsunsmiles.com/picts/linenbackground.gif) repeat 0 0;
padding:1px 0;
}
#header {
background:url(http://www.midnightsunsmiles.com/picts/whitetorncontent.gif) no-repeat 0 0;
padding:50px 0 1px;
margin:-50px 0 -130px;
}
#header-inner {
background:url(http://www.midnightsunsmiles.com/picts/d11sunsetcontent.png) no-repeat 0 0;
min-height:328px;
padding:100px 0 0;
}
.logo {
width:336px;
height:128px;
margin:0 auto;
text-indent:-999em;
background:url(http://www.midnightsunsmiles.com/picts/upperlogocontent.png) no-repeat 0 0;
}
#content {
clear:both;
width:100%;
}
#content:after {
content:".";
clear:both;
visibility:hidden;
display:block;
height:0;
}
#main {
float:left;
width:500px;
margin:0 0 0 100px;
}
#sidebar {
float:right;
width:250px;
margin:0 25px 0 0;
padding:25px 0 0;
}
.otter {
padding:50px;
margin:0;
position:relative;
zoom:1.0;
}
.otter span {
position:absolute;
left:-300px;
top:-50px;
width:372px;
height:246px;
background:url(http://www.midnightsunsmiles.com/picts/ottercontent.png) no-repeat 0 0;
}
#footer {
clear:both;
margin:25px -10px 0 -10px;
background:url(http://www.midnightsunsmiles.com/picts/orangecontent.png) repeat 0 0;
min-height:159px;
position:relative;
zoom:1.0;
}
#footer-inner {
background:url(http://www.midnightsunsmiles.com/picts/bottomsuncontent.jpg) no-repeat 0 0;
min-height:159px;
position:relative;
zoom:1.0;
padding:0 25px;
margin:0 10px;
}
.otter2 {
position:absolute;
right:-100px;
top:-100px;
width:502px;
height:313px;
background:url(http://www.midnightsunsmiles.com/picts/lowerotterscontent.png) no-repeat 0 0;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="page">
<div id="header">
<div id="header-inner">
<h1 class="logo">Midnight Sun Smiles LLC</h1>
</div>
</div>
<div id="content">
<div id="main">
<h2 class="otter">Welcome to the Office of Dr Evan young<span></span></h2>
<p>Midnight Sun Smiles is the dental office of Evan Young, DDS. At Midnight Sun Smiles we strive to deliver high quality dental care in a comfortable setting. Our office is centrally located in Anchorage and offers patients easy access from both the Seward Highway and Lake Otis Pkwy. Dr. Young offers comprehensive dental care for both children and adults, as well as cosmetic services to help you achieve your goals for both a beautiful and healthy smile. </p>
</div>
<div id="sidebar">
<h3>Sidebar goes here</h3>
</div>
</div>
</div>
<div id="footer">
<div id="footer-inner">
<p>Footer content goes here</p>
<div class="otter2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope that helps:)