Problem with positioning using CSS

johnny0313x

02-24-2009, 04:42 AM

Okay, so I am working on redoing my portfolio site and have very little experience with css. I understand some of the basics and managed to make it this far with some instruction. So please go easy on the tech terms ha. Basically I am trying to make the site so that no matter what resolution or how wide your browser window is, things will adjust to fit correct. Problem is I can't get the menu to center without breaking it, and when you make the browser smaller the box at the top on the far right tends to get cut off rather then move with the layout(it moves a little then cuts) I have only tested it so far in firefox 3 for mac so it would probably best be viewed in that. Here is the code and link:

http://www.lyonsdesign.info/lyonsdesign/

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Lyonsdesign.info - John Lyons Portfolio site</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="John Lyons Online e-portfolio" />
<meta name="keywords" content="Portfolio, John Lyons, graphic design, digital art, illustrator, photoshop" />

<meta name="author" content="lyonsdesign.info" />

<style type="text/css" media="all">@import "master.css";</style>
</head>

<body>
<div id="page-container">
<div id="logo"><img src="images/logo.png"></div>
<div id="featured"><img src="images/featured.png"></div>
<div id="links">
<ul id="links">
<li><a id="print" href="index.html">Print<span></span></a></li>
<li><a id="portraits" href="pics.html">Portraits<span></span></a></li>
<li><a id="web" href="bn.html" title="Britnet Network">Web<span></span></a></li>
<li><a id="ads" href="forums.html">Ads<span></span></a></li>
<li><a id="all" href="lyrics.html">All<span></span></a></li>
<li><a id="resume" href="about.html">Resume<span></span></a></li>
<li><a id="me" href="about.html">About Me<span></span></a></li>
<li><a id="contact" href="about.html">Contact<span></span></a></li>
<li><a id="learn" href="about.html">Learn<span></span></a></li>
</ul>
</div>

<div id="content">Content</div>

<div id="footer">Footer</div>

</div>

</body>
</html>

CSS:
html, body {
margin: 0;
padding: 0;
background: #000000;
}

#page-container {
width: 100%;
margin: 0 0px;
background-color: #000000;
border-width: .1em;
border-style: solid;
border-color: #000000;
}

#logo {
float: left;
height: 307px;
width: 60%;
color: #fff;
background: #da0000 url(images/bg.gif) 0 0 repeat-x;
}

#featured {

float: right;
width: 40%;
height: 307px;
padding: 0 0px;
background: #da0000 url(images/bg.gif) 60% 0 repeat-x;
}

#featured h2 {
display: none;
text-align: right;
width: 337px;
margin-left: -5px;
font-size: 1.1em;
position: relative;
}
#links {
clear: both;
margin: 0 0;
min-height: 130px;
background: #c21c08 url(images/links.gif) 0 0 no-repeat;
font-size: 1pt;
}
* html #links {height: 130px;} /*sets a height for IE6, triggers haslayout*/

#links ul {
display: inline; /*pretty much only mentioned for IE to prevent stairstepping*/

}
#links a {
float: left;
margin: 0 0 0 0;
min-height: 130px;
color: #fff;
text-align: center;
font-size: 1.4em;
position: relative;
}
* html #links a {height: 130px;}

/*the below code is for those without images, to give visual feedback that they are indeed links*/
#links a:hover, #links a:focus {
text-decoration: none;
color: #ff0; /*yellow*/
outline: 0; /*this is acceptable because we are changing the image on :focus*/
}

#links a span {
position: absolute;
width: 100%; /*of parent, the anchor, whose widths we'll set below*/
height: 100%;
left: 0;
top: 0;
background: url(images/links.gif) 0 0 no-repeat;
}

#print {
width: 115px;
}
#print:focus span, #print:hover span {
background-position: 0 -130px; /*first number is horizontal, second is vertical*/
}
#portraits {
width: 102px;
}
#links #portraits span { /*because I said "#links a span, I need #links to override here*/
background-position: -115px 0;
}
#links #portraits:focus span, #links #portraits:hover span {
background-position: -115px -130px;
}

#web {
width: 102px;
}
#links #web span {
background-position: -217px 0px;
}
#links #web:focus span, #links #web:hover span {
background-position: -217px -130px;
}
#ads {
width: 103px;
}
#links #ads span {
background-position: -319px 0px;
}
#links #ads:focus span, #links #ads:hover span {
background-position: -319px -130px;
}
#all {
width: 96px;
}
#links #all span {
background-position: -422px 0px;
}
#links #all:focus span, #links #all:hover span {
background-position: -422px -130px;
}
#resume {
width: 103px;
}
#links #resume span {
background-position: -518px 0px;
}
#links #resume:focus span, #links #resume:hover span {
background-position: -518px -130px;
}
#me {
width: 110px;
}
#links #me span {
background-position: -621px 0px;
}
#links #me:focus span, #links #me:hover span {
background-position: -621px -130px;
}
#contact {
width: 114px;
}
#links #contact span {
background-position: -731px 0px;
}
#links #contact:focus span, #links #contact:hover span {
background-position: -731px -130px;
}
#learn {
width: 135px;
}
#links #learn span {
background-position: -845px 0px;
}
#links #learn:focus span, #links #learn:hover span {
background-position: -845px -130px;
}

#content {
background: #f6ddad;
height: 66px;
clear: both;
}

#footer {
background: #f6ddad;
height: 66px;
}

Fisher

02-24-2009, 05:14 AM

One suggestion first. Is it possible for you to upload a pic of what you want it to look like? For instance: what is supposed to be in the upper right corner section?

Firefox3:
http://img242.imageshack.us/img242/6750/firefox.jpg (http://imageshack.us)

IE6:
http://img242.imageshack.us/img242/3372/ie6.jpg (http://imageshack.us)

johnny0313x

02-24-2009, 05:27 AM

Well Here is whats going on here and so far i've only been working in firefox, i figured id get it right there and then go back and make it work everyplace else(IE)

Basically what I want is for the layout to be the full size of the browser window so its more compatible with all resolutions. So if someone has a really wide screen that black transparent box will move over need be towards the right side of the screen. If someone has a small resolution then the black box will be closer to the logo.

The black box will have text about it that says "Featured Pieces" or something like that and 2-3 portfolio pieces will be displayed as images inside the black box

Next the menu/links I just want them to be centered at all times.

Last the content and footer I think I will be okay on once I have the header stuff taken care of.

This is my best CSS layout really and I think I am doing pretty good so far but have a loooong way to go.

I am trying to get this done ASAP since I have a job interview March 4th and my current portfolio site is kinda sucky lol.

I'm going for something like this:

Thanks :)
http://www.lyonsdesign.info/show.gif

Fisher

02-24-2009, 01:17 PM

The transparent png files are going to give you a problem in IE. Maybe only in IE6 though. I think there are workarounds out there somewhere.

Anyway, try this code. You'll need to change the paths to your images.

CSS:
html, body {
margin: 0;
padding: 0;
background: #000000;
}
#page-container {
width: 100%;
margin: 0 0px;
background-color: #000000;
border-width: .1em;
border-style: solid;
border-color: #000000;
}
#header {
width:100%;
height:307px;
background: #da0000 url(bg.gif) 0 0 repeat-x;
}
#logo {
float: left;
width: 336px;
height: 285px;
color: #fff;
background: url(logo.png) 0 0 no-repeat;
}
#featured {
float: right;
width: 540px;
height: 285px;
padding: 0 0px;
background: url(featured.png) 0 0 repeat-x;
}
#featured h2 {
display: none;
text-align: right;
width: 337px;
margin-left: -5px;
font-size: 1.1em;
position: relative;
}
#nav {
background:#f6ddad;
width:100%;
text-align:center;
}
#links {
clear:both;
background:url(links.gif) 0 0 no-repeat;
width:980px;
height:130px;
margin:0 auto;
padding:0;
}
#links span {
display: none;
}
#links li, #links a {
height:130px;
display:block;
}
#links li {
float:left;
list-style:none;
display:inline;
}
/*the below code is for those without images, to give visual feedback that they are indeed links*/
#links a:hover, #links a:focus {
text-decoration: none;
color: #ff0;
outline: 0;
this is acceptable because we are changing the image on :focus
}
#print {
width: 115px;
}
#print a:hover {
background:url(links.gif) no-repeat;
background-position: 0 -130px; /*first number is horizontal, second is vertical*/
}
#portraits {
width: 102px;
}
#portraits a:hover {
background:url(links.gif) -115px -130px no-repeat;
}
#web {
width: 102px;
}
#web a:hover {
background:url(links.gif) -217px -130px no-repeat;
}
#ads {
width: 103px;
}
#ads a:hover {
background:url(links.gif) -319px -130px no-repeat;
}
#all {
width: 96px;
}
#all a:hover {
background:url(links.gif) -422px -130px no-repeat;
}
#resume {
width: 103px;
}
#resume a:hover {
background:url(links.gif) -518px -130px no-repeat;
}
#me {
width: 110px;
}
#me a:hover {
background:url(links.gif) -621px -130px no-repeat;
}
#contact {
width: 114px;
}
#contact a:hover {
background:url(links.gif) -731px -130px no-repeat;
}
#learn {
width: 135px;
}
#learn a:hover {
background:url(links.gif) -845px -130px no-repeat;
}
#content {
background: #f6ddad;
height: 66px;
clear: both;
}
#footer {
background: #f6ddad;
height: 66px;
}

HTML:
<!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=UTF-8" />
<title>Lyonsdesign.info - John Lyons Portfolio site</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="John Lyons Online e-portfolio" />
<meta name="keywords" content="Portfolio, John Lyons, graphic design, digital art, illustrator, photoshop" />
<meta name="author" content="lyonsdesign.info" />
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page-container">
<div id="header">
<div id="logo"></div>
<div id="featured"></div>
</div>
<div id="nav">
<ul id="links">
<li id="print"><a href="index.html"><span>Print</span></a></li>
<li id="portraits"><a href="pics.html"><span>Portraits</span></a></li>
<li id="web"><a href="bn.html" title="Britnet Network"><span>Web</span></a></li>
<li id="ads"><a href="forums.html"><span>Ads</span></a></li>
<li id="all"><a href="lyrics.html"><span>All</span></a></li>
<li id="resume"><a href="about.html"><span>Resume</span></a></li>
<li id="me"><a href="about.html"><span>About Me</span></a></li>
<li id="contact"><a href="about.html"><span>Contact</span></a></li>
<li id="learn"><a href="about.html"><span>Learn</span></a></li>
</ul>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

johnny0313x

02-25-2009, 05:26 AM

I just want to say I love you... no but really that appears to have worked perfect, I will check it out in all browsers but it looks great and now I can learn from what you did and modify it. I really really appreciate your help, you are a life saver!