• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

CSS code columns/containers

help I am trying to create css code to have a picture to the right and and text to the right of the picture that looks good.
I will send code and snapshots I what it looks like now, and what I want it to look like.
thanks
 css-containers.doc
0
lisakilgore
Asked:
lisakilgore
  • 14
  • 9
1 Solution
 
lisakilgoreAuthor Commented:
CORRECTION...
PICTURE ON THE LEFT AND TEXT TO THE RIGHT....
0
 
s8webCommented:
I need to make sure before I reply - This isn't an academic assignment related to computers, programming, web development, etc. right?
0
 
lisakilgoreAuthor Commented:
no way! I work in the energy and sustainability dept as a staff member.. I am trying to push out a new version of our sustainable site, and need help with this code. There aren't many people in the department who can help me.. now if I could grab a student to help, that would be a different story..
NO IT IS NOT AN ASSIGNMENT!
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
s8webCommented:
Excellent, here you go:


<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>lisakilgore</title>
		<style type="text/css">
			.landing-section{width:355px;}
			.thumbnail{float:left;width:120px;margin:5px;}
		</style>
	</head>
	<body>
		<div class="landing-section">
			<h3><a href="http://www.bike.cornell.edu/" target="_blank">Bicycles</a></h3>
			<div class="thumbnail">
				<img src="http://test.sustainablecampus.cornell.edu/transportation/images/bus.jpg">
			</div>
			<p>Good old pedal power runs off the energy in your food. It's clean
			burning, eco-friendly, and highly encouraged on campus. </p>
		</div>
	</body>
</html>

Open in new window

0
 
s8webCommented:
My apologies if that came off offensive. I accidentally helped a student with an academic assignment once. They (understandably) got a little upset. For the record, I've always liked Cornell's site and greatly appreciate your goal.

Cheers!
0
 
lisakilgoreAuthor Commented:
Dear Wizard s8web:
while your solution works all  by itself, I cannot get it to work on the page.. I am SURE it is my fault,
can you "talk" to me as if I am a 5 year old, and give me the css separately?
I see you put in the head css, but I am confused if I should go to the real css and for example you have:
      .landing-section{width:355px;}
does that mean I go to my css file and delete all other elements from the landing. section except for width??????
.landing-section {
      float: left;
      margin-top: 5px;
      padding-top: px;
      border-top: 1px solid #ddd;
      width: 355px;
      }
THANKS... as you can tell, i am not very css literate.
0
 
s8webCommented:
Sure, on your stylesheet located at http://test.sustainablecampus.cornell.edu/common/styles/main.css you will find on line 1048:

 .landing-section {
      width: 355px;
      }

This part's cool, don't change it.

Right under that as an additional css rule, put:

 .landing-section .thumbnail {
      float:left;
        width:120px;
        margin:5px;
      }

So as a result you should have:

 .landing-section {
      width: 355px;
      }

 .landing-section .thumbnail {
      float:left;
        width:120px;
        margin:5px;
      }

You can remove the width part if the thumbs are going to be different sizes. I would recommend keeping the thumbs uniform though.  
0
 
lisakilgoreAuthor Commented:
dear expert, that helped,
can you please correct what is below (as far as tags)... I think I am writing the image wrong.
thank you!!!!

             <div id="landing-sections">
              <div class="landing-section">
        <h3><a href="demand.cfm">Cornell's Transportation Demand Management Program</a></h3>
       
     <img class="thumbnail">
   
            <img src="images/permit.jpg">
     </div>
         <p>There are actually 2,600 fewer cars on campus today than in 1990. This program reduces gasoline consumption by more than 400,000 gallons a year and eliminates tons (literally)of about seven different noxious gases that would otherwise pollute the air.</p>      
         </div>
   
0
 
s8webCommented:
You have:

 <img class="thumbnail">
   
            <img src="images/permit.jpg">
     </div>

It should be:

     <div class="thumbnail">
            <img src="images/permit.jpg">
     </div>

You might want to include an alt tag too. It's an accessibility thing. Screen readers for the visually impaired use the alt tag content. That would look like:

     <div class="thumbnail">
            <img src="images/permit.jpg" alt="description of this image goes here">
     </div>
0
 
lisakilgoreAuthor Commented:
thanks, I am aware of alt tags...but my priority now is getting this design to work.
please see link. It is as it was in the beginning-not "working'.
I'm sure it is my error.
click on link to view my sadness.
http://test.sustainablecampus.cornell.edu/transportation/transportation.cfm
0
 
s8webCommented:
I see what's happening.

Try commenting out lines 1066 - 1074 in main.css



0
 
lisakilgoreAuthor Commented:
YIPPEE, getting there, might you be able to help me tweak...
look at page now, I would like paragraph to be even with photo. Know what I mean?
again, thank you.
http://test.sustainablecampus.cornell.edu/transportation/transportation.cfm
0
 
lisakilgoreAuthor Commented:
again, this is what i more or less want it to look like scroll down , look right
http://test.sustainablecampus.cornell.edu/
0
 
s8webCommented:
I get it, we're close.

Remove float:left and width:235px from .landing-section h3 (line 1061)

0
 
s8webCommented:
And for good measure, add clear:both; to .landing-section{}
0
 
lisakilgoreAuthor Commented:
rock on....is there anyway though to make it like index page text... that is so text doesn't go under pic, it just goes down in a column?
thank you.
0
 
lisakilgoreAuthor Commented:
btw, this is current page,  but I have to us <br /> to space out sections which I don't  like doing,  but I like the way it looks aside from having to manually put breaks in.
http://www.sustainablecampus.cornell.edu/gettingaround/gettingaround.cfm
0
 
lisakilgoreAuthor Commented:
i made width wider, and it looks better.. just hope I don't get a lot more text for one of the pics.
THANK YOU
0
 
lisakilgoreAuthor Commented:
mr wizard,
is there code to make text go down into one column instead of like this?
http://test.sustainablecampus.cornell.edu/buildings/initiative.cfm

weill hall's text is yukcy.
0
 
lisakilgoreAuthor Commented:
i widened the margin again, but i would like to know how to make text in column.
like http://test.sustainablecampus.cornell.edu/
0
 
s8webCommented:
The quick way would be to add some bottom margin inline to the div where necessary, like so:

<div class="landing-section">
      <h1>LEED Buildings</h1>
      <h3><a href="weill.cfm">Weill Hall</a></h3>
      <div class="thumbnail" style="margin-bottom:15px;">
            <img src="images/lifesci.jpg">
      </div>
</div>

0
 
lisakilgoreAuthor Commented:
this person was great to work with. Very helpful and patient.
0
 
lisakilgoreAuthor Commented:
s8web:i think i will post another quesiton about css and containers because if it is done here
http://test.sustainablecampus.cornell.edu/ without having to do what you suggested.
I inherited this site and the code so i don't quite get why it works here and it didn't work when I tried it on other pages in a different locations.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 14
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now