Log in

View Full Version : 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>&nbsp;</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>

<!--End of CSS Template page source! -->
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


<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

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

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

then you would do your css such like


.rightcol {
width: ___px;
}


the way you have it

<div id=".rightcol">

would be properly styled like

#.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.



<!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>