1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

HTML Help with CSS or HTML

Discussion in 'Web Development' started by cpaholek, Oct 18, 2013.

  1. cpaholek

    cpaholek New Member

    I am using the 'women clothing web template' and instead of paragraph form text on 'the shop' page I would like to be able to insert text line by line so I can insert an address. I've tried using <br> in the code, but it then shifts the location of the image. This is very challenging to explain. I hope someone understands and can help me with the code or the css.
     
  2. Geoff Tyrer

    Geoff Tyrer Member

    Can you provide a link to the exact template please?
     
  3. cpaholek

    cpaholek New Member

  4. cpaholek

    cpaholek New Member

    I should also mention that I am using the format of this page twice, so I do need to keep its original capabilities for one page, but tweak it slightly for the address page.
     
  5. Geoff Tyrer

    Geoff Tyrer Member

    Is this anything like what you wanted?
    [​IMG]
    Let me know how you want it to look and we'll work our the HTML/CSS for it...
     
  6. cpaholek

    cpaholek New Member

    I'd like the address lines to be where the current place holder text is, but whenever I use <br> at about the 4th line the text moves to the bottom of the image.

    I also need a page where I can have alphabetized columns. Could you help me with that also?
     
  7. Geoff Tyrer

    Geoff Tyrer Member

    Hi,

    Try this:
    Code:
                <div style="width: 100%;">
                    <a href="shop.html"><img src="images/stare.jpg" alt="Img"></a>
                    <p style="text-align:left;">
                        Address Line One<br> Address Line Two<br> Address Line Three<br> Address Line Four<br> Address LIne Five<br> Address Line Six
                    </p>
                </div>
    What we are doing here in the HTML is specifying that the <div> that contains the address details should take up 100% of the space available. Why we have to do this I'm afraid I don't know. Let me know if it works for you.

    What exactly do you want for you alphatbetizied columns?
     
  8. cpaholek

    cpaholek New Member

    This is what it looks like so far; however, instead of the entire list being in one column, I'd like it be in 3, or 4 columns.
     

    Attached Files:

  9. cpaholek

    cpaholek New Member

    Thank you very much for the other code! It worked exactly as I wanted it to!
    Could you also help me set up Lightbox or some other photo viewing pop-up from the bottom left placeholder image on the home page?
     
  10. cpaholek

    cpaholek New Member

    I would like 3 or 4 alphabetized columns as opposed to 1. This is what I currently have.
     

    Attached Files:

  11. Geoff Tyrer

    Geoff Tyrer Member

    Here is some HTML that will give you columns:
    Code:
                <!--  <div> containing columns -->
                <div style="padding: 0 0 0 0; width: 750px;">
                    <!--  Column 1 -->
                    <div style="padding: 0 0 0 0; width: 200px; float: left;">
                        <p>This is some text in column 1.</p>
                    </div>
                    <!-- Column 2 -->
                    <div style="padding: 0 0 0 75px; width: 200px; float: left;">
                        <p>This is some text in column 2.</p>
                    </div>
                    <!-- Column 3 -->
                    <div style="padding: 0 0 0 75px; width: 200px; float: left;">
                        <p>This is some text in column 3.</p>
                    </div>
                    <div style="clear: both;"></div>
                </div>
    
    It's the "float:left;" that gives you the columns. The total width of the columns must not exceed that of the containing <div> otherwise one or more columns will drop below the others. This is called "float drop". You will almost certainly want to alter the width of the columns and the space between them (controlled by the padding in the above markup) so make sure that the containing <div> has a width that is equal to, or greater than, the total width of the columns plus their left and right padding.
    If you have any problems working this into your design please just post again.
     
  12. Geoff Tyrer

    Geoff Tyrer Member

    I haven't worked with Lightbox but from my experience with YouTube and Picasa you are generally provided with the mark-up for embedding a video or slideshow into your web page. Do you have this?
     
  13. cpaholek

    cpaholek New Member

    I don't have those, but I'm sure I can get them.
     
  14. Geoff Tyrer

    Geoff Tyrer Member

    Just post again when you get what's needed.
     
  15. cpaholek

    cpaholek New Member

    I did use this in my design; however, I am trying to add a 4th column and it isn't working. I've tried adjusting the <div> and the width of the columns, but I am still getting a "float drop" on the 4th column. Can you please help? Do I need to change something in the CSS?
     
  16. cpaholek

    cpaholek New Member

    Hi Geoff, I've downloaded Lightbox, but I have no idea where to go from this point. Think you can help me out?
     
  17. Loosipher

    Loosipher New Member

    Hi ,
    using Html is very simple. It should be fully based on tags.
    if we use html after that css will get easy.
     
  18. fastrecruitment

    fastrecruitment New Member

    You can use <pre> tag that is used to keep the content same. WYSWYG Like if you write in coding
    <pre>hello everyone</pre>
    You will get it same as you write in coding. the space you gave in coding got the same in output. The output will be
    hello everyone
    Or you can use <div>. For more You can learn HTML and CSS from w3schools.com.