-
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å [email protected] 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}
-
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?
