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

  • (2 Pages)
  • +
  • 1
  • 2

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

#16 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

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

Posted 29 March 2013 - 07:45 PM

What I think is causing your confusion is a basic misunderstanding of how CSS rules are applied to the DOM. If you define two blocks for the same selector, for instance:
#content {
    font-size: 10px;
}
#content {
    font-family: Ubuntu, Arial, serif;
}


The two blocks don't conflict, even though they are set for the same exact element. Instead, they are essentially combined by the browser, which shows all the rules from all blocks that apply to the element. The only "conflicts" that can arise in situations like those are when you define the same style twice in blocks that affect the same element. Like if I had also defined a font-size in the second #content block there, the two size declarations would conflict. The browsers resolve that by simply using the last declaration. (With the exception of rules tagged as !important, but that really should be avoided as much as possible anyway.)

The selectors for the blocks only tell the browser which element(s) you want your styles applied to. You can apply as many blocks as you want to the same element(s), even using different selectors, and all the rules from all the blocks will be combined and applied to the element(s).


So, to address your "contextual selector" problem. What that phrase means is simply a selector that, rather than directly target an element through a tag, class or ID value, it specifies a relationship between tags, classes or IDs. All of these are what you could call "contextual" selectors:
body > h1 strong { ... }
div.myClass > p em { ... }
#content img { ... }


The first selectors targets all "strong" elements inside all "h1" elements that are direct children of the "body" tag. That's what they mean by "contextual", that you are selecting elements by their context, rather then by referencing them by direct IDs, class or tag names.

(Or that is at least how I understand that concept. It may not be 100% applicable to all areas of the world, I suppose.)

P.S.
There is one thing the style purist in me can't help but point out as well. Your code lacks an overall consistent coding style. Things like indentation and rules regarding style ordering need to be consistent, or the code will be extremely annoying to read. - It may not be evident in a small snippet like that, but once you're counting lines by the thousands, it'll start causing serious headaches.

My point: Be consistent! This, for example, is what your previous CSS snippet would look like when I apply my own choice of style to it:
body {   
	background-image: url(images/background.jpg);  
	font-family: Arial, Helvetica, sans-serif;  
}  
#nav { 
	background-color: #90C7E3;
	padding: 5px 5px 5px 20px;
	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: 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;
}
#content ul {
	list-style-position: inside;
}
#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: 75% italic Georgia, Times New Roman, serif;  
} 


This is a very basic: "One style/selector per line, each style indented once" kind of rule. In my experience, this gives you the best readable files, even if it line numbers can get a bit higher. (Reducing line count by sacrificing readability is always a bad idea!)

What you don't see there is multiple selector per block, which is also an important thing. An example:
#content h1 > em,
#sidebar em,
#footer p > h1 > p em {
    font: 9px italic monospace;
}


A lot of people just dump all three selectors in one line, but that's just a horror to deal with.
#content h1 > em, #sidebar em, #footer p > h1 > p em {
    font: 9px italic monospace;
}


See what I mean?
Was This Post Helpful? 1
  • +
  • -

#17 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 - 08:42 PM

You are a very good teacher! Thank you so much...I see how clean and easy it is to scan visually and how easy it is to find what you're looking for. and you just confirmed what I was learning on my own, that you can use the same name for different elements for different effects. I'm so excited to see what you wrote, because yes I was assuming you could not do that, that is somehow had to be within only one set of rules {}. But you have shown me it is okay to have the same rule, just don't conflict with the same element 2 times.

I have to move my nav to the left side of the screen...done but the nav buttons for the home and yurts are side by side, even though I have coded a ul? what is this fix? Where are you...The reason I ask is it is almost 12:am here, but I have to keep going.

body {   
    background-image: url(images/background.jpg);  
    font-family: Arial, Helvetica, sans-serif;  
}  
#nav { 
     padding: 20px 5px 5px 20px;   
     font-weight: bold;  
     float: left;
     width: 175px
} 
#nav ul { 
          list-style-type: none;
	  margin: 0;
   	  padding-left: 0;
	  font-size: 1.2em;
	  float: left;
	  width: 125px;
	  font-weight: bold;
}
#nav a { 
          text-decoration: none;
} 
h2 { 
     color: #3399CC;  
     font-family: Georgia, Times New Roman, serif;
     padding-left: 20px; 
     text-shadow: 1px 1px 1px #ccc; 
} 
h1 {   
       background-color: #000033;   
       color: #FFFFFF;  
       padding-left: 20px;  
       padding-top: 25px; 
       height: 80px;  
       font-family: Georgia, Times New Roman, serif;
       background-image: url(images/sunset.jpg);
       background-repeat: no-repeat;
       background-position: right;  
       margin-bottom: 0;  
} 
#wrapper { 
        width: 80%;  90c7e3;  
        min-width: 960px;  
        margin-left: auto;  
        margin-right: auto; 
	-webkit-box-shadow: 5px 5px 5px #000033; 
	-moz-box-shadow: 5px 5px 5px #000033;
	box-shadow: 5px 5px 5px #000033;
}  
#content { 
	background-color:#ffffff;
	padding: 1px 20px 20px 30px;  
        width: 780px;
	text-align: left;
	font-size: .7em;
	margin-left: 175px
	
	
}  
#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;  
 } 



This post has been edited by charyl: 29 March 2013 - 08:49 PM

Was This Post Helpful? 0
  • +
  • -

#18 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 - 09:02 PM

nevermind on that-got it.
revoked: had it but lost it....changed something and I don't know what.

This post has been edited by charyl: 29 March 2013 - 09:52 PM

Was This Post Helpful? 0
  • +
  • -

#19 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 - 09:50 PM

ok, I don't think this is correct, but it made it work...my nav is suppose to be a ul (unordered list) I coded it in the css, but in order to get it to work in the html I had to code a <br> to get the yurts to go to the next line?

problem #2 is my hover isn't working? here's html and css

html:
<div id="nav">
<ul>
<a href="index.html">Home </a><br> <a href="yurts.html">Yurts</br> </a> <a href="activities.html">Activitiest </a> <a 

href="reservations.html">Reservations </a>
  </ul>
</div>



css:
#nav { 
 	padding: 20px 5px 5px 20px;   
     	font-weight: bold;  
     	float: left;
     	width: 175px
} 
#nav ul { 
	list-style-type: none;
	margin: 0;
	padding-left: 0;
	font-size: 1.2em;
	float: left;
	width: 125
}
#nav a { 
	text-decoration: none;
} 
#nav a:link { 
	color: #000033;
}
#nav a:visited {
	color: #344873;
}
#nav a:hover {
	color:ffffff;
}


Was This Post Helpful? 0
  • +
  • -

#20 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3190
  • View blog
  • Posts: 10,681
  • Joined: 12-December 12

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

Posted 30 March 2013 - 01:06 AM

ul (and ol) elements should only contain li elements as child-elements. This is essential information about HTML-lists - I am not sure how you could have studied this topic without coming across this essential information.

Your hover effect doesn't work; so look at your rules for :link :visited and :hover. How do they differ?

If you compare your two width specifications you will notice an error there as well.
Was This Post Helpful? 1
  • +
  • -

#21 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 31 March 2013 - 07:28 PM

very good! I remember seeing information to that, but did not understand totally until you expressed it differently. It did not say what you said. Thank you so much. I will have to revisit the hover rules and declarations. Thanks for pointing out the width problem, but I'm a little confused on specifically what you are refering to. I can always re submit my homework, but it was due last sunday. my teacher is an awesome teacher, my biggest concern is getting it right and memorizing/understanding and proving to my teacher I am learning. I will haveto come back to this I'm currently working on another website and It's also late, but I love to get it right before I turn it in.
Was This Post Helpful? 0
  • +
  • -

#22 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3190
  • View blog
  • Posts: 10,681
  • Joined: 12-December 12

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

Posted 01 April 2013 - 01:07 AM

width: 175px
...
width: 125what
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2