Need Help Aligning Text and Pictures

<(^^<)KIRBY

01-31-2005, 09:07 PM

Ok, I am having some issues getting my pictures to be aligned with my text. I want the text in the left column, and then a picture in the right column. I am using a div-based CSS menubar and what not.

Any help would be appreciated.
Thanks!

_Aerospace_Eng_

01-31-2005, 09:10 PM

<sarcasm>okay my eyes are closed its dark i am on the first floor of my house, i will try to make it to my room which is upstairs</sarcasm>

its kinda hard for us to help you when we dont have any code you have done or a link to the page in question

Badman3k

01-31-2005, 09:10 PM

Could you post some code for us to have a look at. It's a tad difficult to see the problem without code or a screenshot (although the code says a lot more than an image ;))

You beat me to it _Aerospace_Eng_ ;)

<(^^<)KIRBY

01-31-2005, 09:14 PM

<html>
<title> Marcon Precast Inc.</title>
<LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet">

<body>
<div id="left">
<br>
<br>
<img src="pictures/marconLogo.gif">
<div id="navlist">
<ul id="navlist">
<li><a href="index.html" title="home">Home</a></li>
<li><a href="projects.html" title="prior">Previous Projects</a></li>
<li><a href="staff.html" title="staff">Staff</a></li>
<li><a href="concrete.html" title="ITD">Products</a></li>
<li><a href="contact.html" title="contact">Contact Us</a></li>
</ul>
</div>
</div>
<div id ="content">
<br><br>
<br><br>
<br><br>
<br><br><br>
<center>
<float>
<img src="Pictures/good.gif">
<h2> Good Grade</h2>
<br></center>
<ul>
<li>Few significant cracks or chips on either side</li>
<li>Appropriate for:</li>
<ul>
<li>traffic control</li>
<li>limiting access</li>
</ul>
</ul>

</div>

</div>

</body>
</html>

That's the actual page code. If u want the CSS also, let me know.

Badman3k

01-31-2005, 09:15 PM

Yeah post the CSS too as it'll probably be the CSS we'll be changing lol :thumbsup:

<(^^<)KIRBY

01-31-2005, 09:20 PM

body {
background: #E8E8E8;
font: 14px Verdana, sans-serif;
}
#left {
width: 159px;
height: 900;
background: url(../Pictures/crackback.gif);
float: left;
margin-right: 20px;
}
#right {
width: #75%;
float: right;
}
a:link {color: #104E8B;
text-decoration: none;
background-color: transparent }
a:visited { color: #4169E1;
text-decoration: none;
background-color: transparent }
a:hover { color: #00066;
text-decoration: underline;
background-color: transparent }
a:active { color: #A9ACB6;
text-decoration: underline;
background-color: transparent }
.title { text-align: center}

#navlist
{
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #000066;
color: #FFF;
background: #4169e1;
}
#content {
width: auto;
top: 0;
right: 10px;
padding 10px;
z-index: 1;
position: relative;
margin: 0 10px 0px 120;
}

_Aerospace_Eng_

01-31-2005, 09:30 PM

what are the sizes of the images marconLogo.gif and good.gif

<(^^<)KIRBY

01-31-2005, 09:34 PM

good = 592x483

Marcon Logo = 466x90

Note: Marconlogo is the logo that is already placed at the top left corner. I have all of my text spaced to start below it
I'm trying to get good to align on the right side of a small list of text.

hemebond

01-31-2005, 09:37 PM

Please read the FAQ on vBCode (http://codingforums.com/misc.php?do=bbcode). More specifically the code tag (http://codingforums.com/misc.php?do=bbcode#code).

<(^^<)KIRBY

01-31-2005, 09:42 PM

ok, sorry. I forgot about that

_Aerospace_Eng_

01-31-2005, 09:49 PM

okay change your content div to this
<div id ="right">
<br><br>
<div id="good"><img src="Pictures/good.gif" width="592" height="483">
<h2> Good Grade</h2>
<br></div>
<ul>
<li>Few significant cracks or chips on either side</li>
<li>Appropriate for:</li>
<ul>
<li>traffic control</li>
<li>limiting access</li>
</ul>
</ul>

</div>

</div>
and use this for your css
body {
background: #E8E8E8;
font: 14px Verdana, sans-serif;
}
#left {
width: 159px;
height: 900px;
background: url(../Pictures/crackback.gif);
float: left;
margin-right: 20px;
}
#right {
width: 75%;
float: right;
}
a:link {color: #104E8B;
text-decoration: none;
background-color: transparent }
a:visited { color: #4169E1;
text-decoration: none;
background-color: transparent }
a:hover { color: #00066;
text-decoration: underline;
background-color: transparent }
a:active { color: #A9ACB6;
text-decoration: underline;
background-color: transparent }
.title { text-align: center}

#navlist
{
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #000066;
color: #FFF;
background: #4169e1;
}
#good {
text-align:center;
}
i took out the content part of the css because it was trying to position your good image elsewhere on the page, kinda what happens when u use relative positioning

<(^^<)KIRBY

01-31-2005, 10:04 PM

ok, well that definetely improved my code's efficiency, however it doesn't solve my problem. I think I didn't quite explain this like I should have.
I need it to look like:

text text text text
Text.... Picture
Text.....Picture
Text.....Picture
Text text text text

did that clarify anything?

rmedek

01-31-2005, 10:44 PM

There is no such thing as <float>. Although I have to admit it looks cool.

img {
float: right;
}

Play around with margins and padding to get the effect you need.
If you assign "float" to a class or ID, remember to assign it where you need it, i.e.:

.floaty {
float: right;
}

<img class="floaty" src="etc.gif"... />

<(^^<)KIRBY

02-01-2005, 08:29 PM

Thanks a lot! That did the trick for me.