css/html = text code to the right of a image?

  • (2 Pages)
  • +
  • 1
  • 2

21 Replies - 3018 Views - Last Post: 01 April 2013 - 01:07 AM

#1 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

css/html = text code to the right of a image?

Posted 28 March 2013 - 07:38 PM

My text should be coding to the right of the image but it is instead coding under the image.

question #2 content id Selector:
configure this with 0 padding on the top and 20 px on the right, bottom and left sides.
Left align image in the content id.
configure unordered lists in the content id.
( I believe I could have something coded incorrectly?) If you don't see what I've done wrong I will supply the index.html code, but I don't think the mistake will be there?

css code:

body { 
	background-image: url(images/background.jpg);
	font-family: Arial, Helvetica, sans-serif;
}
#nav { background-color: #90C7E3; 
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px; 
	font-weight: bold;
}
h2 { color: #3399CC;
	font-family: Georgia, Times New Roman, serif;
}
#wrapper { margin: center;
	   width: 80%;
	   background-color: #FFFFFF;
	   min-width: 960px;
	   margin-left: auto;
	   margin-right: auto;
 	   
}
#content { 
	   padding-left: 20px;
	   padding-right: 20px;
	   padding-bottom: 20px;
	   padding-top: 0px;
	   width: 700px;
	   img {float: left; padding-right: 20px;}
	   ul {list-style-position: inside;}
	   	  
}
#contact {address { font-size: 90%: 
}
h1 {    background-color: #000033; 
        color: #FFFFFF;
	padding-left: 20px;
	height: 80px;
	font-family: Georgia, Times New Roman, serif;
	margin-bottom: 0;
}
background-image: url(images/sunset.jpg);
		 background-repeat: no-repeat;
		 background-position: right;
 		margin-bottom: 0;
		padding-left: 10px;
}


dt { color: #000033;
}
.resort { color: #000033;
	  font-weight: bold;
}
h3 { color: #000033;
	font-family: Georgia, Times New Roman, serif;
}
#footer { font-size: 75%;
	  font-style: italic;
	  font-family: Georgia, Times New Roman, serif;
}




This post has been edited by charyl: 28 March 2013 - 07:41 PM


Is This A Good Question/Topic? 0
  • +

Replies To: css/html = text code to the right of a image?

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,986
  • Joined: 08-June 10

Re: css/html = text code to the right of a image?

Posted 28 March 2013 - 08:00 PM

Hey.

First of all, CSS blocks can not be nested. You can't do:
#main {
    background-color: black;

    div.inner {
        padding: 20px;
        background-color: red;
    }
}


It would have to be written like this:
#main {
    background-color: black;
}

#main div.inner {
    padding: 20px;
    background-color: red;
}



And second, in order to make the CSS code less "verbose" and more easily digestible, you should combine styles like padding-left, padding-top, etc... into a single padding style. For example.
/* This */
div {
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 3px;
    padding-left: 4px;
}

/* Could/should be */
div {
    padding: 1px 2px 3px 4px;
}


The first value of the padding style is the top, and it then goes clock-wise until it reaches left. margin is identical to padding.
Was This Post Helpful? 1
  • +
  • -

#3 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 28 March 2013 - 08:14 PM

very good! I see that you've added a div within a div? Is that what that means? I'm not sure the instructions are saying to do that? is there a different way to code the above all in one content div?

#main {  
     background-color: black;  
 }  
 #main div.inner {  
     padding: 20px;  
     background-color: red;  
} 


Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,986
  • Joined: 08-June 10

Re: css/html = text code to the right of a image?

Posted 28 March 2013 - 08:36 PM

No, there isn't. Like I say, you can't nest CSS blocks. Each CSS block must stand on it's own, not as a part of another CSS block. So if you need to style images inside a div, you must create a separate div img { ... } block.
Was This Post Helpful? 1
  • +
  • -

#5 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 28 March 2013 - 09:14 PM

my text is aligning right next to the photo and not on the right side? It suppose to be right aligned I put it in the content div. I messed up my code and had to go backwards...hence the padding mess, haven't fixed again, yet.

body {   
    background-image: url(images/background.jpg);  
    font-family: Arial, Helvetica, sans-serif;  
}  
#nav { background-color: #90C7E3;   
     padding-left: 20px;  
     padding-top: 5px;  
     padding-bottom: 5px;  
     padding-right: 5px;   
     font-weight: bold;  
}  
h2 { color: #3399CC;  
     font-family: Georgia, Times New Roman, serif;
     padding-left: 20px;  
} 
h1 {    background-color: #000033;   
       color: #FFFFFF;  
       padding-left: 20px;
	padding-top: 25px;  
       height: 80px;  
       font-family: Georgia, Times New Roman, serif;  
       margin-bottom: 0;  
} 
#wrapper { margin: center;  
        width: 80%;  
        background-color: #FFFFFF;  
        min-width: 960px;  
        margin-left: auto;  
        margin-right: auto;  
}  
#content {   
        padding-left: 20px;  
        padding-right: 20px;  
        padding-bottom: 20px;  
        padding-top: 0px;  
        width: 700px;
	text-align: right; 
	
}  
#content img {float: left; padding-right: 20px;  
        
        
              
}  
#contact {address { font-size: 90%:   
}  
  
 background-image: url(images/sunset.jpg);  
       background-repeat: no-repeat;  
       background-position: right;  
       margin-bottom: 0;  
       padding-left: 10px;  
}  
dt { color: #000033;  
}  
.resort { color: #000033;  
      font-weight: bold;  
}  
h3 { color: #000033;  
       font-family: Georgia, Times New Roman, serif;  
}  
#footer { font-size: 75%;  
       font-style: italic;  
       font-family: Georgia, Times New Roman, serif;  
 } 




This post has been edited by charyl: 28 March 2013 - 09:16 PM

Was This Post Helpful? 0
  • +
  • -

#6 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 28 March 2013 - 10:40 PM

I changed my padding to
padding-top: 25px 25px 0px 20px;
and checked it in Internet Explorer and Firefox but it is hugged against the top and the left side? so I'm miffed. I hate to use bad coding to get results?

when I code it like this, it works fine?

h1 {    background-color: #000033;   
       color: #FFFFFF;  
       [b]padding-left: 20px;  
       padding-top: 25px;[/b] 
       height: 80px;  
       font-family: Georgia, Times New Roman, serif;  
       margin-bottom: 0; 


And I still have not gotten my text to align the way it should, I'm wondering if I should try absolute or relative, but I think that could be incorrect too...I normally let dreamweaver do the coding, unfortunatley this class requires I code and I'm not so hot and just learning to be able to communicate problems as well?

This post has been edited by charyl: 28 March 2013 - 10:43 PM

Was This Post Helpful? 0
  • +
  • -

#7 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 12:18 AM

I am currently taking my code through w3 need to find out what line 28 is does any one know how to put line numbers into note pad?:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<meta charset="utf-8">
<link href="pacific.css" rel="stylesheet">
 
</head>
<body>
<div id="wrapper">
<h1>Pacific Trails Resort</h1>
<div id="nav"><strong><a href="index.html">Home &nbsp; &nbsp; </a> <a 

href="yurts.html">Yurts &nbsp; &nbsp; </a> <a 

href="activities.html">Activitiest &nbsp; &nbsp; </a> <a 

href="reservations.html">Reservations; </a></strong></div>
<h2>Enjoy Nature in Luxury</h2>
<div id="content">
 
 
<img src="images/coast.jpg" height="250" width="320" alt="my coast">

 <p><span class="resort">Pacific Trails Resort</span> 
<h6>offers a special lodging experience on the California North 

Coast. </6>
<br>Relax in serenity with panoramic views of the Pacific Ocean.
<ul>
<li>Private yurts with decks overlooking the ocean</li>
  <li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul></p>
<span class="resort">Pacific Trails Resort</span>
<div id="contact">12010 Pacific Trails Road<br>
Zephyr, CA 95555<p></div>
888-555-5555
 
 <div id="footer"><small><i>Copyright &copy; 2013 Pacific Trails 

Resort<br>
<i>charyl@janney.com</i></div></div>
</body>
</html>
 
 
 
 
 
 



Was This Post Helpful? 0
  • +
  • -

#8 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,986
  • Joined: 08-June 10

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 12:50 AM

View Postcharyl, on 29 March 2013 - 05:40 AM, said:

I changed my padding to
padding-top: 25px 25px 0px 20px;
and checked it in Internet Explorer and Firefox but it is hugged against the top and the left side? so I'm miffed. I hate to use bad coding to get results?

You are still using padding-top in that code. It should just be padding.

View Postcharyl, on 29 March 2013 - 05:40 AM, said:

And I still have not gotten my text to align the way it should, I'm wondering if I should try absolute or relative, but I think that could be incorrect too...

What does your CSS look like now? In the last version you posted, you still had a syntax error in line 45. There is an "address" block nested inside the "#contact" block, which is illegal.

View Postcharyl, on 29 March 2013 - 05:40 AM, said:

I normally let dreamweaver do the coding, unfortunatley this class requires I code...

That's a very bad way to work. Speaking from experience, Dreamweaver generated code is horrible. If you want to be at all useful at web design, you need to know how to code this yourself, and not rely on something like Dreamweaver to do that. - HTML and CSS are not difficult languages to use. They aren't even programming languages, just markup. It doesn't take a long time to learn the syntax for either, and once you've got that, using it is simple. The most difficult part about CSS is knowing which styles to use and which values it accepts. (But that's what Google is for :))

View Postcharyl, on 29 March 2013 - 07:18 AM, said:

I am currently taking my code through w3 need to find out what line 28 is does any one know how to put line numbers into note pad?:

The problem with line #28 is that you are closing a <h6> tag with a </6>. That's what the W3C validator is complaining about.

As far as Notepad goes. Don't use Notepad. Try Notepad++ instead. It's very light, and it has all the bells a whistles a simple coding editor needs. (Including line numbers.)
Was This Post Helpful? 1
  • +
  • -

#9 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 12:45 PM

I am enjoying learning the css, but it's like anything new you learn...it has it's momments of confusion and lack of knowledge presents difficulties! Thank you for your comments and turning me on to notepad++ I will try it, looks very interesting. Looks like something you could use for java or VB too?
Was This Post Helpful? 0
  • +
  • -

#10 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,986
  • Joined: 08-June 10

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 02:33 PM

Sure, I've been there as well. Things are never simple before you learn them :)

The thing about CSS is that it's always exactly the same. There are really only three parts to any CSS block:
<selector> {
    <style name>: <style value>;
    <style name>: <style value>;
    <style name>: <style value>;
    ...
}


That's pretty much it. All CSS blocks are just like that. Of course, the <selector> can be quite complex if you need it to be, but it usually isn't. Then there is just the matter of learning which styles to use and what values each of them take.

Quote

Looks like something you could use for java or VB too?

Yea, it works for both of those and a lot more. Just look through the "Language" menu. All the languages it can highlight are listed there.
Was This Post Helpful? 1
  • +
  • -

#11 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 03:02 PM

here are two coding problems I don't know how to resolve, although I've made it work, I have not made it work the way I was asked.:

I was asked to display text to the right side of an image by floating the image on the left side of its container (the content id). Use the following contextual selector to configure img elements within the content id to display on the left and have 20px of padding on the right side. Sample code to use: from the book;
#content img {float: left; padding-right: 20px; }


Configure unordered lists in the content id. Use the following contextual selector to configure ul elements withing the content id to display list markers inside the element. sample code to use;
#content ul {list-style-position: inside;}
since I can not nest I was confused on how it should actually be coded. Here is my css and I will post my html for index so you can see how I handled the ul.
css:
body {   
    background-image: url(images/background.jpg);  
    font-family: Arial, Helvetica, sans-serif;  
}  
#nav { background-color: #90C7E3;
     padding-left: 20px;    
     padding-top: 5px;    
     padding-bottom: 5px;    
     padding-right: 5px; 
     font-weight: bold;  
}  
h2 { color: #3399CC;  
     font-family: Georgia, Times New Roman, serif;
     padding-left: 20px;  
} 
h1 {    background-color: #000033;   
       color: #FFFFFF;  
       padding-left: 20px;  
       padding-top: 25px; 
       height: 80px;  
       font-family: Georgia, Times New Roman, serif;  
       margin-bottom: 0;  
} 
#wrapper { width: 80%;  
        background-color: #FFFFFF;  
        min-width: 960px;  
        margin-left: auto;  
        margin-right: auto;  
}  
#content { 
	padding: 0px 20px 20px 20px;  
        width: 750px;
	text-align: left;
	font-size: .7em;
	
	
}  
#text { 
	text-align: right;
}
#content img {float: left; padding-right: 20px;  
        
        
              
}  
#contact {font-size: 90%;   
 
}  
dt { color: #000033;  
}  
.resort { color: #000033;  
      font-weight: bold;  
}  
h3 { color: #000033;  
       font-family: Georgia, Times New Roman, serif;
	  
}  
#footer { font-size: 75%;  
       font-style: italic;  
       font-family: Georgia, Times New Roman, serif;  
 } 




index html:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<meta charset="utf-8">
<link href="pacific.css" rel="stylesheet">
 
</head>
<body>
<div id="wrapper">
<h1>Pacific Trails Resort</h1>
<div id="nav"><strong><a href="index.html">Home &nbsp; &nbsp; </a> <a href="yurts.html">Yurts &nbsp; &nbsp; </a> <a href="activities.html">Activitiest &nbsp; &nbsp; </a> <a href="reservations.html">Reservations; </a></strong></div>
<h2>Enjoy Nature in Luxury</h2>
<div id="content">
 
 
<img src="images/coast.jpg" height="250" width="320" alt="my coast">

 <p><span class="resort">Pacific Trails Resort</span> 
offers a special lodging experience on the California North Coast. 
<br>Relax in serenity with panoramic views of the Pacific Ocean.
<ul>
<li> Private yurts with decks overlooking the ocean </li>
<li> Activities lodge with fireplace and gift shop </li>
<li> Nightly fine dining at the Overlook Cafe </li>
<li> Heated outdoor pool and whirlpool </li>
<li> Guided hiking tours of the redwoods </li>
</ul>
<span class="resort">Pacific Trails Resort</span>
<div id="contact" 12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
888-555-5555</br></div>
 <p><br>
 <div id="footer"><small><i>Copyright &copy; 2013 Pacific Trails Resort<br>
<i> charyl@janney.com</i></br></br></div></div></div>
</body>
</html>
 



I do realize I need to change the padding on the nav to look cleaner.
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3360
  • View blog
  • Posts: 11,397
  • Joined: 12-December 12

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 04:50 PM

You have a few errors in this code:

<div id="contact" 12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
888-555-5555</br></div>
 <p><br>
 <div id="footer"><small><i>Copyright &copy; 2013 Pacific Trails Resort<br>
<i> charyl@janney.com</i></br></br></div></div></div>

Your div is not closed at the appropriate point, mis-matched i-tags, small unclosed. I wouldn't nest small and i-tags anyway, use an span and style it with css if necessary.

.. and br-tags should be used sparingly, using css in preference.

..and what is your specific question?

This post has been edited by andrewsw: 29 March 2013 - 04:49 PM

Was This Post Helpful? 1
  • +
  • -

#13 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 05:34 PM

what would the coding for the content id in the css form look like if I were to Use a contextual selector to configure img elements within the content id to display on the left and have 20px of padding on the right side.

and the coding for an unordered lists in the content id with a contextual selector to configure ul elements withing the content id to display list markers inside the element.
Was This Post Helpful? 0
  • +
  • -

#14 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 05:57 PM

on my wish list; my text sits too close to my image on the right side, but the text does not go across the whole page it cuts off at awkward spots. would the coding in the content id look like this?


text: padding-left 25px;

but why would it not use the whole 750 content width? Or minus the image that is 350px wich leaves 400?

View Postandrewsw, on 29 March 2013 - 06:50 PM, said:

You have a few errors in this code:

<div id="contact" 12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
888-555-5555</br></div>
 <p><br>
 <div id="footer"><small><i>Copyright &copy; 2013 Pacific Trails Resort<br>
<i> charyl@janney.com</i></br></br></div></div></div>

Your div is not closed at the appropriate point, mis-matched i-tags, small unclosed. I wouldn't nest small and i-tags anyway, use an span and style it with css if necessary.

.. and br-tags should be used sparingly, using css in preference.

..and what is your specific question?



Good eye! thank you.... fixed.
Was This Post Helpful? 0
  • +
  • -

#15 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: css/html = text code to the right of a image?

Posted 29 March 2013 - 07:06 PM

View Postcharyl, on 29 March 2013 - 07:34 PM, said:

what would the coding for the content id in the css form look like if I were to Use a contextual selector to configure img elements within the content id to display on the left and have 20px of padding on the right side.

and the coding for an unordered lists in the content id with a contextual selector to configure ul elements withing the content id to display list markers inside the element.



In reading ahead I found a different reference to the unordered list question and it says to code it like this:
#content ul { list-syle-type: none;
}


my question is if you already had a #content would this not conflict because they would be trying to refer to both #content (s), but it would not because it refers to 2 different situations?
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2