Kirjautuminen

Haku

Tehtävät

Kilpailu

Putka Open 2025
2. kierros:
26.9. klo 18 – 28.9. klo 23

Keskustelu: Nettisivujen teko: Float ei toimi oikein

Pinles [26.10.2008 14:24:15]

#

Eli tarkoitus olisi saada content boxin sisään oikeaan yläkulmaan mainoslaatikko. Sen viereen pitäisi saada tekstiä, mutta nyt mainosloota liukuu alaspäin tekstin mukana. http://jappara.urli.net

index.php:

<html>
 <head>
  <title>Jäppärä</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<?php include("menulogo.html"); ?>

<?php include("etusivu.html"); ?>

<?php include("copyrights.html"); ?>

etusivu.html

    <div class="content2">
	<p>
	Tekstiä
	</p>
     <p>
	Tekstiä
	</p>
	 <p>
	Tekstiä
	</p>
	<p>
	Tekstiä
	</p>
	<p>
	Tekstiä
	</p>
	<div class="footer">
     Domainin tarjoaa
	 <h2><A HREF="http://urli.net/">urli.net</A></h2>
	 </div>
     </div>

style.css:

body {
   margin: 0px;                  /*Poistaa muutaman pikselin kokoisen oletusreunuksen selainikkunan reunoilta*/
   background-image:
   url(tausta.png)           /*Taustakuva*/
}

div {
   padding: 0px;                 /*Anna tämän olla jos haluat ilmavuutta sivuillesi*/
   border: 1px solid #000000;    /*Määrittää reunukset jokaiseen elementtiin*/
   text-align: center;           /*Määrittää tekstin sijoituksesta elementtien sisällä*/
}

.frame {
   margin-left: auto;           /*Keskittää elementin*/
   margin-right: auto;          /*Keskittää elementin*/
   width: 300px;                /*Määrittää elementin leveyden. Säädä tarpeiden mukaisesti.*/
   height: auto;                /*Määrittää elementin korkeuden. Säädä tarpeiden mukaisesti.*/
}

.logo {
   margin-left: auto;         /*Keskittää elementin*/
   margin-right: auto;        /*Keskittää elementin*/
   width: 900px;              /*Määrittää elementin leveyden. Säädä tarpeiden mukaisesti.*/
   height: auto;              /*Määrittää elementin korkeuden. Säädä tarpeiden mukaisesti.*/
   border-style: none;
}

.menu {
   margin-left: auto;          /*Keskittää elementin*/
   margin-right: auto;         /*Keskittää elementin*/
   width: 900px;               /*Määrittää elementin leveyden. Säädä tarpeiden mukaisesti.*/
   height: auto;               /*Määrittää elementin korkeuden. Säädä tarpeiden mukaisesti.*/
   background-color: #345768;  /*Taustaväri.*/
   color: #ffffff;             /*Tekstin väri.*/
   word-spacing: 20px;
}


.content {
   margin-left: auto;           /*Keskittää elementin*/
   margin-right: auto;          /*Keskittää elementin*/
   width: 900px;                /*Määrittää elementin leveyden. Säädä tarpeiden mukaisesti.*/
   height: auto;               /*Määrittää elementin korkeuden. Säädä tarpeiden mukaisesti.*/
   background-color: #527180;
}
.content2 {
   text-align: justify;
   margin-left: auto;           /*Keskittää elementin*/
   margin-right: auto;          /*Keskittää elementin*/
   width: 900px;                /*Määrittää elementin leveyden. Säädä tarpeiden mukaisesti.*/
   height: 600px;                 /*Määrittää elementin korkeuden. Säädä tarpeiden mukaisesti.*/
   background-color:#527180;
   color: #ffffff;              /*Tekstin väri.*/
}

.footer {
   float: right;
   margin-top: 5px;              /* Etäisyys yläreunasta */
   margin-right: 5px;             /*Etäisyys oikeasta laidasta*/
   height: 50;                 /*Määrittää elementin korkeuden. Säädä tarpeiden mukaisesti.*/
   width: 150;                  /*Määrittää elementin leveyden. Säädä tarpeiden mukaisesti.*/
   Background-color: #345768;    /*Taustaväri*/
   border-style: dashed;        /*reunuksen tyyli*/
   border-width: thin;
   border-color: #ffffff;
}

.copyrights {
   margin-left: auto;          /*Keskittää elementin*/
   margin-right: auto;         /*Keskittää elementin*/
   width: 900px;               /*Määrittää elementin leveyden. Säädä tarpeiden mukaisesti.*/
   height: 25px;               /*Määrittää elementin korkeuden. Säädä tarpeiden mukaisesti.*/
   Background-color: transparent;  /*Taustaväri*/
   border-style: none;           /* reunuksen tyyli */
}


h1 {
  font-family: verdana, arial, helvetica, sans-serif;
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 2em;
}

h2 {
  font-family: "Times New Roman", times, serif;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  font-size: 150%;
  margin: 0px;
}

h3 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: "Times New Roman", times, serif;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  font-size: 110%;
}

p {
  clear: left;
  margin-left: 15px;
  }

A:link{color:#ffffff; text-decoration:none}
A:visited{color:#ffffff; text-decoration:none}
A:active{color:#ffffff; text-decoration:none}
A:hover{color:#ffffff; text-decoration:underline}

TIEDÄN, siellä on kaikkea turhaa, mitä olen epätoivoisesti laittanut sinne.

Mod. lisäsi kooditagit

temu92 [26.10.2008 19:16:36]

#

Lootan pitää olla ihan ekana, ennen mitään tekstejä että se pysyy siellä ylhäällä.

<div class="content2">
    <div class="footer">
     Domainin tarjoaa
     <h2><A HREF="http://urli.net/">urli.net</A></h2>
     </div>
    <p>
    Tekstiä
    </p>
     <p>
    Tekstiä
    </p>
     <p>
    Tekstiä
    </p>
    <p>
    Tekstiä
    </p>
    <p>
    Tekstiä
    </p>
</div>

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta