CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 2 of 2

Thread: Html Css

  1. #1
    Join Date
    Nov 2015
    Posts
    1

    Question Html Css

    Hi, I'm having some trouble with my programming.
    Everything looked fine until I re-opened the page in preview.
    2 of my photos that I resized and put to the right of the text now ended up full-sized on the bottom of the page.

    html:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
     <link type="text/css" rel="stylesheet" href="test.css"/>
      <title> Happybone </title>
    </head>
     
     <body>
      
       <ul>
        <li> <img src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/></li> 
        <li> <a href="https://happybone.se" class="top"> Start </a></li>
        <li> <a href="https://giftigt.happybone.se" class="top"> Giftigt </a> </li>
        <li> <a href="https://forum.happybone.se" class="top"> Forum </a></li>
        <li> <a href="https://kontakt.forum.se" class="bot"> Kontakt </a></li>
       </ul>
      
      <div id="info">
       <h3>Välkommen till happybone!</h3>
       <br>
       <p>Här på happybone vill vi underlätta för alla hundägare, nya som gamla.</p>
       <p>Vi erbjuder ett flertal roliga och lättnavigerade sidor. Vi har ett forum där du har möjlighet att diskutera med oss på happybone eller andra passionerade hundägare. Eller varför inte ordna upp en hundträff i en av Sveriges hundratals hundparker?</p>
       <p>Du navigerar i panelen till vänster om denna text.</p>
       <p>Där hittar du flikarna Start, Giftigt, Forum och Kontakt</p>
       <p>Klicka på en utav flikarna för mer information.</p>
       <p>Vi vill att du ska trivas här på happybone, hör därför gärna av dig till oss på info@happybone.se om det är något du undrar över.</p>
       <br>
       <br>
       <p id="sidenote">Sidan är under konstruktion, tack för ditt tålamod.</p>
      </div>
      
      <table>
       <tr>Veckans Bilder</tr>
       <tr>
        <img src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/>
       </tr>
       <tr>
        <img id="under" src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/>
       </tr>
      </table>
    </body>
    </html>
    css:
    Code:
    * {font-family: Verdana}
    
    html {background-color: #e5f2ff}
    
    ul {list-style-type: none;
        margin: 0;
        padding: 0;
        width: 12em;
        background-color: #666666;
        text-align: center;
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        box-shadow: 0em 0em 2em 0em #666666 }
    
    li img {display: block;
            width: 9em;
            height: 9em;
            margin: auto;
            border: 0.2em solid #e5f2ff;
            border-radius: 100%;
            margin-top: 1em;
            margin-bottom: 3em;
            padding: 0.3em}
    
    li a {display: block;
          padding: 1em 0em 1em 0em;
          text-decoration: none;
          color: white;
          font-size: 1.1em;
          border-bottom: 0.15em solid #e5f2ff}
    
    .bot {border: 0}
    
    a:hover {font-weight: bold;
             color: white;
             font-size: 1.5em;
             padding-bottom: 0.5875em;
             padding-top: 0.5875em}
    
    a:active {font-weight: bold;
             font-size: 1.5em;
             background-color: black;
             padding: 0.8em;
             border: 0}
    
    a:link {color: white}
    
    a:visited {color:white}
    
    #info {padding: 1em;
           margin: 6em 0em 10em 15em;
           border: 0.15em solid black;
           background-color: white;
           width: 35em;
           float: left}
    
    #sidenote {font-size: 0.7em}
    
    /* everything under here stopped working */
    
    table {float: right;
           display: inline;
           position: relative;
           margin: 4.9em 4em 1em 1em;
           text-align: center;
           font-size: 1.1em;
           font-weight: bold;
           text-decoration: underline}
    
    tr img {width: 12em;
            height: 12em;
            padding: 1em;
            border-radius: 100%;
            margin: 1em}
    
    #under {padding: 0em;
            margin:0}
    Last edited by PeejAvery; December 26th, 2015 at 02:50 PM. Reason: Added code tags

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: Html Css

    First off, your table format is incorrect. You have no <td>'s for proper formatting.

    Second, according to that HTML, you've set the 2 images to set at the bottom. Where did you mean to place them?
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Tags for this Thread

Posting Permissions

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





Click Here to Expand Forum to Full Width

Featured