CSS - Why Is This Not Taking Effect..need Some Input

Hi

please visit this page

As you can see the sample text is pushed towards the bottom of the page despite there is a lot of space available on the right side of the page. here is the css I am using for the div

Code:

.right_sidez { float: right; width: 430px; margin: 0 5px 0 0; text-align: justify; }

according to the page dimensions it should go up to 550 px width but it works fine till 420px and after that the text is pushed towards the bottom of the page.

what can I do to push the text to use all the space available on the right side ?

thanks

Hi,

I am new here, altough I have been comming here to search for solutions very often. I am a very great fan of CSS and have developed my own website (for my small bussiness) in pure CSS and XHTML.

Now, when I started developing my website I created a layout. I have stuck with the same layout ever since. This was my idea, altough the layout is used in different ways by other websites.

However something I did a lot was to browse other pure CSS websites. When there was something I liked I tried to recreate it (I never copied what other people did, always re-created myself).

The problem is that I started my website with the following colour scheme; Black, White and Red. After browsing some website I must admit that I did copy coloures from other websites. Again it is only the coloures I copied! All the implementation (CSS, Xhtml, JavaScript is my own) and when there was an image I liked (for example for the borders) I recreated it on my PC.

Now I am asking this question here because you people do CSS websites all the time. I know that some of you have been in this bussiness for some quite time and thus have the best advice on what should I do. Whether to leave my website as it is or else change it (note that I still did not launch my website). My question is related with Ethics as much as with legaility of what I did.

I am giving some extra detail of what I mean by copy the colour scheme and recreating images.

Copy Colour Scheme: Here I used a colour picker tool. I did not copy my colour scheme from just one website, but from various and used them within my layout (My layout is totaly different from the websites of which I copied the colours from).

Recreating images: This has been done for the borders and shading. Again I have taken ideas from different websites. What I did is see how they did it and then recreate it. Sometimes I altered the images to better fit my requirments. However I have some images which I recreated nearly pixle by pixle the same altough I am not using the same image that the websites are using (I have recreated a small part of it).

Now I checked the websites and there does not seem to be any copyright to protect images or colour scheme.

Also I am not planning to insert my website for any competition. I must admit i like the design I have but not really intrested in any awards. I am new to web development and the only reason I am creating the website is because I wanted a web presence.

Again, I have created all the CSS and HTML by myself using also some on-line tutorials. The only thing I see as a problem is the colour scheme and some images.

dd

hi..
i need to change the height of drop down box, if i change that using style means getting in firefox but not in IE.. IE taking some default height... need to avoid tht.. help me out guys.. its very urgent... pls...

the design for a web page i am coding calls for a floater with rounded corners and drop shadows. this is easily done by making the entire background a PNG with the corners, borders, and shadow applied (thankfully the window is a fixed size)

now, ive been having no problems in the past using the following code in my javascript pop ups. however, this time i'm replacing the entire background with this and it's making everything inside of the container that has this unclickable. i realize there are workarounds to this including making everything 'inside' this window absolute above it, to only making the drop shadows transparent PNGs, but i'm hoping for a much simpler answer. does anyone know about this issue?

Code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='blah.png', sizingMethod='crop');

Please refer to the following web site: h*t*t*p://alturl.com/iio4

As you can see in the above mentioned web site, there is a "|" menu link divider which displays between the links (About, Events, Teams, Shop). I don't want it to however appear at the end of the last link (shop). I have tried several things but can't seem to get the CSS to remove it just after the last link.

Any help with this would be greatly appreciated. Following is both HTML and CSS code:

Code:

<div id="navigation">
<a href="/about" class="navigation-about">About</a>
<a href="/events" class="navigation-events">Events</a>
<a href="/teams" class="navigation-teams">Dance Teams</a>
<a href="/shop" class="navigation-shop">Shop</a>
</div>

Code:

/***** Navigation *****/

#navigation {
    background:url(../_images/menu_bg.png) repeat-x;
	height:68px;
	width:100%;
	padding:10px 0 10px 0;
	margin:0 0 20px 0;
	}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/


.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
    float: left;
    display: block;
    padding: 0 0 0 12px;
    font-size: 105%;
}

#navigation-logo {
	display:block;
	float:left;
	margin:3px 0 0 10px;
	padding-right:25px;
	}

#navigation a, #navigation a:visited {
	display:block;
	text-decoration:none;
	color:#666;
	padding:0 10px 0 10px; 
	background-image:url(../_images/nav_divider.png);
	background-repeat:no-repeat;
	background-position:right;
	font-weight:bold;
	}

Thank you once again! If possible.. pleaseeeee provide a working CSS so I do not misunderstand you.

I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished.

However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation.

However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work...

Here's my css:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
	width: 1024px;
	min-height: 748px;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden; /* contain inner floats */
	position: relative; /* establish the containing block */
}

#accounttypeselector { /* select personal or business to affect page display */
	height: 25px;
	background: #0000FF;
}

#servicesbar { /* container for user services */
	height: 30px; /* 30px should be adequate height */
	width: 100%;
}

#servicesbar-services { /* container for user services once logged in */
	float: left; /* push this to left side */
	width: 75%; /* want it to be 75% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #ff00ff;
}

#servicesbar-login { /* for user login and logout - contained inside servicesbar */
	float: left; /* should push this just beside services */
	width: 25%;
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #8B2323;	
}

#header { /*header for the site - will contain logo, search, and main navigation */
	float: left;
	width: 1024px;
	height: 100px;	
}

#header-logo { /* will include site banner/logo - will be located on left side */
	background: #ff0000;
	width: 50%;
	float: left;
}

#header-rightcol { /* column for search and main nav */
	width: 50%;
	float: left;
}

#header-rightcol-search {
	min-height: 50%;
	max-height: 50%;
	background: #7FFFD4;
}

#header-rightcol-navmain { /* navbar that will be located below header */
	min-height: 50%;
	max-height:-50%;
	background: #21ee00;
}

#bodywrapper { /* wrapper for main content - will have 3 columns here */
	width: 1024px;
	height: 100%;
	padding-top: 10;
}

#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
	width: 15%;
	background: #8B8378;
	float: left;
}

#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
	width: 60%;
	background: #66CDAA;
	float: left;
}

#bodywrapper-news { /* news column to be located in right column of bodywrapper */
	width: 25%;
	background: #8A2BE2;
	float: left;
}

#footer { /* footer to be located at bottom of wrapper */
	margin: 0 auto;
	position: relative;
	width: 1014px; /* will be 1024 with padding */
	height: 20px;
	padding-right: 10px;
}

and here's my basic html
Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>	
	<div id= "wrapper" >
	
		<div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div>
		
		<div id= "servicesbar" >
			<div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
			<div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div>
		</div>
		
		<div id= "header" >
			<div id= "header-logo" >
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
			adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
			penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
			libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
			cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
			pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
			in dui. In eget elit. Praesent eu lorem.</div>
			
			<div id= "header-rightcol" >
				<div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
				<div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
			</div>
			
		</div>
		
		<div id= "bodywrapper" >
		
			<div id= "bodywrapper-navleft" >
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.
			</div>
			<div id= "bodywrapper-main" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
			<div id= "bodywrapper-news" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
		
		</div>
	
	</div>
	
	<div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
</body>
</html>

Thanks in advance and any suggestions would be greatly appreciated.

Hi everyone. I sure hope someone is nice enough to help me figure this out... these two problems has plagued me for a long time and I simply need to ask for help. I'm new to CSS, so you'll probably see all kinds of problems other than the one I'm writing about (and if you do, please do tell me... I'm open to any suggestions on how to tweak this).

My site is http://www.kettlebell.com. But specifically, let me direct you to http://www.kettlebell.com/fitness91...the-rescue.html as it is a good example of the problems.

I have several DIV tags separating the content, displaying google adsense, etc. I have a liquid 3 column layout. Some of my frustration may become more apparent as you resize the browser window. Chunks of my page get covered over with white space, which appears to be related to these div tags. So what ends up happening is that, depending on the size of the window, more or less of the content (including pictures) get chopped off... so I may have whole paragraphs missing or I may see only a strip of a photograph. For example, when the browser is fully expanded, since the text spreads over more area, it looks like the white areas get even larger. This problem reduces the smaller the window is, because the text wraps sooner, resulting in less competition for space.

To make things even weirder, this problem isn't consistent in FireFox. On my PC here at home, the page looks fine. But at work, in FireFox, I have this problem. (I don't know what version I have at work because I can't check right now, but mine at home is 1.5.0.7) As may be of no surprise to anyone, I have this version in IE regardless of where I am!

Also, is there a way to make it so that, when a page gets a certain width (on the smaller side), that it'll stop the columns from moving, so I can have a fixed minimum width for each column and the overall page? Because if I don't, then the layers end up covering each other when I make the page too small. I'd rather that, when I make it too small, the page stops getting smaller and just forces me to scroll to see the whole thing.

Any assistance would sure be appreciated. I'm so frustrated with this. Also, if anyone has any suggestions on how I can improve the page or my use of CSS or any other tips, I'd be eager to hear them. Just please keep in mind that I am a newb.

Here is my CSS... http://www.kettlebell.com/css.css

(by the way, has anyone ever had their monitor start "pinging"? right now, it is intermittingly making a pinging noise and flashes a line across the monitor in different areas. Weird.)

Layout Page

I know. It's not too great yet. But I've just started and it's still in the baby stages.

whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content!

Why is that?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">


<style type="text/css">

body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}

html {
height: 100%;
}

.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;

}

#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}

#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;

}

#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;

border-style: dotted;


}


</style>

<script type="text/javascript">
<!--

// -->
</script>
</head>


<body>

<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>

<div id="navBar">

alex wait




</div>

This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE.

I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action:

http://www.forma3.com/stuff/css/index-v1.2.html
http://www.forma3.com/stuff/css/css/index-v1.2.css

I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error.

I'm perplexed. I have a div,
Code:

<div class="classname">

containing a table in muliple pages. I tried applying css style to the div using .classname{ css }, backgroundcolor took affect but color and font-size didn't, its works on others pages though. So I tried Code:

<table style="color: red; font-size: 12px;">

This worked! I can't understand why the css would not affect the div itself. Talk about annoying. If anyone has any possible explanations, I'd like to hear. css are assigned to individual div's. body has backgroundcolor only.

hi ,

how to simulate (nowrap) effect using CSS

thanks

Along the left side of bing are some text links in a table cell. When bing loads you can see a semi-transparent block to give the text contrast if the background has a light color. Also, there is a rollover effect that shades the text.

1. How do I get the semi-transparency?
2. how do Iget the rollover effect?

Hi guys,

This site Valentino dot com has the menu slide out another transparent image when you mouse over it.

How is this done?
How can I do this? What is the code etc?

Peter

My current code is very simple, My links are text inside div tags which are placed over an image. I assign the div to the style sheet. Upon rollover of the image the style sheet makes the image invisible so that the background image is viable. Hence the rollover effect.

What i need is that when the link is the same as the current page being viewed the image behind the text will be the same as the rollover image and upon rollover, nothing will change.

So far i have asigned the Div tags an id and created some code to identify when the link is the same as the current page. My problem is that because of my method of rolling over i have no idea how to get my desired result.


Any help please? Below are 2 scripts. The first is the code i created to identify when the link is the same as the current page. The second code is my rollover efect script without the first script in it.


Code:

body#home a#home,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background: url(images/02.png) no-repeat;
}

Code:

<!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=iso-8859-1" />
<style>
.cssnav
{
position: relative;
font-family: BrowalliaUPC;
font-size: 25px;
background: url(images/02.png) no-repeat;
white-space: nowrap;
display: block;
width: 100;
height: 30;
margin: 0;
padding: 0;

}

.cssnav a
{
display: block;
color: #000000;
font-size: 25px;
width: 211px;
height: 44px;
display: block;
float: left;
color: white;
text-decoration: none;
}

.cssnav img
{
width: 100px;
height: 30px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
    position: absolute;
    left: -1px;
    top: -1px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    width: 100px;
} 


</style>

<title>Untitled Document</title>
</head>

<body id="home">

<div class="cssnav">
<a href="http://www.URL.com" id="home"><img src="images/01.png" alt="Alternative text" width="100" height="30" />
<center>
  <span>Home</span>
</center></a></div> 

</body>
</html>

The web page that I am having a problem editing is:
www dot postalstampssale dot com

We are having a problem getting the mouse over effect on the three (3) jpg images in the upper right hand corner.

We have added the appropriate CSS mouse over coding just under the <TITLE> are on the top. We have a;sp added the CSS coding at the end of the page.

However, we can not figure out how to attach the proper coding to each image. The current coding is:
<img src="Images/Canada/Canada_Scott_356_Front.jpg" width="90" height="60" alt="" border="0" align="right">
<img src="Images/Germany/Germany_Scott_65.jpg" width="89" height="62" alt="" border="0" align="right">
<img src="Images/Bermuda/Bermuda_Scott_55.jpg" width="54" height="64" alt="" border="0" align="right">

Can someone please suggest how to modify the above coding.

Thank you in advance.