CSS - Scroll Bars/ Clickable Thumbnails Enlarge On A Differrnt Part Of Page (details Inside

Hi All,

I have a skeleton css site here

http://www.10eight-design.co.uk/temp/layout_test_float.htm

You'll notice that there is a LR scroll bar at the bottom of the scrollable div. Is there a way to remove this?

That's all.

Rob

When I place my flash file in a html document I don't want the scroll bars visible, unless the window is resized smaller than the dimensions of the flash movie.

I'm using this piece of code nicely to turn the scroll bars of the browser window off, but it dosn't turn them back on when needed.

<STYLE TYPE="text/css">
BODY {overflow:hidden;}
</STYLE>

This link,

http://www.one9ine.com/flash.html

works the way I'm trying to work out. No scrollbars visible untill, the browser window is rezised smaller that the flash movie content.

Cheers for the help.

I have a few questions, and hopefully this will set me for the rest of the day, so I don't have to bother you guys, at least untill tomorrow afternoon.

1. I have a question about scroll-bars, how are they implemented to be translucient?

2. How can I make <DIV>'s auto-stretch to whatever is in them?

3. How can I get it so that the text doesnt go to the very edge of the <DIV> so that it doesn't touch the border, (and look like crap)?

4. Is there any way to take an XML RSS feed and input it directly into any web page (just though I'd throw that one in there so I didn't have to start another thread).

Thanks,
-Sam

I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that?

Hey everyone,

I am having a really hard time creating a layout using divs with a sticky footer that is able to resize correctly. In the past I often used tables for my layouts (i know, naughty me) so i was mainly relying on some tutorials to get as far as I have. In general everything looks good at a high enough resolution, however once things are resized the footer starts to act weird, and the page can end up with up to 3 vertical scroll bars. As well the divs start to overlap each other.

If anyone has any ideas as to something i can try it would be greatly appreciated.

the page is www.spacehindu.com/archive.php


and the css for the page is as follows:
Code:

* {
	margin: 0;
}
html, body {
	height: 100%;
	padding:0;
	background-color:#000;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;   
	font-size: 13px;
	padding: 0;           
	margin: 0; 
	letter-spacing: 0.5px;

	}

.wrapper{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width:100%;
	margin: 0 auto -30px; 
	}						
			
			

h1{
font-family: calibri, arial, helvetica;
font-size: 22px; letterspacing: 0.5px;
color: #fff;
text-transform: lowercase; 
display: inline; 
padding-bottom: 10px;
}
h2{
display: inline;
font-family: calibri, arial, helvetica;
font-size: 15px; 
letterspacing: 5px;
color: #758a95;
font-weight: lighter; 
}
h3{
display: inline;
text-transform: lowercase; 
font-size: 17px; letterspacing: 1px;
color: #fff;
}
h4{
display: inline;
text-transform: lowercase; 
font-size: 13px; letterspacing: 8px;
color: #758a95;
}

a:link, a:visited {
			font-family: arial, calibri, helvetica;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: #374254;
color: #fff; 
text-decoration: none;
}

p {
letter-spacing: 0.5px;
font: Arial, Helvetica, sans-serif #b6bec6;
}

.nav{
	width:400px;
	height:95%;
	float:left;
	background-color:#000;
	min-height:600px;
}
.navImg{
	position:relative;
	top:30%;
}
.content{
	margin-left:400px;
	height:95%;
	background-color:#000;


}
	.archive{
	position:relative;
	left:50px;
	top:10%;

			}

.footer, .push {
	height: 30px;
	background: #12151f; 
	font-family: calibri, arial; 
	font-size: 12px; 
	color: #8f97a4;
	text-align: center;
	clear: both;
}

#dropdown{
background-color:#374254;
color:#CEDBEA;
border: 0px solid;
}
#dropdown .selected {
background-color: #CEDBEA;
color: #000;
border: #000 1px solid;
}

#dropdown .unselected {
background-color: #000;
color: #374254;
}

.fieldset {background-color:#000;
			border: solid 0;
}
.label{font-family: calibri, arial; font-size: 12px; 
letter-spacing: 0.5px;
}
.textarea {
	background: #374254; 
margin: 5px;
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
width: 200px;
}
.message {background: #374254; 
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
border-radius:  10px;

}
.submit {background: #374254;
border: solid 0; 
color: #cedbea;
}

and if it is any help, this is the tutorial i used as my base layout for the divs http://ryanfait.com/resources/footer-stick-to-bottom-of-page/


*EDIT* So i was able to fix the multiple scrollbars by removing "overflow:auto" from a few of the divs. My content div still seems to overlap the footer though. This is especially noticeable if you do a search for "a". a whole bunch of results will appear and the footer will get lost beneath is. Does anyone have any ideas as to how to easily fix this?

I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars.

Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top

Thanks

Can I use CSS or javascript to control the page details of an IFRAME? Such as printing in landscape orientation? If it is possible, how?

Hi All,

I have my site that uses CSS, however at times I want certain parts of it to not use the CSS. Not whole pages, just a section of a page.

Is there anyway to remove all CSS formating in a section?

So eg:

<div style='none'>
Some HTML
</div>


TIA Charlie

Dear All,

I have a question -

Background : I used the E-book "designing without tables" and created a page with 2 columns. A 200 px column on the left for the links and the rest on the right for the data.

There is also a header column on the top with has main menu.

Question 1 : If there are 5 links on the left column, how can I link the pages such that when I click on a link on the left column..only the right column should refresh. Meaning, I want the left column to be static with the links and only the right column should be refreshed? Is it possible to do so using only CSS and HTML ?

Thanks in advance. Regards.

www.devwebsites.com

There is a little strip of lightened color on that part and I don't think its from the images at least..I can't for the life of me figure out what is causing it.

Thanks

hi,

I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page.

Here is a link:
http://www.jcstrategies.com/jeff/featured_listings.php


CSS CODE
-----------------------------------------------------------
/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(./images/bg_grad.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}


/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 5px 10px 5px 5px;
margin:0px 0px 0px 179px;
border-left: 1px solid #ccd2d2;
}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(./images/glbnav_background.gif);
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url(./images/glblnav_selected.gif);
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}


/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(./images/bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/************* relatedLinks2 styles **************/

.relatedLinks2{
margin: 0px;
padding: 10px 0px 10px 1px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/




ANY IDEAS????

Hi, i have a styling problem. The page looks well in normal view in IE and firefox but when you zoom in the page (Ctrl++) the menu bar part of the page gets displaced from its position (right and left corner). your help and guidance wil be much appreciated. The page is at dev.cddimensions. com . Plz try to zoom in and notice the menu bar.

i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as:

header record1 record2 record3 record4
column1 column1 column1 column1 column1
column2 column2 column2 column2 column2
column3 column3 column3 column3 column3
column4 column4 column4 column4 column4

what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work.

Here is the code, its in php but its not big or too hard to figure out.

PHP Code:
echo '<div id="tableheader">';
for ($i=0; $i<count($info); $i++) {
    echo '<p>'.$info[$i][name].'</p>';
}
echo '</div>';

for ($i=0; $i<count($data); $i++) {
    if (!($i & 1)) {
        echo '<div class="even">';
    } else {
        echo '<div class="odd">';
    }
    for ($j=0; $j<count($data[$i]); $j++) {
        if ($j == 0) {
            echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>';
        } else {
            echo '<p>&nbsp;'.$data[$i][$j].'&nbsp;</p>';    
        }
    }
    echo '</div>';
}
echo '</div>';
?>
</div> 





and my css is:
Code:

#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
  
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;} 
.even {position: relative; float: left;}

#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black;  border-bottom: 1px solid black;display: block;}

Any ideas?

Thanks

When I scroll up and down my page, parts of my background image I have set (aka sliding door or box or container...) disappears!!! I don't understand, I tried getting rid of all the color and hover options and it still doesn't work right. I posted my code below if someone can help me!!! If needed I can always email the images if you can't work without them, I just need to get this figured out! Thanks a bunch!!
Toni Lynne

HTML
<td width="247" class="splitright">
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Welcome to Joy!</h2>
<p>Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy! Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy!</p>
<br />
</div></div>
</div>
</td>


CSS
/* background box */
.box {
background: url(images/bottom-left.gif) no-repeat left bottom;
}

.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 4%;
}

.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}

.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 4%;
}

.box h2, .box p {
padding-left: 4%;
padding-right: 4%;
}

.splitright {
background: #ffffff;
width:38%;
float: right;
overflow: hidden;
text-align:justify;
}

a:link { color: #fea11d; text-decoration: none; }
a:hover { color: #999999; text-decoration: none; }

OK, I have a static sub-navigation on the left side of the page, which works just fine. You can see it here

I'd like the sub-navigation to scroll to just beneath he header navigation, then stay put there, when the page is scrolled. Something like the Vogue web site does with the red navigation bar, which you can see here


Can someone please explain, or give me an idea of how to accomplish this? I think it is with CSS.

thanks