Foros del Web » Creando para Internet » CSS »

pasar este código de HTML a CSS

Estas en el tema de pasar este código de HTML a CSS en el foro de CSS en Foros del Web. Tengo serios problemas al intenar pasar ciertos códigos de CSS embebidos en el HTML sin alterar algo y no sé como hacerlo, ¿sabría alguien hacer ...
  #1 (permalink)  
Antiguo 06/01/2011, 12:24
 
Fecha de Ingreso: enero-2011
Mensajes: 5
Antigüedad: 5 años, 5 meses
Puntos: 0
Exclamación pasar este código de HTML a CSS

Tengo serios problemas al intenar pasar ciertos códigos de CSS embebidos en el HTML sin alterar algo y no sé como hacerlo, ¿sabría alguien hacer ésto?

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="hoja de estilo.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>
<body>

<div id="container">

<div id="header"></div>



<div id="horizontalnav">

<div class="navlinks">

<ul>
<li><a href="http://www.youtube.com/watch?v=GBEoXPLmcOo&feature=fvst">artistas</a></li>
<li><a href="http://www.youtube.com/watch?v=qYeGjkL_bA4&feature=related">deportistass</a></li>
<li><a href="http://www.youtube.com/watch?v=0rTd5JrIbT8">perritos</a></li>
<li><a href="http://www.youtube.com/watch?v=ECkPVTZlfP8&feature=related">caninos</a></li>
</ul>

</div>

</div>


<div id="leftnav">
<form action="http://www.google.es/search" method="get">
<p><label for="q"><strong>Search:</strong></label></p>
<input type="text" id="q" name="q" size="10" maxlength="50" value=""/>
<input type="submit" name="Buscar"/>
<br></br>
<p><label for="ficheros"><strong>Upload:</strong></label></p>
<input type="file" id="fichero" name="ficheros" size="2" maxlength="20" value=""/></form>

</div>

<div id="rightnav">
<label for="nombre"><strong>Nombre: </strong></label>
<input type="text" name="nombre" id="nombre" size="10" maxlength="20" value=""/><br></br>
<label for="contraseña"><strong>Contraseña: </strong></label>
<input type="password" name="contraseña" id="contraseña" size="10" maxlength="20" value=""/><br></br>

</div>

<div id="body"><align="center">
<p align="center">WE LOVE DOGS!</p>
<p><img src="Imagenes/perro.jpeg" alt="perro" width="576" height="316" align="center" longdesc="Imagenes/perro.jpeg" /></p>
</div>

<div id="footer">@copyright 2010</div>

</body>
</html>

y este es el CSS


@charset "utf-8";
/* CSS Document */

#container {

width: 900px;

}

#header {

width: 900px;
height: 100px;
position: relative;
background-image: url(imagenes/headerbg.jpg);
border-bottom: 2px solid #000000;

}

#header a {

color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;

}

#header a:visited {

color: #000000;
text-decoration: underline;
font-weight: bold;

}

#header a:hover {

color: #cc0000;
text-decoration: none;
font-weight: bold;

}


.HorizLinks {

position: absolute; top: 77px; left: 180px;

}

.HorizLinks ul {

margin: 0px;

}

.HorizLinks li {

margin: 0px 15px 0px 0px;
list-style-type: none;
display: inline;

}


#horizontalnav {

width: 900px;
height: 30px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;

}

.navlinks {

position: absolute; top: 4px; left: 140px;

}

.navlinks ul {

margin: auto;

}

.navlinks li {

margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;

}

.navlinks li a {

color: #000000;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: Verdana;

}

.navlinks li a:hover{

color: #ffffff;
background-image: url(images/BGhover.jpg);
/*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];*/
text-decoration: underline;


}


#header p {

color: #000000;
font-family: Arial;
font-weight: bold;

}




#leftnav {

float: left;
width: 140px;
height: 400px;
background-color: #F8AA3C;
border-right: 1px dashed #694717;

}


#rightnav {

float: right;
width: 140px;
height: 400px;
background-color: #F8AA3C;
border-left: 1px dashed #694717;

}

#body {

margin: auto;
width: 600px;
padding: 10px 0px 0px 10px;
background:#C3F

}

#body p {
font-weight: bold;
font-size: 16px;
}

#footer {

clear: both;
background-color: #D1C0A7;

}

Muchas gracias
  #2 (permalink)  
Antiguo 06/01/2011, 12:38
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 11 años, 10 meses
Puntos: 56
Respuesta: pasar este código de HTML a CSS

Hola.

Cuáles son los códigos embebidos que quisieras pasar a CSS? Yo al menos veo poco, o te refieres a las etiquetas <strong>, los parámetros width, height, etc. y ese tipo de cosas?
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #3 (permalink)  
Antiguo 06/01/2011, 12:40
 
Fecha de Ingreso: enero-2011
Mensajes: 5
Antigüedad: 5 años, 5 meses
Puntos: 0
Respuesta: pasar este código de HTML a CSS

tendria k aber especificado: son el align, width y height

gracias
  #4 (permalink)  
Antiguo 09/01/2011, 14:56
 
Fecha de Ingreso: enero-2011
Mensajes: 5
Antigüedad: 5 años, 5 meses
Puntos: 0
Respuesta: pasar este código de HTML a CSS

Olvidad lo de arriba, ¿conocéis alternativas para estos códigos?

.HorizLinks {

position: absolute; top: 77px; left: 180px;

}

position: absolute; top: 4px; left: 140px;
  #5 (permalink)  
Antiguo 10/01/2011, 06:55
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 11 años, 10 meses
Puntos: 56
Respuesta: pasar este código de HTML a CSS

Holas, la verdad, de nuevo depende de qué es lo que quieres lograr, porque esos códigos significan que tienes un elemento fijado en cierta posición de la pantalla, sin posibilidad de moverlo. Si quieres que quede fijo con respecto a un elemento de la página, en vez del BODY, debieras poner position:relative... Bueno, eso suponiendo que eso es lo que quieres...

Saludos!
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #6 (permalink)  
Antiguo 11/06/2016, 08:43
 
Fecha de Ingreso: diciembre-2011
Mensajes: 1
Antigüedad: 4 años, 6 meses
Puntos: 0
Respuesta: pasar este código de HTML a CSS

Hola
yo tengo un problema parecido.
Tengo un menú que no es del tema (Olsen LIgt), sino que lo he creado yo en HTML
y lo he metido en el archivo header.php de un tema hijo de mi tema (Olsen Ligt Hija)
Ahora quiero hacer el menú estático, que no desaparezca cuando la gente navega hacia abajo o arriba de la página y todo lo que encuentro tiene que ver con los css y style.php.

Me gustaría saber:
Cómo paso ese código a css, a style.php o si se puede hacer el menú estático desde donde yo lo tengo, header.php

Gracias y saludos, María.
  #7 (permalink)  
Antiguo 13/06/2016, 10:29
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.532
Antigüedad: 13 años, 3 meses
Puntos: 1722
Respuesta: pasar este código de HTML a CSS

Hola María. Trata de poner tu tema como uno nuevo, ya que no tiene que ver el tema con el anterior.

Respondiendo tu pregunta trata de poner position fixed a tu menú y ya:

Código CSS:
Ver original
  1. #Menu {
  2.     position:fixed;}

Ojo con esta parte:

Cita:
Cómo paso ese código a css, a style.php o si se puede hacer el menú estático desde donde yo lo tengo, header.php
Todo eso no tiene sentido, ya que no tenemos ni idea que tienes en cada archivo. Simplemente pon el css en la hoja de estilos.

Como que tienes que estudirar que son las hojas de estilos y cómo se usan. Busca un tutorial básico. https://www.google.com.mx/search?q=d...is+estilos+css



La zona horaria es GMT -6. Ahora son las 19:29.