Page 1 of 2 12 LastLast
Results 1 to 35 of 67

Thread: I Need Help In A Few Things Please

  1. #1

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0

    I Need Help In A Few Things Please

    Hi, i'm new at HTML and CSS, I'm trying to build a site, I did something, but i do not know how to fix it, I tried all sorts of things, but without success.
    i did headings H2 (some are buttons and some not), those who do, i do not understand why there are "hot spots", and the mouse cursor changes even when i did not hover on the buttons.
    Alongside H2 headlines should be icons, they should be their on the right side, I've set up it, but for some reason it does not show.
    i need the lower part of the screen the graphics element need to be at bottom - now there is a gap, and the graphic element need to be behind the text.

    i'd be happy if someone can help me with this.

    * in the Attachment zip file, it contains 1 html 1 css 1 folder with images.

    Code:
    http : //s000.tinyupload.com/index.php?file_id=00698635427423417552
    Last edited by snowmaker; 7-25-15 at 04:59 PM.

  2. #2
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,455
    Rep Power
    21
    Can you provide an URL to the site? I doubt that anyone will download anything, even if it doesn't appear to be an executable file. Well, I hope no one would, and I'm not saying that you have malicious intents, I just saw a link to a d/l site and my flags went up right away.

    It's entirely possible that you intend this site only to be private, and on a 'intranet' and that's why there is no URL. In that case, HTML & maybe CSS would probably be all that's needed. Just make another post, and use the code or HTML or PHP tags.
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  3. #3

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    someone? please it's important to me

  4. #4
    Former Spam Filter (EU) IanS's Avatar
    Join Date
    Mar 2004
    Location
    Washington (THE original UK one!)
    Posts
    12,964
    Rep Power
    30
    For some reason the response got caught in the 'new user' queue to be approved.

    Snowmaker has said it - post a link to the site or post the code directly here. Be aware, the first 5 posts should need approval and if it contains a link, the first 10. Your post should get caught by the system that inadvertently caught snowmakers reply.
    This is a Powweb customer
    helping Powweb customer forum.

    I am a customer just like you!!

    Some matters can only be answered by staff or support.
    Give it a go - ask here first!

  5. #5

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I can not provide a URL - because it is on my computer, and file I attached this first page and that's it, if I understand how to fix it - the first page, i will know how to do the other pages.
    For the storage file I put it, I'm not from the US, so I Googled and find file hosting,for you it easier to figure out how to download it, that's all, if you know a site you can store files and is not considered "problematic" to you, then I will be happy if you give me the link.
    So I just copy the HTML code and CSS, and according to this you will know how to help me?

  6. #6

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Code:
    HTML Code:
    <!DOCTYPE html>
    <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="circles-header-top">
    	<img src="images/top.png", width="100%"/>
    	</div>
    	  <div id="wrap">
            <div id="header">
    		  <img src="images/logo.png"/> 
            </div>
        </div>
    	<div id="nav">
    	    <ul>
    		    <li id="contact"><a href="#">Text Goes Here</a></li>
    			<li id="about"><a href="#">Text Goes Here</a></li>
    	    </ul>
        </div>
    	<div id="primary">
    		<div id="paper">
    		    <img src="images/paper.jpg" />
    		    <ul>
    		        <li id="text_on_paper">Text Goes Here</li>
    		    </ul>
    	    </div>	
    	</div>	
    	<div id="icons">
    		<ul>	
    	        <li id="home"></li>
    		</ul>	
    	</div>
    	<div id="secndary">	
    	        <a href="#"><h2>Text Goes Here</h2></a>
    			<ul>
    			<h2>Text Goes Here</h2>
    			</ul>
    			<ul>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			</ul>
    			<a href="#"><h2>Text Goes Here</h2></a>
    			<a href="#"><h2>Text Goes Here</h2></a>
    			<ul>
    			<h2>Text Goes Here</h2>
    			</ul>
    			<ul>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			</ul>
    			<a href="#"><h2>Text Goes Here</h2></a>
    			<a href="#"><h2>Text Goes Here</h2></a>
    			<a href="#"><h2>Text Goes Here</h2></a>
    			<ul>
    			<h2>Text Goes Here</h2>
    			</ul>
    			<ul>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			   <li><a href="#">Text Goes Here</li>
    			</ul>
    			<h2>Text Goes Here</h2>
    			<ul>
    			<li><a href="#">Text Goes Here</li>
    			<li><a href="#">Text Goes Here</li>
    			</ul>
    			<a href="#"><h2>Text Goes Here</h2></a>
    			<a href="#"><h2>Text Goes Here</h2></a>
    			<ul>
    			<h2>Text Goes Here</h2>
    			</ul>
    			<ul>
    			<li><a href="#">Text Goes Here</li>
    			<li><a href="#">Text Goes Here</li>
    			</ul>
    		</div>		
    	<div id="footer1">
    	    <ul>
    	        <li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    	    </ul>
        </div>	
    	<div id="footer2">
    	    <ul>
    		    <li id="footer_links"><a href="#">Text Goes Here</a><li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    	    </ul>
        </div>		
        <div id="footer3">
    	    <ul>
    	        <li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    	    </ul>
        </div>
    	<div id="footer4">
    	    <ul>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    	    </ul>
        </div>
    	<div id="footer5">
    	    <ul>
    	        <li id="footer_links"><a href="#">Text Goes Here</a></li>
    			<li id="footer_links"><a href="#">Text Goes Here</a></li>
    	    </ul>
        </div>	
    	<div id="footer6">
    	    <ul>
    	        <li id="footer_copy">2015</li>
    	    </ul>
        </div>	
        <div id="circles-header-bottom">
             <img src="images/bottom.png", width="100%"/>
       </div>
    	
    </body>
    </html>


    Code:
    /* reset */
    
    html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, address, code, img, 
    small, strong, d1, dd, dt, ol, ul, li,
    fieldset, form, label {
    	  margin: 0;
    	  padding: 0;
    	  border: 0;
    	  outline: 0;
    	  font-size: 100%;
    	  vertical-align: baseline;
    	  background: transparent;
    }
    body {
    		line-height: 1.5;
    		font-family: helvetica, arial, san-serif;
    }
    ol, ul {
    		list-style:none;
    }
    
    /* end reset */
    
    
    
    /* main styles */
    
    #wrap {
    width: 960px;
    margin: auto;
    position: relative;
    padding:0,0,0,0px;
    background: #eeeee;
    }
    
    #header {
    margin-top: -363px;
    padding-left: 210px;
    padding-top: 210px;
    }
    
    #nav {
    width: 960px;
    height: 2px;
    background-color: #8C6239;
    margin-top: -7px;
    margin: auto;
    }
    
    #nav  {
    width: 960px;
    height: 2px;
    background-color: #8C6239;
    margin-top: -7px;
    }
    #nav ul li {
    padding-left: 0px;
    padding-right: 2px;
    float: left;
    margin-top: -2px;
    margin-left: 100px;
    margin-right: -80px;
    position: relative;
    }
    
    #paper {
    padding-left: 0px;
    padding-top: 200px;
    margin-left: 510px;
    }
    
    #text_on_paper {
    margin-left: 44px;
    margin-right: 970px;
    margin-top: -197px;
    padding-left: 1px;
    padding-right: 9px;
    text-align: right;
    font-size: 17px;
    color: black;
    }
    
    #secndary {
    margin-right: 560px;
    margin-top: -230px;
    text-align: right;
    }
    
    #icons ul #home{
    background: url(images/icon.png) no-repeat;
    margin-top: 20px;
    margin-right:500px;
    }
    
    
    h2 {
    font-size: 22px;
    padding-top: 10px;
    color: #2B2B2B;
    width: 80px
    margin-right: 50px;
    
    }
    
    ul h2 {
    color: red;
    }
    
    a {
    text-decoration: none;
    color: #2B2B2B;
    font-size: 16px;
    }
    
    a:hover {
    color: #062DD4;
    }
    
    a h2:hover {
    color: #062DD4;
    }
    
    body {
    background: #b7f6fd;
    }
    
    #circles-header-top {
    opacity: 0.4;
    }
    
    #circles-header-bottom {
    opacity: 0.4;
    margin-top: -200px;
    padding-bottom: 0px;
    position: relative;
    bottom: 0px;
    }
    
    #footer_links a  {
    font-size: 90%;
    }
    
    #footer_copy {
    font-size: 90%;
    }
    
    #footer1 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: 562px;
    margin-left: 20px;
    margin-top: 60px;
    width: 130px;
    }
    
    #footer2 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 60px;
    width: 130px;
    }
    
    #footer3 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 60px;
    width: 130px;
    }
    
    #footer4 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 60px;
    width: 130px;
    }
    
    #footer5 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: 10px;
    margin-left: 20px;
    margin-top: 60px;
    width: 150px;
    }
    
    #footer6 {
    padding: 1px;
    text-align: right;
    margin-right: 10px;
    margin-left: 820px;
    margin-top: 370px;
    width: 120px;
    }

  7. #7

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Now I published the code, someone can help me, or do you still need all the files (images, icons..)?

  8. #8
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Start by fixing the errors in your HTML:
    https://validator.w3.org/#validate_by_input

    To get you started here's a few hints:
    HTML Code:
    <img src="images/top.png", width="100%"/>
    You cannot have a comma in that tag and width cannot be a percent. It should probably be:
    HTML Code:
    <img src="images/top.png" style="width:100%" alt="top image">
    <h2> is not a valid child of <ul>

    You have numerous unclosed <a> tags. Probably the source of your "hotspot" issue.

    An id can only be used once per page. If you need to reuse the styles use class.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  9. #9

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    as i said i'm new at HTML and CSS..
    Um ... okay now I notice that I have a really open tags.
    How and where should I place the class, and how it should be set in CSS? As I did, but with the addition of the class? i mean:

    #DIV name .class name {

    ...


    }

  10. #10
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Change:
    HTML Code:
    <li id="footer_links">
    To:
    HTML Code:
    <li class="footer_links">
    Then in your CSS change:
    Code:
    #footer_links a  {
    font-size: 90%;
    }
    To:
    Code:
    .footer_links a  {
    font-size: 90%;
    }
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  11. #11

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Okay, I made the changes you've written, I closed a tag, I still see the "hot spots" of H2 tags.
    In addition to that, how I fix the bottom? There is a gap, and How to move the image behind the text (footer)?
    And another little thing - Icon, why am I not see it?

  12. #12

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Update: I figure out how to fix the "hot spots".
    I still have need help on the rest.
    Thanks in advance for the help

  13. #13
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by Hunter47 View Post
    Alongside H2 headlines should be icons, they should be their on the right side, I've set up it, but for some reason it does not show.
    Quote Originally Posted by Hunter47 View Post
    And another little thing - Icon, why am I not see it?
    In your CSS you have:
    Code:
    #icons ul #home{
    background: url(images/icon.png) no-repeat;
    margin-top: 20px;
    margin-right:500px;
    }
    Which is getting applied to an empty tag:
    Code:
    	<div id="icons">
    		<ul>	
    	        <li id="home"></li>
    		</ul>	
    	</div>
    (color coded so you can see the path)

    An empty tag has no space, therefore it can have no background. If you want that icon as a background on your H2 tags you have to put it in the CSS for H2.

    Quote Originally Posted by Hunter47 View Post
    In addition to that, how I fix the bottom? There is a gap, and How to move the image behind the text (footer)?
    Probably the fastest, easiest way is to make your image a background for the body, something like:
    Code:
    body {
    background: #b7f6fd url(images/bottom.png) bottom;
    }
    Of course you would then have to remove the image code from your HTML.

    More about background images:
    http://www.w3schools.com/cssref/pr_background-image.asp
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  14. #14

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    If I set the icon will be within H2 tag, it replicates it, I need every H2 tag the icon will be different, that's why I did Div tag of "icons" and inside it "home",how do I set it up?
    For the bottom, it Okay, but partly, I need it to be a low opacity as at the top, how do I fix it?

  15. #15
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    If every H2 will be getting a different icon it will be easier to do something like:

    HTML Code:
    <h2>My text<img src="icon1.png" alt="icon 1"></h2>
    <h2>Some other text<img src="icon2.png" alt="icon 2"></h2>
    Then some CSS to space the icon:
    Code:
    h2 img {
        margin-left: 1em;
    }
    There are other ways of doing it, but that shows one idea.

    You can't do opacity on background images, so you'll need to edit the image to be exactly how you want it.
    Also see:
    https://scotch.io/quick-tips/how-to-...images-opacity
    Last edited by Builder; 7-26-15 at 02:56 PM. Reason: Added opacity part
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  16. #16

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    How do I center the icon to text? I tried to make margin-top, but it does not work.

    You can't do opacity on background images, so you'll need to edit the image to be exactly how you want it.

    To the top is background, and it is behind the logo, I gave him opacity: 0.4;

  17. #17
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by Hunter47 View Post
    How do I center the icon to text? I tried to make margin-top, but it does not work.
    Code:
    h2 img {
        margin-left: 1em;
        vertical-align: middle;
    }
    Quote Originally Posted by Hunter47 View Post
    To the top is background, and it is behind the logo, I gave him opacity: 0.4;
    Your top "background" is not a CSS background-image. What's happening is the containing DIV for the logo is positioned with a negative top margin, putting it on top of the "background". HTML code is rendered top to bottom. Because the code for the logo comes after the code for the "background image" in the HTML the logo appears on "top". If you reversed the order of those images in the HTML your background would be on top of the logo. See the difference?

    Follow my previous advice and edit your bottom "background" to look exactly the way you want, then use it as a background-image for the <body>
    -- or --
    Read the article I linked and position the existing image behind the other DIVs. Those are the only two ways of doing it.
    Last edited by Builder; 7-26-15 at 04:24 PM. Reason: Yikes, needed clarification.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  18. #18

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I followed the article you linked, what happened is now the footer jumped up, and it should be over "background" down part, why it could not be simpler ?! Why must something go wrong?

  19. #19
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Against my (and snowmaker's) better judgement I downloaded your posted file to get the images.

    Try this:

    Download the attached image, name it bottom.png then use this CSS:
    Code:
    body {
    background: #b7f6fd url(images/bottom.png) bottom center repeat-x;
    }
    Image needs a little more editing but it's close to what you had with opacity.
    Attached Images Attached Images  
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  20. #20
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    What the bottom of your page would look like with the above image and code:
    Attached Images Attached Images  
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  21. #21

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    What you did, it really works, at the moment, the pictures i put are just for a sketch,so will I know how to build the design.
    it can not do, other than to make it repeat itself?

    Oh yeah, I forgot, thanks for your patience, I know I'm driving you crazy, I'm sorry.

  22. #22

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    That's what I've done so far, this the background that I would like to have, to lose some weight the background, i broke it apart - Top, Bottom and the background itself.
    How do I translate the design to this site?

    http://i62.tinypic.com/10nhngo.jpg

    * this image from photoshop, that's want i want the site look's like at the end.

  23. #23

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Update: after all sorts of experimental, time, and re-read what you wrote, I finally - make it work.
    thank you so much for all your help.

  24. #24
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    You're very welcome! Good luck!
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  25. #25

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I'm done now to build the first page, and I found that I did not know how continue from here, I mean, on each HTML page should be one CSS? If so, how do I name the file CSS1 CSS2 and so on?

  26. #26
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,455
    Rep Power
    21
    Each page can call the same CSS file. The same 'line' that's in the first page to call the CSS file must be in every page.
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  27. #27

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    You mean this line?
    Code:
    <link rel="stylesheet" type="text/css" href="style.css" />
    If so, what happens to the HTML file has design , and another page have the same design like the previous page, but with change , i can use the same settings that inside the CSS?

  28. #28
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,455
    Rep Power
    21
    Quote Originally Posted by Hunter47 View Post
    You mean this line?
    Yes.
    Quote Originally Posted by Hunter47 View Post
    but with change
    What kind of change? Just different text and/or images? You can do as above.

    I don't mind helping someone, but follow and read some links from this results page - https://duckduckgo.com/?q=+HTML%2C+C...ript+Tutorials
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  29. #29

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    on the first page there is small image and on this image text, the secend page big image the same place, and on this image, will be all the "action" for example image gallery and so on..
    i will look now on the link you included.
    Anyway, thanks for any help

  30. #30
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,455
    Rep Power
    21
    You bet. Good luck with your project!
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  31. #31

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    thanx

  32. #32

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I did Div tag and gave it a name,inside it i created ul tag,inside it i created li tag and gave it tag Class,i gave it a name, and then I added img tag.
    In css, I wrote:

    Code:
    #name ul li.name img {
    margin-right: -713px;
    }
    it does not respond to commands I gave. I wrote it wrong? Because I tried all sorts of combinations and nothing works.

  33. #33
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    You're probably better off applying the style directly to the <img> tag rather than drilling down through the DOM. Use ID if it will be the only image styled like that. Use Class if more than one image will be styled with that margin.

    Using ID:
    HTML Code:
    <img src="myimage.png" id="myimage" alt="my image">
    CSS:
    Code:
    #myimage {
    margin-right: -713px;
    }
    Using Class:
    HTML Code:
    <img src="myimage.png" class="myimage" alt="my image">
    CSS:
    Code:
    .myimage {
    margin-right: -713px;
    }
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  34. #34

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I tried both methods you've written, it's not working.
    image "stuck" in place and does not move

  35. #35
    Custom User Title tpoynton's Avatar
    Join Date
    Sep 2004
    Location
    Mass
    Posts
    2,177
    Rep Power
    18
    see http://www.barelyfitz.com/screencast...s/positioning/ for a good walk through of moving things with CSS, i assume you are trying to position the image

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •