CSS - Overlapping And Placing Divisions

I know this is probably the most asked question here, but I've been playing with it for a while and ...

Anyway, this is my page

This is my CSS

Code:

body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}

div.container {
  width:750px;
  margin:auto;
  }
	
div.logo {
  float:left;
  text-align:center;
  width:138px;
  height:138px;
  }

div.header {
  height:65px;
  border:1px solid blue;
  line-height:50%
  }

div.picbar {
  height:65px;
  border:1px solid red;
  line-height:50%;
  }
	
/* The following code creates the navigation items */
#navbar {
  clear:left;
  float:left;
  width:auto;
  padding:0;
  vertical-align:middle;
  }
		
#navbar li{
  margin:2px; /*dictates the space between navbar items */
  padding-right:0.5em;
  width:120px;
  float:left;
  text-align:center;
  }
	
#navcol {
  clear:left;
  float:left;
  width: 125px;
  padding: 0;
  margin: 10px 0 0 0;
  font-family: 'Trebuchet MS', 'Lucida Grande',
  Verdana, Lucida, Geneva, Helvetica, 
  Arial, sans-serif;
  color: #99CCFF;
  }
	
#navcol ul, #navbar ul{
  list-style:none;
  margin:0; /* removes indent in IE and Opera */
  padding:0; /* removes indent in Mozilla and Netscape 7 */
  border:none;
  list-style-type:none; /*turns off display of bullet */
  }

#navcol li {
  border-bottom:1px solid #003366;
  margin:0; /*dictates the space between navbar items */
  }

#navcol li a, #navbar li a {
  display: block; /* enables the entire link box to be clickable */
  padding: 5px 0 5px 5px;
  border-left: 10px solid #003366;
  border-right: 0px solid #508fc4;
  background-color: #2175bc;
  color: #fff;
  text-decoration: none;
  width: 100%
  }
	
#navcol li a:hover, #navbar li a:hover {
  border-left: 10px solid #99CCFF;
  border-right: 0px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff;
  }
	
div.intro{
  margin-left:145px;
  position:relative;
  padding-top:1px;
  font-family:Verdana,Lucida;
  font-size:12px;
  line-height:150%;
  }

div.google{
  float:right;
  margin-top:10px;
  width:305px;
  height:255px;
  padding:0 0 5px 10px
  }
	
div.footer {
  margin-top:50px;
  width:750px;
  word-spacing:100px;
  text-align:center;
  float:center;
  height:20px;
  background-color:#1c64d1
  }

div.copyright {
  width:750px;
  text-align:center;
  float:center;
  height:20px;
  }	


a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }

h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}

What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..."

Thanks for your time

Hello all.. trying to do something that should be pretty simple (I'm not the best CSS person). Instead of using a table am trying to use just CSS. I want to place a form button styled as a link and some text into a colored box but my css is not working.


html is...

<span class="yellowbox">
<form name="view constituent" method="post" action="constituents_viewm.php">
<input type=submit name=submit value=$lname, $fname" class="link_submit"> </form> <br /><br />text </span>

and css is...

.yellowbox {
background-color:#fdffe3;
margin:10px;
padding:10px;
border: 1px #000;
font-size:13px;
width:420px;
height:100px;
}

.link_submit {
color:#116500;
font-size:17px;
font-family:Calibri, Arial, Helvetica, sans-serif;
background:none;
border:none;
display:block;
text-decoration:underline;
cursorointer;
float:left;
}

any help will be greatly appreciated.

Sorry folks, css novice here.

But i'm trying to get this div into the center of my browser. It works vertically, but each time I try to sort it out horizontally it goes all over the place - any thoughts on this?

Code:

<html>
<head>
  <title></title>
  <style>
    .greenBorder {border: 1px solid green;} 
	 .redBorder {border: 1px solid red;} 
  </style>
</head>

<body>
 
    <div class="redBorder " style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle; text-align:center;">
      <div class="greenBorder" style=" #position: relative; #top: -50%; " >
       stuff
      </div>
    </div>

</body>
</html>

what am I doing wrong? recommend any good css books?

I have a larger 22" in screen when I designthe layout of my site. When I viewed it on a small 15" screen the back ground image is making the page scroll horizontially.

Here are some sites that fit well on a small screen. What can I do to fix this?

http://www.beakable.com/


http://www.gazelletouch.com/

http://www.gummisig.com/

My web site: http://markallen.us

Well, it's been an extremely long night. I've been trying to get this bottom bar element working for at least a couple nights now, and I feel so very close.

I've been trying to use footerStickAlt, which would allow me to put this baby down on the bottom of my page and would not overlap or screw up the scrolling when installed.

However, as you might be able to tell from my website, http://www.brianmooremedia.com, it's not working too well.

Here is my CSS: http://www.brianmooremedia.com/style.css

If anybody can help me make this red bar stop and stay down once the window size has gotten smaller than it, please let me know!

Thanks a ton,

Brian

Hello everyone,

I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT?

Thank you for your replies,


Tomas

I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage.

How do I do this please?

Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html

My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html

CSS: http [colon] // lovelago.googlepages [dot] com/main.css


Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need.

Thanks to anybody!

note to admin: I'm not a spammer, thanks.

OK here is my setup. I have a 3rd party search on my page, the script produces results and the only edit I have access to is the css...(and the actual script ) not the <div> layout of the results page.

The script generates a block and then an alt block for the search results with an image floating beside the text (if there is one available) My first problem was the amount of output text varies but does have a maximum.....I have fixed this by specifying the height of the result block to contain it.

My real problem is the sizes of my thumbnail images vary and this allows my text to flow all around it if the image height doesn't fill the area as you can see in my screenshot.

edit: apparently I can't post images but here is a link to the image

http://img.photobucket.com/albums/v288/schmooot/various%20posted/sample.gif

here is my css pertaining to the section
Code:

		.result_image { float: left; display: block; }
		.result_image img { margin-top: 5px; border: 1px solid #EF3013; max-height: 75px; max-width: 75px; }

		.result_block { margin-top: 0px; margin-bottom: 0px; background: #BBBBBB; border: 1px solid #000000; height: 100px;}
		.result_altblock { margin-top: 0px; margin-bottom: 0px; background: #DDDDDD; border: 1px solid #000000; height: 100px;}

I would like the text to stay 80px from the left of the box always.....regardless of what size the image is.

I attempted to force it by specifying the image width to be 75px and it did work but then it force resized my images to fit and some of them need to retain the aspect.
I made them retain their aspect ratio by using the max-width and max-height attributes but now some images don't have the height to fill the space

So really how do I make the 'block' containing the image to always be the same height of the text beside it (or just to always be 100px)...or force the text 'block' to stay with an 80px left margin.

The image is within the text block as you can see in the output source below so I can't just add a margin to the block...also I cannot edit the actual <div> output as I do not have access to the place it is defined...

but here it is for reference

Code:

<div class="result_altblock"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b>&nbsp;<a href="link">Title</a></div>
<div class="description">Description</div>
<div class="infoline"></div>
</div>
<div class="result_block"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b>&nbsp;<a href="link">Title</a></div>
<div class="description">Description</div>
<div class="infoline"></div>
</div>

Hi,

Is there a relatively simple way to place an image over the main background of a site, on the right of the main design?

For example, see how the Keller Williams logo is on the right, over the background he

http://www.groundedgroup.com/client...Interface3.html

Ideally, I want to make it happen he
http://www.groundedgroup.com/clients/NWR/

It would be great if the image was always just a little bit to the right of the main design, like shown above. Any ideas?

Thanks.

Is there a way to define a text style where a dash and a space is automatically inserted after the text?

If I want this:

Subtitle and then content

To look like this:

Subtitle - and then content

How can I do that?

Thanks

I wish to place a small image with a caption by its side in the middle of a div. What would be the better approach, (i)to put the two in a div and use absolute positioning or (ii)to use margins to position the two. Either way seems to work but I am looking for an approach that would be considered correct by a professional web developer. All help would be greatly appreciated.
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>
  <style type="text/css">
    body 
    { text-align: center;
      min-width: 1044px;
      margin: 0px;
      padding: 0px;
      font-family: arial;
    }
    #wrapper 
    { position: relative;
      text-align: left;
      width: 1044px;
      height: 100%;
      margin: 0px auto;
    }
    #top-header-block
    { width: 1010px;
      height: 170px;
      background-color: cyan;
    }
    #top-header-block img
    { height: auto;
      width: auto;
    }
    #logo
    { float: left;
    }
/*------------------------------------------*/
    #inner-div
    { height: auto;
      width: auto;
      position: absolute;
      left: 567px; 
      top: 41px;
    }
    #inner-div img
    { float: left;
    }
    #inner-div p 
    { float: left;
      margin-top: 3px;
      margin-left: 5px;
      color: #0d2474;
      font-family: arial,sans-serif;
      font-size: 11px;
      font-weight: bold;
    }
/*------------Alternative to above-------------*/
    #img-B
    { float: left;
      margin-left: 315px;
      margin-top: 40px;
    }
    #top-header-block p 
    { float: left;
      margin-top: 43px;
      margin-left: 5px;
      color: #0d2474;
      font-family: arial,sans-serif;
      font-size: 11px;
      font-weight: bold;
    }
/*------------------------------------------*/
  </style>
</head>
 
<body>
  <div id="wrapper"> 
    <div id="top-header-block">
       <a href="#">
        <img id="logo" src=""
           alt="" width="248" height="65"/></a>
     <div id="inner-div">
       <a href="#">
        <img src=""
           alt="" width="66" height="20" /></a>
      <p>: 0 items</p>
     </div>
<!-------------Alternative to above-------------------------------->
       <a href="#">
        <img id="img-B" src=""
           alt="" width="66" height="20" /></a>
      <p>: 0 items</p>
<!----------------------------------------------------------------------->
   </div>
</div>

</body>

</html>

I have a page that I am generating that I would like to have the images (in a box) placed in 3 columns. I generate the code via a simple php script but it only creates a single column. I have a #pagePane selector around a #bodyPane selector and have a number of selectors of the form #appDivXY where X and Y are the column and row I want to put them in.

#pagePane {
width : 800px;
position : relative;
table-layout : fixed;
text-align : center;
margin-left : auto;
margin-right : auto;
}

#bodyPane {
width : 800px;
position : inherit;
margin : 5% auto;
}

and a series like the following:
#apDiv00 {
position : absolute;
width : 250px;
height : 250px;
top : 100px;
left : 25px;
border : thin;
border-color : #000000;
border-style : solid;
}

#apDiv10 {
position : absolute;
width : 250px;
height : 250px;
top : 100px;
left : 275px;
border : thin;
border-color : #000000;
border-style : solid;
}

I have validated the code and only get some minor warnings about colors.

The full page can be generated at mandp dot lamster dot org slash french40sx.php

I am sure (or I hope anyway) that I am doing something trivialy wrong but I have no idea what it could be. I have been playing with this for hours.

Thanks for any help.
Hal

I am having trouble with placing an image on my page and having that image repeat itself all the way down the page.

Code:

<div id=left> ........ content ...</div>

<div id="image">this is where i want the image</div>

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

Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code

Code:

#left {
	position: absolute;
	left: 0px;
	width: 215px;
	background-color: #efefef;
	border: 1px dotted #ccc;
	}
#image1 {
    background-image: url("http://mydomain.com/image.jpg") 
    background-repeat: repeat-y;
    width: 15px;
    margin-left: 215px;
}
#center {
	
	margin-left: 260px;
             margin-right: 0px;
	overflow: hidden;
	}

The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page

Cheers

Well the title pretty much says it. How can I remove the little border from the top of the flash movie player (see example here : http://www.aplistia.com/flashin.htm ) if you see carefully, you will see a natural separation of around 4 - 6 pixels tall. I want to completely put my flash file on top, no spaces. Ive tried a couple of things but I couldnt fix it. Thanks in advanced .

I have a blog and I want to put my text inside a border/wrapper.

So I've made the border and sliced it up into 3 parts: top middle and bottom.

I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it.

So I did this but dont know what Im doing wrong:

Code:

<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}

</style>


<div class="top" id="top"></div>

<div class="mid" id="mid">

 <div class="content" id="content">Content Goes Here</div>
  
</div>

<div class="bottom" id="bottom"></div>

Any help is appreciated.

JH