Solved

CSS code columns/containers

Posted on 2011-02-18
23
268 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
Overflow: auto does not stretch with position: absolute 3 40
Top Aligning Inner Divs 5 34
Change color in a check box 8 36
CSS overflow problem 21 42
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

751 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