WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Can't get navigation images to adjust with browser size

Reply
  Thread Tools Display Modes
Old 22nd December 11, 06:14 PM   #1
jakejkirk
WLC Member
 
Join Date: Dec 2011
Posts: 3
Default Can't get navigation images to adjust with browser size

Hi all! I've gotten all of my content to shift over and stop after it reaches the sides of the page when I adjust the size of the browser window EXCEPT for the navigation images. I've tried adding margins to each individual image positioning ID and then I tried adding margins to a div that holds all the images. Nothing I've tried is working. All help is much appreciated!

Here is the code:

Quote:
<!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" lang="en" xml:lang="en">
<head>
<title>That One Guy :: Home</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="images/favicon.gif" rel="icon" type="images/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />


<script src="js/language-en.js" type="text/javascript"></script>
<script src="js/nopcart.js" type="text/javascript"></script>
<script type="text/JavaScript" src="curvycorners.src.js"></script>


</head>

<body>





<div id="container">

<!--Navigation-->
<div id="navcontainer">
<div id="homenav">
<a class="rolloverhome" href="index.html">Home</a>
</div>
<div id="aboutnav">
<a class="rolloverabout" href="about.html">About</a>
</div>
<div id="contactnav">
<a class="rollovercontact" href="contact.html">Contact</a>
</div>
<div id="portfolionav">
<a class="rolloverportfolio" href="portfolio.html">Portfolio</a>
</div>
</div>
<!-- End Navigation-->

<div align="center">

<!--Logo-->
<img id="logo" src="images/logo_small.png" width="234" height="234" alt="That One Guy Productions Logo" />
<!--End Logo-->

<div id="maincolumn">
<p>
<h2>It's Alive!</h2>
Are you looking for that little extra "something" to spice up your book? Something easy to share and promote anywhere? Why not a book trailer?<br /><br />

<h2>But why a Book Trailer?</h2>
<br />

Books trailers are awesome. They are a fun and interesting way to promote your book! Show them to your friends! Your family! Your cat!

<h2>How can I obtain such a glorious prize?!</h2>

Feel free to contact me regarding your book/trailer idea. We'll work together to make sure you get the most exquisite, glamorous, entertaining, mouthwatering trailer you could possibly have!
</p>

</div>


<!--Footer-->

<div id="footer">
<a href="index.html">Home</a> &nbsp;&nbsp;



<p id="small">
That One Guy Productions © 2011 Jake Kirk<br />
<a href="mailto:jakejkirk@gmail.com">jakejkirk@gmail. com</a>
</p>
</div>
</div>
<!--End Footer-->


</div>



</body>
</html>
Quote:
--CSS--


body {
background-image: url('images/background.png');
background-repeat: repeat-x;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, sans-serif;
font-size: 1.25em;
}

img {
border:0;
padding-right:10px;
}

h2 {
font-family: Verdana, sans-serif;
font-size: 1.25em;
color: #FF3333;
text-transform: uppercase;
}

h3{
margin: 0px 5px 5px 0px;
padding: 5px;
font-family: Verdana, sans-serif;
font-size: 2em;
float: left;
color: #FFFFFF;

}

li{
list-style-type: circle;
}

table{
text-align: center;
font-size: 1.25em;
width: 400px;
}

td{
padding: 10px;

}

.floatright {
float: right;
padding: 5px;

}

.floatleft{
float: left;
padding: 5px;
}

.fine{
font-size: .60em;
font-style: italic;
}

.red{
color: #FF0000;
}

#logo{
position: relative;
right: 290px;
margin: 0 295px 0 295px;
padding: 10px 10px 0 10px;
}

#form{
width: 600px;
background-color: #99FF99;
border: 2px solid #669900;
text-align: center;
padding: 10px 0px 10px 5px;
margin: 15px;
}

#navcontainer{
width: 520px;
margin-left: auto;
margin-right: auto;
}

#homenav{
position:absolute;
top: 20px;
right: 960px;

}

#aboutnav {
position: absolute;
top: 20px;
right: 840px;
}

#contactnav {
position: absolute;
top: 20px;
right: 700px;
}

#portfolionav {
position: absolute;
top: 20px;
right: 580px;
}

#container {
width: 800px;
margin-left: auto;
margin-right: auto;
}

#footerzombie{
position: relative;
bottom: 237px;
margin-left: 630px;
z-index: 5;

}

#maincolumn {
width: 800px;
background-color: #999999;
border: 2px solid #CC99CC;
margin: 20px 10px 0 10px;
padding: 10px;


border-radius:20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;


/* For Future Tweeking
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
*/
}




#footer{
width: 800px;
font-size: 0.8em;
background-color: #999999;
border: 2px solid #CC99CC;
margin: 10px 10px 0px 10px;
padding: 5px 10px 0 10px;

border-radius:20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;

}

#small{
text-align: center;
font-size: .90em;
font-style: italic;
}

a.rolloverhome{
display: block;
width: 138px;
height: 234px;
background: url('images/home.png') bottom;
text-indent: -99999px;
}

a:hover.rolloverhome {
background-position: 0 0;

}

a.rolloverabout{
display: block;
width: 138px;
height: 234px;
background: url('images/about.png') bottom;
text-indent: -99999px;
}



a:hover.rolloverabout {
background-position: 0 0;
}

a.rollovercontact{
display: block;
width: 138px;
height: 234px;
background: url('images/contact.png') bottom;
text-indent: -99999px;
}



a:hover.rollovercontact {
background-position: 0 0;
}

a.rolloverportfolio{
display: block;
width: 138px;
height: 234px;
background: url('images/portfolio.png') bottom;
text-indent: -99999px;
}



a:hover.rolloverportfolio {
background-position: 0 0;
}

a:link {
color: #FFFFFF;
text-decoration: none;
}

a:visited {
color: #FF6600;
text-decoration: none;
}

a:hover {
color: #FF3333;
text-decoration: none;
}

a:active {
color: #CC3333;
text-decoration: none;
}
jakejkirk is offline   Reply With Quote
Old 22nd December 11, 11:30 PM   #2
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Can't get navigation images to adjust with browser size

Position:absolute????
Phreaddee is offline   Reply With Quote
Old 22nd December 11, 11:31 PM   #3
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Can't get navigation images to adjust with browser size

Use [code] or [HTML] delimiters for posting code, it makes it much easier to read.
chrishirst is offline   Reply With Quote
Old 23rd December 11, 07:31 AM   #4
jakejkirk
WLC Member
 
Join Date: Dec 2011
Posts: 3
Default Re: Can't get navigation images to adjust with browser size

Sorry, this was my first post here.

I'm not sure what you mean by your comment Phreaddee. I tried relative positioning as well but that didn't work either.
jakejkirk is offline   Reply With Quote
Old 23rd December 11, 09:24 AM   #5
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Can't get navigation images to adjust with browser size

There is probably no need for ANY kind of positioning at all.

Absolute & fixed remove elements from the document flow, and relative only moves where the element displays rather than move the element itself.

Using positioning inappropriately will always create "issues".
chrishirst is offline   Reply With Quote
Old 23rd December 11, 09:34 AM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Can't get navigation images to adjust with browser size

And by the way, when images are involved, providing the code is of little help to us, because we do not have your images so we can try and recreate the problem.
Providing us with a URI, even on a free or temporary host is needed. You can uncheck the "Automatically parse links in text" box or leave off the http & www so it doesn't become a link.

And finally, the HTML and Code buttons are the ones alongside the "quote" button.
chrishirst is offline   Reply With Quote
Old 23rd December 11, 08:01 PM   #7
jakejkirk
WLC Member
 
Join Date: Dec 2011
Posts: 3
Default Re: Can't get navigation images to adjust with browser size

Here is a live version of the site. There is only the home page, the other links don't go anywhere but work fine.

http://jakekirk.freeiz.com/
jakejkirk is offline   Reply With Quote
Old 24th December 11, 02:27 PM   #8
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Can't get navigation images to adjust with browser size

You are using CSS 3 background properties which are unsupported by most browsers currently.

What I would suggest would be to give the image containers;

A min-width property value so they stop collapsing and/or use percentage widths and overflow: hidden to stop them going "behind" the preceding element in the document flow.
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:24 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.