No replies
cschoon
Offline
newbie
Last seen: 11 years 20 weeks ago
Joined: 2009-05-03
Posts: 1
Points: 0

Hello,

2 weeks new to css. I am trying to get my logo image to freeze when the window shrinks. I want part of the image to go off the screen or be cut off.

Here is the example I am trying to copy:
http://charisoutreachministries.org/
When you start shrinking the the logo image gets clipped off.

I am trying to do that with our site.
http://www.mrschoonsclass.com/Flash.test/index_backup.html
When I shrink our site the image floats or moves.
I tried to set up a class to absolute position it, but I also know the class is in a relative position div. I am new so any help would be great.

@charset "utf-8";

* {
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
}
#main_logo {
z-index:5;
margin-right: auto;
margin-left: auto;
text-align: left;
width: 900px;
}
#main_logo .imgContainer {
text-align: left;
position: absolute;
z-index: 5;
height: auto;
width: 840px;
top: 10px;
margin-right: auto;
margin-left: auto;
white-space: normal;
left: 0px;
overflow: hidden;
}

#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
background-color: #FFFFFF;
margin-top: 45px;
border-top-width: 2px;
border-top-color: #000000;
}
#wrapper #top_navigation {
width: 800px;
background-color: #e4f8ff;
height: 30px;
position: relative;
}

.nestedBR {
font-family: Geneva, Arial, Helvetica, sans-serif;
height: auto;
width: 300px;
position: absolute;
right: 10px;
bottom: 0px;
background-color: #e4f8ff;
text-align: right;
}
.nestedBR ul {
font-family: Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #e4f8ff;
list-style-type: none;
white-space: nowrap;
padding-right: 20px;
}
.nestedBR li {
display: inline;
list-style-type: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.nestedBR li a {
font-family: Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #004460;
padding: 7px 10px;
}
.nestedBr li a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #fff0a3;
}
.nestedBR li a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #fff0a3;
background-color: #004460;
}

#wrapper #flash_banner {
background-color: #FFFFFF;
height: 200px;
width: 800px;
}
#wrapper #main_navigation {
background-color: #4b6000;
height: 25px;
width: 800px;
}
#wrapper #body_area #left {
width: 550px;
float: left;
}

#wrapper #body_area #right {
width: 250px;
float: right;
}
#wrapper #body_area #right p {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 20px;
}

#wrapper #body_area #footer {
height: 50px;
width: 800px;
clear: both;
background-color: #004460;
}
#wrapper #body_area #left p {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
margin: 15px;
}

#yellowBox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #FF9933;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFCC33;
height: 50px;
background-color: #FFFF00;
border-top-width: 3px;
border-bottom-width: 3px;
border-bottom-color: #FFCC33;
width: 300px;
padding-left: 10px;
padding-top: 10px;
text-decoration: none;
margin-left: 125px;
margin-bottom: 25px;
}