homepage Welcome to WebmasterWorld Guest from 54.211.68.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Simple lines of code needed for basic editing
BRoberson1657




msg:4389532
 7:40 pm on Nov 21, 2011 (gmt 0)

As I've stated in the past... I'm very new to editing CSS. This site has been abundantly helpful and I've come to rely on the feed back of you more capable and experienced webmasters - BIG THANKS TO ALL THAT REPLY!

I need a few lines of code that would be really useful to me as I am editing the site. I'm sure these are very basic commands but for a beginner they can consume a large amount of my day. I now know how to insert a background image so I've included that line of code so that you can see the file paths. :) I look forward to any help you can provide. THANKS WEBMASTERS!

1. Adding a Background Image: background-image:url('App_Themes/Peacock/Img/MainBackground.png');
I need help -
2. Adding a "hot link" within a body of html text.
3. Adding/editing an image to HTML. (I need all formatting lines as well.. width, padding, margin, border etc)

 

not2easy




msg:4390148
 6:53 am on Nov 23, 2011 (gmt 0)

These are some very basic tasks, you are right. A good place to learn basic html, css and other code is at w3schools which is an easy site to find. Adding a link to text is as easy as

Words before your link <a href="http://example.com">words that will be a link </a>and more words after your link...
To add an image:
<img src="nameoftheimagefile.jpg" alt="alternate text"> the formatting is done in your css file. That example is for html, not for xhtml documents. You would add any margin, position, border, padding to your css using the img{ selector or as an image class as img.c{.

Go and spend half an hour a day at the site mentioned above and you will be able to practice while you learn and move ahead at your own pace.
Good luck.

lucy24




msg:4390150
 7:02 am on Nov 23, 2011 (gmt 0)

2. Adding a "hot link" within a body of html text.

Bite your tongue. Never mind about the site at the far end of the hotlink; you're also doing a disservice to your users. Pages containing hotlinks can take several times as long to load up, as the user's browser has to go hunt down all those different domains.

BRoberson1657




msg:4390290
 2:56 pm on Nov 23, 2011 (gmt 0)

@ not2easy - Thanks for the awesome tip on www.W3Schools.com! I can tell that this is just what I will need to fill in some of the knowledge gaps.

@ lucy24 - do you have a better solution? regardless of the load time, it doesn't change the fact that the links are needed. If there is a smarter way of tackling the task I'm all ears! Please point me in the right direction.

rocknbil




msg:4390377
 5:57 pm on Nov 23, 2011 (gmt 0)

BRoberson1657 what she means is "hotlinking" is a term used to describe linking to a resource on an external site. So let's say you use the <img> element to link to an image from Amazon (or something.) This requires a request to Amazon, and uses their bandwidth to load your page, and is generally a nasty approach to building pages.

What you meant to say is hyperlink, or an inline link, as described above.

(I need all formatting lines as well.. width, padding, margin, border etc)


It's never really that simple. :-) An example, border for what doctype? border="0" is valid for HTML doctypes, but it's not a valid attribute for XHTML. To answer the question, most of what you ask for can be found for CSS - but "all formatting lines" would depend on context. You may need no CSS at all for a "ordinary image" but you can apply lots of CSS rules to modify it's appearance. Another example, a simple left floated image in which the text would "flow" around it can be done in many ways. The stock minimalist approach:

<img class="left-image" src="myimage.jpg" width="24" height="24" alt="my image">

The css:
img { border: none; } /* in case you wrap it in a link */
.left-image { float: left; margin: 0 12px 12px 0; }


But for many "purists" (probably not the right word) and for XHTML, you never want to leave a "bare element" in code source. Some examples of what I mean, in addition to the <img>,

<body>

<strong style="font-size:36px;">This may LOOK like a heading, but it's not - it's really big bare text.</strong><br>

<img src="myimage.jpg" alt="">
<br>
Here's some bare text. Since it has no semantic container, it doesn't indicate what kind of text it is.
<br>

</body>

Semantic containers do some of the lifting for us - and, give devices accessing the page some indication of "what the content is."

<body>

<h1>Ah. I'm a page heading, no argument.</h1>

<div class="left-image"><img src="myimage.jpg" width="24" height="24" alt="my image"></div>

<p>Here's some text. Since it is wrapped in a p, devices reading it know this is a paragraph and body text, distinctly different from the h1 above.</p>

</body>

In my example above I intentionally used <div> for the floated image because div, span, and br are generic elements with no semantic meaning - which is what I want in this context (or, if anything, says specifically, "this element has no semantic meaning, carry on . . . "). I could just as easily used <span> with it's display set to block.

So there really is no "give me teh codez" for any element, it depends on context.

One more (Rant? comment?) about <img> attributes, this
<img src="myimage.jpg" alt="my image">

as opposed to this
<img src="myimage.jpg" width="24" height="24" alt="my image">

The reason you want to include the width and height attributes in <img> elements, when you can, is because a browser first READS the source code then requests the resources in it. If it reads an <img> element and width and height attributes are present, it knows to "save space" for that element before the page renders.* Without them, you may get that "floating around" effect as a page loads, elements jiggle and joggle until all the images loads and assume their position.

* Often the w/h attributes are left off if you apply CSS to these images for the same effect:

<img id="img1234" src="myimage.jpg" alt="my image">

...

#img 1234 { width:24px; height:24px; }

.. however, this means you need to apply a whole set of classes and/or ID's to your CSS, bloating it further. In terms of maintenance, it's often easier to just include them inline, even though that's against the idea of separating presentation from markup.

In much of what I do, BOTH of these are impossible or at the least, difficult. Many CMS's don't allow (or make it difficult to) apply accurate width and height attributes, so you just have to leave them off and let it jiggle joggle as it loads. :-)

BRoberson1657




msg:4390417
 6:50 pm on Nov 23, 2011 (gmt 0)

@ rocknbil - WOW, thanks for the info. This is VERY useful.
As I am assembling my knowledge of this new world of code - I really appreciate the long answers and supplemental info surrounding my questions. I know my questions are quite elementary and sometimes I don't know exactly how to frame my questions... but I have to start somewhere. It's very helpful to speak the "LINGO" when addressing problems (simple as they may be) and this helps me a great deal. Thanks for your time and attention to detail.

alt131




msg:4390636
 10:15 am on Nov 24, 2011 (gmt 0)

Hi BRoberson1657, and a warm welcome to WebmasterWorld :)
Thanks for taking the time to acknowledge the value of the earlier posts. Don't be too concerned about the "lingo" - sometimes you have to ask the question to learn the correct terminology, and if we're not sure about the issue, someone will ask for more information.

Everyone has a favourite place to recommend to new coders, and I second not2easy's suggestion to set aside time each day to read and practise. Also spend some of that time reading the posts here - you'll be amazed how quickly your knowledge expands. But I would suggest you be wary of w3schools. Check out the alternative resources suggested by birdbrain in this recent thread [webmasterworld.com], and don't forget our very own Css Crash Course [webmasterworld.com]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved