Help Me Align, Plz

**JubyWriter** · 04-25-2007, 01:09 AM

Can someone help me align the jpg's in a vertical row to the left of the text body the length of the page? I am stuck. I've tried everything I know.

Thanks....I'd greatly appreciate it. Mind you I am a novice. So The code may need some cleaning up when I am done.

Here's what I have coded.

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #2.1- (Fixed-Fixed)</title>
<style type="text/css">

body{
margin:2%;
padding:0;

line-height: 1.0em;
margin-top: 15px;
margin-bottom: 125px;
padding-bottom: 0%
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/

}

#topsection{
background: white;
height: 150px; /*Height of top section*/
margin-bottom: 150px
}

#topsection h1{
margin: 0;
padding-top: 5px;
}

#contentwrapper{
float: right;
width: 100%;
}
#leftcol {
float: left;
width: 105px;
padding: 0;
margin-left: 10px;
margin-right: 0;
}

#rightcol {

float: right;
padding: 0;
width: 640px;
margin-right: 10px;
margin-top: 200px;
margin-left: 0;
margin-bottom:200;

}

.leftcol {
float: left;
width: 105px;
padding: 0;
margin-left: 10px;
margin-right: 0;
}
.rightcol {
float: right;
padding: 0;
width: 640px;
margin-right: 10px;
margin-top: 200px;
margin-left: 0;
}
.topsection {
float: none;
padding: 0;
width: 640px;
margin-right: 10px;
margin-top: 0px;
margin-left: 0;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 15px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>
</head>
<body>

<div id="maincontainer"><em></em>

<div id="topsection">
<div class="innertube"><h1><img src="*.jpg" width="830" height="264" hspace="1" /></h1></div></div>
<div id="contentwrapper">
<div id=".rightcol">
<div id=".leftcol"><img src="../../My Pictures/Flea Prayer.JPG" width="125" height="150" />
<p align="center"><font face="Garamond, Arial, Helvetica, sans-serif" size="5">
<strong>Welcome to</strong> </font></p>
<h1 align="center"><img src="../*.png" width="540" height="87" /></h1>

<p align="center"><strong><font face="Garamond, Arial, Helvetica, sans-serif"" color="#000000" size="5">1111 XXXXX </font></strong></p>
<p align="center"><strong><font face="Garamond, Arial, Helvetica, sans-serif" color="#000000" size="5">XXXBBBB</font></strong></p>
<p align="center"><strong><font face="Garamond, Arial, Helvetica, sans-serif" color="#000000" size="5">XXX-ZZZ-LLL</font></strong></p>
<p align="center"><img src="../RegisterCom/2teal-diamonds.jpg" width="318" height="35" hspace="2" vspace="2" /></p>
<p align="center"><span style="FONT-WEIGHT: bold"><font face="Century, Garamond, Arial, Helvetica, sans-serif" color="#993366" size="5">Have It Your Way</font></span></p>
<p align="center"><span style="FONT-WEIGHT: bold"><font face="Century, Garamond, Arial, Helvetica, sans-serif" color="#993366" size="5">At</font></span></p>
<p align="center"><strong><font face="Century, Garamond, Arial, Helvetica, sans-serif">Milner's Sub Shop</font></strong></p>
<p align="center"><font face="Century, Garamond, Arial, Helvetica, sans-serif"><strong>Miller Dr.</strong></font></p>
<p align="center"><font face="Century,Garamond, Arial, Helvetica, sans-serif"><strong>Millerton, CO 12541</strong></font></p>
<p align="center"><img src="../RegisterCom/2teal-diamonds.jpg" width="318" height="35" hspace="2" vspace="2" /></p>
<p align="center"><span style="FONT-WEIGHT: bold"><font face="Century,Garamond, Arial, Helvetica, sans-serif" color="#993366" size="5">MMMMMMMMMMMMNNNOO</font></span></p>
<p align="center"><span style="FONT-WEIGHT: bold"><font face="Century,Garamond, Arial, Helvetica, sans-serif" color="#993366" size="5">XXX</font></span></p>
<p align="center"><font face="Century,Garamond, Arial, Helvetica, sans-serif" color="#000000" size="3"><strong>JFGDT</strong></font></p>
<p align="center"><font face="Century,Garamond, Arial, Helvetica, sans-serif" color="#000000" size="3"><strong>DWOPY</strong></font></p>
<p></p>

<p align="center"><img src="../RegisterCom/2teal-diamonds.jpg" width="318" height="35" hspace="2" vspace="2" /></p>
<p align="center"><span style="FONT-WEIGHT: bold"><font face="Century,Garamond, Arial, Helvetica, sans-serif" color="#993366" size="5">SUBNIGHT</font></span></p>
<p align="center"><font face="Century,Garamond, Arial, Helvetica, sans-serif" color="#000000" size="3"><strong>First Tuesday Monthly</strong></font></p>
<p> </p>
<p align="center"><img src="../RegisterCom/2teal-diamonds.jpg" width="318" height="35" hspace="2" vspace="2" /></p>
<font face="arial" color="#000000" size="3">
<p align="center"><em><font face="Garamond,Arial, Helvetica, sans-serif" color="#336666" size="4"><strong>A Wise Tale<br />
Who will have all men to be saved, and to come unto the knowledge of the truth.</strong></font></em></p>
<p align="center"><em><font face="Garamond,Arial, Helvetica, sans-serif" color="#993366" size="4"><a href="http://www.jubileecf.com">www.myownsite.com</a></font></em></p>
<p align="center"><em><font face="Garamond,Arial, Helvetica, sans-serif" color="#993366" size="4">email: <a href="mailto:webmaster@www.myownsite.com">myownsite@msn.net</a></font></em></p>
</font></div>

/*The code below is what I cannot get to align in a vertical row on the left of the page--I have a horizontal column at the top for a jpg that will span the width of the page, then below that I have two vertical columns: the left column needs only be wide enough(25%) to fit the Jpegs below spanning the length of the page and the right column which contains the text is 75% of the width of the page*/

<div id=".leftcol"> <img src="*.jpg" width="104" height="172" />
<div id=".leftcol"><img src="*.jpg" width="104" height="172"/>
<div id=".leftcol"><img src="*.jpg" width="104" height="172"/>
</div>

<div class="innertube"><b><em></em></b> <script type="text/javascript">filltext(15)</script></div>

</div>
</div>
<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</div>
</div>
</div>
</body>
</html>

**Bob90** · 04-25-2007, 12:01 PM

In CSS styles

. means apply to a class
# means apply to an ID

Dont add the . or # to the class or id,

So

Code:

<DIV class="leftcol"></div>

Hope this helps

**boogyman** · 04-25-2007, 12:28 PM

For starters, please wrap (surround) your coding with proper tags as it formats it easier for us to help you << without the dots.

as Bob said classes are . and ids are #, however you are sorta doing both in this situation. you are using the "rightcol" and leftcol" more than 1 time, thus you should be using class

HTML Code:

<div id="rightcol">
...
</div>

HTML Code:

<div id="leftcol">
...
</div>

then you would do your css such like

Code:

.rightcol {
width: ___px;
}

the way you have it

Originally Posted by JubyWriter

would be properly styled like

Code:

#.rightcol { ... }

but you could only use that property once. but you would like to use it number of times. thus the necessity for defining it as a class,

**boogyman** · 04-25-2007, 01:26 PM

below I have re-written what you had. I cleaned up the coding and I think made it more readable and easier to edit. If you need any other help send me a PM and I'll help yah.

HTML 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" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>____YOUR___TITLE____</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
img {border: 1px solid #000}

body {
	width: 100%;
	line-height: 1em;
	font-size: medium;  /* MAIN FONT-SIZE... REST IS DEPENDANT ON THIS VALUE */
	font-family: Garamond, Arial, Helvetica, sans-serif;
}

#maincontainer {
	min-width: 800px;	/*  Will horizontal scroll if width of the page is less then 800px */
}

#topsection {
	background-color: #ffffff;
	height: 150px;
}
	#topsection h1 {
		text-align: center;
		font-family: Garamond, Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 150%;
	}

#leftcol {
	float: left;
	width: 25%;
}
	#leftcol img {
		display: block; /* 1 image per line */
		margin-bottom: 1em;
	}

#center {
	float: right;
	width: 73%;
}
	#center p {
		margin-bottom: 1em;
	}

#footer {
	clear: both;
	padding-top: 1em;
}

#footer p {
	font-size: 80%;
	background-color: #000000;
	color: #ffffff;
	text-align: center;
}
// -->
</style>

</head>
<body>


<div id="maincontainer">
	<!--****************
	**  HEAD CONTENT  **
	*****************-->
	<div id="topsection">
		<h1>Welcome to Milner's Sub Shop</h1>
		<img src="___.jpg" width="___" height="___" alt="IMG_ALT_DESCRIPTION" />
	</div>
	
	
	<!--****************
	**  MAIN CONTENT  **
	*****************-->
	<div id="leftcol">
		<img src="___.jpg" width="___" height="___" alt="IMG_ALT_DESC" />
		<img src="___.jpg" width="___" height="___" alt="IMG_ALT_DESC" />
		<img src="___.jpg" width="___" height="___" alt="IMG_ALT_DESC" />
		<img src="___.jpg" width="___" height="___" alt="IMG_ALT_DESC" />
		<img src="___.jpg" width="___" height="___" alt="IMG_ALT_DESC" />
		<img src="___.jpg" width="___" height="___" alt="IMG_ALT_DESC" />
	</div>
		
	<div id="center">
		<p><strong>SUBNIGHT:</strong> First Tuesday Monthly</p>
		<p>TEXT_IMAGE_LINK</p>
		<p>TEXT_IMAGE_LINK</p>
		<p>TEXT_IMAGE_LINK</p>
		<p>TEXT_IMAGE_LINK</p>
		<p>TEXT_IMAGE_LINK</p>
		<p>TEXT_IMAGE_LINK</p>
	</div>
	
	
	<!--*******************
	**	 BOTTOM CONTENT  **
	********************-->
	<div id="footer">
		<p>Milner's Sub Shop &mdash; Miller Dr. Millerton, CO 12541 ( XXX ) XXX - XXXX</p>
	</div>
</div>


</body>
</html>

Thread: Help Me Align, Plz

Thread Tools

Search Thread

Help Me Align, Plz

Hello

Bookmarks

Bookmarks

Posting Permissions