CSS - Text Positioning Within A Div

I'm pretty new to CSS so bear with me if this is a silly question.

I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right.

The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly.

What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat?

I'm trying to position some things inside a DIV. Here's the basic layout:



What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong.

Image One is easy, but the text and Image Two I just don't seem to grasping.

I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there.

Should the text block and Image Two be within a separate DIV?

hey all,

i'm trying to figure out how to position text in an h1 tag that uses a background image, without adding extra markup. i just need it 15px from the left of the image, and 10px from the top.

here's the css for the h1 tag:
Code:

h1 {
height:50px;
width:100%;
background:white url(images/h1_background.gif) no-repeat left;
margin-top:12px;
color:white;
font-size:11pt;
}

and the html is just;
Code:

<h1>welcome</h1>

thanks!

Hi Guys,

Basically, I have Text in a content box, all fine and dandy, this content box has a fixed width and an expanding height depending on supplied content.

I now need 2 further divs, one of which floats to the right, and positioned at the top of this content div, the other also floats right but needs to be alligned bottom.

Ive tried absolutes with content being relative but although this does solve the positioning problem, obviously the content text will not wrap around the divs.

------------|
------------|
------------|_______|
---------------------------
------------------
----------------------
----------------------------
------------------------
-----------|
-----------|
-----------|
-----------|_______________|

Basicaally like above (sorry, cant screenshot the project im working on :])

Code:

<div style="width:591px; position:relative; z-index:1;"> 

<div style="width:150px; height:100px; float:right;">
ZZZZZZZZZZZ
</div>
<div style="width:150px; height:100px; float:right;">
ZZZZZZZZZZZ 
</div>
<div style="width:291px; height:100px; float:left;"> 

asfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj k
</div>
<div class="clear"></div>
</div>

Hello,

If you go to http://tombraiders.net/katie/sid/index.html

User: letme
Pass: in

you'll see that the body text is shifted halfway down the page as well as the menu. Anyone know how I can fix this?

Also, how can I fix the rollover for the menu? I don't want the rollover coloured square to be so long.

Thanks!

Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following.

I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell.

But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below:

|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|


Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other.

Hi,

I have a table cell where I have to place an image and title (centered) by the side of it. I am using the following code but does not work the way I wanted.

<table>
<tr>
<td>
<img src="graphics/gifs/spotlight_xlr.gif">
Title
</td>
</tr>
</table>

The "Title" text is getting displayed by the side of the image but to the bottom. I want the Text to be centered around the image. Both the IMG and Text should be part of the same TD tag. I know with CSS it is possible. Please help.

Thanks,
VMRao

Hi Guys,

Ive not been doing the CSS stuff too long as I used to use tables all the time for this stuff.

Im ultimately trying to get 3 news articles for eg on a homepage with a mini image to the left of the text which wraps around it. The text sometimes is not going to be the size of the image so the next article needs to drop to the next line underneath. It isnt though and its listing in a diagonal line instead.

Any one got any tips.

Code:

			<div id="m1">
				
				<div class="nw1">
				<h2><a href="/">Money test title</a></h2>
				
				<p><img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" />Latest shinanigans on the money savings scene today are... just gonna pack this out to see if the image does eventually fit in at all which would be nice because it should work! But who knows eh? :D Its just an interesting topic to look into la de dah de dah!</p><br />
				</div>
				<div class="nw1">
				<h2><a href="/">Money test title</a></h2>
				
				<p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br />
				</div>
				<div class="nw1">
				<h2><a href="/">Money test title</a></h2>
				
				<p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br />
				</div>
			</div>

Ive tried a few things like putting div's around each specific article see if i could somehow force it to a new line but it isnt working.

The img tags ive moved about. Im using float left on them.

Any one any suggestions? Im really stumped and close to hitting the monitor

If it helps I could pm the url to you if you think u can help.

Thanks guys. Im hoping this is a relatively easy problem as most sites layout like this just I can't get it to do it! hehe!

Hi,

Here is the problem I'm having:
This:
see attached cssprobl.jpg
should become:
http://www.thephotofactory.nl/csstest/cssprobl-goal.jpg

Here's the CSS code I have:
Code:

body{
	background-color:	#FFFFCC;
	margin:		0px;
	padding:		0px;
}

.holder{
	background-color:	red;
	width:			250px;
	height:		400px;
	float:			left;
	margin:		10px 10px;
	}

.img{
	padding:		0px;
	width:			200px;
	height:		200px;	
	margin:		20px 10% 0px 10% ;
	border:		2px white solid;
	}
	
h1{
	font:			35px Arial, Helvetia, sans-serif;
	color:			white;
	text-align:		center;
	margin-top:		10px;
	}

.omschrijving{
	background-color:	grey;
	font:			15px Arial, Helvetia, sans-serif;
	text-align:		left;
	margin-top:		10px;
	padding:		5px;
	}

.prijs{
	font:			25px Arial, Helvetia, sans-serif;
	color:			white;	
	text-align:		center;
	margin-top:		10px;	
	}

.dec{
	vertical-align:	super;
	font:			14px Arial, Helvetia, sans-serif;
	color:			white;	
	}
	
.euro{
	font:			14px Arial, Helvetia, sans-serif;
	color:			white;	
	}	

.omschrijvingholder{
	background-color:	black;
	width:			250px;
	height:		100px;	
	margin-top:		0px;
	}

.prijsholder{
	background-color:	green;
	width:			80px;
	height:		40px;	
	vertical-align:	bottom;
	float:			right;
	}

and this is one of the sections:
Code:

<div class="holder">
	<h1>Theeglas
	</h1>
	<div class="img">
		<img src="theeglas.jpg" alt="theeglas met bedrukking" title="theeglas met bedrukking" width=200 height=200></img>
	</div>
	<div class="omschrijvingholder">
		<div class="omschrijving">
			Een mooi theeglas met een doorzichtige bedrukking.
		</div>
		<div class="prijsholder">
			<div class="prijs">
				<span class="euro">&euro;</span> 9,<span class="dec">95</span>
			</div>
		</div>		
	</div>
</div>

SO: how do I get that green part exactly there (and without going outside the red box), and how do I wrap the text in the grey part around it? After 2 hours of trying all kinds of options I give up and call for help

Here is the full link:
http://www.thephotofactory.nl/csstest/valentijn.htm

Second problem: in IE the white border around the img is too low, leaving a red space. How to avoid that?

Thanks in advance,

Papermouse

PS How do I put an uploaded image in this message?

Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages.

The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway.

I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful.

Edit:
I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side.

I have a web site using XHTML 1.0 Strict. The main body of the web pages is absolutely positioned 225px from the left, 100px from the top and is 750px wide. There is a banner and menu at the top and then another menu with links to the left. They are also absolutely positioned as well. I am using IE 6.0 as the main web browser since this is a corporate environment. The problem that I am having is that when I select text in the main body it either selects everything from the top down to the cursor or from the cursor to the end. I have troubleshot this and narrowed it down to the absolute positioning. It works fine in IE 7 with the absolute positioning. Does anyone know why this is happening and is there a work around for this? Thank you.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Code:

#content {
	position:absolute;
	width: 750px;
	left: 225px;
	top: 100px;
	z-index: 500;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	background-color: #ECE9E2;
}

Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table.

so i don't want to use absolute positioning, as the position would change if the window size changes...

My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"...
The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore...

If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore...

Here you can see the code i used for both example 1 and example 2:

example 1:

<html>
<head>
<title>relative problem - example 1</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table border=1>
<tr>
<td width="640" height="480">
<div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>



example 2:

<html>
<head>
<title>relative problem - example 2</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<table border=1>
<tr>
<td width="640" height="480">
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

thx for letting me know...

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.

any idea ? tutorial? let me know if i need to explain more.

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.