Solved

CSS code columns/containers

Posted on 2011-02-18
23
230 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now