Solved

CSS code columns/containers

Posted on 2011-02-18
23
260 Views
Last Modified: 2012-06-21
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
Comment
Question by:lisakilgore
  • 14
  • 9
23 Comments
 

Author Comment

by:lisakilgore
ID: 34925334
CORRECTION...
PICTURE ON THE LEFT AND TEXT TO THE RIGHT....
0
 
LVL 16

Expert Comment

by:s8web
ID: 34925448
I need to make sure before I reply - This isn't an academic assignment related to computers, programming, web development, etc. right?
0
 

Author Comment

by:lisakilgore
ID: 34925510
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 16

Expert Comment

by:s8web
ID: 34925525
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
 
LVL 16

Expert Comment

by:s8web
ID: 34925556
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
 

Author Comment

by:lisakilgore
ID: 34925933
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
 
LVL 16

Expert Comment

by:s8web
ID: 34926016
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
 

Author Comment

by:lisakilgore
ID: 34926264
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
 
LVL 16

Expert Comment

by:s8web
ID: 34926316
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
 

Author Comment

by:lisakilgore
ID: 34926455
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
 
LVL 16

Expert Comment

by:s8web
ID: 34926561
I see what's happening.

Try commenting out lines 1066 - 1074 in main.css



0
 

Author Comment

by:lisakilgore
ID: 34926584
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
 

Author Comment

by:lisakilgore
ID: 34926599
again, this is what i more or less want it to look like scroll down , look right
http://test.sustainablecampus.cornell.edu/
0
 
LVL 16

Expert Comment

by:s8web
ID: 34926637
I get it, we're close.

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

0
 
LVL 16

Expert Comment

by:s8web
ID: 34926653
And for good measure, add clear:both; to .landing-section{}
0
 

Author Comment

by:lisakilgore
ID: 34926667
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
 

Author Comment

by:lisakilgore
ID: 34926695
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
 

Author Comment

by:lisakilgore
ID: 34926746
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
 

Author Comment

by:lisakilgore
ID: 34930029
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
 

Author Comment

by:lisakilgore
ID: 34930074
i widened the margin again, but i would like to know how to make text in column.
like http://test.sustainablecampus.cornell.edu/
0
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 34930106
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
 

Author Closing Comment

by:lisakilgore
ID: 34930481
this person was great to work with. Very helpful and patient.
0
 

Author Comment

by:lisakilgore
ID: 34934701
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question