From bootcrap to proper markup: my first attempt

Puntocom81 Banned

Messages:: 80

Likes Received:: 3

Best Answers:: 1

Trophy Points:: 35

#1

Hello. I'm trying to replicate the looking of the website of a friend of mine (tuotracara dot com). I want to help him since that code is a true disaster and I think it's a good exercise to practice HTML/CSS.

I have some problems with the layout though:

When I try to set up a height wrapper to set the body background the footer background stops working as desired.
I don't know how to place the fixed width video with the text container located at the left.

Some help will be appreciated.

html


<!DOCTYPE html><html lang="es"><head><meta charset="utf-8">

<meta
   name="viewport"
   content="width=device-width,height=device-height,initial-scale=1.0"
>

<link
   rel="stylesheet"
   type="text/css"
   href="screen.css"
   media="screen,projection,tv"
>

<title>
   TUOTRACARA
</title>

</head><body>

<div class="widthWrapper"><div id="top">
  <h1>
  TUOTRACARA<span><!-- image replacement --></span>
  <small>
  Caricaturas en directo para eventos
  </small>
  </h1>
<!-- #top --></div>

<div id="intro">
  <div class="subSection" id="hola">
  <h2>¡Hola!</h2>
  <p>
  Somos un equipo de caricaturistas especializados en caricatura rápida para la animación de eventos.
  </p><p>
  El regalo más original y divertido para que los invitados recuerden tu evento con una sonrisa.
  </p><p>
  Desplazamientos a toda España.
  </p>
  <span>
  Solicite presupuesto.
  </span>
  <!-- .subSection --></div>
  <div class="subSection" id="video">
  <video
  controls
  preload="metadata"
  poster="images/video.jpg"
  class="fullVideoPlate"
  >
  <source src="videos/test1.mpg" type="video/mp4">
  <!--
  Don't forget your other "required" source formats
  I'd probably also have a flash fallback here as well as a
  flash off fallback text.
  -->
  </video>
  <!-- .subSection --></div>
<!-- #intro --></div>

<div class="contentWrapper"><div id="content">

  <div id="products">
  <div class="subSection">
  <h2>
  Caricaturas para bodas y celebraciones
  <small>
  ¡Divertidas caricaturas en directo!
  </small>
  </h2>
  <p>
  Bodas, cumpleaños, comuniones, bautizos, despedidas de soltero y todo tipo de celebraciones ya han contado con nuestros servicios por toda España.
  </p>

  <p>
  Tuotracara te ofrece dar una pincelada de humor a la celebración con divertidas caricaturas en directo para los invitados.
  </p>

  <p>
  Las caricaturas proporcionan un ambiente distendido y divertido, los invitados disfrutarán y se reirán alrededor de los dibujos, además de llevarse un recuerdo personalizado.
  </p>

  <p>
  Podrá disfrutar de nuestras caricaturas en el momento que más le interese. Cada caricaturista dibuja una media de 12-14 caricaturas por hora.
  </p>
  <!-- .subSection --></div>
  <div class="subSection">
  <h2>
  Caricaturas para eventos corporativos
  </h2>

  <p>
  Caricaturas en directo para eventos corporativos, deportivos, convenciones, ferias, y todo tipo de evento de empresa.
  </p><p>
  ¡La caricatura es una forma promocional original y divertida! Su poder publicitario radica en que atrae a todos los públicos y que perdura en el tiempo.
  </p><p>
  Incluimos en cada papel vuestro logo o slogan impresos para que sea 3 en 1: animación + regalo + PUBLICIDAD.
  </p><p>
  Nuestros caricaturistas son especialistas en caricatura rápida tardando aproximadamente 3-4 minutos en en blanco y negro, y 5-6 minutos en color (por persona).
  </p><p>
  También dibujamos caricaturas digitales en tablet. Sesión de caricaturas en iPad y caricaturas en Samsung Galaxy Note para todo tipo de eventos (con envío digital / impresora portátil + proyección en pantalla).
  </p>
  <!-- .subSection --></div>
  <!-- #products --></div>
<!-- #content, .contentWrapper --></div></div>

<div id="extras">
  <h2>
  Caricaturas en directo
  </h2>

  <ul>
  <li>
  Eventos de Navidad
  </li><li>
  Jubilación con Humor
  </li><li>
  Comuniones y Bautizos
  </li><li>
  Eventos de Promoción
  </li><li>
  Aperturas e Inauguraciones
  </li><li>
  Ferias
  </li><li>
  Congresos y Convenciones
  </li><li>
  Deportivos y Culturales
  </li><li>
  Viajes e Incentivos
  </li><li>
  Fiestas Particulares
  </li><li>
  Cócteles
  </li><li>
  Talleres Infantiles
  </li>
  </ul>

  <h2>
  Caricaturas en digital
  </h2>

  <p>
  Divertidas caricaturas en directo sobre tablet y enviadas en el momento en formato digital por e-mail. Con posibilidad de proyección en pantalla e impresora portátil.
  </p>

  <ul>
  <li>
  iPad caricaturas
  </li><li>
  Samsung Galaxy Note caricaturas
  </li><li>
  Microsoft Surface caricaturas
  </li><li>
  Wacom caricaturas
  </li>
  </ul>

  <span>
  Nos desplazamos a toda España.
  </span>
<!-- #extras --></div>

<div id="gallery">
  <h2>
  Nuestros caricaturistas en acción
  </h2>

  <ul>
  <li>
  #
  </li><li>
  #
  </li><li>
  #
  </li><li>
  #
  </li><li>
  #
  </li><li>
  #
  </li>
  </ul>
<!-- #gallery --></div>

<div id="customers">
  <h2>
  Hemos trabajado para
  </h2>

  <ul>
  <li>
  #
  </li><li>
  #
  </li><li>
  #
  </li><li>
  #
  </li><li>
  #
  </li><li>
  #
  </li>
  </ul>
<!-- #customers, .widthWrapper --></div></div>

<div id="footer">
  <div class="widthWrapper">
  <div class="subSection">
  <span>
  foonet.com.<br>
  Tel: 000000000<br>
  Email hola@foonet.com
  </span>
  <span>
  &copy; Tuotracara 2016 - <a href="#">Aviso legal</a>
  </span>
  <!-- .subSection --></div>
  <div class="subSection">
  <h2>Asociaciones de dibujantes</h2>
  <ul>
  <li>
  <a href="#">
  ISCA
  </a>
  </li><li>
  <a href="#">
  ACE
  </a>
  </li>
  </ul>
  <!-- .subSection --></div>
  <div class="subSection">
  <h2>Con la colaboración de</h2>
  <ul>
  <li>
  <a href="#">
  bodas.net
  </a>
  </li>
  </ul>
  <!-- .subSection --></div>
  <!-- .widthWrapper --></div>
<!-- #footer --></div>

</body></html>

Code (markup):

css


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
   margin:0;
   padding:0;
}

img, fieldset {
   border:none;
}

hr {
   display:none;
   /*
     HR in my code are for semantic breaks in topic/section, NOT
     style/presenation, so hide them from screen.css users
   */
}

@media (max-width:480px) {
   * {
     -webkit-text-size-adjust:none;
     -ms-text-size-adjust:none;
   }
}

body {
   font:normal 85%/150% "segoe ui",helvetica,sans-serif;
  /* background-image:url('images/background.jpg'); */
}

p {
  margin-bottom:1em;
}

h2 {
  margin-bottom:1em;
}

#top,
#footer,
.widthWrapper {
   min-width:48em;
}

.widthWrapper {
   overflow:hidden; /* wrap floats */
   zoom:1; /* trip haslayout, wrap floats legacy IE */
   max-width:60em;
   margin:0 auto;
}

#top {
   overflow:hidden; /* wrap floats */
   width:100%; /* wrap floats legacy IE, report width to .colorBar */
}

h1 {
   float:left;
}

.contentWrapper {
   width:100%;
   float:left;
}

.heightWrapper {
  background:#ddd;
}

#content {
   position:relative;
   zoom:1; /* report width legacy IE */
   margin-right:16em; /* must == #extras width */
   padding-top:1em;
}

#extras {
   float:left;
   width:16em;
   margin-left:-16em; /* must == negative #extras width */
   padding-top:1em;
}

#footer {
  background:#000;
  color:#fff;
}

#gallery,
#customers {
  clear:both;
}

#gallery ul,
#customers ul {
  list-style:none;
  text-align:center;
  padding-bottom:1em;
}

#gallery li,
#customers li {
  display:inline;
  vertical-align:top;
}

#gallery a,
#customers a {
  display:inline-block;
  vertical-align:top;
}


#footer a {
  color:#fff;
}

#footer .subSection {
  float:left;
  width:33.33%;
}

#content .subSection {
  float:left;
  width:49%;
}

#intro .subSection {
  float:left;
}

#hola {
  width:30em;
}

Code (markup):

Please, sorry again for the bad formatting, when I copy from Flo's Notepad++ to this editor the tabs break.

Last edited: Aug 9, 2016

Puntocom81, Aug 9, 2016 IP

kk5st Prominent Member

Messages:: 3,497

Likes Received:: 376

Best Answers:: 29

Trophy Points:: 335

#2

Puntocom81 said: ↑

Please, sorry again for the bad formatting, when I copy from Flo's Notepad++ to this editor the tabs break.
Click to expand...

Agreed, terrible.

gary

kk5st, Aug 9, 2016 IP

WebDeveloperOne Peon

Messages:: 24

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 3

#3

I really don't understand what you are trying to do. If you can explain me better i may be able to help you

WebDeveloperOne, Aug 11, 2016 IP

Log in or Sign up

Advertising (learn more)

From bootcrap to proper markup: my first attempt

Puntocom81 Banned

kk5st Prominent Member

WebDeveloperOne Peon

Log in or Sign up

Advertising (learn more)

From bootcrap to proper markup: my first attempt

Puntocom81 Banned

kk5st Prominent Member

WebDeveloperOne Peon

Useful Searches